move bubbles
This commit is contained in:
parent
821c87dc5d
commit
b73f692a23
@ -1,9 +1,9 @@
|
||||
|
||||
|
||||
#carry {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding-top: 20vh;
|
||||
min-height: 200vh;
|
||||
|
||||
.title {
|
||||
margin-bottom: 46px;
|
||||
@ -22,6 +22,7 @@
|
||||
letter-spacing: -0.06em;
|
||||
color: rgba(30, 51, 218, 0.15);
|
||||
}
|
||||
|
||||
.description2 {
|
||||
|
||||
font-weight: 600;
|
||||
@ -36,64 +37,104 @@
|
||||
}
|
||||
|
||||
.bubbles {
|
||||
margin-top: -65vh;
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
padding: 4em;
|
||||
background: url('img/Ellipse 777.2.png') no-repeat;
|
||||
padding: 7.6rem 4rem;
|
||||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||||
background-size: contain;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 130%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
&:nth-of-type(0){
|
||||
position: relative;
|
||||
width: 20rem;
|
||||
height: 30vh;
|
||||
mix-blend-mode: darken;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||||
padding-left: 3.7rem;
|
||||
width: 350px;
|
||||
height: 451.56px;
|
||||
left: 70%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: url("img/Ellipse 777.4.png") no-repeat;
|
||||
width: 308px;
|
||||
height: 451.56px;
|
||||
left: 60%;
|
||||
margin-top: -20vh;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
background: url("img/Ellipse 777.5.png") no-repeat;
|
||||
width: 315px;
|
||||
height: 316px;
|
||||
left: 50vw;
|
||||
margin-top: -9vh;
|
||||
z-index: 20;
|
||||
padding: 8rem 4rem;
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
|
||||
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;
|
||||
left: 16vw;
|
||||
margin-top: -50vh;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.gradient-bg-yellow {
|
||||
position: absolute;
|
||||
width: 50vw;
|
||||
height: 58vh;
|
||||
left: 14vw;
|
||||
top: 90vh;
|
||||
background: radial-gradient(50% 50% at 50% 50%, #FFBA99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%);
|
||||
opacity: 0.5;
|
||||
transform: rotate(197.68deg);
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
position: absolute;
|
||||
width: 1189.9px;
|
||||
height: 644.02px;
|
||||
left: 182.69px;
|
||||
top: 1088.73px;
|
||||
|
||||
/* Gradient/radial_100 */
|
||||
|
||||
width: 50vw;
|
||||
height: 58vh;
|
||||
left: 22vw;
|
||||
top: 98vh;
|
||||
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;
|
||||
background: url('img/Macbook_color 1.png') no-repeat center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1080px;
|
||||
left: 23%;
|
||||
left: 0;
|
||||
top: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
#carry {
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
|
||||
.description {
|
||||
margin-top: 3vh;
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.computer-block {
|
||||
background-size: contain;
|
||||
top: -10rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -3,7 +3,13 @@
|
||||
padding-top: 25vh;
|
||||
|
||||
.left-column{
|
||||
width: 25vw;
|
||||
width: 50vw;
|
||||
margin: 0 auto;
|
||||
|
||||
.text-content{
|
||||
max-width: 25vw;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
margin-top: 250px;
|
||||
@ -35,7 +41,7 @@ margin-top: 250px;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-style: normal;
|
||||
padding: 1rem;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 16vh;
|
||||
@ -57,12 +63,10 @@ margin-top: 250px;
|
||||
.bubbles{
|
||||
.bubble{
|
||||
position: relative;
|
||||
&:nth-of-type(0){
|
||||
&:nth-of-type(1){
|
||||
left: 694px;
|
||||
top: 1240px;
|
||||
}
|
||||
&:nth-of-type(1){
|
||||
}
|
||||
&:nth-of-type(2){
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,42 +4,16 @@
|
||||
<main class="has-text-centered">
|
||||
<!-- sprint 4 content-->
|
||||
<div id="sprint_4">
|
||||
<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 commerce.
|
||||
in headless
|
||||
<br>
|
||||
commerce.
|
||||
</p>
|
||||
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block" />
|
||||
<div class="bubbles secondary-color">
|
||||
@ -48,227 +22,6 @@
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="picture has-rounded-corners" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
260
sesame-vitejs/sesame/src/components/DisabledSection.vue
Normal file
260
sesame-vitejs/sesame/src/components/DisabledSection.vue
Normal file
@ -0,0 +1,260 @@
|
||||
<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="kyc">
|
||||
<div class="left-column">
|
||||
<p class="description2 primary-color">
|
||||
We craft e-commerce Ux template based on qualitative and quantitative
|
||||
studies
|
||||
</p>
|
||||
|
||||
<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="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">
|
||||
<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">
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="picture has-rounded-corners" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user