From d2f8565d372c48e410a47d798f6ded7ca38c832d Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 25 Apr 2023 15:54:47 +0200
Subject: [PATCH] focus on content flipping

---
 css/4-content.css              | 100 +++++++++--
 css/5-popover.css              |   6 +-
 img/Sesame Digital Website.zip | Bin 745 -> 0 bytes
 index.html                     | 291 ++++++++++++++++-----------------
 4 files changed, 233 insertions(+), 164 deletions(-)
 delete mode 100644 img/Sesame Digital Website.zip

diff --git a/css/4-content.css b/css/4-content.css
index 21c29f2..39cd042 100644
--- a/css/4-content.css
+++ b/css/4-content.css
@@ -20,17 +20,6 @@
   padding-left: 80px;
 }
 
-#content_all .color-emphasis {
-  color: #1E33DA;
-}
-
-
-#content-1 h2,
-#content-2 h2,
-#content-3 h2,
-#content-4 h2 {
-  margin-left: 10vw;
-}
 
 #content {
 
@@ -79,3 +68,92 @@
   order: 1;
   flex-grow: 0;
 }
+
+
+.flip-container{
+  color: #FFFDFC;
+  padding-top: 15vh;
+}
+.flip-container + .flip-container{
+  padding-top:0;
+  margin-top: -15vh;
+  min-height: 91vh;
+  height: 90vh;
+}
+
+.flip-container .container-text{
+  width: 50%;
+  position: relative;
+  left: 30vw;
+  text-align: left;
+}
+.flip-container.flip-from-left .container-text{
+  width: 50%;
+  left: 50%;
+}
+
+.flip-container .color-emphasis {
+  color: #1E33DA;
+  max-width: 760px;
+  margin: 0 auto;
+}
+.flip-container .text-title{
+  font-weight: 600;
+  font-size: 60px;
+  line-height: 110%;
+  letter-spacing: -0.04em;
+  margin-top: 158px;
+  margin-bottom: 20px;
+}
+.flip-container .text-description{
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  margin-bottom: 20px;
+  width: 380px;
+}
+.flip-container .phone-container{
+  box-sizing: border-box;
+  position: relative;
+  left: 60vw;
+  top: -540px;
+  background: rgba(225, 196, 183, 0.2);
+  border-radius: 70px;
+  width: 342px;
+  height: 700px;
+  border-color: rgba(255,255,255,0.4);
+  border-width: 2px;
+}
+
+.flip-container.flip-from-left .phone-container{
+  left: 5vw;
+  top: -540px;
+}
+
+.flip-container .phone-container img{
+  margin-top: 70px;
+  width: 318px;
+  height: auto;
+}
+.flip-container .call-to-action{
+  cursor:pointer;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 36px;
+  gap: 10px;
+  width: 198px;
+  height: 56px;
+  border-radius: 70px;
+  flex: none;
+  order: 2;
+  flex-grow: 0;
+  background: transparent;
+  color: #fff;
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
+}
diff --git a/css/5-popover.css b/css/5-popover.css
index 4848e65..2ed65b7 100644
--- a/css/5-popover.css
+++ b/css/5-popover.css
@@ -3,7 +3,7 @@
 
 .slider-screen .text{
   position: relative;
-  left: 62%;
+  left: 55vw;
   top: -30%;
   width: 400px;
   text-align:left;
@@ -48,14 +48,14 @@
   background-size: cover;
 }
 
-#popover .phone-container {
+.slider-screen .phone-container {
   height: 776px;
   width: 411px;
   background: url('/img/phone_cream.png')  no-repeat;
   background-position: center;
   background-size: cover;
   position: relative;
-  left: 33%;
+  left: 20vw;
   top: 20vh;
 }
 
diff --git a/img/Sesame Digital Website.zip b/img/Sesame Digital Website.zip
deleted file mode 100644
index e4c3ba93e99e6881177b599bf51c884f38c7c278..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 745
zcmWIWW@h1H00E|LQ^VM6*F5S6vO$;|h<!5iQWXr%^$PORI|KaOdAX!OYI!|9T!MhK
z1`soIumQ=3Q+;OuDb50q$YP*QVGw3ym^DWND9BhG<nF|<?wrg^AcrO0(btiIVPik{
zpF~z5U&YhKF{Fa=>^VkW1_ll$gBx$w9!$;PnfGAJ6%M!T-h{8m9XBwaoxuM6$Iom2
zK=llsu6{1-oD!M>h;X;X5OufZpmaAQlL!Oulmdzy1VBnR0p7%F+yT@N(Fl$>;x!g9
Y!Zd<IF2I`=lqMONfp9gD)?fnh04d3^GXMYp

