pied de page et fond
This commit is contained in:
parent
d83637571f
commit
5b747a721f
154
CSS/styles.css
154
CSS/styles.css
@ -1,7 +1,6 @@
|
||||
body{
|
||||
margin: 0;
|
||||
background: linear-gradient(180deg,rgba(83, 0, 0, 0.7),#ff0000 50%);
|
||||
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
||||
@ -16,8 +15,8 @@ header{
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 25px ;
|
||||
}
|
||||
|
||||
nav{
|
||||
font-size: 20px ;
|
||||
top: 0;
|
||||
@ -52,10 +51,7 @@ main{
|
||||
}
|
||||
|
||||
#background-video{
|
||||
|
||||
filter: opacity(50%);
|
||||
mix-blend-mode: screen;
|
||||
|
||||
filter: blur(2px);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
@ -63,30 +59,59 @@ main{
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
#cas{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#btn_up{
|
||||
background-color: white;
|
||||
border-radius: 50px;
|
||||
position: fixed;
|
||||
right: 2vw;
|
||||
bottom: 2vh;
|
||||
height: 4vh;
|
||||
width: 4vh;
|
||||
|
||||
transition: transform ease 1s;
|
||||
}
|
||||
|
||||
#btn_up:hover{
|
||||
transition: transform ease 0.4s;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
nav li{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page{
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
}
|
||||
.page p{margin-right: 10vh;
|
||||
transition: transform linear 0.2s;
|
||||
}
|
||||
|
||||
.page p:hover{
|
||||
color: gold;
|
||||
transform: scale(1.2,1.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
main p{
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
.img_gauche_txt_droite{
|
||||
@ -110,7 +135,13 @@ nav li{
|
||||
box-shadow: -10px -15px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.img_gauche_txt_droite img{border-radius: 10px;}
|
||||
.img_gauche_txt_droite img{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.img_gauche_txt_droite img:not(:hover){
|
||||
filter: saturate(0.2);
|
||||
transform: scale(0.8,0.8);
|
||||
@ -135,36 +166,73 @@ nav li{
|
||||
width: 50%;
|
||||
box-shadow: 15px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.img_droite_txt_gauche p:hover + img{
|
||||
padding: 10%;
|
||||
width: 10%
|
||||
}
|
||||
.img_droite_txt_gauche p:hover{
|
||||
box-shadow: -15px -10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.img_droite_txt_gauche img{border-radius: 10px;transform: transform linear 1s;}
|
||||
.img_droite_txt_gauche img{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
height: 25%;
|
||||
width: 25%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.img_droite_txt_gauche img:not(:hover) {
|
||||
transform: transform linear 1s;
|
||||
filter: saturate(0.2);
|
||||
transform: scale(0.9,0.9);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.page{
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
}
|
||||
.page p{margin-right: 10vh;
|
||||
transition: transform linear 0.2s;
|
||||
.img_bas_txt_haut{
|
||||
display: inline-flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
.page p:hover{
|
||||
color: gold;
|
||||
transform: scale(1.2,1.2);
|
||||
|
||||
.img_bas_txt_haut p{
|
||||
background-color: rgba(250,250,250,0.2);
|
||||
border-radius: 15px;
|
||||
padding: 1%;
|
||||
width: 80%;
|
||||
box-shadow: 15px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.img_bas_txt_haut p:hover{
|
||||
box-shadow: -15px -10px rgba(0,0,0,0.5);
|
||||
}
|
||||
.img_bas_txt_haut img{
|
||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||
height: 35%;
|
||||
width: 35%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.img_bas_txt_haut img:not(:hover) {
|
||||
filter: saturate(0.2);
|
||||
transform: scale(0.9,0.9);
|
||||
}
|
||||
|
||||
.vide{
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -175,20 +243,18 @@ footer{
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-around;
|
||||
background-color: #581845;
|
||||
|
||||
|
||||
background-color: #00010c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
footer #reseaux li{
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
footer #reseaux p{
|
||||
color: black;
|
||||
|
||||
padding-left: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
@ -211,7 +277,13 @@ footer #autres{
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
footer #autres p{
|
||||
color: black;
|
||||
font-size: 30px;
|
||||
footer #autres a{
|
||||
color:white ;
|
||||
list-style-type: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
footer #coordonne p{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
Binary file not shown.
1
img/icone/envelope.svg
Normal file
1
img/icone/envelope.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="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
|
||||
|
After Width: | Height: | Size: 540 B |
1
img/icone/location.svg
Normal file
1
img/icone/location.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 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="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
|
||||
|
After Width: | Height: | Size: 449 B |
32
index.html
32
index.html
@ -32,8 +32,9 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="rectangle"></div>
|
||||
<video id="background-video" autoplay loop muted>
|
||||
<source src="img/Untitledpoker.mp4" type="video/mp4">
|
||||
<source src="img/fond-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
|
||||
@ -50,6 +51,17 @@
|
||||
|
||||
</div>
|
||||
<div class="img_droite_txt_gauche">
|
||||
|
||||
<p>
|
||||
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
|
||||
</p>
|
||||
<img id="cas" src="img/casion_background.jpeg">
|
||||
</div>
|
||||
<div class="vide"></div>
|
||||
<div class="img_bas_txt_haut">
|
||||
<img id="cas" src="img/casion_background.jpeg">
|
||||
<p>
|
||||
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@ -77,11 +89,23 @@
|
||||
|
||||
<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>
|
||||
<li><a href="" target="_blank">Mentions légales</a></li>
|
||||
<li><a href="" target="_blank">Conditions générales d'utilisation</a></li>
|
||||
<li><a href="credits.txt" target="_blank">Crédits</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="#"><img id="icone" src="img/icon.png" alt="icone du site"></a>
|
||||
|
||||
<div id="coordonne">
|
||||
|
||||
<img src="img/icone/envelope.svg" alt="icone d'enveloppe">
|
||||
<p>Casinoducoeur@gmail.fr </p>
|
||||
<img src="img/icone/location.svg">
|
||||
<p id="adresse"> 200 Rue du kwanga</p>
|
||||
|
||||
</div>
|
||||
|
||||
<a href="#"><img id="icone" src="img/roulette_coeur.png" alt="icone du site"></a>
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user