From 5079de1c85b9924ed2d37fe49060622cd692e6f2 Mon Sep 17 00:00:00 2001
From: izanic <izanic@localhost>
Date: Wed, 3 Jan 2024 15:17:36 +0100
Subject: [PATCH] images

---
 CSS/styles.css | 121 ++++++++++++++++++++-----------------------------
 index.html     |  22 +++++----
 2 files changed, 61 insertions(+), 82 deletions(-)

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 @@
 
 			<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">
-				
-				<p>
+			<div id="img_droite_txt_gauche">
+
+								<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,