minor changes

Decibels-UTC · Jan 27, 2024 · 43ea889 · 43ea889
1 parent bb11e97
commit 43ea889
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 38 deletions.
diff --git a/src/components/Desc.jsx b/src/components/Desc.jsx
@@ -39,26 +39,24 @@ function Desc() {
 
           <div className={"zone-texte"}>
 
-              <div className={"first-text "}><Container width={300} height={200}
-                                                        text={"Décibels c'est 12 évènnements en A23\n" +
-                                                            "" +
-                                                            ""}/></div>
+              <div className={"first-text "}>
+                  <Container className={"first-container-desc"} width={300} height={200}text={"Décibels c'est 12 évènnements en A23\n" + "" + ""}/>
+              </div>
+                  <motion.img className={"onde3-desc1"} src={onde3}></motion.img>
 
-              <div className={"second-text "}><Container width={300} height={200}
-                                                         text={"Une équipe de XX personnes " + "\n" +
-                                                             ""}/></div>
+              <div className={"second-text "}>
+                  <Container className={"second-container-desc"} width={300} height={200} text={"Une équipe de XX personnes " + "\n" +""}/>
+              </div>
+                  <motion.img className={"onde3-desc2"} src={onde3}></motion.img>
 
-              <div className={"third-text "}><Container width={300} height={200} text={"Lorem ipusm"}/></div>
+              <div className={"third-text "}>
+                  <Container className={"third-container-desc"} width={300} height={200} text={"Lorem ipusm"}/>
+              </div>
+                  <motion.img className={"onde3-desc3"} src={onde3}></motion.img>
 
           </div>
           <div className={"place-holder-img"}>
 
-              <motion.img className={"onde3-desc1"} src={onde3}>
-              </motion.img>
-              <motion.img className={"onde3-desc2"} src={onde3}>
-              </motion.img>
-              <motion.img className={"onde3-desc3"} src={onde3}>
-              </motion.img>
 
               <figure>
                   <motion.img src={imgdBs} className={"img-placeholder"}

diff --git a/src/components/Lights.jsx b/src/components/Lights.jsx
@@ -12,8 +12,9 @@ function Lights(){
         <>
             <h1 className={"title title-lights"} >Lumières</h1>
             <div className={"text-middle text-middle-light"} >
-                <Container height={600} width={600} text={"Décibels c'est aussi de la lumière : " + "\n" +
-                    ""}/>
+                <motion.img src={onde4} className={"light-onde4"}></motion.img>
+                <Container height={600} width={600} text={"Décibels c'est aussi de la lumière : " + "\n" + ""}/>
+
             </div>
 
             <div>
@@ -33,25 +34,25 @@ function Lights(){
                 ></motion.img>
             </div>
 
-            <motion.div className={"vid2"}
-            initial={{x: -200, opacity: 0.5, scale: 1, rotate: 0}}
+                <motion.div className={"vid2"}
+                            initial={{x: -200, opacity: 0.5, scale: 1, rotate: 0}}
                             whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}}
                             viewport={{once: true}}
                             transition={{duration: 3}}
-            >
-                <VideoComponent  src={vid2} width={"50%"} height={"auto"}/>
+                >
+
+
+                <div>
+                   <VideoComponent  src={vid2} width={"50%"} height={"auto"}/>
+                </div>
 
             </motion.div>
 
             <div>
                 <img className={"item item3-light"} src={item3}/>
             </div>
 
-            <div>
-                <motion.img src={onde4} className={"light-onde4"}>
 
-                </motion.img>
-            </div>
 
 
         </>

diff --git a/src/style/Desc.css b/src/style/Desc.css
@@ -39,6 +39,9 @@ figcaption {
     position: relative;
     padding: 2%;
 }
+.zone-texte > div > Container {
+    z-index: 2;
+}
 
 .first-text {
     position: relative;
@@ -77,27 +80,27 @@ position:relative;
 }
 
 .onde3-desc1{
-    position: absolute;
+    position: relative;
     z-index: 0;
     width: 30%;
-    left: -21em;
-    top: -52%;
-
+    margin-top: -20%;
+    margin-left: 22%;
 }
 .onde3-desc2{
-    position: absolute;
+
+    position: relative;
     z-index: 0;
     width: 30%;
-    left: -31em;
-    top: 0%;
+    margin-top: -20%;
+    margin-left: 12%;
 
 }
 .onde3-desc3{
-    position: absolute;
+    position: relative;
     z-index: 0;
     width: 30%;
-    left: -21em;
-    top: 50%;
+    margin-top: -20%;
+    margin-left: 22%;
 }
 
 .onde5-desc{
@@ -108,6 +111,11 @@ position:relative;
     left: 7%;
 }
 
+
+.first-container-desc{
+    z-index: 2;
+}
+
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 
     .zone-texte{

diff --git a/src/style/Lights.css b/src/style/Lights.css
@@ -36,8 +36,7 @@
 }
 
 .light-onde4{
-    position: absolute;
-    right: 25%;
-    width: 40%;
-    bottom: -310%;
+    position: relative;
+    z-index: 0;
+
 }