section carry and kyc
This commit is contained in:
parent
a23d1df7cf
commit
821c87dc5d
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
|
|
@ -10,7 +10,7 @@ main {
|
|||
section {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
height: 100vh;
|
||||
min-height: 1300px;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
#transactionnal_webdesign {
|
||||
padding-top: 363px;
|
||||
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
|
||||
background-size: cover ;
|
||||
background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
|
||||
background-size: cover;
|
||||
font-family: "GT Walsheim Pro";
|
||||
color: #00001f;
|
||||
padding-top: 380px;
|
||||
|
||||
.columns {
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 1680px;
|
||||
height: 109px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
font-size: 3rem;
|
||||
line-height: 95%;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2em;
|
||||
|
|
@ -25,34 +29,33 @@
|
|||
|
||||
.description {
|
||||
color: rgba(231, 112, 100, 0.8);
|
||||
font-weight: 600;
|
||||
font-size: 270px;
|
||||
font-weight: 500;
|
||||
font-size: 16rem;
|
||||
line-height: 65%;
|
||||
backdrop-filter: blur(5px);
|
||||
margin-bottom:140px;
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
|
||||
.color-emphasis {
|
||||
color: #1e33da;
|
||||
}
|
||||
|
||||
.sub-title{
|
||||
.sub-title {
|
||||
font-weight: 600;
|
||||
font-size: 100px;
|
||||
font-size: 7rem;
|
||||
line-height: 90px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.columns {
|
||||
text-align:left;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
.second{
|
||||
|
||||
|
||||
.second {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
#carry {
|
||||
position: relative;
|
||||
background:white;
|
||||
padding-top: 20vh;
|
||||
|
||||
.title {
|
||||
margin-bottom: 46px;
|
||||
|
||||
|
|
@ -44,10 +46,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
color: #E77064;
|
||||
&:nth-of-type(0){
|
||||
position: absolute;
|
||||
position: relative;
|
||||
width: 315px;
|
||||
height: 285px;
|
||||
left: 92px;
|
||||
|
|
@ -90,10 +90,10 @@
|
|||
}
|
||||
.computer-block {
|
||||
background: url('img/Macbook_color 1.png') no-repeat;
|
||||
position: absolute;
|
||||
width: 1920px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
left: -61px;
|
||||
top: 329px;
|
||||
left: 23%;
|
||||
top: -4rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,70 @@
|
|||
#kyc{
|
||||
background: white;
|
||||
padding-top: 25vh;
|
||||
|
||||
.left-column{
|
||||
width: 25vw;
|
||||
}
|
||||
.title{
|
||||
margin-top: 250px;
|
||||
font-weight: 600;
|
||||
font-size: 100px;
|
||||
line-height: 90px;
|
||||
|
||||
/* or 90% */
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.description{
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
|
||||
/* identical to box height, or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.button{
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
backdrop-filter: blur(3px);
|
||||
background: linear-gradient(329.49deg,
|
||||
rgba(255, 216, 244, 0) 34.06%,
|
||||
rgba(255, 207, 242, 0.2) 77.26%);
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-style: normal;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 16vh;
|
||||
width: 150px;
|
||||
color: #020225;
|
||||
}
|
||||
.color-emphasis {
|
||||
color: #1E33DA;
|
||||
}
|
||||
|
||||
.fat-text{
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 35px;
|
||||
text-transform: uppercase;
|
||||
color: #FFFDFC;
|
||||
}
|
||||
.bubbles{
|
||||
.bubble{
|
||||
position: relative;
|
||||
&:nth-of-type(0){
|
||||
left: 694px;
|
||||
top: 1240px;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block" />
|
||||
<div class="bubbles">
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
<p>Web App (pwa) development</p>
|
||||
|
|
@ -55,21 +55,28 @@
|
|||
</section>
|
||||
|
||||
<section id="kyc">
|
||||
<h2 class="title primary-color">
|
||||
We help you to know your customer needs
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
With our method
|
||||
</p>
|
||||
<a
|
||||
href="#kyc"
|
||||
class="button"
|
||||
> Show Sesame method </a>
|
||||
|
||||
<div class="bubbles">
|
||||
<p>to Prioritize development effort</p>
|
||||
<p>to improve customer satisfaction</p>
|
||||
<p>to increase conversion rate</p>
|
||||
<div class="left-column">
|
||||
<h2 class="title primary-color">
|
||||
We help you to know your customer needs
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
With our method
|
||||
</p>
|
||||
<a
|
||||
href="#kyc"
|
||||
class="button"
|
||||
> Show Sesame method </a>
|
||||
</div>
|
||||
<div class="bubbles secondary-color fat-text">
|
||||
<p class="bubble">
|
||||
to Prioritize development effort
|
||||
</p>
|
||||
<p class="bubble">
|
||||
to improve customer satisfaction
|
||||
</p>
|
||||
<p class="bubble">
|
||||
to increase conversion rate
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="china">
|
||||
|
|
|
|||
Loading…
Reference in New Issue