responsive on 2 blocks

This commit is contained in:
Tykayn 2023-05-31 17:49:49 +02:00 committed by tykayn
parent 07374225ea
commit dcd988f198
4 changed files with 153 additions and 114 deletions

View File

@ -1,11 +1,11 @@
#transactionnal_webdesign {
padding-top: 363px;
background: url('img/header_webdesign.png'), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
background-size: cover;
font-family: "GT Walsheim Pro";
color: #00001f;
padding-top: 380px;
position: static;
min-height: 150vh;
.columns {
max-width: 60vw;
@ -59,3 +59,18 @@
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;
}
}
}

View File

@ -1,9 +1,9 @@
#carry {
position: relative;
position: static;
background: white;
padding-top: 20vh;
min-height: 200vh;
min-height: 100vh;
.title {
margin-bottom: 46px;
@ -101,7 +101,7 @@
}
.gradient-bg {
position: absolute;
position: relative;
width: 50vw;
height: 58vh;
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) {
#carry {
padding-left: 10vw;
padding-right: 10vw;
.title {
font-size: 4rem;
}
.description {
margin-top: 3vh;
font-size: 8rem;
font-size: 10rem;
}
.computer-block {
background-size: contain;
top: -10rem;
position: relative;
height: 100vh;
margin-top: -73vh;
}
.bubbles{
position: relative;
left: -5vw;
}
.gradient-bg{
top: 19vh;
left:15vw;
}
}

View File

@ -7,69 +7,52 @@
<main class="has-text-centered">
<!-- sprint 4 content-->
<div id="sprint_4">
<section id="china_achievements">
<div class="columns">
<div class="column">
<h2 class="title primary-color">
Our 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="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 Chinas e-commerce, capitalizing on the markets
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 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>
<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>
<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>
</div>

View File

@ -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">
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
@ -343,6 +294,71 @@
</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 Chinas e-commerce, capitalizing on the markets
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
id="baozun_group"
class="has-rounded-corners"
@ -353,6 +369,7 @@
and Company.
</h2>
</section>
</template>
<script>