display all new sections
This commit is contained in:
parent
d52a991dad
commit
3ef047c603
@ -1,20 +1,21 @@
|
||||
#kyc{
|
||||
#kyc {
|
||||
|
||||
font-family: 'GT Walsheim Pro';
|
||||
background: white;
|
||||
padding-top: 25vh;
|
||||
min-height:150vh;
|
||||
min-height: 150vh;
|
||||
|
||||
.text-content{
|
||||
.text-content {
|
||||
max-width: 37rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left-column{
|
||||
.left-column {
|
||||
padding-left: 5vw;
|
||||
}
|
||||
.title{
|
||||
margin-top: 250px;
|
||||
|
||||
.title {
|
||||
margin-top: 250px;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
@ -24,7 +25,8 @@ margin-top: 250px;
|
||||
/* or 90% */
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.description2{
|
||||
|
||||
.description2 {
|
||||
font-weight: 500;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
@ -36,13 +38,15 @@ margin-top: 250px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.description{
|
||||
|
||||
.description {
|
||||
font-weight: 500;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.button{
|
||||
|
||||
.button {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
@ -58,15 +62,16 @@ margin-top: 250px;
|
||||
right: 0;
|
||||
top: 2rem;
|
||||
min-width: 15rem;
|
||||
float:left;
|
||||
float: left;
|
||||
color: #020225;
|
||||
border-color: $secondary-color;
|
||||
}
|
||||
|
||||
.color-emphasis {
|
||||
color: #1E33DA;
|
||||
}
|
||||
|
||||
.fat-text{
|
||||
.fat-text {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
@ -74,49 +79,58 @@ margin-top: 250px;
|
||||
text-transform: uppercase;
|
||||
color: #FFFDFC;
|
||||
}
|
||||
.bubbles{
|
||||
.bubble{
|
||||
|
||||
.bubbles {
|
||||
margin-top: -60vw;
|
||||
.bubble {
|
||||
position: relative;
|
||||
|
||||
text-align: left;
|
||||
float: left;
|
||||
span{
|
||||
|
||||
span {
|
||||
margin-left: 2rem;
|
||||
float:left;
|
||||
float: left;
|
||||
width: 20rem;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
|
||||
&:nth-of-type(1) {
|
||||
width: 25rem;
|
||||
height: 23rem;
|
||||
left: 46rem;
|
||||
top: -34rem;
|
||||
background: url('img/bubble_1.png') no-repeat;
|
||||
span{
|
||||
padding: 6rem 2.5rem;
|
||||
|
||||
span {
|
||||
padding: 6rem 2.5rem;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: url('img/bubble_2.png') no-repeat;
|
||||
left: 34vw;
|
||||
top: -15rem;
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
background-size: contain;
|
||||
span{
|
||||
|
||||
span {
|
||||
margin-top: 13rem;
|
||||
margin-left: 5rem;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
|
||||
&:nth-of-type(3) {
|
||||
background: url('img/bubble_3.png') no-repeat;
|
||||
left: -27vw;
|
||||
top: 8rem;
|
||||
width: 27rem;
|
||||
height: 35rem;
|
||||
background-size: contain;
|
||||
span{
|
||||
|
||||
span {
|
||||
margin-top: 10rem;
|
||||
margin-left: 5rem;
|
||||
width: 15rem;
|
||||
@ -124,68 +138,74 @@ margin-top: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.small-bubble{
|
||||
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center ;
|
||||
|
||||
.small-bubble {
|
||||
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
//width: 50rem;
|
||||
//height: 50rem;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
|
||||
&:nth-of-type(1){
|
||||
&:nth-of-type(1) {
|
||||
filter: blur(6.5px);
|
||||
width: 137px;
|
||||
height: 176px;
|
||||
left: 316px;
|
||||
top: 400px;
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
|
||||
&:nth-of-type(2) {
|
||||
filter: blur(2px);
|
||||
width: 203px;
|
||||
height: 253.75px;
|
||||
left: 1343px;
|
||||
top: 422px;
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
|
||||
&:nth-of-type(3) {
|
||||
filter: blur(5px);
|
||||
width: 141px;
|
||||
height: 176px;
|
||||
left: 865px;
|
||||
top: 918px;
|
||||
}
|
||||
&:nth-of-type(4){
|
||||
|
||||
&:nth-of-type(4) {
|
||||
filter: blur(1px);
|
||||
width: 77px;
|
||||
height: 96px;
|
||||
left: 490px;
|
||||
top: 1129px;
|
||||
}
|
||||
&:nth-of-type(5){
|
||||
|
||||
&:nth-of-type(5) {
|
||||
width: 288px;
|
||||
height: 360px;
|
||||
left: 1124px;
|
||||
top: 1382px;
|
||||
top: 10vhpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
#kyc{
|
||||
.small-bubble:nth-of-type(1){
|
||||
#kyc {
|
||||
.small-bubble:nth-of-type(1) {
|
||||
margin-top: 14rem;
|
||||
|
||||
}
|
||||
.bubbles{
|
||||
.bubble{
|
||||
|
||||
.bubbles {
|
||||
.bubble {
|
||||
position: static;
|
||||
|
||||
&:nth-of-type(1){
|
||||
&:nth-of-type(1) {
|
||||
margin-left: 12rem;
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
|
||||
&:nth-of-type(2) {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
&:nth-of-type(3){
|
||||
|
||||
&:nth-of-type(3) {
|
||||
margin-left: 34%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
background-color: #fff;
|
||||
|
||||
text-align: center;
|
||||
margin-top: -14rem;
|
||||
|
||||
.title {
|
||||
padding-top: 26rem;
|
||||
|
||||
@ -6,6 +6,101 @@
|
||||
<template>
|
||||
<main class="has-text-centered">
|
||||
<!-- sprint 4 content-->
|
||||
|
||||
|
||||
<section
|
||||
id="transactionnal_webdesign"
|
||||
class="has-text-centerd"
|
||||
>
|
||||
<h2 class="title">
|
||||
Transactional
|
||||
</h2>
|
||||
<div class="description has-text-centered">
|
||||
Webdesign
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column first">
|
||||
<h3 class="sub-title">
|
||||
For all your
|
||||
<br>
|
||||
<span class="color-emphasis"> digital</span> uses.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="column second">
|
||||
Our creative competitive edge <br>
|
||||
<br>
|
||||
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||
We power transactional content with our technology. Our content is
|
||||
transactional and generate online sales. We produce multi-purpose
|
||||
content at scale for all touchpoints to reduce costs.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carry">
|
||||
<h2 class="title color-emphasis">
|
||||
We carry out web design and development
|
||||
</h2>
|
||||
<p class="description">
|
||||
in headless
|
||||
<br>
|
||||
commerce.
|
||||
</p>
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block" />
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
<p>Web App (pwa) development</p>
|
||||
<p>Consulting</p>
|
||||
</div>
|
||||
</section>
|
||||
<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 id="sprint_4">
|
||||
<section id="china">
|
||||
<h2 class="title primary-color">
|
||||
|
||||
@ -1,98 +1,5 @@
|
||||
<template>
|
||||
|
||||
<section
|
||||
id="transactionnal_webdesign"
|
||||
class="has-text-centerd"
|
||||
>
|
||||
<h2 class="title">
|
||||
Transactional
|
||||
</h2>
|
||||
<div class="description has-text-centered">
|
||||
Webdesign
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column first">
|
||||
<h3 class="sub-title">
|
||||
For all your
|
||||
<br>
|
||||
<span class="color-emphasis"> digital</span> uses.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="column second">
|
||||
Our creative competitive edge <br>
|
||||
<br>
|
||||
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||
We power transactional content with our technology. Our content is
|
||||
transactional and generate online sales. We produce multi-purpose
|
||||
content at scale for all touchpoints to reduce costs.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="carry">
|
||||
<h2 class="title color-emphasis">
|
||||
We carry out web design and development
|
||||
</h2>
|
||||
<p class="description">
|
||||
in headless
|
||||
<br>
|
||||
commerce.
|
||||
</p>
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block" />
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
<p>Web App (pwa) development</p>
|
||||
<p>Consulting</p>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user