diff --git a/CSS/styles.css b/CSS/styles.css index ad8c52c..eb0d1b2 100644 --- a/CSS/styles.css +++ b/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); + +} + + + + + diff --git a/index.html b/index.html index c7bd3db..801d7df 100644 --- a/index.html +++ b/index.html @@ -39,8 +39,8 @@ icone de fleche -
- +
+

@@ -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

- +
-
- -

+

+ +

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

- + + + + +
-
- +
+

ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,