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
Show Stats 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; padding: 0;
} }
.vide{
margin-top: 10vh;
}
header{ header{
margin-bottom: 20vh; margin-bottom: 20vh;
} }
@ -114,111 +118,82 @@ main p{
} }
.img_gauche_txt_droite{ #img_gauche_txt_droite{
display: flex; 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; flex-direction: row-reverse;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
margin-bottom: 10vh; margin-bottom: 10vh;
} }
.img_droite_txt_gauche p{ #img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2); background-color: rgba(250,250,250,0.2);
border-radius: 15px; border-radius: 15px;
padding: 1%; box-shadow: -10px -15px rgba(0,0,0,0.5);
width: 50%; width: 50%;
box-shadow: 15px 10px rgba(0,0,0,0.5); padding: 1%;
} }
.img_droite_txt_gauche p:hover + img{ #img_gauche_txt_droite p:hover{
padding: 10%; box-shadow: 15px 10px rgba(0,0,0,0.5);
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_bas_txt_haut{
#img_droite_txt_gauche{
display: inline-flex; display: inline-flex;
flex-direction: column-reverse; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
margin-bottom: 10vh; margin-bottom: 10vh;
} }
.img_bas_txt_haut p{
#img_droite_txt_gauche p{
background-color: rgba(250,250,250,0.2); background-color: rgba(250,250,250,0.2);
border-radius: 15px; border-radius: 15px;
padding: 1%; padding: 1%;
width: 80%; padding-right: 150px;
box-shadow: 15px 10px rgba(0,0,0,0.5); width: 50%;
}
.img_bas_txt_haut p:hover{
box-shadow: -15px -10px rgba(0,0,0,0.5); 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_droite_txt_gauche p:hover{
.img_bas_txt_haut img:not(:hover) { box-shadow: 15px 10px rgba(0,0,0,0.5);
filter: saturate(0.2);
transform: scale(0.9,0.9);
} }
.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);
}

22
index.html
View File

@ -39,8 +39,8 @@
<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 class="img_gauche_txt_droite"> <div id="img_gauche_txt_droite">
<img id="cas" src="img/casion_background.jpeg">
<p> <p>
@ -48,21 +48,25 @@
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>
<img class="img_main" src="img/casion_background.jpeg">
</div> </div>
<div class="img_droite_txt_gauche"> <div id="img_droite_txt_gauche">
<p> <p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ipsum dolor 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>
<img id="cas" src="img/casion_background.jpeg">
<img class="img_main" src="img/casion_background.jpeg">
</div> </div>
<div class="vide"></div> <div class="vide"></div>
<div class="img_bas_txt_haut"> <div id="img_bas_txt_haut">
<img id="cas" src="img/casion_background.jpeg"> <img class="img_main" src="img/casion_background.jpeg">
<p> <p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ipsum dolor 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,