From 157d5923a485a5b1afa90acdc18bdd9ee66d975b Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 1 Jun 2023 10:59:52 +0200 Subject: [PATCH] responsive kyc --- .../sesame/src/assets/styles/_11-carry.scss | 92 ++++++++++++++----- .../sesame/src/assets/styles/_12-kyc.scss | 32 ++++++- .../sesame/src/components/CoverSection.vue | 48 ++++++++++ .../sesame/src/components/DisabledSection.vue | 52 +---------- 4 files changed, 151 insertions(+), 73 deletions(-) diff --git a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss index 17cb1d0..110b5d5 100644 --- a/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss +++ b/sesame-vitejs/sesame/src/assets/styles/_11-carry.scss @@ -3,7 +3,7 @@ position: static; background: white; padding-top: 20vh; - min-height: 100vh; + min-height: 130rem; .title { margin-bottom: 46px; @@ -57,7 +57,7 @@ width: 350px; height: 451.56px; left: 70%; - top: 0; + top: -100rem; } &:nth-of-type(2) { @@ -65,7 +65,7 @@ width: 308px; height: 451.56px; left: 60%; - margin-top: -20vh; + top: -100rem; } &:nth-of-type(3) { @@ -76,38 +76,34 @@ margin-top: -9vh; z-index: 20; padding: 8rem 4rem; + top: -100rem; } &:nth-of-type(4) { - width: 315px; height: 285px; left: 16vw; - margin-top: -50vh; + top: -150rem; } } } + .gradient-bg, .gradient-bg-yellow { - position: absolute; + position: relative; width: 50vw; height: 58vh; left: 14vw; - top: 90vh; + top: 10em; background: radial-gradient(50% 50% at 50% 50%, #FFBA99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%); opacity: 0.5; transform: rotate(197.68deg); } .gradient-bg { - position: relative; - width: 50vw; - height: 58vh; - left: 22vw; - top: 98vh; + top: -30em; background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%); - opacity: 0.5; transform: rotate(-17.32deg); } @@ -117,24 +113,61 @@ width: 100%; height: 1080px; left: 0; - top: -4rem; + top: -102em; } } @media screen and (max-width: 1600px) { - #carry     { + section#carry { + + min-height: 200vh; + .description { margin-top: 3vh; font-size: 8rem; } + // + //.gradient-bg { + // top: 0; + // left: 15vw; + //} + + .computer-block { + margin-top: -50vh; + } + + .bubbles { + position: relative; + left: -5vw; + + p  { + &:nth-of-type(1) { + top: -75vh; + } + + &:nth-of-type(2) { + left: 70%; + } + + &:nth-of-type(3) { + left: 50%; + + } + + &:nth-of-type(4) { + left: 10%; + } + } + + } } } @media screen and (max-width: 1023px) { - #carry { + section#carry { padding-left: 10vw; padding-right: 10vw; - + min-height: 200vh ; .title { font-size: 4rem; @@ -154,11 +187,28 @@ .bubbles{ position: relative; left: -5vw; + p { + &:nth-of-type(1){ + left: 10%; + } + + &:nth-of-type(2){ + left: 70%; + } + + &:nth-of-type(3){ + left: 50%; + + } + &:nth-of-type(4){ + left: 10%; + } + } } - .gradient-bg{ - top: 19vh; - left:15vw; - } + //.gradient-bg{ + // top: 19vh; + // left:15vw; + //} } } diff --git a/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss b/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss index 0b797b7..8703975 100644 --- a/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss +++ b/sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss @@ -4,7 +4,7 @@ font-family: 'GT Walsheim Pro'; background: white; padding-top: 25vh; - min-height:200vh; + min-height:150vh; .text-content{ max-width: 37rem; @@ -31,8 +31,11 @@ margin-top: 250px; line-height: 110%; text-align: center; letter-spacing: -0.04em; - padding: 0 2rem; + padding: 0 10rem; text-align: center; + + width: 100%; + display: block; } .description{ font-weight: 500; @@ -166,3 +169,28 @@ margin-top: 250px; } } } + +@media screen and (max-width: 1300px) { + #kyc{ + .small-bubble:nth-of-type(1){ + margin-top:4rem; + + } + .bubbles{ + .bubble{ + position: static; + + &:nth-of-type(1){ + margin-left: 12rem; + } + &:nth-of-type(2){ + margin-left: 5rem; + } + &:nth-of-type(3){ + margin-left: 10rem; + margin-top: 0; + } + } + } + } +} diff --git a/sesame-vitejs/sesame/src/components/CoverSection.vue b/sesame-vitejs/sesame/src/components/CoverSection.vue index f82adda..a75b0b1 100644 --- a/sesame-vitejs/sesame/src/components/CoverSection.vue +++ b/sesame-vitejs/sesame/src/components/CoverSection.vue @@ -55,6 +55,54 @@

Consulting

+ + + +
+

+ We craft e-commerce Ux template based on qualitative and quantitative + studies +

+
+
+

+ We help you to know your customer needs +

+

+ With our method +

+ Show Sesame method +
+
+
+
+
+
+
+
+
+

+ + + to Prioritize development effort + +

+

+ + + to improve customer satisfaction + +

+

+ + to increase conversion rate + +

+
+
diff --git a/sesame-vitejs/sesame/src/components/DisabledSection.vue b/sesame-vitejs/sesame/src/components/DisabledSection.vue index eceb169..e6b9bc8 100644 --- a/sesame-vitejs/sesame/src/components/DisabledSection.vue +++ b/sesame-vitejs/sesame/src/components/DisabledSection.vue @@ -4,56 +4,6 @@ - - -
-

- We craft e-commerce Ux template based on qualitative and quantitative - studies -

-
-
-

- We help you to know your customer needs -

-

- With our method -

- Show Sesame method -
-
-
-
-
-
-
-
-
-

- - - to Prioritize development effort - -

-

- - - to improve customer satisfaction - -

-

- - - to increase conversion rate - -

-
-
- -

Our China-inspired ui in 4 pillars @@ -370,6 +320,8 @@

+ +