responsive on 2 blocks
This commit is contained in:
parent
07374225ea
commit
dcd988f198
@ -1,11 +1,11 @@
|
|||||||
#transactionnal_webdesign {
|
#transactionnal_webdesign {
|
||||||
padding-top: 363px;
|
|
||||||
|
|
||||||
background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
|
background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
font-family: "GT Walsheim Pro";
|
font-family: "GT Walsheim Pro";
|
||||||
color: #00001f;
|
color: #00001f;
|
||||||
padding-top: 380px;
|
padding-top: 380px;
|
||||||
|
position: static;
|
||||||
|
min-height: 150vh;
|
||||||
|
|
||||||
.columns {
|
.columns {
|
||||||
max-width: 60vw;
|
max-width: 60vw;
|
||||||
@ -59,3 +59,18 @@
|
|||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 1023px) {
|
||||||
|
#transactionnal_webdesign {
|
||||||
|
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 5vh;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
font-size: 4rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
|
|
||||||
#carry {
|
#carry {
|
||||||
position: relative;
|
position: static;
|
||||||
background: white;
|
background: white;
|
||||||
padding-top: 20vh;
|
padding-top: 20vh;
|
||||||
min-height: 200vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
@ -101,7 +101,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gradient-bg {
|
.gradient-bg {
|
||||||
position: absolute;
|
position: relative;
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
height: 58vh;
|
height: 58vh;
|
||||||
left: 22vw;
|
left: 22vw;
|
||||||
@ -121,19 +121,43 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1600px) {
|
||||||
|
#carry {
|
||||||
|
.description {
|
||||||
|
margin-top: 3vh;
|
||||||
|
font-size: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1023px) {
|
@media screen and (max-width: 1023px) {
|
||||||
#carry {
|
#carry {
|
||||||
padding-left: 10vw;
|
padding-left: 10vw;
|
||||||
padding-right: 10vw;
|
padding-right: 10vw;
|
||||||
|
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin-top: 3vh;
|
margin-top: 3vh;
|
||||||
font-size: 8rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.computer-block {
|
.computer-block {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
top: -10rem;
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
margin-top: -73vh;
|
||||||
|
}
|
||||||
|
.bubbles{
|
||||||
|
position: relative;
|
||||||
|
left: -5vw;
|
||||||
|
}
|
||||||
|
.gradient-bg{
|
||||||
|
top: 19vh;
|
||||||
|
left:15vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,69 +7,52 @@
|
|||||||
<main class="has-text-centered">
|
<main class="has-text-centered">
|
||||||
<!-- sprint 4 content-->
|
<!-- sprint 4 content-->
|
||||||
<div id="sprint_4">
|
<div id="sprint_4">
|
||||||
<section id="china_achievements">
|
<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="columns">
|
||||||
<div class="column">
|
<div class="column first">
|
||||||
<h2 class="title primary-color">
|
<h3 class="sub-title">
|
||||||
Our China achievements
|
For all your
|
||||||
</h2>
|
<br>
|
||||||
|
<span class="color-emphasis"> digital</span> uses.
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column second">
|
||||||
<p class="dark-color">
|
Our creative competitive edge <br>
|
||||||
Backed by the Baozun Group (the leading e-commerce technology Group
|
<br>
|
||||||
in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in
|
We leverage our own studio in Paris equipped to produce all e-formats.
|
||||||
2021), we embrace China’s e-commerce, capitalizing on the market’s
|
We power transactional content with our technology. Our content is
|
||||||
unique technology and digital sales mechanisms.
|
transactional and generate online sales. We produce multi-purpose
|
||||||
</p>
|
content at scale for all touchpoints to reduce costs.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="tiles-box">
|
<section id="carry">
|
||||||
<div class="columns">
|
<h2 class="title color-emphasis">
|
||||||
<div class="column">
|
We carry out web design and development
|
||||||
<CounterBlock
|
</h2>
|
||||||
number-value="400+"
|
<p class="description">
|
||||||
free-text="Store launches incl. Dr. Martens, G-star etc."
|
in headless
|
||||||
img-src="/img/people 2.jpg"
|
<br>
|
||||||
/>
|
commerce.
|
||||||
</div><div class="column">
|
</p>
|
||||||
<CounterBlock
|
<div class="gradient-bg-yellow" />
|
||||||
number-value="100+"
|
<div class="gradient-bg" />
|
||||||
free-text="Luxury Store launches on incl. Christofle, De Beers etc."
|
<div class="computer-block" />
|
||||||
img-src="/img/people 2-1.jpg"
|
<div class="bubbles secondary-color">
|
||||||
/>
|
<p>Evolutive maintenance</p>
|
||||||
</div><div class="column">
|
<p>Front end (ux/ui) development</p>
|
||||||
<CounterBlock
|
<p>Web App (pwa) development</p>
|
||||||
number-value="40+"
|
<p>Consulting</p>
|
||||||
free-text="Luxury Brands supported with E2E services."
|
|
||||||
img-src="/img/people 2-2.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="columns offset-left-columns">
|
|
||||||
<div class="column">
|
|
||||||
<CounterBlock
|
|
||||||
number-value="50+"
|
|
||||||
free-text="Brands assisted in social project commerces."
|
|
||||||
img-src="/img/people 2-3.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<CounterBlock
|
|
||||||
number-value="30+"
|
|
||||||
free-text="PROJECTS converted into Ecom Ops management."
|
|
||||||
img-src="/img/people 2-4.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<CounterBlock
|
|
||||||
number-value="30-60%"
|
|
||||||
free-text="Of our brands’ partner China GMV done online."
|
|
||||||
img-src="/img/people 2-5.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,55 +6,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<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-item" />
|
|
||||||
<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">
|
<section id="kyc">
|
||||||
<p class="description2 primary-color">
|
<p class="description2 primary-color">
|
||||||
We craft e-commerce Ux template based on qualitative and quantitative
|
We craft e-commerce Ux template based on qualitative and quantitative
|
||||||
@ -343,6 +294,71 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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="columns">
|
||||||
|
<div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="400+"
|
||||||
|
free-text="Store launches incl. Dr. Martens, G-star etc."
|
||||||
|
img-src="/img/people 2.jpg"
|
||||||
|
/>
|
||||||
|
</div><div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="100+"
|
||||||
|
free-text="Luxury Store launches on incl. Christofle, De Beers etc."
|
||||||
|
img-src="/img/people 2-1.jpg"
|
||||||
|
/>
|
||||||
|
</div><div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="40+"
|
||||||
|
free-text="Luxury Brands supported with E2E services."
|
||||||
|
img-src="/img/people 2-2.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="columns offset-left-columns">
|
||||||
|
<div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="50+"
|
||||||
|
free-text="Brands assisted in social project commerces."
|
||||||
|
img-src="/img/people 2-3.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="30+"
|
||||||
|
free-text="PROJECTS converted into Ecom Ops management."
|
||||||
|
img-src="/img/people 2-4.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<CounterBlock
|
||||||
|
number-value="30-60%"
|
||||||
|
free-text="Of our brands’ partner China GMV done online."
|
||||||
|
img-src="/img/people 2-5.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section
|
<section
|
||||||
id="baozun_group"
|
id="baozun_group"
|
||||||
class="has-rounded-corners"
|
class="has-rounded-corners"
|
||||||
@ -353,6 +369,7 @@
|
|||||||
and Company.
|
and Company.
|
||||||
</h2>
|
</h2>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user