From b369bf197a7da0fd066570a8cf6758d373cfb041 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 27 Apr 2023 15:57:38 +0200
Subject: [PATCH] gather open zone

---
 css/3-open-sesame.css |   4 +-
 css/4-content.css     |  86 ++++++++++++++--------
 index.html            | 161 +++++++++++++++++++++---------------------
 js/main.js            |   9 +--
 4 files changed, 146 insertions(+), 114 deletions(-)

diff --git a/css/3-open-sesame.css b/css/3-open-sesame.css
index 2700161..0339bb8 100644
--- a/css/3-open-sesame.css
+++ b/css/3-open-sesame.css
@@ -4,7 +4,7 @@
 
   position: relative;
 
-  top: 223vh;
+  top: 88vh;
   font-style: normal;
   font-weight: 600;
   font-size: 200px;
@@ -12,11 +12,11 @@
   text-align: center;
   letter-spacing: -0.04em;
   color: rgba(248, 243, 241, 0.1);
-  height: 100vh;
   padding-top: 310px;
   padding-bottom: 310px;
 
   color: rgba(248, 243, 241, 0.1);
+  height: 50vh;
 }
 
 #open .text {
diff --git a/css/4-content.css b/css/4-content.css
index 1c180c6..528a13b 100644
--- a/css/4-content.css
+++ b/css/4-content.css
@@ -1,33 +1,4 @@
 
-#content_all {
-  position: relative;
-  top: 200vh;
-  padding-top: 100px;
-  color: #FFFDFC;
-}
-#content_all_img{
-  background: url('/img/bg_content.png');
-  background-size: cover;
-  width: 90vw;
-  height: 90vh;
-}
-
-#content_all .columns {
-  margin: 0 auto;
-  max-width: 80vw;
-  top: -100vh;
-  position: relative;
-}
-
-#content_all .text {
-  padding-top: 1vh;
-  padding-left: 80px;
-}
-#content_all .color-emphasis {
-  color: #1E33DA;
-}
-
-
 #content {
   height: 200px;
   min-height: 200px;
@@ -36,6 +7,53 @@
   margin-top: 33vh;
 }
 
+#content_all {
+  position: relative;
+  top: 55vh;
+  padding-top: 100px;
+  color: #FFFDFC;
+}
+#content_all_img{
+  background: url('/img/bg_content.png');
+  background-size: cover;
+  width: 100vw;
+  height: 150vh;
+  margin-top: -50vh;
+  left:0;
+  position: relative;
+}
+
+#content_all .columns {
+  margin: 0 auto;
+  max-width: 80vw;
+  top: -150vh;
+  position: relative;
+}
+
+#content_all .text {
+  padding-top: 1vh;
+  padding-left: 80px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  text-align:left;
+}
+main #content_all .columns > .column:nth-of-type(0) {
+  font-size: 100px !important;
+  line-height: 90px;
+  letter-spacing: -0.04em;
+}
+#content_all .columns > .column:nth-of-type(1) {
+  font-size: 1em;
+  line-height: 90px;
+  letter-spacing: -0.04em;
+}
+#content_all .color-emphasis {
+  color: #1E33DA;
+}
+
+
+
 #content_first {
 
   opacity: 0;
@@ -174,3 +192,13 @@
   border-width: 5px;
   border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
 }
+
+
+#content-2{
+  margin-top:50vh;
+}
+
+#flipping_zone{
+  margin-top: -100vh;
+  position: relative;
+}
diff --git a/index.html b/index.html
index fdb9d4b..745571e 100644
--- a/index.html
+++ b/index.html
@@ -100,92 +100,95 @@
     </section>
 
   <!--  flipping zones-->
-  <section id="content-2" class="flip-container flip-from-right">
-    <div id="content-2-handle" class="flip-handle"></div>
-    <div class="container-text">
-      <h2 class="text-title">
-        Motion &
-        3D design
-      </h2>
-      <p  class="text-description">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
-        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
-      </p>
-      <button class="call-to-action">More infos
-        <span class="arrow-icon">→</span>
-      </button>
-    </div>
-    <div class="phone-container">
-      <img src="/img/phone_clothes.png" alt="phone">
-    </div>
-  </section>
+  <div id="flipping_zone">
+    <section id="content-2" class="flip-container flip-from-right">
+      <div id="content-2-handle" class="flip-handle"></div>
+      <div class="container-text">
+        <h2 class="text-title">
+          Motion &
+          3D design
+        </h2>
+        <p  class="text-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+          Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+        </p>
+        <button class="call-to-action">More infos
+          <span class="arrow-icon">→</span>
+        </button>
+      </div>
+      <div class="phone-container">
+        <img src="/img/phone_clothes.png" alt="phone">
+      </div>
+    </section>
 
