show back nav

css/0-1-nav.css

@@ -0,0 +1,30 @@
+
+main nav {
+  padding: 24px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 130%;
+  text-align: center;
+  color: #FFFDFC;
+  width: 100%;
+  position: fixed;
+  top: 0;
+}
+
+.burger-menu {
+  width: 150px;
+  float: left;
+}
+
+.nav-main {
+  text-align: center;
+  top: 54px;
+  color: #FFFDFC;
+  width: 100%;
+  height: 54px;
+}
+
+.fixed-nav{
+  z-index: 30;
+}

css/0-general.css

@@ -3,33 +3,6 @@ body{
   background: #020225;
 }
 
-main nav {
-  padding: 24px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 130%;
-  text-align: center;
-  color: #FFFDFC;
-  width: 100%;
-}
-
-.burger-menu {
-  width: 150px;
-  float: left;
-}
-
-.nav-main {
-  text-align: center;
-  top: 54px;
-  color: #FFFDFC;
-  width: 100%;
-  height: 54px;
-}
-
-.fixed-nav{
-  z-index: 30;
-}
 
 main section {
   height: 1300px;

css/2-we-come-from.css

@@ -45,14 +45,14 @@
   position: absolute;
   width: 345px;
   height: 690px;
-  left: 137px;
+  left: -137px;
   top: 1531px;
 }
 
 #phone-watches-2 {
   width: 88px;
   height: 176px;
-  left: 651px;
+  left: -200px;
   top: 470px;
   filter: blur(2px);
 }

css/4-content.css

@@ -1,4 +1,25 @@
 
+#content_all {
+  position: relative;
+  top:200vh;
+  padding-top: 100px;
+  background: url('/img/bg_content.png');
+  background-size: cover;
+  color: #FFFDFC;
+}
+#content_all .columns{
+  margin: 0 auto;
+  max-width: 80vw;
+}
+#content_all .text{
+  padding-top: 1vh;
+  padding-left: 80px;
+}
+#content_all .color-emphasis{
+  color: #1E33DA;
+}
+
+
 #content-1 h2,
 #content-2 h2,
 #content-3 h2,
@@ -7,6 +28,7 @@
 }
 
 #content{
+
   height: 200px;
   min-height: 200px;
 }
@@ -52,24 +74,3 @@
   order: 1;
   flex-grow: 0;
 }
-
-/****************
-
- */
-#content_all .text{
-  padding-top: 1vh;
-  padding-left: 80px;
-}
-#content_all .color-emphasis{
-  color: #1E33DA;
-}
-#content_all {
-  padding-top: 100px;
-  background: url('/img/bg_content.png');
-  background-size: cover;
-  color: #FFFDFC;
-}
-#content_all .columns{
-  margin: 0 auto;
-  max-width: 80vw;
-}

css/main.css

@@ -11,6 +11,7 @@ libs
 custom
  */
 @import '0-general.css';
+@import '0-1-nav.css';
 @import '1-cover.css';
 @import '1-2-main_title.css';
 @import '2-we-come-from.css';
@@ -18,13 +19,3 @@ custom
 @import '4-content.css';
 @import '5-popover.css';
 @import '6-portfolio.css';
-
-
-
-
-
-
-
-/**********************/
-
-

js/main.js

@@ -21,15 +21,20 @@ gsap.to("#hand", {
     markers: development_debug,
   }
 });
+gsap.to("#main_title", {
+  top: 150,
+  duration: 1,
+  scrollTrigger: {
+    trigger: '#main_title',
+    scrub: 1,
+    markers: development_debug,
+  }
+});
 
-gsap.fromTo("#phone-watches-1", {
-    top: 1531,
-    left: -100,
-  position:"relative",
-  },
+gsap.to("#phone-watches-1",
   {
-    left: 50,
-    top: (1531 - 200) ,
+    left: 500,
+    top: (531 - 400) ,
     scale: 0.8,
     duration: 1.5,
     ease: "sine",
@@ -38,4 +43,4 @@ gsap.fromTo("#phone-watches-1", {
       scrub: 1,
       markers: development_debug,
     }
-  })
+})