diff --git a/index.html b/index.html
index 6005249..a1521a6 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
   <!-- Place favicon.ico in the root directory -->
 
   <!--  <link rel="stylesheet" href="css/normalize.css">-->
-<!--  <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
+  <!--  <link rel="stylesheet" href="/css/bulma.css" type="text/css">-->
   <link rel="stylesheet" href="/css/main.css" type="text/css">
 
   <meta name="theme-color" content="#fafafa">
@@ -27,181 +27,172 @@
 
 <main class="has-text-centered">
 
-  <section id="cover" class="has-text-centerd">
-    <div id="hand"></div>
+  <!--  <section id="cover" class="has-text-centerd">-->
+  <!--    <div id="hand"></div>-->
 
-    <div id="main_title_container" class="margin-auto has-text-centered">
-      <div id="main_title" class="margin-auto">
-        <h1 class="is-hidden">Sesame</h1>
-      </div>
+  <!--    <div id="main_title_container" class="margin-auto has-text-centered">-->
+  <!--      <div id="main_title" class="margin-auto">-->
+  <!--        <h1 class="is-hidden">Sesame</h1>-->
+  <!--      </div>-->
 
-      <div class="title-container">
+  <!--      <div class="title-container">-->
 
-        <h2 class="container-text margin-auto">
-          We focus on online
 conversion to help brands sell better and more.
-        </h2>
-        <a href="#open" class="button margin-auto">Scroll</a>
-      </div>
+  <!--        <h2 class="container-text margin-auto">-->
+  <!--          We focus on online
 conversion to help brands sell better and more.-->
+  <!--        </h2>-->
+  <!--        <a href="#open" class="button margin-auto">Scroll</a>-->
+  <!--      </div>-->
 
-    </div>
-  </section>
-  <section id="welcome">
+  <!--    </div>-->
+  <!--  </section>-->
+  <!--  <section id="welcome">-->
 
-    <div class="phones-land">
-      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
-      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
-      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
-      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
-    </div>
-    <h2 class="margin-auto container-text-lg">
-      We come from
-      <span class="color-emphasis">
-          the
 most immersive e-commerce market
-          </span>
-      in the world.
-    </h2>
+  <!--    <div class="phones-land">-->
+  <!--      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">-->
+  <!--      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">-->
+  <!--      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">-->
+  <!--      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">-->
+  <!--    </div>-->
+  <!--    <h2 class="margin-auto container-text-lg">-->
+  <!--      We come from-->
+  <!--      <span class="color-emphasis">-->
+  <!--          the
 most immersive e-commerce market-->
+  <!--          </span>-->
+  <!--      in the world.-->
+  <!--    </h2>-->
 
-  </section>
-  <section id="open">
+  <!--  </section>-->
+  <!--  <section id="open">-->
 
-    <h2 class="text">
-      <img src="/img/unlock.png" alt="Open Sesame">
-    </h2>
-  </section>
-  <section id="content">
-    <h2>
-      <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">
-          For all your
-          <span class="color-emphasis">
-          digital
-          </span>
-          uses.
-        </h2>
-      </div>
-      <div class="column">
-        <p class="container-text-md text">
-          Our creative competitive edge
-          We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our
-          technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale
-          for all touchpoints to reduce costs.
-        </p>
-      </div>
-    </div>
+  <!--    <h2 class="text">-->
+  <!--      <img src="/img/unlock.png" alt="Open Sesame">-->
+  <!--    </h2>-->
+  <!--  </section>-->
+  <!--  <section id="content">-->
+  <!--    <h2>-->
+  <!--      <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">-->
+  <!--          For all your-->
+  <!--          <span class="color-emphasis">-->
+  <!--          digital-->
+  <!--          </span>-->
+  <!--          uses.-->
+  <!--        </h2>-->
+  <!--      </div>-->
+  <!--      <div class="column">-->
+  <!--        <p class="container-text-md text">-->
+  <!--          Our creative competitive edge-->
+  <!--          We leverage our own studio in Paris equipped to produce all e-formats. We power transactional content with our-->
+  <!--          technology. Our content is transactional and generate online sales. We produce multi-purpose content at scale-->
+  <!--          for all touchpoints to reduce costs.-->
+  <!--        </p>-->
+  <!--      </div>-->
+  <!--    </div>-->
 
 
-  </section>
-  <section id="content-2" class="flip-from-right">
+  <!--  </section>-->
+
+  <!--  flipping zones-->
+  <section id="content-2" class="flip-container flip-from-right">
     <div class="container-text">
-
-      <h2>Motion &
-        3D design</h2>
-      <p>
+      <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>
-    <button>More infos</button>
     <div class="phone-container">
       <img src="/img/phone_clothes.png" alt="phone">
     </div>
   </section>
-  <section id="content-3" class="flip-from-left">
-    <h2>Motion &
-      3D design</h2>
-    <p>
-      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>
+
+  <section id="content-3" class="flip-container flip-from-left">
+    <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>
-    <button>More infos</button>
     <div class="phone-container">
       <img src="/img/phone_glasses.png" alt="phone">
     </div>
+  </section>
+
+
+
+
+
+
+
 
-  </section>
-  <section id="content-4" class="flip-from-right">
-    <h2>Motion &
-      3D design</h2>
-    <p>
-      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>
-    </div>
-    <button>More infos</button>
-    <div class="phone-container">
-      <img src="/img/phone_face.png" alt="phone">
-    </div>
-  </section>
-  <section id="content-5" class="flip-from-left">
-    <h2>Motion &
-      3D design</h2>
-    <p>
-      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>
-    </div>
-    <button>More infos</button>
-    <div class="phone-container">
-      <img src="/img/phone_clothes.png" alt="phone">
-    </div>
-  </section>
   <!--  other section-->
-  <section id="popover" class="slider-screen">
-    <div class="phone-container">
-      <div class="top">
+  <!--  <section id="popover" class="slider-screen">-->
+  <!--    <div class="phone-container">-->
+  <!--      <div class="top">-->
+  <!--      </div>-->
+  <!--      <div class="bottom">-->
+  <!--      </div>-->
+  <!--    </div>-->
+  <!--    <div class="text">-->
+  <!--      <h2 class="text-title">-->
+  <!--            <span class="color-emphasis">-->
+  <!--            Premium-->
+  <!--            </span>-->
+  <!--        <span>-->
+  <!--            & Campaign-->
+  <!--            </span>-->
+  <!--      </h2>-->
+  <!--      <p>-->
+  <!--        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>-->
+  <!--    </div>-->
+  <!--  </section>-->
 
-      </div>
-      <div class="bottom">
 
-      </div>
-    </div>
-    <div class="text">
-      <h2 class="text-title">
-            <span class="color-emphasis">
-            Premium
-            </span>
-        <span>
-            & Campaign
-            </span>
-      </h2>
-      <p>
-        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>
-    </div>
-  </section>
-  <section id="portfolio" class="slider-screen">
-    <div class="phone-container">
-      <div class="top">
-
-      </div>
-      <div class="bottom">
-
-      </div>
-    </div>
-    <div id="text">
-      <h2 class="text-title">
-            <span class="color-emphasis">
-            Premium
-            </span>
-        <span>
-            & Campaign
-            </span>
-      </h2>
-      <p>
-        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>
-    </div>
-  </section>
+  <!--  <section id="portfolio" class="slider-screen">-->
+  <!--    <div class="phone-container">-->
+  <!--      <div class="top">-->
+  <!--      </div>-->
+  <!--      <div class="bottom">-->
+  <!--      </div>-->
+  <!--    </div>-->
+  <!--    <div class="text">-->
+  <!--      <h2 class="text-title">-->
+  <!--            <span class="color-emphasis">-->
+  <!--            Premium-->
+  <!--            </span>-->
+  <!--        <span>-->
+  <!--            & Campaign-->
+  <!--            </span>-->
+  <!--      </h2>-->
+  <!--      <p>-->
+  <!--        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>-->
+  <!--    </div>-->
+  <!--  </section>-->
 
   <nav class="fixed-nav is-fixed-top">
     <div class="burger-menu is-2">