From dcd988f1986213014e2b9bbdc28e90f69425adde Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 31 May 2023 17:49:49 +0200
Subject: [PATCH] responsive on 2 blocks

---
 .../src/assets/styles/10-webdesign.scss       |  19 ++-
 .../sesame/src/assets/styles/_11-carry.scss   |  34 +++++-
 .../sesame/src/components/CoverSection.vue    |  99 +++++++--------
 .../sesame/src/components/DisabledSection.vue | 115 ++++++++++--------
 4 files changed, 153 insertions(+), 114 deletions(-)

diff --git a/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss b/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
index 435e576..6e38e89 100644
--- a/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
@@ -1,11 +1,11 @@
 #transactionnal_webdesign {
-	padding-top: 363px;
-
 	background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
 	background-size: cover;
 	font-family: "GT Walsheim Pro";
 	color: #00001f;
 	padding-top: 380px;
+	position: static;
+	min-height: 150vh;
 
 	.columns {
 		max-width: 60vw;
@@ -59,3 +59,18 @@
 		line-height: 130%;
 	}
 }
+@media screen and (max-width: 1023px) {
+	#transactionnal_webdesign {
+
+		min-height: 100vh;
+		padding-top: 5vh;
+
+		.title {
+			font-size: 4rem;
+		}
+		.description {
+			font-size: 4rem !important;
+		}
+	}
+
+}
diff --git a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
index aeafc28..17cb1d0 100644
--- a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
+++ b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
@@ -1,9 +1,9 @@
 
 #carry {
-	position: relative;
+	position: static;
 	background: white;
 	padding-top: 20vh;
-	min-height: 200vh;
+	min-height: 100vh;
 
 	.title {
 		margin-bottom: 46px;
@@ -101,7 +101,7 @@
 	}
 
 	.gradient-bg {
-		position: absolute;
+		position: relative;
 		width: 50vw;
 		height: 58vh;
 		left: 22vw;
@@ -121,19 +121,43 @@
 	}
 }
 
+@media screen and (max-width: 1600px) {
+	#carry     {
+		.description {
+			margin-top: 3vh;
+			font-size: 8rem;
+		}
+	}
+}
+
 @media screen and (max-width: 1023px) {
 	#carry {
 		padding-left: 10vw;
 		padding-right: 10vw;
 
+
+		.title {
+			font-size: 4rem;
+		}
+
 		.description {
 			margin-top: 3vh;
-			font-size: 8rem;
+			font-size: 10rem;
 		}
 
 		.computer-block {
 			background-size: contain;
-			top: -10rem;
+			position: relative;
+			height: 100vh;
+			margin-top: -73vh;
+		}
+		.bubbles{
+			position: relative;
+			left: -5vw;
+		}
+		.gradient-bg{
+			top: 19vh;
+			left:15vw;
 		}
 	}
 
diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue
index 5d491a1..f82adda 100644
--- a/sesame-vitejs/sesame/src/components/CoverSection.vue
+++ b/sesame-vitejs/sesame/src/components/CoverSection.vue
@@ -7,69 +7,52 @@
   <main class="has-text-centered">
     <!--		sprint 4 content-->
     <div id="sprint_4">
-      <section id="china_achievements">
+      <section
+        id="transactionnal_webdesign"
+        class="has-text-centerd"
+      >
+        <h2 class="title">
+          Transactional
+        </h2>
+        <div class="description has-text-centered">
+          Webdesign
+        </div>
         <div class="columns">
-          <div class="column">
-            <h2 class="title primary-color">
-              Our China achievements
-            </h2>
+          <div class="column first">
+            <h3 class="sub-title">
+              For all your
+              <br>
+              <span class="color-emphasis"> digital</span> uses.
+            </h3>
           </div>
-          <div class="column">
-            <p class="dark-color">
-              Backed by the Baozun Group (the leading e-commerce technology Group
-              in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
-              2021), we embrace China’s e-commerce, capitalizing on the market’s
-              unique technology and digital sales mechanisms.
-            </p>
+          <div class="column second">
+            Our creative competitive edge <br>
+            <br>
+            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.
           </div>
         </div>
+      </section>
 
