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