responsive kyc
This commit is contained in:
parent
dcd988f198
commit
157d5923a4
|
|
@ -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;
|
||||
//}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue