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

108
CSS/styles.css
View File

@ -3,18 +3,37 @@ body{
background:white ;
}
.txt_rouge{color: red;font-weight: bold;}
.txt_jaune{color: gold;font-weight: bold;}
ul{
margin: 0;
padding: 0;
}
.vide{
margin-top: 10vh;
}
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 {
@ -36,10 +55,7 @@ nav{
}
nav:not:hover{
filter: opacity(50%);
}
@ -55,7 +71,7 @@ main{
}
#background-video{
filter: blur(2px);
filter: blur(3px);
height: 100vh;
width: 100vw;
object-fit: cover;
@ -92,7 +108,7 @@ nav li{
.page{
list-style-type: none;
text-decoration: none;
color: rgb(254, 254, 254);
color: rgb(255,255,255);
}
.page p{
@ -113,7 +129,7 @@ nav li{
#page_courante p{
font-size: 1.4em;
color: rgb(0, 255, 26);
color: rgb(0,255,25);
}
@ -134,7 +150,7 @@ main p{
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
margin-bottom: 10vh;
padding-bottom: 20vh;
}
@ -142,17 +158,11 @@ main p{
#img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
border-radius: 20px;
box-shadow: -10px -15px rgba(0,0,0,0.5);
width: 50%;
backdrop-filter: blur(10px);
border-radius: 30px;
width: 40%;
padding: 1%;
}
#img_gauche_txt_droite p:hover{
box-shadow: 15px 10px rgba(0,0,0,0.5);
}
#img_droite_txt_gauche{
@ -160,58 +170,55 @@ main p{
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-bottom: 10vh;
padding-bottom: 20vh;
}
#img_droite_txt_gauche p{
background-color: rgba(250,250,62,1);
border-radius: 15px;
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 1%;
width: 50%;
box-shadow: -15px -10px rgba(0,0,0,0.5);
width: 40%;
}
#img_droite_txt_gauche p:hover{
box-shadow: 15px 10px rgba(0,0,0,0.5);
}
.img_main{
height: 20%;
width: 20%;
border-radius: 10px;
backdrop-filter: blur(10px);
height: 20rem;
width: 25rem;
border-radius: 15px;
transition: transform ease 0.4s;
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);
transform: scale(1.3,1.3);
transform: scale(1.2,1.2);
transition: transform ease 0.8s;
filter: saturate(1);
}
#hover_img_1{
top: 15vh;
position: absolute;
height: 35vh;
width: 100vw;
#img_gauche_txt_droite:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
#img_droite_txt_gauche:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
#hover_img_2{
top: 50vh;
position: absolute;
height: 35vh;
width: 100vw;
#fond_2{
z-index: -1;
backdrop-filter: blur(10px);
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{
display: flex;

49
index.html
View File

@ -22,7 +22,7 @@
<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_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>
@ -32,49 +32,46 @@
</header>
<main>
<div id="rectangle"></div>
<video id="background-video" autoplay loop muted>
<source src="img/fond-video.mp4" type="video/mp4">
</video>
<h1><span class="txt_rouge">Casino du Coeur</span></h1>
<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>
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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div id="hover_img_1"> </div>
<img class="img_main" src="img/casion_background.jpeg">
</div>
<div id="img_droite_txt_gauche">
<h2>
Nos valeurs
</h2>
<div id="img_droite_txt_gauche" class="img_txt">
<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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<div id="hover_img_2"> </div>
<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 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>
<footer>