responsive kyc

This commit is contained in:
Tykayn 2023-06-01 10:59:52 +02:00 committed by tykayn
parent dcd988f198
commit 157d5923a4
4 changed files with 151 additions and 73 deletions

View File

@ -3,7 +3,7 @@
position: static; position: static;
background: white; background: white;
padding-top: 20vh; padding-top: 20vh;
min-height: 100vh; min-height: 130rem;
.title { .title {
margin-bottom: 46px; margin-bottom: 46px;
@ -57,7 +57,7 @@
width: 350px; width: 350px;
height: 451.56px; height: 451.56px;
left: 70%; left: 70%;
top: 0; top: -100rem;
} }
&:nth-of-type(2) { &:nth-of-type(2) {
@ -65,7 +65,7 @@
width: 308px; width: 308px;
height: 451.56px; height: 451.56px;
left: 60%; left: 60%;
margin-top: -20vh; top: -100rem;
} }
&:nth-of-type(3) { &:nth-of-type(3) {
@ -76,38 +76,34 @@
margin-top: -9vh; margin-top: -9vh;
z-index: 20; z-index: 20;
padding: 8rem 4rem; padding: 8rem 4rem;
top: -100rem;
} }
&:nth-of-type(4) { &:nth-of-type(4) {
width: 315px; width: 315px;
height: 285px; height: 285px;
left: 16vw; left: 16vw;
margin-top: -50vh; top: -150rem;
} }
} }
} }
.gradient-bg,
.gradient-bg-yellow { .gradient-bg-yellow {
position: absolute; position: relative;
width: 50vw; width: 50vw;
height: 58vh; height: 58vh;
left: 14vw; 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%); 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; opacity: 0.5;
transform: rotate(197.68deg); transform: rotate(197.68deg);
} }
.gradient-bg { .gradient-bg {
position: relative; top: -30em;
width: 50vw;
height: 58vh;
left: 22vw;
top: 98vh;
background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%); 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); transform: rotate(-17.32deg);
} }
@ -117,24 +113,61 @@
width: 100%; width: 100%;
height: 1080px; height: 1080px;
left: 0; left: 0;
top: -4rem; top: -102em;
} }
} }
@media screen and (max-width: 1600px) { @media screen and (max-width: 1600px) {
#carry     { section#carry {
min-height: 200vh;
.description { .description {
margin-top: 3vh; margin-top: 3vh;
font-size: 8rem; 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) { @media screen and (max-width: 1023px) {
#carry { section#carry {
padding-left: 10vw; padding-left: 10vw;
padding-right: 10vw; padding-right: 10vw;
min-height: 200vh ;
.title { .title {
font-size: 4rem; font-size: 4rem;
@ -154,11 +187,28 @@
.bubbles{ .bubbles{
position: relative; position: relative;
left: -5vw; left: -5vw;
p {
&:nth-of-type(1){
left: 10%;
} }
.gradient-bg{
top: 19vh; &:nth-of-type(2){
left:15vw; left: 70%;
} }
&:nth-of-type(3){
left: 50%;
}
&:nth-of-type(4){
left: 10%;
}
}
}
//.gradient-bg{
// top: 19vh;
// left:15vw;
//}
} }
} }

View File

@ -4,7 +4,7 @@
font-family: 'GT Walsheim Pro'; font-family: 'GT Walsheim Pro';
background: white; background: white;
padding-top: 25vh; padding-top: 25vh;
min-height:200vh; min-height:150vh;
.text-content{ .text-content{
max-width: 37rem; max-width: 37rem;
@ -31,8 +31,11 @@ margin-top: 250px;
line-height: 110%; line-height: 110%;
text-align: center; text-align: center;
letter-spacing: -0.04em; letter-spacing: -0.04em;
padding: 0 2rem; padding: 0 10rem;
text-align: center; text-align: center;
width: 100%;
display: block;
} }
.description{ .description{
font-weight: 500; 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;
}
}
}
}
}

View File

@ -55,6 +55,54 @@
<p>Consulting</p> <p>Consulting</p>
</div> </div>
</section> </section>
<!-- responsive managed until here -->
<section id="kyc">
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
<div class="columns">
<div class="column left-column">
<h2 class="title primary-color text-content">
We help you to know your customer needs
</h2>
<p class="description secondary-color text-content">
With our method
</p>
<a
href="#kyc"
class="button text-content"
> Show Sesame method </a>
</div>
<div class="column" />
</div>
<div class="bubbles secondary-color fat-text">
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<p class="bubble">
<span>
to Prioritize development effort
</span>
</p>
<p class="bubble">
<span>
to improve customer satisfaction
</span>
</p>
<p class="bubble">
<span>
to increase conversion rate
</span>
</p>
</div>
</section>
</div> </div>
</main> </main>
</template> </template>

View File

@ -4,56 +4,6 @@
<section id="kyc">
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
<div class="columns">
<div class="column left-column">
<h2 class="title primary-color text-content">
We help you to know your customer needs
</h2>
<p class="description secondary-color text-content">
With our method
</p>
<a
href="#kyc"
class="button text-content"
> Show Sesame method </a>
</div>
<div class="column" />
</div>
<div class="bubbles secondary-color fat-text">
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<p class="bubble">
<span>
to Prioritize development effort
</span>
</p>
<p class="bubble">
<span>
to improve customer satisfaction
</span>
</p>
<p class="bubble">
<span>
to increase conversion rate
</span>
</p>
</div>
</section>
<section id="china"> <section id="china">
<h2 class="title primary-color"> <h2 class="title primary-color">
Our China-inspired ui in 4 pillars Our China-inspired ui in 4 pillars
@ -370,6 +320,8 @@
</h2> </h2>
</section> </section>
</template> </template>
<script> <script>