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

style sections, global colors vars

Browse Source
This commit is contained in:
Tykayn 2023-05-24 18:28:12 +02:00 committed by tykayn
parent eab080d599
commit a23d1df7cf
11 changed files with 471 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sesame-vitejs/sesame/img/baozun.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 493 KiB

35
sesame-vitejs/sesame/src/assets/styles/0-general.css
View File

@ -1,35 +0,0 @@
/******** all sections *********/
body {
background: #020225;
padding-bottom: 50vh;
overflow-x: hidden;
}
main section {
font-family: "GT Walsheim Pro", Arial;
height: 1300px;
min-height: 1300px;
width: 100vw;
}
main section h2 {
color: #fffdfc;
font-family: "GT Walsheim Pro", Arial;
font-size: 60px;
font-style: normal;
font-weight: 600;
/* or 66px */
letter-spacing: -0.04em;
/* Secondary 100 */
line-height: 110%;
}
img {
max-width: 100vw;
}
.credits {
margin-top: 10vh;
}

52
sesame-vitejs/sesame/src/assets/styles/0-general.scss Normal file
View File

@ -0,0 +1,52 @@
/******** all sections *********/
body {
background: #020225;
padding-bottom: 50vh;
overflow-x: hidden;
font-family: "GT Walsheim Pro", Arial;
}
main {
section {
font-family: "GT Walsheim Pro", Arial;
height: 100vh;
min-height: 1300px;
width: 100vw;
h2 {
color: #fffdfc;
font-size: 60px;
font-style: normal;
font-weight: 600;
letter-spacing: -0.04em;
line-height: 110%;
}
}
img {
max-width: 100vw;
}
.credits {
margin-top: 10vh;
}
}
#sprint_4 {
background: #ccc;
}
.primary-color{
color: $primary-color;
}
.secondary-color{
color: $secondary-color;
}
.dark-color{
color: $dark-color;
}

28
sesame-vitejs/sesame/src/assets/styles/10-webdesign.scss
View File

@ -1,13 +1,14 @@
#transactionnal_webdesign {
padding-top: 363px;
background: url('');
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 74.66%);
background-size: cover ;
font-family: "GT Walsheim Pro";
color: #00001f;
.title {
width: 1680px;
height: 109px;
font-style: normal;
font-weight: 600;
font-size: 40px;
@ -16,7 +17,6 @@
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fffdfc;
backdrop-filter: blur(5px);
flex: none;
order: 0;
@ -25,14 +25,34 @@
.description {
color: rgba(231, 112, 100, 0.8);
font-weight: 600;
font-size: 270px;
line-height: 65%;
backdrop-filter: blur(5px);
margin-bottom:140px;
}
.color-emphasis {
color: #1e33da;
}
.sub-title{
font-weight: 600;
font-size: 100px;
line-height: 90px;
letter-spacing: -0.04em;
}
.columns {
text-align:left;
margin: 0 auto;
width: 80%;
}
.second{
font-weight: 400;
font-size: 24px;
line-height: 130%;
}
}

3
sesame-vitejs/sesame/src/assets/styles/_0-variables.scss Normal file
View File

@ -0,0 +1,3 @@
$primary-color: #1E33DA;
$secondary-color: #E77064;
$dark-color: #020225;;

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

@ -0,0 +1,99 @@
#carry {
position: relative;
background:white;
.title {
margin-bottom: 46px;
font-size: 60px;
line-height: 110%;
}
.description {
margin-top: 270px;
font-style: normal;
font-weight: 600;
font-size: 270px;
line-height: 65%;
text-align: center;
letter-spacing: -0.06em;
color: rgba(30, 51, 218, 0.15);
}
.description2{
font-weight: 600;
font-size: 60px;
line-height: 110%;
text-align: center;
}
.color-emphasis {
color: #1e33da;
}
.bubbles {
p{
position: relative;
padding: 4em;
background: url('img/Ellipse 777.2.png') no-repeat;
font-weight: 400;
font-size: 24px;
line-height: 130%;
display: flex;
align-items: center;
text-align: center;
color: #E77064;
&:nth-of-type(0){
position: absolute;
width: 315px;
height: 285px;
left: 92px;
top: 814px;
}
&: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{
position: absolute;
width: 1189.9px;
height: 644.02px;
left: 182.69px;
top: 1088.73px;
/* Gradient/radial_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;
transform: rotate(-17.32deg);
}
.computer-block {
background: url('img/Macbook_color 1.png') no-repeat;
position: absolute;
width: 1920px;
height: 1080px;
left: -61px;
top: 329px;
}
}

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

@ -0,0 +1,13 @@
#kyc{
background: white;
.title{
margin-top: 250px;
}
.description{
}
.color-emphasis {
color: #1E33DA;
}
}

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

@ -0,0 +1,10 @@
#cina{
.title{
}
.description{
}
.color-emphasis {
}
}

15
sesame-vitejs/sesame/src/assets/styles/_18-baozun-group.scss
View File

@ -0,0 +1,15 @@
#baozun_group{
margin-top: 150px;
background: url('img/baozun.jpg')no-repeat;
background-size: cover;
.title{
color:#FFFDFC;
font-style: normal;
font-weight: 600;
font-size: 100px;
line-height: 90px;
text-align: center;
letter-spacing: -0.04em;
padding-top: 464px;
}
}

3
sesame-vitejs/sesame/src/assets/styles/main.scss
View File

@ -9,7 +9,8 @@ libs
/**
custom
*/
@import "./0-general.css";
@import "./0-variables.scss";
@import "0-general";
@import "./0-1-nav.css";
@import "./1-cover.css";
@import "./1-2-main_title.css";

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

@ -3,6 +3,7 @@
<template>
<main class="has-text-centered">
<!-- sprint 4 content-->
<div id="sprint_4">
<section
id="transactionnal_webdesign"
class="has-text-centerd"
@ -10,9 +11,9 @@
<h2 class="title">
Transactional
</h2>
<p class="description">
<div class="description has-text-centered">
Webdesign
</p>
</div>
<div class="columns">
<div class="column first">
<h3 class="sub-title">
@ -32,27 +33,34 @@
</div>
</section>
<section id="carry">
<h2 class="color-emphasis">
<h2 class="title color-emphasis">
We carry out web design and development
</h2>
<p class="description">
in headless commerce.
</p>
<div class="gradient-bg" />
<div class="computer-block" />
<div class="bubbles">
<p>Evolutive maintenance</p>
<p>Front end (ux/ui) development</p>
<p>Web App (pwa) development</p>
<p>Consulting</p>
</div>
<p>
<p class="description2 primary-color">
We craft e-commerce Ux template based on qualitative and quantitative
studies
</p>
</section>
<section id="kyc">
<h2>We help you to know your customer needs</h2>
<p>With our method</p>
<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"
@ -65,48 +73,50 @@
</div>
</section>
<section id="china">
<h2>Our China-inspired ui in 4 pillars</h2>
<p>
<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">
<div class="top block-1">
Content driven
</div>
<div class="bottom">
<div class="bottom block-2">
-Rebound rate
</div>
</div>
<div class="block">
<div class="top">
<div class="top block-3">
Experimental
</div>
<div class="bottom">
<div class="bottom block-4">
-Return rate
</div>
</div>
<div class="block">
<div class="top">
<div class="top block-5">
Interactive
</div>
<div class="bottom">
<div class="bottom block-6">
+Conversion rate
</div>
</div>
<div class="block">
<div class="top">
<div class="top block-7">
Agile
</div>
<div class="bottom">
<div class="bottom block-8">
+Retention rate
</div>
</div>
</div>
</section>
<section id="we_develop">
<h2>
<h2 class="title secondary-color">
We develop custom-made innovative e-commerce features based on your
brand stakes.
</h2>
@ -131,16 +141,20 @@
</div>
</section>
<section id="full_creative">
<h2>A full creative & production Studio in Paris</h2>
<div class="tiles columns">
<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>Our team.</h2>
<div class="sub-category">
<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">
@ -170,7 +184,9 @@
</div>
</div>
<div class="sub-category">
<p>and our senior team</p>
<h3 class="sub-title">
and our senior team
</h3>
<div class="columns">
<div class="person column">
<div class="picture" />
@ -202,10 +218,12 @@
<section id="china_achievements">
<div class="columns">
<div class="column">
<h2>Our China achievements</h2>
<h2 class="title primary-color">
Our China achievements
</h2>
</div>
<div class="column">
<p>
<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
@ -239,72 +257,15 @@
id="baozun_group"
class="has-rounded-corners"
>
<h2>Baozun Group and Company.</h2>
<h2 class="title">
Baozun Group
<br>
and Company.
</h2>
</section>
</div>
</main>
</template>
<style lang="scss">
#hand {
background: url("/img/hand 1.png");
background-size: cover;
position: absolute;
width: 100vw;
height: 1300px;
left: 1px;
top: -2px;
}
#cover {
background: url("/img/BG 1.png") no-repeat;
background-size: cover;
h2 {
position: absolute;
top: 10vh;
left: 42vw;
/* Subtitle/desktop_1 */
font-family: "GT Walsheim Pro", Arial;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 120%;
/* or 48px */
text-align: center;
letter-spacing: -0.04em;
/* Secondary 100 */
color: #fffdfc;
}
.button {
box-sizing: border-box;
position: relative;
right: 0;
top: calc(1 / 3 * 100vh);
bottom: 0;
width: 150px;
height: 150px;
padding: 1rem;
color: white;
font-family: "GT Walsheim Pro", Arial;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 26px;
background: linear-gradient(
329.49deg,
rgba(255, 216, 244, 0) 34.06%,
rgba(255, 207, 242, 0.2) 77.26%
);
backdrop-filter: blur(2.96px);
border-radius: 100%;
left: 3rem;
}
}
</style>