-  <section id="content-3" class="flip-container flip-from-left">
-    <div id="content-3-handle" class="flip-handle"></div>
-    <div class="container-text">
-      <h2 class="text-title">
-        Videos
-        <br>
-        Production
-      </h2>
-      <p  class="text-description">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
-        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
-      </p>
-      <button class="call-to-action">More infos
-        <span class="arrow-icon">→</span>
-      </button>
-    </div>
-    <div class="phone-container">
-      <img src="/img/phone_glasses.png" alt="phone">
-    </div>
-  </section>
+    <section id="content-3" class="flip-container flip-from-left">
+      <div id="content-3-handle" class="flip-handle"></div>
+      <div class="container-text">
+        <h2 class="text-title">
+          Videos
+          <br>
+          Production
+        </h2>
+        <p  class="text-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+          Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+        </p>
+        <button class="call-to-action">More infos
+          <span class="arrow-icon">→</span>
+        </button>
+      </div>
+      <div class="phone-container">
+        <img src="/img/phone_glasses.png" alt="phone">
+      </div>
+    </section>
 
-  <section id="content-4" class="flip-container flip-from-right">
-    <div id="content-4-handle" class="flip-handle"></div>
-    <div class="container-text">
-      <h2 class="text-title">
-        Photos
-        <br>
-        Production
-      </h2>
-      <p  class="text-description">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
-        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
-      </p>
-      <button class="call-to-action">More infos
-        <span class="arrow-icon">→</span>
-      </button>
-    </div>
-    <div class="phone-container">
-      <img src="/img/phone_face.png" alt="phone">
-    </div>
-  </section>
+    <section id="content-4" class="flip-container flip-from-right">
+      <div id="content-4-handle" class="flip-handle"></div>
+      <div class="container-text">
+        <h2 class="text-title">
+          Photos
+          <br>
+          Production
+        </h2>
+        <p  class="text-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+          Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+        </p>
+        <button class="call-to-action">More infos
+          <span class="arrow-icon">→</span>
+        </button>
+      </div>
+      <div class="phone-container">
+        <img src="/img/phone_face.png" alt="phone">
+      </div>
+    </section>
 
 
-  <section id="content-5" class="flip-container flip-from-left">
-    <div id="content-5-handle" class="flip-handle"></div>
-    <div class="container-text">
-      <h2 class="text-title">
-        Videos
-        <br>
-        Production
-      </h2>
-      <p  class="text-description">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
-        Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
-      </p>
-      <button class="call-to-action">More infos
-        <span class="arrow-icon">→</span>
-      </button>
-    </div>
-    <div class="phone-container">
-      <img src="/img/phone_clothes.png" alt="phone">
-    </div>
-  </section>
+    <section id="content-5" class="flip-container flip-from-left">
+      <div id="content-5-handle" class="flip-handle"></div>
+      <div class="container-text">
+        <h2 class="text-title">
+          Videos
+          <br>
+          Production
+        </h2>
+        <p  class="text-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in tortor egestas, rutrum elit at, fringilla felis.
+          Mauris nec erat rutrum, ultrices turpis laoreet, faucibus ante. Vestibulum.
+        </p>
+        <button class="call-to-action">More infos
+          <span class="arrow-icon">→</span>
+        </button>
+      </div>
+      <div class="phone-container">
+        <img src="/img/phone_clothes.png" alt="phone">
+      </div>
+    </section>
 
 
 
+  </div>
+
 
   <!--  other section-->
     <section id="popover" class="slider-screen">
diff --git a/js/main.js b/js/main.js
index 949bcac..523ecd9 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,7 +1,8 @@
 /**
  * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
  */
-let development_debug = true;
+let development_debug = false;
+
 gsap.fromTo("#main_title", {
   opacity: 0,
   top: 200
@@ -138,10 +139,10 @@ gsap.fromTo("#content_all_img",
   left:-100},
   {
     scale: 1,
-    left:0,
-    ease: "easeInOut",
+    left:-80,
+    ease: "linear",
     scrollTrigger: {
-      trigger: '#content',
+      trigger: '#content_all .columns',
       scrub: 1,
       markers: development_debug,
     }