ajout
This commit is contained in:
parent
5d42d1b2d7
commit
f19575c788
108
CSS/styles.css
108
CSS/styles.css
@ -3,18 +3,37 @@ body{
|
|||||||
background:white ;
|
background:white ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.txt_rouge{color: red;font-weight: bold;}
|
||||||
|
.txt_jaune{color: gold;font-weight: bold;}
|
||||||
|
|
||||||
ul{
|
ul{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vide{
|
|
||||||
margin-top: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
header{
|
header{
|
||||||
margin-bottom: 20vh;
|
margin-bottom: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10vh;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h3{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
@ -36,10 +55,7 @@ nav{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav:not:hover{
|
|
||||||
filter: opacity(50%);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -55,7 +71,7 @@ main{
|
|||||||
}
|
}
|
||||||
|
|
||||||
#background-video{
|
#background-video{
|
||||||
filter: blur(2px);
|
filter: blur(3px);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@ -92,7 +108,7 @@ nav li{
|
|||||||
.page{
|
.page{
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: rgb(254, 254, 254);
|
color: rgb(255,255,255);
|
||||||
|
|
||||||
}
|
}
|
||||||
.page p{
|
.page p{
|
||||||
@ -113,7 +129,7 @@ nav li{
|
|||||||
|
|
||||||
#page_courante p{
|
#page_courante p{
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
color: rgb(0, 255, 26);
|
color: rgb(0,255,25);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -134,7 +150,7 @@ main p{
|
|||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10vh;
|
padding-bottom: 20vh;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -142,17 +158,11 @@ main p{
|
|||||||
|
|
||||||
#img_gauche_txt_droite p{
|
#img_gauche_txt_droite p{
|
||||||
background-color: rgba(250,250,250,0.2);
|
background-color: rgba(250,250,250,0.2);
|
||||||
border-radius: 20px;
|
backdrop-filter: blur(10px);
|
||||||
box-shadow: -10px -15px rgba(0,0,0,0.5);
|
border-radius: 30px;
|
||||||
width: 50%;
|
width: 40%;
|
||||||
padding: 1%;
|
padding: 1%;
|
||||||
}
|
}
|
||||||
#img_gauche_txt_droite p:hover{
|
|
||||||
box-shadow: 15px 10px rgba(0,0,0,0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#img_droite_txt_gauche{
|
#img_droite_txt_gauche{
|
||||||
@ -160,58 +170,55 @@ main p{
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10vh;
|
padding-bottom: 20vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#img_droite_txt_gauche p{
|
#img_droite_txt_gauche p{
|
||||||
background-color: rgba(250,250,62,1);
|
background-color: rgba(250,250,250,0.2);
|
||||||
border-radius: 15px;
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 30px;
|
||||||
padding: 1%;
|
padding: 1%;
|
||||||
width: 50%;
|
width: 40%;
|
||||||
box-shadow: -15px -10px rgba(0,0,0,0.5);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#img_droite_txt_gauche p:hover{
|
|
||||||
box-shadow: 15px 10px rgba(0,0,0,0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.img_main{
|
.img_main{
|
||||||
height: 20%;
|
backdrop-filter: blur(10px);
|
||||||
width: 20%;
|
height: 20rem;
|
||||||
border-radius: 10px;
|
width: 25rem;
|
||||||
|
border-radius: 15px;
|
||||||
transition: transform ease 0.4s;
|
transition: transform ease 0.4s;
|
||||||
filter: saturate(0.2);
|
filter: saturate(0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#hover_img_1:hover + .img_main,#hover_img_2:hover + .img_main,.img_main:hover{
|
.img_txt:hover .img_main{
|
||||||
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
|
||||||
transform: scale(1.3,1.3);
|
transform: scale(1.2,1.2);
|
||||||
transition: transform ease 0.8s;
|
transition: transform ease 0.8s;
|
||||||
filter: saturate(1);
|
filter: saturate(1);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#hover_img_1{
|
#img_gauche_txt_droite:not(:hover) p{
|
||||||
top: 15vh;
|
background-color: rgba(150,150,150,0.4);
|
||||||
position: absolute;
|
}
|
||||||
height: 35vh;
|
|
||||||
width: 100vw;
|
#img_droite_txt_gauche:not(:hover) p{
|
||||||
|
background-color: rgba(150,150,150,0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#hover_img_2{
|
|
||||||
top: 50vh;
|
#fond_2{
|
||||||
position: absolute;
|
z-index: -1;
|
||||||
height: 35vh;
|
backdrop-filter: blur(10px);
|
||||||
width: 100vw;
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
color: white;
|
||||||
|
padding-bottom:20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -232,6 +239,7 @@ main p{
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
footer{
|
footer{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
49
index.html
49
index.html
@ -22,7 +22,7 @@
|
|||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
<li> <a href= "index.html" class="page" id="page_courante"><p>Accueil</p> </a></li>
|
<li> <a href= "#" class="page" id="page_courante"><p>Accueil</p> </a></li>
|
||||||
<li> <a href= "HTML/page_2.html" class="page" ><p>Nos jeux</p> </a></li>
|
<li> <a href= "HTML/page_2.html" class="page" ><p>Nos jeux</p> </a></li>
|
||||||
<li> <a href= "HTML/page_3.html" class="page"><p>Nos partenaires</p> </a> </li>
|
<li> <a href= "HTML/page_3.html" class="page"><p>Nos partenaires</p> </a> </li>
|
||||||
<li> <a href= "HTML/page_4.html" class="page"><p>A propos de nous </p> </a></li>
|
<li> <a href= "HTML/page_4.html" class="page"><p>A propos de nous </p> </a></li>
|
||||||
@ -32,49 +32,46 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div id="rectangle"></div>
|
<h1><span class="txt_rouge">Casino du Coeur</span></h1>
|
||||||
<video id="background-video" autoplay loop muted>
|
|
||||||
<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>
|
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
|
||||||
|
|
||||||
<div id="img_gauche_txt_droite">
|
|
||||||
|
<h2>
|
||||||
|
Qui sommes-nous ?
|
||||||
|
</h2>
|
||||||
|
<div id="img_gauche_txt_droite" class="img_txt">
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
ipsum <span class="txt_rouge">dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||||
</p>
|
</p>
|
||||||
<div id="hover_img_1"> </div>
|
|
||||||
<img class="img_main" src="img/casion_background.jpeg">
|
<img class="img_main" src="img/casion_background.jpeg">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="img_droite_txt_gauche">
|
<h2>
|
||||||
|
Nos valeurs
|
||||||
|
</h2>
|
||||||
|
<div id="img_droite_txt_gauche" class="img_txt">
|
||||||
<p>
|
<p>
|
||||||
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
ipsum dolor sit amet, <span class="txt_rouge">consectetur</span> adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
<div id="hover_img_2"> </div>
|
|
||||||
<img class="img_main" src="img/casion_background.jpeg">
|
<img class="img_main" src="img/casion_background.jpeg">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="vide"></div>
|
|
||||||
<div id="img_bas_txt_haut">
|
|
||||||
<img class="img_main" src="img/casion_background.jpeg">
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="fond_2">
|
||||||
|
<h3>
|
||||||
|
Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> !
|
||||||
|
</h3>
|
||||||
|
<img class="img_main" src="img/casion_background.jpeg">
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user