china section

This commit is contained in:
Tykayn 2023-05-30 14:03:12 +02:00 committed by tykayn
parent 86c2d1cca0
commit fe5fd8a9ad
15 changed files with 256 additions and 59 deletions

View File

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

View File

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View File

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -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;

View File

@ -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;

View File

@ -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');
.line {
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;
}
.title{
.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;
}
.description{
}
.color-emphasis {
.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;
}
}
}
}

View File

@ -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);
}
}

View File

@ -0,0 +1,10 @@
#full_creative{
.title {
}
.description {
}
}

View File

@ -0,0 +1,10 @@
#our_team{
.title {
}
.description {
}
}

View File

@ -0,0 +1,12 @@
#china_achievements {
.title {
}
.description {
}
}

View File

@ -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>

View File

@ -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