images
This commit is contained in:
parent
5b747a721f
commit
5079de1c85
121
CSS/styles.css
121
CSS/styles.css
@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
20
index.html
20
index.html
@ -39,8 +39,8 @@
|
||||
|
||||
<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
|
||||
|
||||
<div class="img_gauche_txt_droite">
|
||||
<img id="cas" src="img/casion_background.jpeg">
|
||||
<div id="img_gauche_txt_droite">
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
@ -48,21 +48,25 @@
|
||||
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>
|
||||
|
||||
<img class="img_main" src="img/casion_background.jpeg">
|
||||
</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
|
||||
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>
|
||||
<img id="cas" src="img/casion_background.jpeg">
|
||||
|
||||
<img class="img_main" src="img/casion_background.jpeg">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="vide"></div>
|
||||
<div class="img_bas_txt_haut">
|
||||
<img id="cas" src="img/casion_background.jpeg">
|
||||
<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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user