-        <div class="tiles-box">
-          <div class="columns">
-            <div class="column">
-              <CounterBlock
-                number-value="400+"
-                free-text="Store launches incl. Dr. Martens, G-star etc."
-                img-src="/img/people 2.jpg"
-              />
-            </div><div class="column">
-              <CounterBlock
-                number-value="100+"
-                free-text="Luxury Store launches on incl. Christofle, De Beers etc."
-                img-src="/img/people 2-1.jpg"
-              />
-            </div><div class="column">
-              <CounterBlock
-                number-value="40+"
-                free-text="Luxury Brands supported with E2E services."
-                img-src="/img/people 2-2.jpg"
-              />
-            </div>
-          </div>
-
-          <div class="columns offset-left-columns">
-            <div class="column">
-              <CounterBlock
-                number-value="50+"
-                free-text="Brands assisted in social project commerces."
-                img-src="/img/people 2-3.jpg"
-              />
-            </div>
-            <div class="column">
-              <CounterBlock
-                number-value="30+"
-                free-text="PROJECTS converted into Ecom Ops management."
-                img-src="/img/people 2-4.jpg"
-              />
-            </div>
-            <div class="column">
-              <CounterBlock
-                number-value="30-60%"
-                free-text="Of our brands’ partner China GMV done online."
-                img-src="/img/people 2-5.jpg"
-              />
-            </div>
-          </div>
+      <section id="carry">
+        <h2 class="title color-emphasis">
+          We carry out web design and development
+        </h2>
+        <p class="description">
+          in headless
+          <br>
+          commerce.
+        </p>
+        <div class="gradient-bg-yellow" />
+        <div class="gradient-bg" />
+        <div class="computer-block" />
+        <div class="bubbles secondary-color">
+          <p>Evolutive maintenance</p>
+          <p>Front end (ux/ui) development</p>
+          <p>Web App (pwa) development</p>
+          <p>Consulting</p>
         </div>
       </section>
     </div>
diff --git a/sesame-vitejs/sesame/src/components/DisabledSection.vue b/sesame-vitejs/sesame/src/components/DisabledSection.vue
index 2f6ec4c..eceb169 100644
--- a/sesame-vitejs/sesame/src/components/DisabledSection.vue
+++ b/sesame-vitejs/sesame/src/components/DisabledSection.vue
@@ -6,55 +6,6 @@
 
 
 
-	<section
-		id="transactionnal_webdesign"
-		class="has-text-centerd"
-	>
-		<h2 class="title">
-			Transactional
-		</h2>
-		<div class="description has-text-centered">
-			Webdesign
-		</div>
-		<div class="columns">
-			<div class="column first">
-				<h3 class="sub-title">
-					For all your
-					<br>
-					<span class="color-emphasis"> digital</span> uses.
-				</h3>
-			</div>
-			<div class="column second">
-				Our creative competitive edge <br>
-				<br>
-				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.
-			</div>
-		</div>
-	</section>
-
-	<section id="carry">
-		<h2 class="title color-emphasis">
-			We carry out web design and development
-		</h2>
-		<p class="description">
-			in headless
-			<br>
-			commerce.
-		</p>
-		<div class="gradient-bg-yellow" />
-		<div class="gradient-bg" />
-		<div class="computer-block-item" />
-		<div class="bubbles secondary-color">
-			<p>Evolutive maintenance</p>
-			<p>Front end (ux/ui) development</p>
-			<p>Web App (pwa) development</p>
-			<p>Consulting</p>
-		</div>
-	</section>
-
 	<section id="kyc">
 		<p class="description2 primary-color">
 			We craft e-commerce Ux template based on qualitative and quantitative
@@ -343,6 +294,71 @@
 			</div>
 		</div>
 	</section>
+	<section id="china_achievements">
+		<div class="columns">
+			<div class="column">
+				<h2 class="title primary-color">
+					Our China achievements
+				</h2>
+			</div>
+			<div class="column">
+				<p class="dark-color">
+					Backed by the Baozun Group (the leading e-commerce technology Group
+					in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
+					2021), we embrace China’s e-commerce, capitalizing on the market’s
+					unique technology and digital sales mechanisms.
+				</p>
+			</div>
+		</div>
+
+		<div class="tiles-box">
+			<div class="columns">
+				<div class="column">
+					<CounterBlock
+						number-value="400+"
+						free-text="Store launches incl. Dr. Martens, G-star etc."
+						img-src="/img/people 2.jpg"
+					/>
+				</div><div class="column">
+				<CounterBlock
+					number-value="100+"
+					free-text="Luxury Store launches on incl. Christofle, De Beers etc."
+					img-src="/img/people 2-1.jpg"
+				/>
+			</div><div class="column">
+				<CounterBlock
+					number-value="40+"
+					free-text="Luxury Brands supported with E2E services."
+					img-src="/img/people 2-2.jpg"
+				/>
+			</div>
+			</div>
+
+			<div class="columns offset-left-columns">
+				<div class="column">
+					<CounterBlock
+						number-value="50+"
+						free-text="Brands assisted in social project commerces."
+						img-src="/img/people 2-3.jpg"
+					/>
+				</div>
+				<div class="column">
+					<CounterBlock
+						number-value="30+"
+						free-text="PROJECTS converted into Ecom Ops management."
+						img-src="/img/people 2-4.jpg"
+					/>
+				</div>
+				<div class="column">
+					<CounterBlock
+						number-value="30-60%"
+						free-text="Of our brands’ partner China GMV done online."
+						img-src="/img/people 2-5.jpg"
+					/>
+				</div>
+			</div>
+		</div>
+	</section>
 	<section
 		id="baozun_group"
 		class="has-rounded-corners"
@@ -353,6 +369,7 @@
 			and Company.
 		</h2>
 	</section>
+
 </template>
 <script>