make css menu icon

css/0-1-nav.css

@@ -16,6 +16,18 @@ main nav {
   width: 150px;
   float: left;
 }
+.icon-burger{
+  cursor: pointer;
+  width: 40px;
+  height: 1em;
+  float: left;
+  margin-top: 0.3rem;
+}
+.icon-burger .line{
+  border-top: 2px solid #fff;
+  margin-bottom: 6px;
+  display: block;
+}
 
 .nav-main {
   text-align: center;

css/0-general.css

@@ -24,3 +24,6 @@ main section h2 {
   /* Secondary 100 */
   color: #FFFDFC;
 }
+img{
+  max-width: 100vw;
+}

css/3-open-sesame.css

@@ -2,12 +2,9 @@
 #open {
   box-sizing: border-box;
 
-  position: absolute;
-  width: 1177px;
+  position: relative;
 
-  left: calc(50% - 1177px / 2 - 0.5px);
-  top: 100px;
-  font-family: 'GT Walsheim Pro';
+  top: 223vh;
   font-style: normal;
   font-weight: 600;
   font-size: 200px;
@@ -15,14 +12,14 @@
   text-align: center;
   letter-spacing: -0.04em;
   color: rgba(248, 243, 241, 0.1);
-  backdrop-filter: blur(7.5px);
-  height: 180px;
+  height: 100vh;
   padding-top: 310px;
   padding-bottom: 310px;
-  background: url('/img/unlock.png') bottom center no-repeat;
+
   color: rgba(248, 243, 241, 0.1);
 }
-#open .text{
+
+#open .text {
   color: #fff;
   margin-bottom: 400px;
 }

css/4-content.css

@@ -1,21 +1,26 @@
 
 #content_all {
   position: relative;
-  top:200vh;
+  top: 200vh;
   padding-top: 100px;
-  background: url('/img/bg_content.png');
-  background-size: cover;
   color: #FFFDFC;
 }
-#content_all .columns{
+#content_all_img{
+  background: url('/img/bg_content.png');
+  background-size: cover;
+}
+
+#content_all .columns {
   margin: 0 auto;
   max-width: 80vw;
 }
-#content_all .text{
+
+#content_all .text {
   padding-top: 1vh;
   padding-left: 80px;
 }
-#content_all .color-emphasis{
+
+#content_all .color-emphasis {
   color: #1E33DA;
 }
 
@@ -27,41 +32,41 @@
   margin-left: 10vw;
 }
 
-#content{
+#content {
 
   height: 200px;
   min-height: 200px;
 }
-#content .first {
 
+#content h2 {
+  margin-top: 33vh;
+}
+
+#content_first {
+
+  opacity: 0;
   width: 1680px;
   height: 35px;
-
   margin-bottom: 40px;
   font-style: normal;
   font-weight: 600;
   font-size: 40px;
   line-height: 95%;
-
   text-align: center;
   letter-spacing: 0.2em;
   text-transform: uppercase;
-
   color: #E77064;
-
   backdrop-filter: blur(5px);
-
   flex: none;
   order: 0;
   flex-grow: 0;
-
 }
-#content .second{
-  margin-bottom: 100px;
 
+#content_second {
+  opacity: 0;
+  margin-bottom: 100px;
   width: 1680px;
   height: 170px;
-
   font-family: 'GT Walsheim Pro';
   font-style: normal;
   font-weight: 700;

index.html

@@ -65,17 +65,17 @@
   <section id="open">
 
     <h2 class="text">
-      Open Sesame
+      <img src="/img/unlock.png" alt="Open Sesame">
     </h2>
   </section>
   <section id="content">
     <h2>
-      <p class="first color-emphasis">Transactional</p>
-      <p class="second">Content</p>
-
+      <p id="content_first" class="first color-emphasis">Transactional</p>
+      <p id="content_second" class="second">Content</p>
     </h2>
   </section>
   <section id="content_all">
+    <div id="content_all_img"></div>
     <div class="columns">
       <div class="column">
         <h2 class="container-text-md">
@@ -205,7 +205,11 @@
 
   <nav class="fixed-nav is-fixed-top">
     <div class="burger-menu is-2">
-      <div class="icon-burger"></div>
+      <div class="icon-burger">
+        <span class="line"></span>
+        <span class="line"></span>
+        <span class="line"></span>
+      </div>
       <span>Menu</span>
     </div>
     <div class="nav-main is-10 has-text-centered">

js/main.js

@@ -44,3 +44,97 @@ gsap.to("#phone-watches-1",
       markers: development_debug,
     }
 })
+gsap.to("#phone-watches-2",
+  {
+    left: "50vw",
+    top: 100 ,
+    scale: 0.7,
+    duration: 1.25,
+    ease: "sine",
+    scrollTrigger: {
+      trigger: '#welcome',
+      scrub: 1,
+      markers: development_debug,
+    }
+})
+gsap.to("#phone-watches-3",
+  {
+    left: "50vw",
+    top: 0 ,
+    scale: 0.8,
+    duration: 1.25,
+    ease: "sine",
+    scrollTrigger: {
+      trigger: '#welcome',
+      scrub: 2,
+      markers: development_debug,
+    }
+})
+gsap.to("#phone-watches-4",
+  {
+    left: "50vw",
+    top: -10 ,
+    scale: 0.5,
+    duration: 3,
+    ease: "sine",
+    scrollTrigger: {
+      trigger: '#welcome',
+      scrub: 2,
+      markers: development_debug,
+    }
+})
+
+gsap.to("#phone-watches-4",
+  {
+    left: "50vw",
+    top: -10 ,
+    scale: 0.5,
+    duration: 3,
+    ease: "sine",
+    scrollTrigger: {
+      trigger: '#welcome',
+      scrub: 2,
+      markers: development_debug,
+    }
+  })
+
+gsap.to("#content_first",
+  {
+    left: -20,
+    top: -50,
+    opacity: 1,
+    duration: 3,
+    ease: "easeInOut",
+    scrollTrigger: {
+      trigger: '#content',
+      scrub: 2,
+      markers: development_debug,
+    }
+  })
+
+gsap.to("#content_second",
+  {
+    left: -20,
+    top: -50,
+    opacity: 1,
+    duration: 2,
+    ease: "spline",
+    scrollTrigger: {
+      trigger: '#content',
+      scrub: 2,
+      markers: development_debug,
+    }
+  })
+
+// le background coloré grandit légèrement
+gsap.to("#content_all_img",
+  {
+    scale: 1.5,
+    ease: "easeInOut",
+    scrollTrigger: {
+      trigger: '#content',
+      scrub: 2,
+      markers: development_debug,
+    }
+  })
+