diff --git a/index.html b/index.html
index a577359..344f22b 100644
--- a/index.html
+++ b/index.html
@@ -105,7 +105,7 @@
-
+
-
+
diff --git a/repl/src/assets/styles/_debug.scss b/repl/src/assets/styles/_debug.scss
new file mode 100644
index 0000000..6f88185
--- /dev/null
+++ b/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;
+}
diff --git a/repl/src/assets/styles/coming_small_responsive.scss b/repl/src/assets/styles/coming_small_responsive.scss
index a1fa3ba..4eb39b2 100644
--- a/repl/src/assets/styles/coming_small_responsive.scss
+++ b/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 {
diff --git a/repl/src/assets/styles/main.scss b/repl/src/assets/styles/main.scss
index d9f10af..c8cfd1f 100644
--- a/repl/src/assets/styles/main.scss
+++ b/repl/src/assets/styles/main.scss
@@ -18,4 +18,5 @@ custom
@import "./responsive_small";
//@import "./coming_small_responsive";
@import "./responsive_big_screens";
+@import "./debug";
diff --git a/repl/src/assets/styles/responsive_small.scss b/repl/src/assets/styles/responsive_small.scss
index 419a779..4c3f668 100644
--- a/repl/src/assets/styles/responsive_small.scss
+++ b/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 {
- height: 132px;
+ #open {
+ 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,57 +81,220 @@ responsive land custom
#flipping_zone {
margin-top: 0;
position: static;
- }
- .flip-container {
- position: relative;
- .flip-handle {
- height: 10vh;
- }
+ .flip-container {
+ position: relative;
+ height: 1300px;
- + .flip-container {
- margin-top: 25rem !important;
- }
+ .flip-handle {
+ height: 10vh;
+ }
- .container-text {
- width: 100%;
- margin: 0;
- top: 0;
- }
+ + .flip-container {
+ margin-top: 0;
+ }
- .text-description {
- width: 100%;
- }
-
- .container-text {
- z-index: 1;
- left: 1rem;
- }
-
- .text-title {
- margin-top: 0;
- }
-
- .phone-container {
- left: 1rem;
- top: 2rem;
- }
-
- &.flip-from-left {
.container-text {
+ width: 100%;
+ margin: 0;
+ top: 0;
+ padding-left: 7vw;
+ min-height: 25rem;
+ }
+
+ .text-description {
+ width: 100%;
+ }
+
+ .container-text {
+ z-index: 1;
left: 1rem;
- margin-left: 0;
+ }
+
+ .text-title {
+ margin-top: 0;
}
.phone-container {
- left: 1rem;
- top: 2rem;
- margin: 0 auto;
- padding: 0;
+ margin: 2rem auto;
+ margin-left: auto;
+ position: static;
+ width: 335px;
+ margin-left: 9.5vw;
+ }
+
+ &.flip-from-left {
+ .container-text {
+ left: 1rem;
+ margin-left: 0;
+ }
+
+ .phone-container {
+ left: 1rem;
+ top: 2rem;
+ margin: 0 auto;
+ padding: 0;
+ }
}
}
}
+ #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;
+ }
+ }
+ }
+
+
}