display all new sections
This commit is contained in:
parent
d52a991dad
commit
3ef047c603
@ -13,6 +13,7 @@
|
|||||||
.left-column {
|
.left-column {
|
||||||
padding-left: 5vw;
|
padding-left: 5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-top: 250px;
|
margin-top: 250px;
|
||||||
|
|
||||||
@ -24,6 +25,7 @@ margin-top: 250px;
|
|||||||
/* or 90% */
|
/* or 90% */
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description2 {
|
.description2 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
@ -36,12 +38,14 @@ margin-top: 250px;
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
line-height: 110%;
|
line-height: 110%;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
@ -62,6 +66,7 @@ margin-top: 250px;
|
|||||||
color: #020225;
|
color: #020225;
|
||||||
border-color: $secondary-color;
|
border-color: $secondary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-emphasis {
|
.color-emphasis {
|
||||||
color: #1E33DA;
|
color: #1E33DA;
|
||||||
}
|
}
|
||||||
@ -74,29 +79,35 @@ margin-top: 250px;
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #FFFDFC;
|
color: #FFFDFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubbles {
|
.bubbles {
|
||||||
|
margin-top: -60vw;
|
||||||
.bubble {
|
.bubble {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
float: left;
|
float: left;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
height: 23rem;
|
height: 23rem;
|
||||||
left: 46rem;
|
left: 46rem;
|
||||||
top: -34rem;
|
top: -34rem;
|
||||||
background: url('img/bubble_1.png') no-repeat;
|
background: url('img/bubble_1.png') no-repeat;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
padding: 6rem 2.5rem;
|
padding: 6rem 2.5rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
background: url('img/bubble_2.png') no-repeat;
|
background: url('img/bubble_2.png') no-repeat;
|
||||||
left: 34vw;
|
left: 34vw;
|
||||||
@ -104,11 +115,13 @@ margin-top: 250px;
|
|||||||
width: 35rem;
|
width: 35rem;
|
||||||
height: 35rem;
|
height: 35rem;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: 13rem;
|
margin-top: 13rem;
|
||||||
margin-left: 5rem;
|
margin-left: 5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3) {
|
&:nth-of-type(3) {
|
||||||
background: url('img/bubble_3.png') no-repeat;
|
background: url('img/bubble_3.png') no-repeat;
|
||||||
left: -27vw;
|
left: -27vw;
|
||||||
@ -116,6 +129,7 @@ margin-top: 250px;
|
|||||||
width: 27rem;
|
width: 27rem;
|
||||||
height: 35rem;
|
height: 35rem;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-top: 10rem;
|
margin-top: 10rem;
|
||||||
margin-left: 5rem;
|
margin-left: 5rem;
|
||||||
@ -124,12 +138,11 @@ margin-top: 250px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-bubble {
|
.small-bubble {
|
||||||
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center;
|
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
position: absolute;
|
position: relative;
|
||||||
//width: 50rem;
|
|
||||||
//height: 50rem;
|
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
@ -139,6 +152,7 @@ margin-top: 250px;
|
|||||||
left: 316px;
|
left: 316px;
|
||||||
top: 400px;
|
top: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
width: 203px;
|
width: 203px;
|
||||||
@ -146,6 +160,7 @@ margin-top: 250px;
|
|||||||
left: 1343px;
|
left: 1343px;
|
||||||
top: 422px;
|
top: 422px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3) {
|
&:nth-of-type(3) {
|
||||||
filter: blur(5px);
|
filter: blur(5px);
|
||||||
width: 141px;
|
width: 141px;
|
||||||
@ -153,6 +168,7 @@ margin-top: 250px;
|
|||||||
left: 865px;
|
left: 865px;
|
||||||
top: 918px;
|
top: 918px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(4) {
|
&:nth-of-type(4) {
|
||||||
filter: blur(1px);
|
filter: blur(1px);
|
||||||
width: 77px;
|
width: 77px;
|
||||||
@ -160,11 +176,12 @@ margin-top: 250px;
|
|||||||
left: 490px;
|
left: 490px;
|
||||||
top: 1129px;
|
top: 1129px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(5) {
|
&:nth-of-type(5) {
|
||||||
width: 288px;
|
width: 288px;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
left: 1124px;
|
left: 1124px;
|
||||||
top: 1382px;
|
top: 10vhpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -175,6 +192,7 @@ margin-top: 250px;
|
|||||||
margin-top: 14rem;
|
margin-top: 14rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubbles {
|
.bubbles {
|
||||||
.bubble {
|
.bubble {
|
||||||
position: static;
|
position: static;
|
||||||
@ -182,9 +200,11 @@ margin-top: 250px;
|
|||||||
&:nth-of-type(1) {
|
&:nth-of-type(1) {
|
||||||
margin-left: 12rem;
|
margin-left: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
margin-left: 5rem;
|
margin-left: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(3) {
|
&:nth-of-type(3) {
|
||||||
margin-left: 34%;
|
margin-left: 34%;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|||||||
@ -7,7 +7,6 @@
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: -14rem;
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
padding-top: 26rem;
|
padding-top: 26rem;
|
||||||
|
|||||||
@ -6,6 +6,101 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
<!-- sprint 4 content-->
|
<!-- 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">
|
<div id="sprint_4">
|
||||||
<section id="china">
|
<section id="china">
|
||||||
<h2 class="title primary-color">
|
<h2 class="title primary-color">
|
||||||
|
|||||||
@ -1,98 +1,5 @@
|
|||||||
<template>
|
<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