china section

sesame-vitejs/sesame/src/assets/styles/0-general.scss

@@ -1,9 +1,11 @@
 /******** all sections *********/
 body {
-	background: #020225;
+	background: #fff;
 	padding-bottom: 50vh;
 	overflow-x: hidden;
 	font-family: "GT Walsheim Pro", Arial;
+	margin: 0;
+	padding:0;
 }
 
 main {
@@ -12,6 +14,7 @@ main {
 		height: 100vh;
 		min-height: 100vh;
 		width: 100vw;
+		position: absolute;
 
 		h2 {
 			color: #fffdfc;

sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss

@@ -35,7 +35,7 @@ margin-top: 250px;
 		text-align: center;
 	}
 	.description{
-		font-weight: 600;
+		font-weight: 500;
 		font-size: 60px;
 		line-height: 110%;
 		letter-spacing: -0.04em;

sesame-vitejs/sesame/src/assets/styles/_13-china.scss

@@ -1,21 +1,132 @@
-#cina{
+#china {
-	background: url('img/china-bg.png');
+	//background-color: green;
+	background: url('img/china-bg.png') no-repeat;
+	background-size: cover;
+	height: 1060px;
+	width: 99vw;
+	position: relative;
+	top: 200vh;
+	padding-bottom: 20rem;
+	border-radius: 2rem;
 
-	.line{
+	.line {
-		background: url('img/china-line.png');
+		background: url(img/line.png) no-repeat;
+		position: relative;
+		width: 82vw;
+		height: 100vh;
+		left: 11rem;
+		top: -4rem;
+		z-index: 1;
+		float: left;
+		rotate: 5deg;
+		background-size: contain;
+	}
+
+	.title {
+		padding-top: 10rem;
+		margin-bottom: 2rem;
+		font-family: 'GT Walsheim Pro';
+		font-style: normal;
+		font-weight: 600;
+		font-size: 60px;
+		line-height: 110%;
+
+		text-align: center;
+		letter-spacing: -0.04em;
+
+
+		color: white;
+	}
+
+	.description {
+		font-family: 'GT Walsheim Pro';
+		font-style: normal;
+		font-weight: 500;
+		font-size: 30px;
+		line-height: 35px;
+		text-align: center;
+		text-transform: uppercase;
+		margin-bottom: 3rem;
+	}
+
+	.columns {
 
 		position: absolute;
-		width: 1494.06px;
+		margin-top: -10vh;
-		height: 313.16px;
+		padding: 10rem;
-		left: 93.02px;
+		width: 100vw;
-		top: 2342.9px;
+		z-index: 10;
 	}
-	.title{
 
+	.block-items, block-item {
+		color: white;
+		font-family: 'GT Walsheim Pro';
+		font-style: normal;
+		font-weight: 700;
+		font-size: 30px;
+		line-height: 120%;
+		text-align: left;
+		background-size: contain;
 	}
-	.description{
 
-	}
+	.block-item {
-	.color-emphasis {
+
+
+		.bottom {
+			margin-left: 2rem;
+		}
+
+		&:nth-of-type(1) {
+			background: url('img/block_pillar_1.png') no-repeat;
+			background-size: contain;
+
+			margin-top: 2rem;
+
+			.bottom {
+				margin-top: 21rem;
+			}
+		}
+
+		&:nth-of-type(2) {
+			background: url('img/block_pillar_2.png') no-repeat;
+			background-size: contain;
+			margin-top: 8rem;
+
+			.bottom {
+				margin-top: 22rem;
+			}
+		}
+
+		&:nth-of-type(3) {
+			background: url('img/block_pillar_3.png') no-repeat;
+			background-size: contain;
+			margin-top: 10rem;
+
+			.bottom {
+				margin-top: 25rem;
+			}
+		}
+
+		&:nth-of-type(4) {
+			background: url('img/block_pillar_4.png') no-repeat;
+			background-size: contain;
+			margin-top: 1rem;
+
+			.bottom {
+				margin-top: 24rem;
+			}
+		}
 	}
 }
+
+@media screen and (max-width: 1023px) {
+	#china {
+		.block-item {
+			margin: 0;
+			.bottom {
+				margin: 0;
+			}
+		}
+	}
+
+}

sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss

@@ -0,0 +1,40 @@
+#we_develop{
+
+	.title {
+		font-family: 'GT Walsheim Pro';
+		font-style: normal;
+		font-weight: 600;
+		font-size: 60px;
+		line-height: 110%;
+		text-align: center;
+		letter-spacing: -0.04em;
+	}
+
+	.description {
+
+	}
+
+	.asides{
+		font-family: 'GT Walsheim';
+		font-style: normal;
+		font-weight: 700;
+		font-size: 24px;
+		line-height: 150%;
+	}
+
+	.light-text{
+		font-family: 'GT Walsheim Pro';
+		font-style: normal;
+		font-weight: 600;
+		font-size: 40px;
+		line-height: 100%;
+
+		text-align: center;
+		letter-spacing: -0.04em;
+
+		color: #B62F22;
+
+		opacity: 0.2;
+		filter: blur(2px);
+	}
+}

sesame-vitejs/sesame/src/assets/styles/_15-full-creative.scss

@@ -0,0 +1,10 @@
+#full_creative{
+
+	.title {
+
+	}
+
+	.description {
+
+	}
+}

sesame-vitejs/sesame/src/assets/styles/_16-our_team.scss

@@ -0,0 +1,10 @@
+#our_team{
+
+	.title {
+
+	}
+
+	.description {
+
+	}
+}

sesame-vitejs/sesame/src/assets/styles/_17-china-achievements.scss

@@ -0,0 +1,12 @@
+#china_achievements {
+
+
+	.title {
+
+	}
+
+	.description {
+
+	}
+
+}

