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

display all new sections

Browse Source
This commit is contained in:
Tykayn 2023-06-01 12:31:12 +02:00 committed by tykayn
parent d52a991dad
commit 3ef047c603
4 changed files with 155 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,21 @@
#kyc{ #kyc {
font-family: 'GT Walsheim Pro'; font-family: 'GT Walsheim Pro';
background: white; background: white;
padding-top: 25vh; padding-top: 25vh;
min-height:150vh; min-height: 150vh;
.text-content{ .text-content {
max-width: 37rem; max-width: 37rem;
text-align: left; text-align: left;
} }
.left-column{ .left-column {
padding-left: 5vw; padding-left: 5vw;
} }
.title{
margin-top: 250px; .title {
margin-top: 250px;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
@ -24,7 +25,8 @@ margin-top: 250px;
/* or 90% */ /* or 90% */
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
.description2{
.description2 {
font-weight: 500; font-weight: 500;
font-size: 60px; font-size: 60px;
line-height: 110%; line-height: 110%;
@ -36,13 +38,15 @@ margin-top: 250px;
width: 100%; width: 100%;
display: block; display: block;
} }
.description{
.description {
font-weight: 500; font-weight: 500;
font-size: 60px; font-size: 60px;
line-height: 110%; line-height: 110%;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
.button{
.button {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 26px; line-height: 26px;
@ -58,15 +62,16 @@ margin-top: 250px;
right: 0; right: 0;
top: 2rem; top: 2rem;
min-width: 15rem; min-width: 15rem;
float:left; float: left;
color: #020225; color: #020225;
border-color: $secondary-color; border-color: $secondary-color;
} }
.color-emphasis { .color-emphasis {
color: #1E33DA; color: #1E33DA;
} }
.fat-text{ .fat-text {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 30px; font-size: 30px;
@ -74,49 +79,58 @@ margin-top: 250px;
text-transform: uppercase; text-transform: uppercase;
color: #FFFDFC; color: #FFFDFC;
} }
.bubbles{
.bubble{ .bubbles {
margin-top: -60vw;
.bubble {
position: relative; position: relative;
text-align: left; text-align: left;
float: left; float: left;
span{
span {
margin-left: 2rem; margin-left: 2rem;
float:left; float: left;
width: 20rem; width: 20rem;
} }
&:nth-of-type(1){
&:nth-of-type(1) {
width: 25rem; width: 25rem;
height: 23rem; height: 23rem;
left: 46rem; left: 46rem;
top: -34rem; top: -34rem;
background: url('img/bubble_1.png') no-repeat; background: url('img/bubble_1.png') no-repeat;
span{
padding: 6rem 2.5rem; span {
padding: 6rem 2.5rem;
} }
} }
&:nth-of-type(2){
&:nth-of-type(2) {
background: url('img/bubble_2.png') no-repeat; background: url('img/bubble_2.png') no-repeat;
left: 34vw; left: 34vw;
top: -15rem; top: -15rem;
width: 35rem; width: 35rem;
height: 35rem; height: 35rem;
background-size: contain; background-size: contain;
span{
span {
margin-top: 13rem; margin-top: 13rem;
margin-left: 5rem; margin-left: 5rem;
} }
} }
&:nth-of-type(3){
&:nth-of-type(3) {
background: url('img/bubble_3.png') no-repeat; background: url('img/bubble_3.png') no-repeat;
left: -27vw; left: -27vw;
top: 8rem; top: 8rem;
width: 27rem; width: 27rem;
height: 35rem; height: 35rem;
background-size: contain; background-size: contain;
span{
span {
margin-top: 10rem; margin-top: 10rem;
margin-left: 5rem; margin-left: 5rem;
width: 15rem; width: 15rem;
@ -124,68 +138,74 @@ margin-top: 250px;
} }
} }
} }
.small-bubble{
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center ; .small-bubble {
background: url('img/Snapinsta-app_333082592_594932912202163_8553480550880340640_n008.png') no-repeat center;
background-size: contain; background-size: contain;
position: absolute; position: relative;
//width: 50rem;
//height: 50rem;
margin-top: 0; margin-top: 0;
&:nth-of-type(1){ &:nth-of-type(1) {
filter: blur(6.5px); filter: blur(6.5px);
width: 137px; width: 137px;
height: 176px; height: 176px;
left: 316px; left: 316px;
top: 400px; top: 400px;
} }
&:nth-of-type(2){
&:nth-of-type(2) {
filter: blur(2px); filter: blur(2px);
width: 203px; width: 203px;
height: 253.75px; height: 253.75px;
left: 1343px; left: 1343px;
top: 422px; top: 422px;
} }
&:nth-of-type(3){
&:nth-of-type(3) {
filter: blur(5px); filter: blur(5px);
width: 141px; width: 141px;
height: 176px; height: 176px;
left: 865px; left: 865px;
top: 918px; top: 918px;
} }
&:nth-of-type(4){
&:nth-of-type(4) {
filter: blur(1px); filter: blur(1px);
width: 77px; width: 77px;
height: 96px; height: 96px;
left: 490px; left: 490px;
top: 1129px; top: 1129px;
} }
&:nth-of-type(5){
&:nth-of-type(5) {
width: 288px; width: 288px;
height: 360px; height: 360px;
left: 1124px; left: 1124px;
top: 1382px; top: 10vhpx;
} }
} }
} }
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
#kyc{ #kyc {
.small-bubble:nth-of-type(1){ .small-bubble:nth-of-type(1) {
margin-top: 14rem; margin-top: 14rem;
} }
.bubbles{
.bubble{ .bubbles {
.bubble {
position: static; position: static;
&:nth-of-type(1){ &:nth-of-type(1) {
margin-left: 12rem; margin-left: 12rem;
} }
&:nth-of-type(2){
&:nth-of-type(2) {
margin-left: 5rem; margin-left: 5rem;
} }
&:nth-of-type(3){
&:nth-of-type(3) {
margin-left: 34%; margin-left: 34%;
margin-top: 0; margin-top: 0;
} }

1
sesame-vitejs/sesame/src/assets/styles/_14-we-develop.scss
View File

@ -7,7 +7,6 @@
background-color: #fff; background-color: #fff;
text-align: center; text-align: center;
margin-top: -14rem;
.title { .title {
padding-top: 26rem; padding-top: 26rem;

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

@ -6,6 +6,101 @@
<template> <template>
<main class="has-text-centered"> <main class="has-text-centered">
<!-- sprint 4 content--> <!-- sprint 4 content-->
<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">
<h2 class="title color-emphasis">
We carry out web design and development
</h2>
<p class="description">
in headless
<br>
commerce.
</p>
<div class="gradient-bg-yellow" />
<div class="gradient-bg" />
<div class="computer-block" />
<div class="bubbles secondary-color">
<p>Evolutive maintenance</p>
<p>Front end (ux/ui) development</p>
<p>Web App (pwa) development</p>
<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 id="sprint_4"> <div id="sprint_4">
<section id="china"> <section id="china">
<h2 class="title primary-color"> <h2 class="title primary-color">

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

@ -1,98 +1,5 @@
<template> <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="carry">
<h2 class="title color-emphasis">
We carry out web design and development
</h2>
<p class="description">
in headless
<br>
commerce.
</p>
<div class="gradient-bg-yellow" />
<div class="gradient-bg" />
<div class="computer-block" />
<div class="bubbles secondary-color">
<p>Evolutive maintenance</p>
<p>Front end (ux/ui) development</p>
<p>Web App (pwa) development</p>
<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>