izanic/SAE_WEB_S1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ajout

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-15 10:57:06 +01:00
parent 5d42d1b2d7
commit f19575c788
2 changed files with 84 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
CSS/styles.css
View File

@ -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,12 +108,12 @@ 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{
margin-right: 10vh; margin-right: 10vh;
color: rgb(255, 0, 0); color: rgb(255,0,0);
transition: color linear 0.7s; transition: color linear 0.7s;
} }
@ -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;

51
index.html
View File

@ -22,59 +22,56 @@
<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>
</ul> </ul>
</nav> </nav>
</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>