navigation entre page,pied de page
This commit is contained in:
parent
a25b1e7c58
commit
f61fa3e16c
@ -1,17 +1,23 @@
|
||||
|
||||
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
background: linear-gradient(180deg,rgba(63,94,251,0.7),rgba(252,70,107,0.7) 100%);
|
||||
}
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header{
|
||||
margin-bottom: 20vh;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 25px ;
|
||||
}
|
||||
nav{
|
||||
font-size: 20px ;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
@ -19,6 +25,7 @@ nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: row-reverse;
|
||||
background: linear-gradient(45deg,orange 35%,darkred);
|
||||
width: 100%;
|
||||
|
||||
@ -52,24 +59,16 @@ main{
|
||||
|
||||
#btn_up{
|
||||
position: fixed;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
right: 2vw;
|
||||
bottom: 2vh;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
}
|
||||
|
||||
li{
|
||||
nav li{
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
p{
|
||||
font-family: unset;
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.img_gauche_txt_droite{
|
||||
@ -102,7 +101,7 @@ p{
|
||||
|
||||
|
||||
.img_droite_txt_gauche{
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
@ -122,31 +121,30 @@ p{
|
||||
.img_droite_txt_gauche p:hover{
|
||||
box-shadow: -15px -10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.img_droite_txt_gauche img{border-radius: 10px;}
|
||||
.img_droite_txt_gauche img{border-radius: 10px;transform: transform linear 1s;}
|
||||
.img_droite_txt_gauche img:not(:hover) {
|
||||
transform: transform linear 1s;
|
||||
filter: saturate(0.2);
|
||||
transform: scale(0.8,0.8);
|
||||
transform: scale(0.9,0.9);
|
||||
}
|
||||
|
||||
|
||||
|
||||
#pied_de_page{
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.page{
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
margin-right: 10vh;
|
||||
font-size: 2vh;
|
||||
|
||||
}
|
||||
.page p{margin-right: 10vh;
|
||||
transition: transform linear 0.2s;
|
||||
}
|
||||
|
||||
.page:hover{
|
||||
transform: scale(1.2,1.2);
|
||||
.page p:hover{
|
||||
color: gold;
|
||||
transform: scale(1.2,1.2);
|
||||
}
|
||||
|
||||
|
||||
@ -154,6 +152,48 @@ p{
|
||||
|
||||
|
||||
footer{
|
||||
background-color: orange;
|
||||
padding-bottom: 15vh;
|
||||
display: flex;
|
||||
padding: 2%;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
background-color: grey;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer #reseaux li{
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
footer #reseaux p{
|
||||
color: black;
|
||||
padding-left: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
footer #reseaux li img{
|
||||
width: 3vw;
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
footer #reseaux li img:not(:hover){
|
||||
transition: transform linear 0.5s;
|
||||
opacity: 50%;
|
||||
}
|
||||
footer #reseaux li img:hover{
|
||||
transition: transform linear 0.2s;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
footer #autres{
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
footer #autres p{
|
||||
color: black;
|
||||
font-size: 30px;
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title> Casino du coeur </title>
|
||||
<meta charset="utf-8">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
||||
|
||||
<nav>
|
||||
|
||||
|
||||
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
|
||||
<li> <a href= "#" class="page"><p>Page 2</p> </a></li>
|
||||
<li> <a href= "page_3.html" class="page"><p>Page 3</p> </a> </li>
|
||||
<li> <a href= "page_4.html" class="page"><p>Page 4</p> </a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</body>
|
||||
@ -14,14 +14,14 @@
|
||||
<nav>
|
||||
|
||||
|
||||
<a href=""><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> <a href= "../index.html" class="page">Page 1 </a></li>
|
||||
<li> <a href= "page_2.html" class="page">Page 2 </a></li>
|
||||
<li> <a href= "#" class="page">Page 3 </a> </li>
|
||||
<li> <a href= "page_4.html" class="page">Page 4 </a></li>
|
||||
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
|
||||
<li> <a href= "page_2.html" class="page"><p>Page 2</p> </a></li>
|
||||
<li> <a href= "#" class="page"><p>Page 3</p> </a> </li>
|
||||
<li> <a href= "page_4.html" class="page"><p>Page 4</p> </a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title> Casino du coeur </title>
|
||||
<meta charset="utf-8">
|
||||
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
||||
|
||||
<nav>
|
||||
|
||||
|
||||
<a href="#"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> <a href= "../" class="page"><p>Page 1</p> </a></li>
|
||||
<li> <a href= "page_2.html" class="page"><p>Page 2</p> </a></li>
|
||||
<li> <a href= "page_3.html" class="page"><p>Page 3</p> </a> </li>
|
||||
<li> <a href= "#" class="page"><p>Page 4</p> </a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</body>
|
||||
@ -0,0 +1 @@
|
||||
icone : https://icones8.fr/ https://fontawesome.com
|
||||
1
img/icone/instagram.svg
Normal file
1
img/icone/instagram.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
1
img/icone/tiktok.svg
Normal file
1
img/icone/tiktok.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.2 KiB |
1
img/icone/twitter.svg
Normal file
1
img/icone/twitter.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 437 B |
34
index.html
34
index.html
@ -5,6 +5,7 @@
|
||||
<head>
|
||||
<title> Casino du coeur </title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
|
||||
<meta name="keywords" content="casino">
|
||||
<link rel = "icon" type = "image/png" href = "img/icon.png">
|
||||
@ -17,14 +18,14 @@
|
||||
<nav>
|
||||
|
||||
|
||||
<a href=""><img id="icone" src="img/icon.png" alt="icone du site"></a>
|
||||
<a href="#"><img id="icone" src="img/icon.png" alt="icone du site"></a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li> <a href= "#" class="page">Page 1 </a></li>
|
||||
<li> <a href= "HTML/page_2.html" class="page">Page 2 </a></li>
|
||||
<li> <a href= "HTML/page_3.html" class="page">Page 3 </a> </li>
|
||||
<li> <a href= "HTML/page_4.html" class="page">Page 4 </a></li>
|
||||
<li> <a href= "#" class="page"><p>Page 1</p> </a></li>
|
||||
<li> <a href= "HTML/page_2.html" class="page"><p>Page 2</p> </a></li>
|
||||
<li> <a href= "HTML/page_3.html" class="page"><p>Page 3</p> </a> </li>
|
||||
<li> <a href= "HTML/page_4.html" class="page"><p>Page 4</p> </a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
@ -58,10 +59,25 @@
|
||||
|
||||
<footer>
|
||||
|
||||
<p id="pied_de_page">
|
||||
Pied de<br>
|
||||
Page
|
||||
</p>
|
||||
|
||||
<div id="reseaux">
|
||||
|
||||
<ul>
|
||||
|
||||
<li><a href="https://twitter.com" target="_blank"> <img src="img/icone/twitter.svg"></a></li>
|
||||
<li><a href="https://instagram.com" target="_blank"> <img src="img/icone/instagram.svg"></a></li>
|
||||
<li><a href="https://tiktok.com" target="_blank"> <img src="img/icone/tiktok.svg"></a></li>
|
||||
</ul>
|
||||
<p> Suivez nos actuaités !</p>
|
||||
</div>
|
||||
|
||||
<div id="autres">
|
||||
<ul>
|
||||
<li><a href="" target="_blank"><p>Mentions légales</p></a></li>
|
||||
<li><a href="" target="_blank"><p>Conditions générales d'utilisation</p></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#"><img id="icone" src="img/icon.png" alt="icone du site"></a>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user