section carry and kyc

This commit is contained in:
Tykayn 2023-05-30 11:00:22 +02:00 committed by tykayn
parent a23d1df7cf
commit 821c87dc5d
6 changed files with 105 additions and 38 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

View File

@ -10,7 +10,7 @@ main {
section {
font-family: "GT Walsheim Pro", Arial;
height: 100vh;
min-height: 1300px;
min-height: 100vh;
width: 100vw;
h2 {

View File

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

View File

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

View File

@ -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){
}
}
}
}

View File

@ -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,6 +55,7 @@
</section>
<section id="kyc">
<div class="left-column">
<h2 class="title primary-color">
We help you to know your customer needs
</h2>
@ -65,11 +66,17 @@
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>
<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">