china section
This commit is contained in:
parent
86c2d1cca0
commit
fe5fd8a9ad
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
sesame-vitejs/sesame/img/line.png
Normal file
BIN
sesame-vitejs/sesame/img/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -1,9 +1,11 @@
|
||||
/******** all sections *********/
|
||||
body {
|
||||
background: #020225;
|
||||
background: #fff;
|
||||
padding-bottom: 50vh;
|
||||
overflow-x: hidden;
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -12,6 +14,7 @@ main {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
|
||||
h2 {
|
||||
color: #fffdfc;
|
||||
|
||||
@ -35,7 +35,7 @@ margin-top: 250px;
|
||||
text-align: center;
|
||||
}
|
||||
.description{
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
@ -1,21 +1,132 @@
|
||||
#cina{
|
||||
background: url('img/china-bg.png');
|
||||
#china {
|
||||
//background-color: green;
|
||||
background: url('img/china-bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
height: 1060px;
|
||||
width: 99vw;
|
||||
position: relative;
|
||||
top: 200vh;
|
||||
padding-bottom: 20rem;
|
||||
border-radius: 2rem;
|
||||
|
||||
.line {
|
||||
background: url('img/china-line.png');
|
||||
background: url(img/line.png) no-repeat;
|
||||
position: relative;
|
||||
width: 82vw;
|
||||
height: 100vh;
|
||||
left: 11rem;
|
||||
top: -4rem;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
rotate: 5deg;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 10rem;
|
||||
margin-bottom: 2rem;
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
|
||||
text-align: center;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.columns {
|
||||
|
||||
position: absolute;
|
||||
width: 1494.06px;
|
||||
height: 313.16px;
|
||||
left: 93.02px;
|
||||
top: 2342.9px;
|
||||
margin-top: -10vh;
|
||||
padding: 10rem;
|
||||
width: 100vw;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.block-items, block-item {
|
||||
color: white;
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 30px;
|
||||
line-height: 120%;
|
||||
text-align: left;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.block-item {
|
||||
|
||||
|
||||
.bottom {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
background: url('img/block_pillar_1.png') no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
margin-top: 2rem;
|
||||
|
||||
.bottom {
|
||||
margin-top: 21rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
background: url('img/block_pillar_2.png') no-repeat;
|
||||
background-size: contain;
|
||||
margin-top: 8rem;
|
||||
|
||||
.bottom {
|
||||
margin-top: 22rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
background: url('img/block_pillar_3.png') no-repeat;
|
||||
background-size: contain;
|
||||
margin-top: 10rem;
|
||||
|
||||
.bottom {
|
||||
margin-top: 25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
background: url('img/block_pillar_4.png') no-repeat;
|
||||
background-size: contain;
|
||||
margin-top: 1rem;
|
||||
|
||||
.bottom {
|
||||
margin-top: 24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
#china {
|
||||
.block-item {
|
||||
margin: 0;
|
||||
.bottom {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
|
||||
}
|
||||
.description{
|
||||
|
||||
}
|
||||
.color-emphasis {
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
#we_develop{
|
||||
|
||||
.title {
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
text-align: center;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
}
|
||||
|
||||
.asides{
|
||||
font-family: 'GT Walsheim';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.light-text{
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
|
||||
text-align: center;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
color: #B62F22;
|
||||
|
||||
opacity: 0.2;
|
||||
filter: blur(2px);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
#full_creative{
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
#our_team{
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
#china_achievements {
|
||||
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
</p>
|
||||
<div class="gradient-bg-yellow" />
|
||||
<div class="gradient-bg" />
|
||||
<div class="computer-block" />
|
||||
<div class="computer-block-item" />
|
||||
<div class="bubbles secondary-color">
|
||||
<p>Evolutive maintenance</p>
|
||||
<p>Front end (ux/ui) development</p>
|
||||
@ -70,6 +70,61 @@
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="china">
|
||||
<h2 class="title primary-color">
|
||||
Our China-inspired ui in 4 pillars
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
a quick and smooth consumer journey and never
|
||||
<br>
|
||||
ending shopping experience at the same time
|
||||
</p>
|
||||
<div class="line" />
|
||||
<div class="block-items columns">
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-1">
|
||||
<p>
|
||||
Content driven
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-2">
|
||||
- Rebound rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-3">
|
||||
<p>
|
||||
Experimental
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-4">
|
||||
- Return rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-5">
|
||||
<p>
|
||||
Interactive
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-6">
|
||||
+Conversion rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item column">
|
||||
<div class="top block-item-7">
|
||||
<p>
|
||||
Agile
|
||||
</p>
|
||||
</div>
|
||||
<div class="bottom block-item-8">
|
||||
+ Retention rate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@ -34,50 +34,6 @@
|
||||
|
||||
|
||||
|
||||
<section id="china">
|
||||
<h2 class="title primary-color">
|
||||
Our China-inspired ui in 4 pillars
|
||||
</h2>
|
||||
<p class="description secondary-color">
|
||||
a quick and smoth consumer journey and never ending shopping experience
|
||||
at the same time
|
||||
</p>
|
||||
<div class="line"></div>
|
||||
<div class="blocks">
|
||||
<div class="block">
|
||||
<div class="top block-1">
|
||||
Content driven
|
||||
</div>
|
||||
<div class="bottom block-2">
|
||||
-Rebound rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="top block-3">
|
||||
Experimental
|
||||
</div>
|
||||
<div class="bottom block-4">
|
||||
-Return rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="top block-5">
|
||||
Interactive
|
||||
</div>
|
||||
<div class="bottom block-6">
|
||||
+Conversion rate
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="top block-7">
|
||||
Agile
|
||||
</div>
|
||||
<div class="bottom block-8">
|
||||
+Retention rate
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="we_develop">
|
||||
<h2 class="title secondary-color">
|
||||
We develop custom-made innovative e-commerce features based on your
|
||||
|
||||
Loading…
Reference in New Issue
Block a user