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

images

Browse Source
This commit is contained in:
Hugo IZANIC
2024-01-03 15:17:36 +01:00
parent 5b747a721f
commit 5079de1c85
2 changed files with 61 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
CSS/styles.css
View File

@@ -9,6 +9,10 @@ ul{
padding: 0;
}
.vide{
margin-top: 10vh;
}
header{
margin-bottom: 20vh;
}
@@ -114,111 +118,82 @@ main p{
}
.img_gauche_txt_droite{
#img_gauche_txt_droite{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 10vh;
}
.img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
border-radius: 15px;
box-shadow: 15px 10px rgba(0,0,0,0.5);
width: 50%;
padding: 1%;
}
.img_gauche_txt_droite p:hover{
box-shadow: -10px -15px rgba(0,0,0,0.5);
}
.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);
}
.img_droite_txt_gauche{
display: inline-flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
margin-bottom: 10vh;
}
.img_droite_txt_gauche p{
#img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
border-radius: 15px;
padding: 1%;
box-shadow: -10px -15px rgba(0,0,0,0.5);
width: 50%;
box-shadow: 15px 10px rgba(0,0,0,0.5);
padding: 1%;
}
.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{
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) {
filter: saturate(0.2);
transform: scale(0.9,0.9);
#img_gauche_txt_droite p:hover{
box-shadow: 15px 10px rgba(0,0,0,0.5);
}
.img_bas_txt_haut{
#img_droite_txt_gauche{
display: inline-flex;
flex-direction: column-reverse;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-bottom: 10vh;
}
.img_bas_txt_haut p{
#img_droite_txt_gauche 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{
padding-right: 150px;
width: 50%;
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);
#img_droite_txt_gauche p:hover{
box-shadow: 15px 10px rgba(0,0,0,0.5);
}
.vide{
margin-top: 10vh;
.img_main{
height: 20%;
width: 20%;
border-radius: 10px;
transition: transform ease 0.4s;
filter: saturate(0.2);
}
#img_gauche_txt_droite p:hover + .img_main,#img_droite_txt_gauche p:hover + .img_main,.img_main:hover{
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
transform: scale(1.3,1.3);
transition: transform ease 0.8s;
filter: saturate(1);
}