style sections, global colors vars
This commit is contained in:
parent
eab080d599
commit
a23d1df7cf
BIN
sesame-vitejs/sesame/img/baozun.jpg
Normal file
BIN
sesame-vitejs/sesame/img/baozun.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
@ -1,35 +0,0 @@
|
|||||||
/******** all sections *********/
|
|
||||||
body {
|
|
||||||
background: #020225;
|
|
||||||
padding-bottom: 50vh;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
main section {
|
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
|
||||||
height: 1300px;
|
|
||||||
min-height: 1300px;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
main section h2 {
|
|
||||||
color: #fffdfc;
|
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
|
||||||
font-size: 60px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
|
|
||||||
/* or 66px */
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
/* Secondary 100 */
|
|
||||||
line-height: 110%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.credits {
|
|
||||||
margin-top: 10vh;
|
|
||||||
}
|
|
||||||
52
sesame-vitejs/sesame/src/assets/styles/0-general.scss
Normal file
52
sesame-vitejs/sesame/src/assets/styles/0-general.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/******** all sections *********/
|
||||||
|
body {
|
||||||
|
background: #020225;
|
||||||
|
padding-bottom: 50vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
section {
|
||||||
|
font-family: "GT Walsheim Pro", Arial;
|
||||||
|
height: 100vh;
|
||||||
|
min-height: 1300px;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #fffdfc;
|
||||||
|
|
||||||
|
font-size: 60px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits {
|
||||||
|
margin-top: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
#sprint_4 {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-color{
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
.secondary-color{
|
||||||
|
color: $secondary-color;
|
||||||
|
}
|
||||||
|
.dark-color{
|
||||||
|
color: $dark-color;
|
||||||
|
}
|
||||||
@ -1,13 +1,14 @@
|
|||||||
#transactionnal_webdesign {
|
#transactionnal_webdesign {
|
||||||
padding-top: 363px;
|
padding-top: 363px;
|
||||||
background: url('');
|
|
||||||
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
|
||||||
|
background-size: cover ;
|
||||||
font-family: "GT Walsheim Pro";
|
font-family: "GT Walsheim Pro";
|
||||||
color: #00001f;
|
color: #00001f;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 1680px;
|
width: 1680px;
|
||||||
height: 109px;
|
height: 109px;
|
||||||
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
@ -16,7 +17,6 @@
|
|||||||
letter-spacing: 0.2em;
|
letter-spacing: 0.2em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #fffdfc;
|
color: #fffdfc;
|
||||||
|
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
flex: none;
|
flex: none;
|
||||||
order: 0;
|
order: 0;
|
||||||
@ -25,14 +25,34 @@
|
|||||||
|
|
||||||
.description {
|
.description {
|
||||||
color: rgba(231, 112, 100, 0.8);
|
color: rgba(231, 112, 100, 0.8);
|
||||||
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 270px;
|
font-size: 270px;
|
||||||
line-height: 65%;
|
line-height: 65%;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
|
margin-bottom:140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-emphasis {
|
.color-emphasis {
|
||||||
color: #1e33da;
|
color: #1e33da;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sub-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 100px;
|
||||||
|
line-height: 90px;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns {
|
||||||
|
text-align:left;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.second{
|
||||||
|
|
||||||
|
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 130%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
sesame-vitejs/sesame/src/assets/styles/_0-variables.scss
Normal file
3
sesame-vitejs/sesame/src/assets/styles/_0-variables.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$primary-color: #1E33DA;
|
||||||
|
$secondary-color: #E77064;
|
||||||
|
$dark-color: #020225;;
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
|
||||||
|
|
||||||
|
#carry {
|
||||||
|
position: relative;
|
||||||
|
background:white;
|
||||||
|
.title {
|
||||||
|
margin-bottom: 46px;
|
||||||
|
|
||||||
|
font-size: 60px;
|
||||||
|
line-height: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-top: 270px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 270px;
|
||||||
|
line-height: 65%;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.06em;
|
||||||
|
color: rgba(30, 51, 218, 0.15);
|
||||||
|
}
|
||||||
|
.description2{
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 60px;
|
||||||
|
line-height: 110%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-emphasis {
|
||||||
|
color: #1e33da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubbles {
|
||||||
|
p{
|
||||||
|
position: relative;
|
||||||
|
padding: 4em;
|
||||||
|
background: url('img/Ellipse 777.2.png') no-repeat;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 130%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: #E77064;
|
||||||
|
&:nth-of-type(0){
|
||||||
|
position: absolute;
|
||||||
|
width: 315px;
|
||||||
|
height: 285px;
|
||||||
|
left: 92px;
|
||||||
|
top: 814px;
|
||||||
|
}
|
||||||
|
&:nth-of-type(1){
|
||||||
|
width: 453px;
|
||||||
|
height: 451.56px;
|
||||||
|
left: 710px;
|
||||||
|
top: 974px;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2){
|
||||||
|
width: 453px;
|
||||||
|
height: 451.56px;
|
||||||
|
left: 710px;
|
||||||
|
top: 974px;
|
||||||
|
}
|
||||||
|
&:nth-of-type(3){
|
||||||
|
width: 315px;
|
||||||
|
height: 314px;
|
||||||
|
left: 1329px;
|
||||||
|
top: 561px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg{
|
||||||
|
position: absolute;
|
||||||
|
width: 1189.9px;
|
||||||
|
height: 644.02px;
|
||||||
|
left: 182.69px;
|
||||||
|
top: 1088.73px;
|
||||||
|
|
||||||
|
/* Gradient/radial_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);
|
||||||
|
}
|
||||||
|
.computer-block {
|
||||||
|
background: url('img/Macbook_color 1.png') no-repeat;
|
||||||
|
position: absolute;
|
||||||
|
width: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
left: -61px;
|
||||||
|
top: 329px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
#kyc{
|
||||||
|
background: white;
|
||||||
|
|
||||||
|
.title{
|
||||||
|
margin-top: 250px;
|
||||||
|
}
|
||||||
|
.description{
|
||||||
|
|
||||||
|
}
|
||||||
|
.color-emphasis {
|
||||||
|
color: #1E33DA;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
#cina{
|
||||||
|
.title{
|
||||||
|
|
||||||
|
}
|
||||||
|
.description{
|
||||||
|
|
||||||
|
}
|
||||||
|
.color-emphasis {
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
#baozun_group{
|
||||||
|
margin-top: 150px;
|
||||||
|
background: url('img/baozun.jpg')no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
.title{
|
||||||
|
color:#FFFDFC;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 100px;
|
||||||
|
line-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
padding-top: 464px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -9,7 +9,8 @@ libs
|
|||||||
/**
|
/**
|
||||||
custom
|
custom
|
||||||
*/
|
*/
|
||||||
@import "./0-general.css";
|
@import "./0-variables.scss";
|
||||||
|
@import "0-general";
|
||||||
@import "./0-1-nav.css";
|
@import "./0-1-nav.css";
|
||||||
@import "./1-cover.css";
|
@import "./1-cover.css";
|
||||||
@import "./1-2-main_title.css";
|
@import "./1-2-main_title.css";
|
||||||
|
|||||||
@ -3,308 +3,269 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
<!-- sprint 4 content-->
|
<!-- sprint 4 content-->
|
||||||
<section
|
<div id="sprint_4">
|
||||||
id="transactionnal_webdesign"
|
<section
|
||||||
class="has-text-centerd"
|
id="transactionnal_webdesign"
|
||||||
>
|
class="has-text-centerd"
|
||||||
<h2 class="title">
|
>
|
||||||
Transactional
|
<h2 class="title">
|
||||||
</h2>
|
Transactional
|
||||||
<p class="description">
|
</h2>
|
||||||
Webdesign
|
<div class="description has-text-centered">
|
||||||
</p>
|
Webdesign
|
||||||
<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>
|
||||||
<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="color-emphasis">
|
|
||||||
We carry out web design and development
|
|
||||||
</h2>
|
|
||||||
<p class="description">
|
|
||||||
in headless commerce.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="bubbles">
|
|
||||||
<p>Evolutive maintenance</p>
|
|
||||||
<p>Front end (ux/ui) development</p>
|
|
||||||
<p>Web App (pwa) development</p>
|
|
||||||
<p>Consulting</p>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
We craft e-commerce Ux template based on qualitative and quantitative
|
|
||||||
studies
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
<section id="kyc">
|
|
||||||
<h2>We help you to know your customer needs</h2>
|
|
||||||
<p>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>
|
|
||||||
</section>
|
|
||||||
<section id="china">
|
|
||||||
<h2>Our China-inspired ui in 4 pillars</h2>
|
|
||||||
<p>
|
|
||||||
a quick and smoth consumer journey and never ending shopping experience
|
|
||||||
at the same time
|
|
||||||
</p>
|
|
||||||
<div class="blocks">
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">
|
|
||||||
Content driven
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
-Rebound rate
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">
|
|
||||||
Experimental
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
-Return rate
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">
|
|
||||||
Interactive
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
+Conversion rate
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div class="top">
|
|
||||||
Agile
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
+Retention rate
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="we_develop">
|
|
||||||
<h2>
|
|
||||||
We develop custom-made innovative e-commerce features based on your
|
|
||||||
brand stakes.
|
|
||||||
</h2>
|
|
||||||
<div class="phone-container">
|
|
||||||
<div class="top" />
|
|
||||||
<div class="picture" />
|
|
||||||
<div class="bottom" />
|
|
||||||
</div>
|
|
||||||
<div class="arrow-left" />
|
|
||||||
<div class="arrow-right" />
|
|
||||||
<div class="data">
|
|
||||||
Data
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
AR
|
|
||||||
</div>
|
|
||||||
<div class="quick">
|
|
||||||
Quick wins
|
|
||||||
</div>
|
|
||||||
<div class="long_term">
|
|
||||||
Long-Term Project
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="full_creative">
|
|
||||||
<h2>A full creative & production Studio in Paris</h2>
|
|
||||||
<div class="tiles columns">
|
|
||||||
<div class="aside column" />
|
|
||||||
<div class="picture column" />
|
|
||||||
<div class="picture column" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="our_team">
|
|
||||||
<h2>Our team.</h2>
|
|
||||||
<div class="sub-category">
|
|
||||||
<p>of experts and directors.</p>
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="person column">
|
<div class="column first">
|
||||||
<div class="picture" />
|
<h3 class="sub-title">
|
||||||
<p class="name">
|
For all your
|
||||||
Name Surname
|
<br>
|
||||||
</p>
|
<span class="color-emphasis"> digital</span> uses.
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sub-category">
|
|
||||||
<p>and our senior team</p>
|
|
||||||
<div class="columns">
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="person column">
|
|
||||||
<div class="picture" />
|
|
||||||
<p class="name">
|
|
||||||
Name Surname
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="china_achievements">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column">
|
|
||||||
<h2>Our China achievements</h2>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<p>
|
|
||||||
Backed by the Baozun Group (the leading e-commerce technology Group
|
|
||||||
in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
|
|
||||||
2021), we embrace China’s e-commerce, capitalizing on the market’s
|
|
||||||
unique technology and digital sales mechanisms.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tiles-box">
|
|
||||||
<div class="tile-item">
|
|
||||||
<div class="column">
|
|
||||||
<h3>
|
|
||||||
<span class="number">400+</span>
|
|
||||||
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
|
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</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 commerce.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="gradient-bg" />
|
||||||
|
<div class="computer-block" />
|
||||||
|
<div class="bubbles">
|
||||||
|
<p>Evolutive maintenance</p>
|
||||||
|
<p>Front end (ux/ui) development</p>
|
||||||
|
<p>Web App (pwa) development</p>
|
||||||
|
<p>Consulting</p>
|
||||||
|
</div>
|
||||||
|
<p class="description2 primary-color">
|
||||||
|
We craft e-commerce Ux template based on qualitative and quantitative
|
||||||
|
studies
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
</section>
|
||||||
|
<section id="china">
|
||||||
|
<h2 class="title primary-color">
|
||||||
|
Our China-inspired ui in 4 pillars
|
||||||
|
</h2>
|
||||||
|
<p class="description secondary-color">
|
||||||
|
a quick and smoth consumer journey and never ending shopping experience
|
||||||
|
at the same time
|
||||||
|
</p>
|
||||||
|
<div class="blocks">
|
||||||
|
<div class="block">
|
||||||
|
<div class="top block-1">
|
||||||
|
Content driven
|
||||||
|
</div>
|
||||||
|
<div class="bottom block-2">
|
||||||
|
-Rebound rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top block-3">
|
||||||
|
Experimental
|
||||||
|
</div>
|
||||||
|
<div class="bottom block-4">
|
||||||
|
-Return rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top block-5">
|
||||||
|
Interactive
|
||||||
|
</div>
|
||||||
|
<div class="bottom block-6">
|
||||||
|
+Conversion rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="top block-7">
|
||||||
|
Agile
|
||||||
|
</div>
|
||||||
|
<div class="bottom block-8">
|
||||||
|
+Retention rate
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="we_develop">
|
||||||
|
<h2 class="title secondary-color">
|
||||||
|
We develop custom-made innovative e-commerce features based on your
|
||||||
|
brand stakes.
|
||||||
|
</h2>
|
||||||
|
<div class="phone-container">
|
||||||
|
<div class="top" />
|
||||||
|
<div class="picture" />
|
||||||
|
<div class="bottom" />
|
||||||
|
</div>
|
||||||
|
<div class="arrow-left" />
|
||||||
|
<div class="arrow-right" />
|
||||||
|
<div class="data">
|
||||||
|
Data
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
AR
|
||||||
|
</div>
|
||||||
|
<div class="quick">
|
||||||
|
Quick wins
|
||||||
|
</div>
|
||||||
|
<div class="long_term">
|
||||||
|
Long-Term Project
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="full_creative">
|
||||||
|
<h2 class="title secondary-color">
|
||||||
|
A full creative & production Studio in Paris
|
||||||
|
</h2>
|
||||||
|
<div class="tiles columns dark-color">
|
||||||
|
<div class="aside column" />
|
||||||
|
<div class="picture column" />
|
||||||
|
<div class="picture column" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="our_team">
|
||||||
|
<h2 class="title primary-color">
|
||||||
|
Our team.
|
||||||
|
</h2>
|
||||||
|
<div class="sub-category dark-color">
|
||||||
|
<p>of experts and directors.</p>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sub-category">
|
||||||
|
<h3 class="sub-title">
|
||||||
|
and our senior team
|
||||||
|
</h3>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="person column">
|
||||||
|
<div class="picture" />
|
||||||
|
<p class="name">
|
||||||
|
Name Surname
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="china_achievements">
|
||||||
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="picture has-rounded-corners" />
|
<h2 class="title primary-color">
|
||||||
|
Our China achievements
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<p class="dark-color">
|
||||||
|
Backed by the Baozun Group (the leading e-commerce technology Group
|
||||||
|
in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
|
||||||
|
2021), we embrace China’s e-commerce, capitalizing on the market’s
|
||||||
|
unique technology and digital sales mechanisms.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>
|
<div class="tiles-box">
|
||||||
100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
|
<div class="tile-item">
|
||||||
Luxury Brands supported with E2E services 50+ Brands assisted in
|
<div class="column">
|
||||||
social project commerces. 30+ PROJECTS converted into Ecom Ops
|
<h3>
|
||||||
management. 30-60% Of our brands’ partner China GMV done online.
|
<span class="number">400+</span>
|
||||||
</p>
|
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
|
||||||
</div>
|
</h3>
|
||||||
</section>
|
</div>
|
||||||
<section
|
<div class="column">
|
||||||
id="baozun_group"
|
<div class="picture has-rounded-corners" />
|
||||||
class="has-rounded-corners"
|
</div>
|
||||||
>
|
</div>
|
||||||
<h2>Baozun Group and Company.</h2>
|
|
||||||
</section>
|
<p>
|
||||||
|
100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+
|
||||||
|
Luxury Brands supported with E2E services 50+ Brands assisted in
|
||||||
|
social project commerces. 30+ PROJECTS converted into Ecom Ops
|
||||||
|
management. 30-60% Of our brands’ partner China GMV done online.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
id="baozun_group"
|
||||||
|
class="has-rounded-corners"
|
||||||
|
>
|
||||||
|
<h2 class="title">
|
||||||
|
Baozun Group
|
||||||
|
<br>
|
||||||
|
and Company.
|
||||||
|
</h2>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
#hand {
|
|
||||||
background: url("/img/hand 1.png");
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
width: 100vw;
|
|
||||||
height: 1300px;
|
|
||||||
left: 1px;
|
|
||||||
top: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cover {
|
|
||||||
background: url("/img/BG 1.png") no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
position: absolute;
|
|
||||||
top: 10vh;
|
|
||||||
left: 42vw;
|
|
||||||
|
|
||||||
/* Subtitle/desktop_1 */
|
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 40px;
|
|
||||||
line-height: 120%;
|
|
||||||
|
|
||||||
/* or 48px */
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: -0.04em;
|
|
||||||
|
|
||||||
/* Secondary 100 */
|
|
||||||
color: #fffdfc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
right: 0;
|
|
||||||
top: calc(1 / 3 * 100vh);
|
|
||||||
bottom: 0;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
padding: 1rem;
|
|
||||||
color: white;
|
|
||||||
font-family: "GT Walsheim Pro", Arial;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 26px;
|
|
||||||
background: linear-gradient(
|
|
||||||
329.49deg,
|
|
||||||
rgba(255, 216, 244, 0) 34.06%,
|
|
||||||
rgba(255, 207, 242, 0.2) 77.26%
|
|
||||||
);
|
|
||||||
backdrop-filter: blur(2.96px);
|
|
||||||
|
|
||||||
border-radius: 100%;
|
|
||||||
left: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user