china achievements tiles
This commit is contained in:
parent
b98d564e74
commit
07374225ea
@ -4,12 +4,9 @@ import CoverSection from "./components/CoverSection.vue";
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<CoverSection msg="hohooo" />
|
||||
<CoverSection />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
/******** all sections *********/
|
||||
|
||||
/*@import 'styles/main.scss';*/
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,56 @@
|
||||
#china_achievements {
|
||||
|
||||
background: white;
|
||||
min-height: 100vh;
|
||||
padding: 5rem 172px;
|
||||
text-align: left;
|
||||
|
||||
.title {
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 100px;
|
||||
line-height: 90px;
|
||||
color: $primary-color;
|
||||
letter-spacing: -0.04em;
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
color: #020225;
|
||||
}
|
||||
.tiles-box{
|
||||
margin-top: 2rem;
|
||||
|
||||
padding-bottom: 20rem;
|
||||
}
|
||||
|
||||
.offset-left-columns{
|
||||
margin-left: -10rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
#china_achievements {
|
||||
|
||||
.offset-left-columns{
|
||||
margin-left: 0;
|
||||
|
||||
}
|
||||
.text-description{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.big-number{
|
||||
font-size: 10rem;
|
||||
text-align: center;
|
||||
}
|
||||
.picture{
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
51
sesame-vitejs/sesame/src/components/CounterBlock.vue
Normal file
51
sesame-vitejs/sesame/src/components/CounterBlock.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps({
|
||||
numberValue: String,
|
||||
freeText: String,
|
||||
imgSrc: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="big-number">
|
||||
{{ numberValue }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="text-description">
|
||||
{{ freeText }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img
|
||||
:src="imgSrc"
|
||||
class="picture has-rounded-corners"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.big-number{
|
||||
font-weight: 600;
|
||||
font-size: 140px;
|
||||
line-height: 90%;
|
||||
letter-spacing: -0.04em;
|
||||
color: #020225;
|
||||
}
|
||||
.text-description{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 150%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #020225;
|
||||
}
|
||||
img{
|
||||
margin-left: 80px;
|
||||
border-radius: 80px;
|
||||
}
|
||||
</style>
|
||||
@ -1,101 +1,73 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
|
||||
import CounterBlock from './CounterBlock.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="has-text-centered">
|
||||
<!-- sprint 4 content-->
|
||||
<div id="sprint_4">
|
||||
<section id="our_team">
|
||||
<section id="china_achievements">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h2 class="title primary-color">
|
||||
Our team.
|
||||
Our China achievements
|
||||
</h2>
|
||||
<div class="sub-category dark-color">
|
||||
<p class="sub-title">
|
||||
of experts and directors.
|
||||
</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="person column">
|
||||
<img
|
||||
src="img/Rectangle 6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-1.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/people%202.png"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-3.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<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="sub-category">
|
||||
<h3 class="sub-title">
|
||||
and our senior team
|
||||
</h3>
|
||||
<div class="columns">
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-4.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
<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="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-5.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
<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="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-7.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
<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>
|
||||
@ -105,4 +77,7 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
CounterBlock{
|
||||
margin-right: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -246,43 +246,102 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="china_achievements">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
<section id="our_team">
|
||||
<h2 class="title primary-color">
|
||||
Our China achievements
|
||||
Our team.
|
||||
</h2>
|
||||
<div class="sub-category dark-color">
|
||||
<p class="sub-title">
|
||||
of experts and directors.
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</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.
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-1.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/people%202.png"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-3.jpg"
|
||||
alt="people"
|
||||
>
|
||||
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="sub-category">
|
||||
<h3 class="sub-title">
|
||||
and our senior team
|
||||
</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.
|
||||
<div class="columns">
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-4.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-5.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle 6-6.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
<div class="person column">
|
||||
<img
|
||||
src="img/Rectangle%206-7.jpg"
|
||||
alt="people"
|
||||
>
|
||||
<p class="name">
|
||||
Name Surname
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section
|
||||
id="baozun_group"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user