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

move bubbles

Browse Source
This commit is contained in:
Tykayn 2023-05-30 11:56:53 +02:00 committed by tykayn
parent 821c87dc5d
commit b73f692a23
4 changed files with 354 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
sesame-vitejs/sesame/src/assets/styles/_11-carry.scss
View File

@ -1,9 +1,9 @@
#carry { #carry {
position: relative; position: relative;
background:white; background: white;
padding-top: 20vh; padding-top: 20vh;
min-height: 200vh;
.title { .title {
margin-bottom: 46px; margin-bottom: 46px;
@ -22,7 +22,8 @@
letter-spacing: -0.06em; letter-spacing: -0.06em;
color: rgba(30, 51, 218, 0.15); color: rgba(30, 51, 218, 0.15);
} }
.description2{
.description2 {
font-weight: 600; font-weight: 600;
font-size: 60px; font-size: 60px;
@ -36,64 +37,104 @@
} }
.bubbles { .bubbles {
p{ margin-top: -65vh;
p {
position: relative; position: relative;
padding: 4em; padding: 7.6rem 4rem;
background: url('img/Ellipse 777.2.png') no-repeat; background: url("img/Ellipse 777.5.png") no-repeat;
background-size: contain;
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 130%; line-height: 130%;
display: flex; width: 20rem;
align-items: center; height: 30vh;
text-align: center; mix-blend-mode: darken;
&:nth-of-type(0){
position: relative; &:nth-of-type(1) {
background: url("img/Ellipse 777.5.png") no-repeat;
padding-left: 3.7rem;
width: 350px;
height: 451.56px;
left: 70%;
top: 0;
}
&:nth-of-type(2) {
background: url("img/Ellipse 777.4.png") no-repeat;
width: 308px;
height: 451.56px;
left: 60%;
margin-top: -20vh;
}
&:nth-of-type(3) {
background: url("img/Ellipse 777.5.png") no-repeat;
width: 315px;
height: 316px;
left: 50vw;
margin-top: -9vh;
z-index: 20;
padding: 8rem 4rem;
}
&:nth-of-type(4) {
width: 315px; width: 315px;
height: 285px; height: 285px;
left: 92px; left: 16vw;
top: 814px; margin-top: -50vh;
}
&:nth-of-type(1){
width: 453px;
height: 451.56px;
left: 710px;
top: 974px;
}
&:nth-of-type(2){
width: 453px;
height: 451.56px;
left: 710px;
top: 974px;
}
&:nth-of-type(3){
width: 315px;
height: 314px;
left: 1329px;
top: 561px;
} }
} }
} }
.gradient-bg{ .gradient-bg-yellow {
position: absolute; position: absolute;
width: 1189.9px; width: 50vw;
height: 644.02px; height: 58vh;
left: 182.69px; left: 14vw;
top: 1088.73px; top: 90vh;
background: radial-gradient(50% 50% at 50% 50%, #FFBA99 0%, rgba(236, 222, 168, 0.96) 4.17%, rgba(163, 173, 255, 0) 100%);
/* Gradient/radial_100 */ opacity: 0.5;
transform: rotate(197.68deg);
}
.gradient-bg {
position: absolute;
width: 50vw;
height: 58vh;
left: 22vw;
top: 98vh;
background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%); background: radial-gradient(50% 50% at 50% 50%, #1E33DA 0%, rgba(30, 51, 218, 0.958333) 4.17%, rgba(30, 51, 218, 0) 100%);
opacity: 0.5; opacity: 0.5;
transform: rotate(-17.32deg); transform: rotate(-17.32deg);
} }
.computer-block { .computer-block {
background: url('img/Macbook_color 1.png') no-repeat; background: url('img/Macbook_color 1.png') no-repeat center;
position: relative; position: relative;
width: 100%; width: 100%;
height: 1080px; height: 1080px;
left: 23%; left: 0;
top: -4rem; top: -4rem;
} }
} }
@media screen and (max-width: 1023px) {
#carry {
padding-left: 10vw;
padding-right: 10vw;
.description {
margin-top: 3vh;
font-size: 8rem;
}
.computer-block {
background-size: contain;
top: -10rem;
}
}
}

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

