responsive bottom categories

This commit is contained in:
Tykayn 2023-06-01 12:27:37 +02:00 committed by tykayn
parent 9e8fb32160
commit d52a991dad
6 changed files with 109 additions and 84 deletions

View File

@ -41,7 +41,7 @@ main {
} }
#sprint_4 { #sprint_4 {
background: #333; background: #fff;
} }
.primary-color{ .primary-color{

View File

@ -28,6 +28,8 @@
margin-bottom: 1rem; margin-bottom: 1rem;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
padding-left: 0;
margin-left: 0;
} }
.name{ .name{
margin-top: 1rem; margin-top: 1rem;
@ -50,6 +52,7 @@
} }
.columns, .colmumn{ .columns, .colmumn{
display: block; display: block;
position: static;
} }
.name{ .name{
font-size: 1.5rem; font-size: 1.5rem;

View File

@ -1,8 +1,8 @@
#china_achievements { #china_achievements {
margin-top: 30rem;
background: white; background: white;
min-height: 100vh; min-height: 100vh;
padding: 5rem 172px; padding: 10rem 172px 0;
text-align: left; text-align: left;
.title { .title {
@ -21,9 +21,11 @@
color: #020225; color: #020225;
} }
.tiles-box{ .tiles-box{
margin-top: 2rem; margin-top: 10rem;
padding-bottom: 20rem; padding-bottom: 20rem;
.column{
margin-bottom: 5rem;
}
} }
.offset-left-columns{ .offset-left-columns{
@ -32,9 +34,17 @@
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1500px) {
#china_achievements { #china_achievements {
margin-top: 895vw;
p{
font-size: 2rem;
}
.column, .columns{
position: static;
display: block;
}
.offset-left-columns{ .offset-left-columns{
margin-left: 0; margin-left: 0;
@ -51,6 +61,9 @@
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
} }
.title{
width: 100%;
}
} }
} }

View File

@ -1,9 +1,10 @@
#baozun_group{ #baozun_group {
margin-top: 150px; margin-top: 150px;
background: url('img/baozun.jpg')no-repeat; background: url('img/baozun.jpg') no-repeat;
background-size: cover; background-size: cover;
.title{
color:#FFFDFC; .title {
color: #FFFDFC;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 100px; font-size: 100px;
@ -13,3 +14,9 @@
padding-top: 464px; padding-top: 464px;
} }
} }
@media screen and (max-width: 1500px) {
#baozun_group {
margin-top: 605vw;
}
}

View File

@ -296,6 +296,82 @@
</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 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"
>
<h2 class="title">
Baozun Group
<br>
and Company.
</h2>
</section>
<!-- responsive managed until here --> <!-- responsive managed until here -->
</div> </div>
</main> </main>

View File

@ -97,81 +97,7 @@
<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"
>
<h2 class="title">
Baozun Group
<br>
and Company.
</h2>
</section>