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
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 ;
}
.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,12 +108,12 @@ nav li{
.page{
list-style-type: none;
text-decoration: none;
color: rgb(254, 254, 254);
color: rgb(255,255,255);
}
.page p{
margin-right: 10vh;
color: rgb(255, 0, 0);
color: rgb(255,0,0);
transition: color linear 0.7s;
}
@@ -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;