sesame-vitejs/sesame/src/components/CoverSection.vue

@@ -15,7 +15,7 @@
         </p>
         <div class="gradient-bg-yellow" />
         <div class="gradient-bg" />
-        <div class="computer-block" />
+        <div class="computer-block-item" />
         <div class="bubbles secondary-color">
           <p>Evolutive maintenance</p>
           <p>Front end (ux/ui) development</p>
@@ -70,6 +70,61 @@
           </p>
         </div>
       </section>
+
+
+      <section id="china">
+        <h2 class="title primary-color">
+          Our China-inspired ui in 4 pillars
+        </h2>
+        <p class="description secondary-color">
+          a quick and smooth consumer journey and never
+          <br>
+          ending shopping experience at the same time
+        </p>
+        <div class="line" />
+        <div class="block-items columns">
+          <div class="block-item column">
+            <div class="top block-item-1">
+              <p>
+                Content driven
+              </p>
+            </div>
+            <div class="bottom block-item-2">
+              - Rebound rate
+            </div>
+          </div>
+          <div class="block-item column">
+            <div class="top block-item-3">
+              <p>
+                Experimental
+              </p>
+            </div>
+            <div class="bottom block-item-4">
+              - Return rate
+            </div>
+          </div>
+          <div class="block-item column">
+            <div class="top block-item-5">
+              <p>
+                Interactive
+              </p>
+            </div>
+            <div class="bottom block-item-6">
+              +Conversion rate
+            </div>
+          </div>
+          <div class="block-item column">
+            <div class="top block-item-7">
+              <p>
+                Agile
+              </p>
+            </div>
+            <div class="bottom block-item-8">
+              + Retention rate
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </main>
 </template>

sesame-vitejs/sesame/src/components/DisabledSection.vue

@@ -34,50 +34,6 @@
 
 
 
-	<section id="china">
-		<h2 class="title primary-color">
-			Our China-inspired ui in 4 pillars
-		</h2>
-		<p class="description secondary-color">
-			a quick and smoth consumer journey and never ending shopping experience
-			at the same time
-		</p>
-		<div class="line"></div>
-		<div class="blocks">
-			<div class="block">
-				<div class="top block-1">
-					Content driven
-				</div>
-				<div class="bottom block-2">
-					-Rebound rate
-				</div>
-			</div>
-			<div class="block">
-				<div class="top block-3">
-					Experimental
-				</div>
-				<div class="bottom block-4">
-					-Return rate
-				</div>
-			</div>
-			<div class="block">
-				<div class="top block-5">
-					Interactive
-				</div>
-				<div class="bottom block-6">
-					+Conversion rate
-				</div>
-			</div>
-			<div class="block">
-				<div class="top block-7">
-					Agile
-				</div>
-				<div class="bottom block-8">
-					+Retention rate
-				</div>
-			</div>
-		</div>
-	</section>
 	<section id="we_develop">
 		<h2 class="title secondary-color">
 			We develop custom-made innovative e-commerce features based on your