add styles for small until we_develop section

index.html

@@ -105,7 +105,7 @@
 
 	<!--  flipping zones-->
 	<div id="flipping_zone">
-		<section id="content-2" class="flip-container flip-from-right">
+		<div 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">
@@ -124,9 +124,9 @@
 			<div class="phone-container">
 				<img src="/assets/img/phone_shoes_blue.png" alt="phone">
 			</div>
-		</section>
+		</div>
 
-		<section id="content-3" class="flip-container flip-from-left">
+		<div 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">
@@ -146,7 +146,7 @@
 			<div class="phone-container">
 				<img src="/assets/img/phone_glasses.png" alt="phone">
 			</div>
-		</section>
+		</div>
 
 		<section id="content-4" class="flip-container flip-from-right">
 			<div id="content-4-handle" class="flip-handle"></div>

repl/src/assets/styles/_debug.scss

@@ -0,0 +1,9 @@
+section, .flipping-zone {
+	border: solid 1px red;
+}
+.flip-handle{
+	border: solid 1px green;
+	width: 2rem;
+	background: greenyellow;
+	opacity: 0.5;
+}

repl/src/assets/styles/coming_small_responsive.scss

@@ -1,79 +1,8 @@
 @media all and (max-width: 600px) {
-  #transactionnal_webdesign {
-    .description {
-      font-size: 5rem !important;
-      padding-top: 4rem;
-    }
 
-    .sub-title {
-      font-weight: 600;
-      font-size: 5rem;
-    }
 
-    min-height: 160vh;
-  }
 
-  section#carry {
-    .description {
-      margin-top: 3vh;
-      font-size: 5rem;
-    }
 
-    .computer-block {
-      margin-top: 32vh;
-    }
-  }
-
-  #carry .bubbles p {
-    &:nth-of-type(1) {
-      left: -7%;
-      top: -93rem;
-    }
-
-    &:nth-of-type(2) {
-      left: 36%;
-      top: -112rem;
-    }
-
-    &:nth-of-type(3) {
-      left: -10vw;
-    }
-  }
-
-  #kyc {
-    .description2 {
-      font-size: 3rem;
-      padding: 0 1rem;
-    }
-
-    .title {
-      font-size: 5rem;
-      line-height: 1em;
-    }
-
-    .bubbles {
-      .bubble {
-        span {
-          margin-left: 0;
-        }
-
-        &:nth-of-type(2) {
-          margin-left: -2rem;
-        }
-      }
-
-      margin-top: -200vw;
-    }
-  }
-
-  #china {
-    height: 200vh;
-
-    .top {
-      font-size: 3rem;
-      margin-bottom: 1rem;
-    }
-  }
 
   #we_develop {
     .title {

repl/src/assets/styles/main.scss

@@ -18,4 +18,5 @@ custom
 @import "./responsive_small";
 //@import "./coming_small_responsive";
 @import "./responsive_big_screens";
+@import "./debug";
 

repl/src/assets/styles/responsive_small.scss

@@ -5,7 +5,6 @@ responsive land custom
 
 @media all and (max-width: 600px) {
 	main {
-
 		img {
 			max-width: 95vw;
 		}
@@ -22,7 +21,6 @@ responsive land custom
 	}
 
 	#cover {
-
 		.button {
 			top: 10rem;
 			width: 7rem;
@@ -36,13 +34,21 @@ responsive land custom
 		}
 	}
 
-	#unlock_white {
+	#open {
-		height: 132px;
+		img, #unlock, #unlock_white {
+			height: 120px;
 		}
+
+		#unlock_white {
+			margin-top: -34rem;
+		}
+	}
+
 	#transactionnal_webdesign .title,
 	#content_first,
 	#for_all_your {
 		font-size: 2rem;
+		margin-bottom: 1rem;
 	}
 	#content_all .text,
 	.container-text-md {
@@ -62,9 +68,8 @@ responsive land custom
 	}
 	#content-2 {
 		margin-top: 0;
+		padding-top: 0;
 	}
-
-
 	#popover {
 		margin-top: 132vw;
 	}
