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;
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;
//}
}
}

View File

@ -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;
}
}
}
}
}

View File

@ -55,6 +55,54 @@
<p>Consulting</p>
</div>
</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>
</main>
</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">
<h2 class="title primary-color">
Our China-inspired ui in 4 pillars
@ -370,6 +320,8 @@
</h2>
</section>
</template>
<script>