tykayn/digital-theory
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

china achievements tiles

Browse Source
This commit is contained in:
Tykayn 2023-05-31 16:58:29 +02:00 committed by tykayn
parent b98d564e74
commit 07374225ea
5 changed files with 247 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
sesame-vitejs/sesame/src/App.vue
View File

@ -4,12 +4,9 @@ import CoverSection from "./components/CoverSection.vue";
<template> <template>
<main> <main>
<CoverSection msg="hohooo" /> <CoverSection />
</main> </main>
</template> </template>
<style lang="scss"> <style lang="scss">
/******** all sections *********/
/*@import 'styles/main.scss';*/
</style> </style>

46
sesame-vitejs/sesame/src/assets/styles/_17-china-achievements.scss
View File

@ -1,12 +1,56 @@
#china_achievements { #china_achievements {
background: white;
min-height: 100vh;
padding: 5rem 172px;
text-align: left;
.title { .title {
font-weight: 500;
font-size: 100px;
line-height: 90px;
color: $primary-color;
letter-spacing: -0.04em;
width: 50vw;
} }
.description { .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
View 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>

143
sesame-vitejs/sesame/src/components/CoverSection.vue
View File

@ -1,101 +1,73 @@
<script setup lang="ts"></script> <script setup lang="ts">
import CounterBlock from './CounterBlock.vue';
</script>
<template> <template>
<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="our_team"> <section id="china_achievements">
<div class="columns">
<div class="column">
<h2 class="title primary-color"> <h2 class="title primary-color">
Our team. Our China achievements
</h2> </h2>
<div class="sub-category dark-color"> </div>
<p class="sub-title"> <div class="column">
of experts and directors. <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> </p>
</div>
</div>
<div class="tiles-box">
<div class="columns"> <div class="columns">
<div class="person column"> <div class="column">
<img <CounterBlock
src="img/Rectangle 6.jpg" number-value="400+"
alt="people" free-text="Store launches incl. Dr. Martens, G-star etc."
> img-src="/img/people 2.jpg"
<p class="name"> />
Name Surname </div><div class="column">
</p> <CounterBlock
</div> number-value="100+"
<div class="person column"> free-text="Luxury Store launches on incl. Christofle, De Beers etc."
<img img-src="/img/people 2-1.jpg"
src="img/Rectangle%206-1.jpg" />
alt="people" </div><div class="column">
> <CounterBlock
number-value="40+"
<p class="name"> free-text="Luxury Brands supported with E2E services."
Name Surname img-src="/img/people 2-2.jpg"
</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> </div>
<div class="columns offset-left-columns">
<div class="sub-category"> <div class="column">
<h3 class="sub-title"> <CounterBlock
and our senior team number-value="50+"
</h3> free-text="Brands assisted in social project commerces."
<div class="columns"> img-src="/img/people 2-3.jpg"
<div class="person column"> />
<img
src="img/Rectangle 6-4.jpg"
alt="people"
>
<p class="name">
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="column">
<img <CounterBlock
src="img/Rectangle%206-5.jpg" number-value="30+"
alt="people" free-text="PROJECTS converted into Ecom Ops management."
> img-src="/img/people 2-4.jpg"
<p class="name"> />
Name Surname
</p>
</div> </div>
<div class="person column"> <div class="column">
<img <CounterBlock
src="img/Rectangle 6-6.jpg" number-value="30-60%"
alt="people" free-text="Of our brands’ partner China GMV done online."
> img-src="/img/people 2-5.jpg"
<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> </div>
</div> </div>
@ -105,4 +77,7 @@
</template> </template>
<style lang="scss"> <style lang="scss">
CounterBlock{
margin-right: 4rem;
}
</style> </style>

113
sesame-vitejs/sesame/src/components/DisabledSection.vue
View File

@ -246,43 +246,102 @@
</div> </div>
</div> </div>
</section> </section>
<section id="china_achievements">
<div class="columns"> <section id="our_team">
<div class="column">
<h2 class="title primary-color"> <h2 class="title primary-color">
Our China achievements Our team.
</h2> </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>
<div class="column"> <div class="person column">
<p class="dark-color"> <img
Backed by the Baozun Group (the leading e-commerce technology Group src="img/Rectangle%206-1.jpg"
in China listed in NASDAQ and Hong Kong, reaching $10Mn GMV in alt="people"
2021), we embrace China’s e-commerce, capitalizing on the market’s >
unique technology and digital sales mechanisms.
<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> </p>
</div> </div>
</div> </div>
</div>
<div class="tiles-box">
<div class="tile-item"> <div class="sub-category">
<div class="column"> <h3 class="sub-title">
<h3> and our senior team
<span class="number">400+</span>
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
</h3> </h3>
</div> <div class="columns">
<div class="column"> <div class="person column">
<div class="picture has-rounded-corners" /> <img
</div> src="img/Rectangle 6-4.jpg"
</div> alt="people"
>
<p> <p class="name">
100+ Luxury Store launches on incl. Christofle, De Beers etc. 40+ Name Surname
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> </p>
</div> </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>
<section <section
id="baozun_group" id="baozun_group"