@ -3,7 +3,13 @@
padding-top: 25vh; padding-top: 25vh;
.left-column{ .left-column{
width: 25vw; width: 50vw;
margin: 0 auto;
.text-content{
max-width: 25vw;
text-align: left;
}
} }
.title{ .title{
margin-top: 250px; margin-top: 250px;
@ -35,7 +41,7 @@ margin-top: 250px;
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
font-style: normal; font-style: normal;
padding: 1rem; padding: 2rem;
position: relative; position: relative;
right: 0; right: 0;
top: 16vh; top: 16vh;
@ -57,12 +63,10 @@ margin-top: 250px;
.bubbles{ .bubbles{
.bubble{ .bubble{
position: relative; position: relative;
&:nth-of-type(0){ &:nth-of-type(1){
left: 694px; left: 694px;
top: 1240px; top: 1240px;
} }
&:nth-of-type(1){
}
&:nth-of-type(2){ &:nth-of-type(2){
} }
} }

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

@ -4,42 +4,16 @@
<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="transactionnal_webdesign"
class="has-text-centerd"
>
<h2 class="title">
Transactional
</h2>
<div class="description has-text-centered">
Webdesign
</div>
<div class="columns">
<div class="column first">
<h3 class="sub-title">
For all your
<br>
<span class="color-emphasis"> digital</span> uses.
</h3>
</div>
<div class="column second">
Our creative competitive edge <br>
<br>
We leverage our own studio in Paris equipped to produce all e-formats.
We power transactional content with our technology. Our content is
transactional and generate online sales. We produce multi-purpose
content at scale for all touchpoints to reduce costs.
</div>
</div>
</section>
<section id="carry"> <section id="carry">
<h2 class="title color-emphasis"> <h2 class="title color-emphasis">
We carry out web design and development We carry out web design and development
</h2> </h2>
<p class="description"> <p class="description">
in headless commerce. in headless
<br>
commerce.
</p> </p>
<div class="gradient-bg-yellow" />
<div class="gradient-bg" /> <div class="gradient-bg" />
<div class="computer-block" /> <div class="computer-block" />
<div class="bubbles secondary-color"> <div class="bubbles secondary-color">
@ -48,227 +22,6 @@
<p>Web App (pwa) development</p> <p>Web App (pwa) development</p>
<p>Consulting</p> <p>Consulting</p>
</div> </div>
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
</section>
<section id="kyc">
<div class="left-column">
<h2 class="title primary-color">
We help you to know your customer needs
</h2>
<p class="description secondary-color">
With our method
</p>
<a
href="#kyc"
class="button"
> 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
</h2>
<p class="description secondary-color">
a quick and smoth consumer journey and never ending shopping experience
at the same time
</p>
<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
brand stakes.
</h2>
<div class="phone-container">
<div class="top" />
<div class="picture" />
<div class="bottom" />
</div>
<div class="arrow-left" />
<div class="arrow-right" />
<div class="data">
Data
</div>
<div class="data">
AR
</div>
<div class="quick">
Quick wins
</div>
<div class="long_term">
Long-Term Project
</div>
</section>
<section id="full_creative">
<h2 class="title secondary-color">
A full creative & production Studio in Paris
</h2>
<div class="tiles columns dark-color">
<div class="aside column" />
<div class="picture column" />
<div class="picture column" />
</div>
</section>
<section id="our_team">
<h2 class="title primary-color">
Our team.
</h2>
<div class="sub-category dark-color">
<p>of experts and directors.</p>
<div class="columns">
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
</div>
</div>
<div class="sub-category">
<h3 class="sub-title">
and our senior team
</h3>
<div class="columns">
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
</div>
</div>
</section>
<section id="china_achievements">
<div class="columns">
<div class="column">
<h2 class="title primary-color">
Our China achievements
</h2>
</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="tile-item">
<div class="column">
<h3>
<span class="number">400+</span>
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
</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.
</p>
</div>
</section>
<section
id="baozun_group"
class="has-rounded-corners"
>
<h2 class="title">
Baozun Group
<br>
and Company.
</h2>
</section> </section>
</div> </div>
</main> </main>

260
sesame-vitejs/sesame/src/components/DisabledSection.vue Normal file
View File

@ -0,0 +1,260 @@
<template>
<section
id="transactionnal_webdesign"
class="has-text-centerd"
>
<h2 class="title">
Transactional
</h2>
<div class="description has-text-centered">
Webdesign
</div>
<div class="columns">
<div class="column first">
<h3 class="sub-title">
For all your
<br>
<span class="color-emphasis"> digital</span> uses.
</h3>
</div>
<div class="column second">
Our creative competitive edge <br>
<br>
We leverage our own studio in Paris equipped to produce all e-formats.
We power transactional content with our technology. Our content is
transactional and generate online sales. We produce multi-purpose
content at scale for all touchpoints to reduce costs.
</div>
</div>
</section>
<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
</h2>
<p class="description secondary-color">
a quick and smoth consumer journey and never ending shopping experience
at the same time
</p>
<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
brand stakes.
</h2>
<div class="phone-container">
<div class="top" />
<div class="picture" />
<div class="bottom" />
</div>
<div class="arrow-left" />
<div class="arrow-right" />
<div class="data">
Data
</div>
<div class="data">
AR
</div>
<div class="quick">
Quick wins
</div>
<div class="long_term">
Long-Term Project
</div>
</section>
<section id="full_creative">
<h2 class="title secondary-color">
A full creative & production Studio in Paris
</h2>
<div class="tiles columns dark-color">
<div class="aside column" />
<div class="picture column" />
<div class="picture column" />
</div>
</section>
<section id="our_team">
<h2 class="title primary-color">
Our team.
</h2>
<div class="sub-category dark-color">
<p>of experts and directors.</p>
<div class="columns">
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
</div>
</div>
<div class="sub-category">
<h3 class="sub-title">
and our senior team
</h3>
<div class="columns">
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
<div class="person column">
<div class="picture" />
<p class="name">
Name Surname
</p>
</div>
</div>
</div>
</section>
<section id="china_achievements">
<div class="columns">
<div class="column">
<h2 class="title primary-color">
Our China achievements
</h2>
</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="tile-item">
<div class="column">
<h3>
<span class="number">400+</span>
<span class="description">Store launches incl. Dr. Martens, G-star etc.</span>
</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.
</p>
</div>
</section>
<section
id="baozun_group"
class="has-rounded-corners"
>
<h2 class="title">
Baozun Group
<br>
and Company.
</h2>
</section>
</template>
<script>
</script>