@@ -76,23 +81,26 @@ responsive land custom
 	#flipping_zone {
 		margin-top: 0;
 		position: static;
-	}
+
 
 		.flip-container {
 			position: relative;
+			height: 1300px;
 
 			.flip-handle {
 				height: 10vh;
 			}
 
 			+ .flip-container {
-			margin-top: 25rem !important;
+				margin-top: 0;
 			}
 
 			.container-text {
 				width: 100%;
 				margin: 0;
 				top: 0;
+				padding-left: 7vw;
+				min-height: 25rem;
 			}
 
 			.text-description {
@@ -109,8 +117,11 @@ responsive land custom
 			}
 
 			.phone-container {
-			left: 1rem;
+				margin: 2rem auto;
-			top: 2rem;
+				margin-left: auto;
+				position: static;
+				width: 335px;
+				margin-left: 9.5vw;
 			}
 
 			&.flip-from-left {
@@ -127,6 +138,163 @@ responsive land custom
 				}
 			}
 		}
+	}
+	#popover, #portfolio {
+		margin-top: 0;
+		height: 1500px;
+	}
+	.slider-screen {
+		.phone-container {
+			left: 2vw;
+			width: 95vw;
+		}
+
+		.text {
+			left: 7vw;
+			position: relative;
+			text-align: left;
+			top: 19rem;
+			width: 90vw;
+		}
+	}
+	#transactionnal_webdesign {
+		min-height: 1600px;
+
+		.columns {
+			max-width: 85vw;
+		}
+
+		.description {
+			font-size: 5rem !important;
+			padding-top: 4rem;
+		}
+
+		.sub-title {
+			font-weight: 600;
+			font-size: 5rem;
+			text-shadow: 0 0 1rem #333;
+			line-height: 4rem;
+			letter-spacing: 0;
+		}
+
+		.second {
+			text-shadow: 0 0 1rem #fff;
+		}
+
+	}
+
+
+	#carry {
+		.description {
+			margin-top: 3vh;
+			font-size: 5rem;
+			text-shadow: 0 0 1rem #ccc;
+		}
+
+		.computer-block {
+			margin-top: -11rem;
+			width: 97vw;
+		}
+
+		.bubbles {
+			margin-top: 0;
+
+			p {
+				&:nth-of-type(1) {
+					left: -19%;
+					top: -89rem;
+				}
+
+				&:nth-of-type(2) {
+					left: 36%;
+					top: -112rem;
+				}
+
+				&:nth-of-type(3) {
+					left: -10vw;
+				}
+
+				&:nth-of-type(4) {
+					height: 322px;
+				}
+			}
+		}
+
+		.gradient-bg {
+			width: 96vw;
+			height: 58vh;
+			left: 0;
+			top: -41rem;
+		}
+
+		.gradient-bg-yellow {
+			width: 96vw;
+			height: 58vh;
+			left: 0;
+			top: -10rem;
+		}
+	}
+
+
+	#kyc {
+		.description2 {
+			font-size: 3rem;
+			padding: 0 1rem;
+		}
+
+		.title {
+			font-size: 5rem;
+			line-height: 1em;
+		}
+
+		.bubbles {
+			.bubble {
+				span {
+					margin-left: 0;
+				}
+
+				&:nth-of-type(1) {
+					left: 1rem;
+					top: -7rem;
+				}
+
+				&:nth-of-type(2) {
+					margin-left: -6rem;
+				}
+
+				&:nth-of-type(3) {
+					left: 0;
+					top: 0;
+				}
+			}
+
+			margin-top: -200vw;
+		}
+	}
+
+
+	#china {
+		height: 90rem;
+		padding: 1rem;
+
+		.top {
+			font-size: 3rem;
+			margin-bottom: 1rem;
+		}
+
+		.cols {
+			.columns {
+				text-align: center;
+				display: block;
+				padding: 0px;
+				padding-right: 0px;
+				margin-top: 1rem;
+				padding-right: 1rem;
+			}
+		}
+	}
+
+
 }