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

position bubble KYC section

Browse Source
This commit is contained in:
Tykayn 2023-05-30 12:49:40 +02:00 committed by tykayn
parent b73f692a23
commit 86c2d1cca0
13 changed files with 172 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sesame-vitejs/sesame/img/Sesame Digital Website.zip Normal file
View File

Binary file not shown.

BIN
sesame-vitejs/sesame/img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n000.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 92 KiB

BIN
sesame-vitejs/sesame/img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n030ll.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

BIN
sesame-vitejs/sesame/img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n149 1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
sesame-vitejs/sesame/img/bubble_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
sesame-vitejs/sesame/img/bubble_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 161 KiB

BIN
sesame-vitejs/sesame/img/bubble_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
sesame-vitejs/sesame/img/china-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
sesame-vitejs/sesame/img/china-line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

132
sesame-vitejs/sesame/src/assets/styles/_12-kyc.scss
View File

@ -1,31 +1,43 @@
#kyc{
position: absolute;
font-family: 'GT Walsheim Pro';
background: white;
padding-top: 25vh;
min-height:200vh;
.text-content{
max-width: 37rem;
text-align: left;
}
.left-column{
width: 50vw;
margin: 0 auto;
.text-content{
max-width: 25vw;
text-align: left;
}
padding-left: 5vw;
}
.title{
margin-top: 250px;
font-weight: 600;
font-style: normal;
font-weight: 500;
font-size: 100px;
line-height: 90px;
/* or 90% */
letter-spacing: -0.04em;
}
.description2{
font-weight: 500;
font-size: 60px;
line-height: 110%;
text-align: center;
letter-spacing: -0.04em;
padding: 0 2rem;
text-align: center;
}
.description{
font-weight: 600;
font-size: 60px;
line-height: 110%;
/* identical to box height, or 66px */
letter-spacing: -0.04em;
}
.button{
@ -33,20 +45,20 @@ margin-top: 250px;
font-size: 18px;
line-height: 26px;
backdrop-filter: blur(3px);
background: linear-gradient(329.49deg,
rgba(255, 216, 244, 0) 34.06%,
rgba(255, 207, 242, 0.2) 77.26%);
border-radius: 100%;
background: white;
border-radius: 2rem;
bottom: 0;
box-sizing: border-box;
color: white;
font-style: normal;
padding: 2rem;
padding: 1rem .5rem;
position: relative;
right: 0;
top: 16vh;
width: 150px;
top: 2rem;
min-width: 15rem;
float:left;
color: #020225;
border-color: $secondary-color;
}
.color-emphasis {
color: #1E33DA;
@ -63,12 +75,94 @@ margin-top: 250px;
.bubbles{
.bubble{
position: relative;
text-align: left;
float: left;
span{
margin-left: 2rem;
float:left;
width: 20rem;
}
&:nth-of-type(1){
left: 694px;
top: 1240px;
width: 25rem;
height: 23rem;
left: 46rem;
top: -34rem;
background: url('img/bubble_1.png') no-repeat;
span{
padding: 6rem 2.5rem;
}
}
&:nth-of-type(2){
background: url('img/bubble_2.png') no-repeat;
left: 34vw;
top: -15rem;
width: 35rem;
height: 35rem;
background-size: contain;
span{
margin-top: 13rem;
margin-left: 5rem;
}
}
&:nth-of-type(3){
background: url('img/bubble_3.png') no-repeat;
left: -27vw;
top: 8rem;
width: 27rem;
height: 35rem;
background-size: contain;
span{
margin-top: 10rem;
margin-left: 5rem;
width: 15rem;
}
}
}
}
.small-bubble{
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center ;
background-size: contain;
position: absolute;
//width: 50rem;
//height: 50rem;
margin-top: 0;
&:nth-of-type(1){
filter: blur(6.5px);
width: 137px;
height: 176px;
left: 316px;
top: 400px;
}
&:nth-of-type(2){
filter: blur(2px);
width: 203px;
height: 253.75px;
left: 1343px;
top: 422px;
}
&:nth-of-type(3){
filter: blur(5px);
width: 141px;
height: 176px;
left: 865px;
top: 918px;
}
&:nth-of-type(4){
filter: blur(1px);
width: 77px;
height: 96px;
left: 490px;
top: 1129px;
}
&:nth-of-type(5){
width: 288px;
height: 360px;
left: 1124px;
top: 1382px;
}
}
}

11
sesame-vitejs/sesame/src/assets/styles/_13-china.scss
View File

@ -1,4 +1,15 @@
#cina{
background: url('img/china-bg.png');
.line{
background: url('img/china-line.png');
position: absolute;
width: 1494.06px;
height: 313.16px;
left: 93.02px;
top: 2342.9px;
}
.title{
}

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

@ -23,6 +23,53 @@
<p>Consulting</p>
</div>
</section>
<section id="kyc">
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
<div class="columns">
<div class="column left-column">
<h2 class="title primary-color text-content">
We help you to know your customer needs
</h2>
<p class="description secondary-color text-content">
With our method
</p>
<a
href="#kyc"
class="button text-content"
> Show Sesame method </a>
</div>
<div class="column" />
</div>
<div class="bubbles secondary-color fat-text">
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<div class="small-bubble" />
<p class="bubble">
<span>
to Prioritize development effort
</span>
</p>
<p class="bubble">
<span>
to improve customer satisfaction
</span>
</p>
<p class="bubble">
<span>
to increase conversion rate
</span>
</p>
</div>
</section>
</div>
</main>
</template>

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

@ -33,36 +33,7 @@
<section id="kyc">
<div class="left-column">
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
<h2 class="title primary-color text-content">
We help you to know your customer needs
</h2>
<p class="description secondary-color text-content">
With our method
</p>
<a
href="#kyc"
class="button text-content"
> Show Sesame method </a>
</div>
<div class="bubbles secondary-color fat-text">
<p class="bubble">
to Prioritize development effort
</p>
<p class="bubble">
to improve customer satisfaction
</p>
<p class="bubble">
to increase conversion rate
</p>
</div>
</section>
<section id="china">
<h2 class="title primary-color">
Our China-inspired ui in 4 pillars
@ -71,6 +42,7 @@
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">