update graphics

Decibels-UTC · Jan 28, 2024 · bcc1d2f · bcc1d2f
1 parent d48b6e2
commit bcc1d2f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 27 deletions.
diff --git a/src/components/Legals.jsx b/src/components/Legals.jsx
@@ -15,7 +15,14 @@ function Legals(){
                 }/>
             </div>
             <div className={"div-son-legals"}>
-                <img src={item2} className={"item-son-legals"}  />
+                <motion.img
+                initial={{opacity: 0, scale: 0.9}}
+                whileInView={{opacity: 1, scale: 1}}
+                viewport={{once: true}}
+                transition={{duration: 2}}
+                src={item2} className={"item-son-legals"} >
+
+                </motion.img>
             </div>
 
 

diff --git a/src/components/Lights.jsx b/src/components/Lights.jsx
@@ -13,7 +13,7 @@ function Lights(){
             <h1 className={"title title-lights"} >Lumières</h1>
             <div className={"text-middle text-middle-light"} >
                 <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" + ""}/>
+                <Container classname={"container-light"} height={300} width={400} text={"Décibels c'est aussi de la lumière : " + "\n" + ""}/>
 
             </div>
 

diff --git a/src/components/Son.jsx b/src/components/Son.jsx
@@ -15,25 +15,27 @@ function Son(){
         <div className="page-son">
             <h1 className={"title son-title"}>Son</h1>
             <div className={"text-middle"}>
-                <Container classname={"text-son"} height={600} width={600} text={"Décibels c'est de la technique du son " + "\n"+
-                    ""}/>
-            </div>
-            <motion.div
-                        initial={{x: 150, opacity: 0.2, scale: 1, rotate: 0}}
-                        whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 3}}
-            >
-                <img src={item2} className={"item son"}/>
-        </motion.div>
-        <motion.div className={"vid1"}
-            initial={{x: 50, opacity: 0.5, scale: 1, rotate: 0}}
+                <Container classname={"text-son"} height={300} width={400}
+                           text={"Décibels c'est de la technique du son " + "\n" +
+                               ""}/>
+                <motion.div className={"vid1"}
+                            initial={{x: 50, opacity: 0.5, scale: 1, rotate: 0}}
                             whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}}
                             viewport={{once: true}}
                             transition={{duration: 2}}
+                >
+                    <VideoComponent src={vid1} width={"38%"} height={"auto"}/>
+                </motion.div>
+            </div>
+            <motion.div
+                initial={{x: 150, opacity: 0.2, scale: 1, rotate: 0}}
+                whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}}
+                viewport={{once: true}}
+                transition={{duration: 3}}
             >
-                <VideoComponent  src={vid1} width={"38%"} height={"auto"}/>
-        </motion.div>
+                <img src={item2} className={"item son"}/>
+            </motion.div>
+
             <div>
                 <motion.img src={item1} className={"item item1-son"}
                             initial={{x: 150, opacity: 0.8, scale: 1, rotate: 90}}

diff --git a/src/pages/MentionLegals.jsx b/src/pages/MentionLegals.jsx
@@ -6,7 +6,12 @@ import decibels from "../ressources/decibels.png";
 
 function MentionLegals(){
     return(<>
-            <a href={"/"}><motion.img src={decibels} className={"logo-legals"}>
+            <a href={"/"}><motion.img
+                initial={{opacity: 0, scale: 0.7}}
+                whileInView={{opacity: 1, scale: 1}}
+                viewport={{once: true}}
+                transition={{duration: 1.5}}
+                src={decibels} className={"logo-legals"}>
             </motion.img></a>
 
             <Legals/>

diff --git a/src/style/Lights.css b/src/style/Lights.css
@@ -38,5 +38,9 @@
 .light-onde4{
     position: relative;
     z-index: 0;
+    margin-bottom: -4em;
+}
 
+.container-light{
+    margin-top: -2em;
 }
diff --git a/src/style/Son.css b/src/style/Son.css
@@ -6,6 +6,7 @@
     position: relative;
     display: block;
     z-index: 2;
+    margin-left: 10em;
 }
 
 .item{
@@ -22,8 +23,8 @@
 
 .son{
     position: absolute;
-    margin-left: 25%;
-    margin-top: -60%;
+    margin-left: 18em;
+    margin-top: -28em;
 }
 
 .text-son{
@@ -34,20 +35,20 @@
 
 
 .vid1{
-  position: absolute;
+    position: absolute;
     z-index: 3;
-    right: -35%;
-    top: 225%;
-
+    margin-left: 43em;
+    margin-top: -30em;
+    width: 80%;
 }
 
 .son-onde2{
     z-index: 1;
     position: absolute;
     width: 50%;
-    right: 5%;
-    bottom: -130em;
-}
+    margin-right: 1em;
+    margin-left: 7em;
+    }
 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {