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

responsive we develop

Browse Source
This commit is contained in:
Tykayn 2023-06-01 12:02:50 +02:00 committed by tykayn
parent 157d5923a4
commit 63ce62f326
7 changed files with 419 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sesame-vitejs/sesame/src/assets/styles/7-responsive.css
View File

@ -100,6 +100,7 @@
.slider-screen {
min-height: 100vh;
}
}
@media screen and (max-width: 35em) {

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

@ -117,23 +117,31 @@
}
}
@media screen and (max-width: 1600px) {
@media all and (max-width: 1600px) {
section#carry {
min-height: 200vh;
min-height: 120rem;
.description {
margin-top: 3vh;
font-size: 8rem;
}
//
//.gradient-bg {
// top: 0;
// left: 15vw;
//}
.gradient-bg {
top: -40rem;
}
.gradient-bg-yellow {
top: 10rem;
}
.computer-block {
margin-top: -50vh;
width: 70%;
height: 1080px;
left: 0;
top: -110em;
background-size: contain;
margin: 0 auto;
}
.bubbles {
@ -163,11 +171,11 @@
}
}
@media screen and (max-width: 1023px) {
@media all and (max-width: 1100px) {
section#carry {
padding-left: 10vw;
padding-right: 10vw;
min-height: 200vh ;
min-height: 115rem;
.title {
font-size: 4rem;
@ -182,12 +190,24 @@
background-size: contain;
position: relative;
height: 100vh;
margin-top: -73vh;
width: 100%;
margin-top: -15rem;
}
.gradient-bg {
margin-top: 0;
}
.gradient-bg-yellow {
margin-top: 0;
}
.bubbles{
position: relative;
left: -5vw;
position: static;
p {
margin-top: 2rem;
left: 0;
&:nth-of-type(1){
left: 10%;
}
@ -197,18 +217,15 @@
}
&:nth-of-type(3){
left: 50%;
left: 4vw;
margin-left: -60%;
}
&:nth-of-type(4){
left: 10%;
left: -10%;
}
}
}
//.gradient-bg{
// top: 19vh;
// left:15vw;
//}
}
}

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

@ -1,5 +1,4 @@
#kyc{
position: absolute;
font-family: 'GT Walsheim Pro';
background: white;
@ -173,7 +172,7 @@ margin-top: 250px;
@media screen and (max-width: 1300px) {
#kyc{
.small-bubble:nth-of-type(1){
margin-top:4rem;
margin-top: 14rem;
}
.bubbles{
@ -187,7 +186,7 @@ margin-top: 250px;
margin-left: 5rem;
}
&:nth-of-type(3){
margin-left: 10rem;
margin-left: 34%;
margin-top: 0;
}
}

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

@ -1,13 +1,10 @@
#china {
//background-color: green;
background: url('img/china-bg.png') no-repeat;
background-size: cover;
background-color: #141373;
height: 1060px;
width: 99vw;
position: relative;
top: 200vh;
width: 100vw;
padding-bottom: 20rem;
border-radius: 2rem;
border-radius: 5rem;
overflow: hidden;
.line {
background: url(img/line.png) no-repeat;
@ -58,7 +55,8 @@
z-index: 10;
}
.block-items, block-item {
.block-item {
color: white;
font-family: 'GT Walsheim Pro';
font-style: normal;
@ -69,6 +67,8 @@
background-size: contain;
}
.block-items {
.block-item {
@ -117,14 +117,50 @@
}
}
}
}
.show-on-medium {
display: block;
}
.hide-on-medium {
display: none;
}
}
@media screen and (max-width: 1023px) {
@media screen and (max-width: 1300px) {
#china {
.show-on-medium {
display: none;
}
.hide-on-medium {
display: block;
}
.line {
width: 62vw;
top: 10vh;
}
.block-item {
margin: 0;
margin-bottom: 2rem;
text-align:center;
}
.top {
font-size: 4rem;
margin-bottom: 2rem;
}
.bottom {
margin: 0;
font-size: 3rem;
}
.cols {
.columns {
text-align: center;
display: block;
}
}
}

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

@ -1,5 +1,5 @@
#we_develop {
height: 100vh;
height: 200vh;
width: 100vw;
display: block;
position: relative;
@ -7,9 +7,10 @@
background-color: #fff;
text-align: center;
margin-top: -14rem;
.title {
padding-top: 4rem;
padding-top: 26rem;
padding-bottom: 2rem;
font-family: 'GT Walsheim Pro';
font-style: normal;
@ -19,12 +20,9 @@
text-align: center;
letter-spacing: -0.04em;
max-width: 54rem;
margin: 0 auto;
margin: 2rem auto;
}
.description {
}
.quick, .long_term {
font-family: 'GT Walsheim';
@ -38,7 +36,7 @@
position: absolute;
left: 104px;
top: 690px;
top: 70rem;
}
.long_term {
@ -106,6 +104,7 @@
img {
margin-top: 1.25rem;
margin-left: 0;
}
}
@ -115,19 +114,22 @@
height: 4rem;
width: 4rem;
position: absolute;
top: 50vh;
left: 28vw;
top: 67rem;
background: white;
&.circle-right {
right: 31vw;
}
.circle-right {
left: auto;
right: 28vw;
&.circle-left {
right: 66vw;
}
}
.arrow-right-2 {
position: absolute;
left: auto;
right: 28vw;
}
.rotated {
@ -136,3 +138,48 @@
}
}
@media all and (max-width: 1500px) {
#we_develop {
.circle {
&.circle-right {
right: 10vw;
}
&.circle-left {
right: 90vw;
}
}
.quick {
left: 3rem;
top: 77rem;
}
.long_term {
margin-right: 5rem;
}
.data {
text-align: left;
padding-left: 6rem;
margin-top: 2rem;
}
.ar {
text-align: right;
padding-right: 6rem;
margin-top: 3rem;
}
}
}
@media all and (max-width: 1100px) {
#we_develop {
.ar {
margin-top: -3rem;
}
}
}

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

@ -7,100 +7,150 @@
<main class="has-text-centered">
<!-- sprint 4 content-->
<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">
<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>
<!-- responsive managed until here -->
<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
<section id="china">
<h2 class="title primary-color">
Our China-inspired ui in 4 pillars
</h2>
<p class="description secondary-color text-content">
With our method
<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="pillars show-on-medium">
<div class="block-items columns ">
<div class="block-item column">
<div class="top block-item-1">
<p>
Content driven
</p>
<a
href="#kyc"
class="button text-content"
> Show Sesame method </a>
</div>
<div class="column" />
<div class="bottom block-item-2">
- Rebound rate
</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>
</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>
</div>
<div class="cols hide-on-medium">
<div class="small-cols 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>
</div>
</section>
to Prioritize development effort
</span>
</p>
<p class="bubble">
<span>
<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-2">
<div class="top" />
<div class="picture" />
<div class="bottom" />
</div>
<div class="container-arrows">
<div class="circle circle-left">
<img
class="rotated"
src="img/arrow.svg"
alt=""
>
</div>
<div class="circle circle-right">
<img
to improve customer satisfaction
</span>
</p>
<p class="bubble">
<span>
to increase conversion rate
</span>
</p>
src="img/arrow.svg"
alt=""
>
</div>
</div>
<div class="columns light-text">
<div class="column data">
Data
</div>
<div class="column ar">
AR
</div>
</div>
<div class="quick secondary-color">
Quick wins
</div>
<div class="long_term secondary-color">
Long-Term
<br>
Project
</div>
</section>
</div>

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

@ -1,109 +1,101 @@
<template>
<section id="china">
<h2 class="title primary-color">
Our China-inspired ui in 4 pillars
<section
id="transactionnal_webdesign"
class="has-text-centerd"
>
<h2 class="title">
Transactional
</h2>
<p class="description secondary-color">
a quick and smooth consumer journey and never
<div class="description has-text-centered">
Webdesign
</div>
<div class="columns">
<div class="column first">
<h3 class="sub-title">
For all your
<br>
ending shopping experience at the same time
<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="line" />
<div class="block-items columns">
<div class="block-item column">
<div class="top block-item-1">
<p>
Content driven
<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>
<div class="bottom block-item-2">
- Rebound rate
</div>
</div>
<div class="block-item column">
<div class="top block-item-3">
<p>
Experimental
<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="bottom block-item-4">
- Return rate
<div class="column" />
</div>
</div>
<div class="block-item column">
<div class="top block-item-5">
<p>
Interactive
<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>
</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 class="bubble">
<span>
to improve customer satisfaction
</span>
</p>
<p class="bubble">
<span>
to increase conversion rate
</span>
</p>
</div>
<div class="bottom block-item-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-2">
<div class="top" />
<div class="picture" />
<div class="bottom" />
</div>
<div class="container-arrows">
<div class="circle">
<img
class="rotated"
src="img/arrow.svg"
alt=""
>
</div>
<div class="circle circle-right">
<img
src="img/arrow.svg"
alt=""
>
</div>
</div>
<div class="columns light-text">
<div class="column data">
Data
</div>
<div class="column ar">
AR
</div>
</div>
<div class="quick secondary-color">
Quick wins
</div>
<div class="long_term secondary-color">
Long-Term
<br>
Project
</div>
</section>
<section id="full_creative">
<h2 class="title secondary-color">
@ -147,7 +139,6 @@
</div>
</div>
</section>
<section id="our_team">
<h2 class="title primary-color">
Our team.