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

add instructions in readme

Browse Source
This commit is contained in:
Tykayn 2023-04-27 17:04:28 +02:00 committed by tykayn
parent 200f7760b5
commit 36ca950aeb
24 changed files with 2463 additions and 1040 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -5,6 +5,6 @@ root = true
[*] [*]
charset = utf-8 charset = utf-8
indent_size = 2 indent_size = 2
indent_style = space indent_style = tab
insert_final_newline = true insert_final_newline = true
trim_trailing_whitespace = true trim_trailing_whitespace = true

5
.idea/codeStyles/codeStyleConfig.xml Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

9
README.md
View File

@ -1,8 +1,13 @@
# Digital theory integration website # Digital theory integration website
by B. Lemoine contact@cipherbliss.com by B. Lemoine contact@cipherbliss.com
# démo # Maquette par Digital Theory
https://www.figma.com/file/dF3R9nfCqBP5FzQf9baE0e/Sesame-Digital-Website?node-id=261-431&t=PiTtYTt3zC5PwWQR-0
# Démo
- installer les paquets `npm i` - installer les paquets `npm i`
- lancer la page index avec `serve` - lancer la page index avec `npm start`
- visiter https://localhost:3000 - visiter https://localhost:3000
# Installer en production
il suffit de copier les fichiers HTML et les dossiers voisins puis de configurer son serveur pour avoir un domaine servant la page index.html afin de voir le tout.
il est conseillé d'optimiser les imports avec un compilateur de dépendances frontend tel que Rollup ou webpack.

30
css/0-1-nav.css
View File

@ -1,42 +1,44 @@
main nav { main nav {
padding: 24px; color: #fffdfc;
font-size: 24px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 24px;
line-height: 130%; line-height: 130%;
text-align: center; padding: 24px;
color: #FFFDFC;
width: 100%;
position: fixed; position: fixed;
text-align: center;
top: 0; top: 0;
width: 100%;
} }
.burger-menu { .burger-menu {
float: left;
width: 150px; width: 150px;
float: left;
} }
.icon-burger{
.icon-burger {
cursor: pointer; cursor: pointer;
width: 40px;
height: 1em;
float: left; float: left;
height: 1em;
margin-top: 0.3rem; margin-top: 0.3rem;
width: 40px;
} }
.icon-burger .line{
.icon-burger .line {
border-top: 2px solid #fff; border-top: 2px solid #fff;
margin-bottom: 6px;
display: block; display: block;
margin-bottom: 6px;
} }
.nav-main { .nav-main {
color: #fffdfc;
height: 54px;
text-align: center; text-align: center;
top: 54px; top: 54px;
color: #FFFDFC;
width: 100%; width: 100%;
height: 54px;
} }
.fixed-nav{ .fixed-nav {
z-index: 30; z-index: 30;
} }

19
css/0-general.css
View File

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

14
css/1-2-main_title.css
View File

@ -12,19 +12,19 @@
#main_title { #main_title {
box-sizing: border-box; background: url("/img/sesame.png") no-repeat;
background: url('/img/sesame.png') no-repeat;
background-size: contain; background-size: contain;
box-sizing: border-box;
height: 35vh;
margin: 0 auto;
max-width: 1200px;
position: relative; position: relative;
top: 4rem; top: 4rem;
height: 35vh;
width: 95vw; width: 95vw;
max-width: 1200px;
margin: 0 auto;
} }
#main_title_container h2{ #main_title_container h2 {
margin-top:33vh; margin-top: 33vh;
} }

60
css/1-cover.css
View File

@ -1,61 +1,63 @@
#hand { #hand {
background: url('/img/hand 1.png') center; background: url("/img/hand 1.png") center;
background-size: cover; background-size: cover;
position: relative;
width: 100vw;
height: 1300px; height: 1300px;
left: 1px; left: 1px;
position: relative;
top: -2px; top: -2px;
width: 100vw;
z-index: 0 z-index: 0
} }
#main_title_container{
position:absolute; #main_title_container {
z-index: 2;
top: 0;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
position: absolute;
top: 0;
z-index: 2;
} }
#cover { #cover {
background: url('/img/BG 1.png') center no-repeat; background: url("/img/BG 1.png") center no-repeat;
background-size: cover; background-size: cover;
} }
#cover #cover
.title-container{ .title-container {
text-align:center; text-align: center;
} }
#cover h2 { #cover h2 {
color: #fffdfc;
font-size: 40px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 40px;
line-height: 120%;
text-align: center;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 120%;
color: #FFFDFC;
z-index: 2;
position: relative; position: relative;
text-align: center;
z-index: 2;
} }
#cover .button { #cover .button {
top: 16vh; backdrop-filter: blur(3px);
background: linear-gradient(329.49deg,
box-sizing: border-box; rgba(255, 216, 244, 0) 34.06%,
rgba(255, 207, 242, 0.2) 77.26%);
position: relative; border-radius: 100%;
right: 0;
bottom: 0; bottom: 0;
width: 150px; box-sizing: border-box;
height: 150px;
padding: 1rem;
color: white; color: white;
font-size: 18px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 18px; height: 150px;
line-height: 26px; line-height: 26px;
background: linear-gradient(329.49deg, rgba(255, 216, 244, 0) 34.06%, rgba(255, 207, 242, 0.2) 77.26%); padding: 1rem;
backdrop-filter: blur(3px); position: relative;
border-radius: 100%; right: 0;
top: 16vh;
width: 150px;
} }

49
css/2-we-come-from.css
View File

@ -1,73 +1,74 @@
#welcome {
#welcome{
text-shadow: 0 0 1rem #333;
position: absolute;
background: #000; background: #000;
position: absolute;
text-shadow: 0 0 1rem #333;
} }
#welcome img { #welcome img {
position: absolute; position: absolute;
} }
#welcome h2 { #welcome h2 {
font-weight: 600; color: #f9f3f1;
font-size: 8em; font-size: 8em;
line-height: 90px; font-weight: 600;
text-align: center;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: #F9F3F1; line-height: 90px;
z-index: 2; margin-top: 400px;
position: relative; position: relative;
text-align: center;
width: 80vw; width: 80vw;
margin-top:400px; z-index: 2;
} }
#welcome .color-emphasis { #welcome .color-emphasis {
color: #1E33DA; color: #1e33da;
} }
#welcome .phone-container { #welcome .phone-container {
background: url('/img/section2_phone.png'); background: url("/img/section2_phone.png");
background-size: cover; background-size: cover;
} }
/************ phones ************/ /************ phones ************/
.phones-land{ .phones-land {
z-index:-1; float: left;
position: static; position: static;
float:left; z-index: -1;
} }
#phone-watches-1 { #phone-watches-1 {
position: absolute;
width: 345px;
height: 690px; height: 690px;
left: -137px; left: -137px;
position: absolute;
top: 1531px; top: 1531px;
width: 345px;
} }
#phone-watches-2 { #phone-watches-2 {
width: 88px; filter: blur(2px);
height: 176px; height: 176px;
left: -200px; left: -200px;
top: 470px; top: 470px;
filter: blur(2px); width: 88px;
} }
#phone-watches-3 { #phone-watches-3 {
width: 171px; filter: blur(4px);
height: 342px; height: 342px;
left: 916px; left: 916px;
top: 475px; top: 475px;
filter: blur(4px); width: 171px;
} }
#phone-watches-4 { #phone-watches-4 {
width: 275px; filter: blur(6px);
height: 550px; height: 550px;
left: 1222px; left: 1222px;
top: 523px; top: 523px;
filter: blur(6px); width: 275px;
} }

26
css/3-open-sesame.css
View File

@ -1,22 +1,17 @@
#open { #open {
box-sizing: border-box; box-sizing: border-box;
color: rgba(248, 243, 241, 0.1);
position: relative; font-size: 200px;
top: 88vh;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 200px; height: 50vh;
line-height: 90%;
text-align: center;
letter-spacing: -0.04em; letter-spacing: -0.04em;
color: rgba(248, 243, 241, 0.1); line-height: 90%;
padding-top: 310px; padding-top: 310px;
padding-bottom: 310px; position: relative;
text-align: center;
color: rgba(248, 243, 241, 0.1); top: 88vh;
/*height: 72vh;*/
} }
#open .text { #open .text {
@ -24,10 +19,11 @@
margin-bottom: 400px; margin-bottom: 400px;
} }
#open img{ #open img {
max-width: 90vw; max-width: 90vw;
} }
#open-handle{
float:left; #open-handle {
float: left;
height: 20vh; height: 20vh;
} }

193
css/4-content.css
View File

@ -1,206 +1,213 @@
#content { #content {
height: 200px; height: 60vh;
min-height: 200px; min-height: 200px;
} }
#content h2 { #content h2 {
margin-top: 33vh; margin-top: 33vh;
} }
#content_all { #content_all {
position: relative; color: #fffdfc;
top: 55vh;
padding-top: 100px; padding-top: 100px;
color: #FFFDFC; position: relative;
top: 0;
width: 120%; width: 120%;
} }
#content_all_img{
background: url('/img/bg_content.png'); #content_all_img {
background: url("/img/bg_content.png");
background-size: cover; background-size: cover;
/*width: 100vw;*/ /*width: 100vw;*/
height: 150vh; height: 150vh;
left: 0;
margin-top: -50vh; margin-top: -50vh;
left:0;
position: relative; position: relative;
} }
#content_all .columns { #content_all .columns {
font-size: 100px;
margin: 0 auto; margin: 0 auto;
max-width: 80vw; max-width: 80vw;
top: -133vh;
position: relative; position: relative;
font-size: 100px; top: -133vh;
} }
#content_all .text { #content_all .text {
padding-top: 1vh;
padding-left: 80px;
font-weight: 400;
font-size: 18px; font-size: 18px;
font-weight: 400;
line-height: 26px; line-height: 26px;
text-align:left; padding-right: 80px;
padding-top: 1vh;
text-align: left;
} }
#content_all h2 { #content_all h2 {
font-size: 100px !important; font-size: 100px !important;
line-height: 90px;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 90px;
} }
#content_all .columns > .column:nth-of-type(1) { #content_all .columns > .column:nth-of-type(1) {
font-size: 1em; font-size: 1em;
line-height: 90px;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 90px;
} }
#content_all .color-emphasis { #content_all .color-emphasis {
color: #1E33DA; color: #1e33da;
} }
#content_first { #content_first {
opacity: 0; backdrop-filter: blur(5px);
height: 35px; color: #e77064;
margin-bottom: 40px; flex: none;
flex-grow: 0;
font-size: 40px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 40px; height: 35px;
line-height: 95%;
text-align: center;
letter-spacing: 0.2em; letter-spacing: 0.2em;
text-transform: uppercase; line-height: 95%;
color: #E77064; margin-bottom: 40px;
backdrop-filter: blur(5px);
flex: none;
order: 0;
flex-grow: 0;
margin-top: 20vh; margin-top: 20vh;
opacity: 0;
order: 0;
text-align: center;
text-transform: uppercase;
} }
#content_second { #content_second {
opacity: 0; backdrop-filter: blur(5px);
margin-bottom: 100px; color: rgba(255, 255, 255, 0.35);
width: 90vw; flex: none;
height: 170px; flex-grow: 0;
font-family: 'GT Walsheim Pro'; font-family: "GT Walsheim Pro";
font-size: 230px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 230px; height: 170px;
line-height: 65px; line-height: 65px;
text-align: center; margin-bottom: 100px;
color: rgba(255, 255, 255, 0.35); opacity: 0;
backdrop-filter: blur(5px);
flex: none;
order: 1; order: 1;
flex-grow: 0; text-align: center;
} }
.flip-handle{ .flip-handle {
background: transparent; background: transparent;
height: 10vh; height: 10vh;
width: 2vw;
position: relative; position: relative;
top:-25vh; top: -25vh;
width: 2vw;
} }
.flip-container{ .flip-container {
color: #FFFDFC; color: #fffdfc;
padding-top: 15vh; padding-top: 15vh;
transform-origin: right; transform-origin: right;
} }
.flip-container.flip-from-left{
.flip-container.flip-from-left {
transform-origin: left; transform-origin: left;
} }
.flip-container + .flip-container{ .flip-container + .flip-container {
padding-top:0; height: 90vh;
margin-top: -15vh; margin-top: -15vh;
min-height: 91vh; min-height: 91vh;
height: 90vh; padding-top: 0;
} }
.flip-container .container-text{ .flip-container .container-text {
width: 50%;
position: relative;
left: 30vw; left: 30vw;
position: relative;
text-align: left; text-align: left;
width: 50%;
} }
.flip-container.flip-from-left .container-text{
width: 320px; .flip-container.flip-from-left .container-text {
left: 613px; left: 613px;
width: 320px;
} }
.flip-container .color-emphasis { .flip-container .color-emphasis {
color: #1E33DA; color: #1e33da;
max-width: 760px;
margin: 0 auto; margin: 0 auto;
max-width: 760px;
} }
.flip-container .text-title{
font-weight: 600; .flip-container .text-title {
font-size: 60px; font-size: 60px;
line-height: 110%; font-weight: 600;
letter-spacing: -0.04em; letter-spacing: -0.04em;
margin-top: 158px; line-height: 110%;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 158px;
} }
.flip-container .text-description{
font-weight: 400; .flip-container .text-description {
font-size: 18px; font-size: 18px;
font-weight: 400;
line-height: 26px; line-height: 26px;
margin-bottom: 20px; margin-bottom: 20px;
width: 380px; width: 380px;
} }
.flip-container .phone-container{
box-sizing: border-box; .flip-container .phone-container {
position: relative;
left: 66vw;
top: -540px;
background: rgba(225, 196, 183, 0.2); background: rgba(225, 196, 183, 0.2);
border-color: rgba(255, 255, 255, 0.4);
border-radius: 70px; border-radius: 70px;
width: 342px;
height: 700px;
border-color: rgba(255,255,255,0.4);
border-width: 2px; border-width: 2px;
box-sizing: border-box;
height: 700px;
left: 66vw;
position: relative;
top: -540px;
width: 342px;
} }
.flip-container.flip-from-left .phone-container{ .flip-container.flip-from-left .phone-container {
left: 183px; left: 183px;
top: -540px; top: -540px;
} }
.flip-container .phone-container img{ .flip-container .phone-container img {
height: auto;
margin-top: 70px; margin-top: 70px;
width: 318px; width: 318px;
height: auto;
} }
.flip-container .call-to-action{
cursor:pointer; .flip-container .call-to-action {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center; align-items: center;
padding: 12px 36px;
gap: 10px;
width: 198px;
height: 56px;
flex: none;
order: 2;
flex-grow: 0;
background: transparent; background: transparent;
color: #fff;
border: 2px solid #743ad5; border: 2px solid #743ad5;
border-radius: 70px; border-radius: 70px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
flex: none;
flex-direction: row;
flex-grow: 0;
gap: 10px;
height: 56px;
justify-content: center;
order: 2;
padding: 12px 36px;
width: 198px;
/*border-image-slice: 1;*/ /*border-image-slice: 1;*/
/*border-width: 5px;*/ /*border-width: 5px;*/
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/ /*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
} }
#content-2 {
#content-2{ margin-top: 50vh;
margin-top:50vh;
} }
#flipping_zone{ #flipping_zone {
margin-top: -100vh; margin-top: -180vh;
position: relative; position: relative;
} }

66
css/5-popover.css
View File

@ -1,34 +1,34 @@
/******** phone base *********/ /******** phone base *********/
#popover { #popover {
background: url('/img/bg_pink.png') no-repeat; background: url("/img/bg_pink.png") no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
#popover .dark-emphasis { #popover .dark-emphasis {
color: #3B3B49; color: #3b3b49;
font-family: 'GT Walsheim Pro'; font-family: "GT Walsheim Pro";
font-size: 60px;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 60px;
line-height: 110%;
/* identical to box height, or 66px */
letter-spacing: -0.04em; letter-spacing: -0.04em;
/* identical to box height, or 66px */
line-height: 110%;
} }
.text-grey { .text-grey {
font-weight: 400;
font-size: 18px; font-size: 18px;
font-weight: 400;
line-height: 26px; line-height: 26px;
} }
.slider-screen .text { .slider-screen .text {
position: relative;
left: 55vw; left: 55vw;
position: relative;
text-align: left;
top: -30%; top: -30%;
width: 400px; width: 400px;
text-align: left;
} }
.slider-screen .text-title { .slider-screen .text-title {
@ -41,76 +41,76 @@
} }
.phone-container .top { .phone-container .top {
height: 60px; background: url("/img/phone_rectangle_top.jpg") no-repeat center;
background: url('/img/phone_rectangle_top.jpg') no-repeat center; border-top-left-radius: 1rem;
border-top-right-radius: 1rem; border-top-right-radius: 1rem;
border-top-left-radius: 1rem; height: 60px;
} }
.phone-container .bottom { .phone-container .bottom {
height: 62px; background: url("/img/phone_rectangle_bottom.jpg") no-repeat center;
background: url('/img/phone_rectangle_bottom.jpg') no-repeat center;
top: 676.5px;
position: relative;
border-bottom-right-radius: 2rem;
border-bottom-left-radius: 2rem; border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
height: 62px;
position: relative;
top: 676.5px;
} }
.phone-container.transparent { .phone-container.transparent {
background: rgba(248, 243, 241, 0.1); background: rgba(248, 243, 241, 0.1);
border-radius: 70px; border-radius: 70px;
width: 350px;
height: 700px; height: 700px;
width: 350px;
} }
.slider-screen .phone-container { .slider-screen .phone-container {
height: 776px; background: url("/img/phone_cream.png") no-repeat;
width: 411px;
background: url('/img/phone_cream.png') no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
position: relative; height: 776px;
left: 20vw; left: 20vw;
position: relative;
top: 20vh; top: 20vh;
width: 411px;
} }
.close-button { .close-button {
float: right;
position: relative; position: relative;
right: 40px; right: 40px;
top: 56px; top: 56px;
float: right;
} }
.arrow-left, .arrow-right { .arrow-left, .arrow-right {
padding: 1.5rem;
border: solid 2px #1E33DA;
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background: linear-gradient(310.41deg, rgba(255, 255, 255, 0.3) 10.9%, rgba(255, 255, 255, 0) 81.35%);
border: solid 2px #1e33da;
border-radius: 70px;
/* Note: backdrop-filter has minimal browser support */ /* Note: backdrop-filter has minimal browser support */
border-radius: 70px;
transform: matrix(-1, 0, 0, 1, 0, 0);
cursor: pointer; cursor: pointer;
padding: 1.5rem;
transform: matrix(-1, 0, 0, 1, 0, 0);
} }
.arrow-right { .arrow-right {
float: right;
position: relative; position: relative;
top: 50vh; top: 50vh;
float: right;
transform: rotate(0deg); transform: rotate(0deg);
} }
.arrow-left { .arrow-left {
position: relative;
left: 40px;
top: 50vh;
float: left; float: left;
left: 40px;
position: relative;
top: 50vh;
} }
.bullets { .bullets {
position: relative;
left: 0; left: 0;
position: relative;
top: 30vh; top: 30vh;
} }

6
css/6-portfolio.css
View File

@ -1,6 +1,6 @@
#portfolio { #portfolio {
background: url('/img/bg_grey.jpg') no-repeat; background: url("/img/bg_grey.jpg") no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
color: white; color: white;
@ -8,12 +8,12 @@
#popover .color-emphasis, #popover .color-emphasis,
#portfolio .color-emphasis { #portfolio .color-emphasis {
color: #E77064; color: #e77064;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
} }
#portfolio .phone-container { #portfolio .phone-container {
background: url("/img/phone_shoes.png");
height: 776px; height: 776px;
background: url('/img/phone_shoes.png');
} }

27
css/libs/boilerplate.css
View File

@ -13,18 +13,18 @@
html { html {
font-size: 1em; background: #020225;
line-height: 1.4; color: #f9f3f1;
font-family: 'GT Walsheim Pro'; font-family: "GT Walsheim Pro";
/* or 90% */ /* or 90% */
text-align: center; font-size: 1em;
letter-spacing: -0.04em; letter-spacing: -0.04em;
/* Secondary 100 */ /* Secondary 100 */
color: #F9F3F1; line-height: 1.4;
background: #020225; text-align: center;
} }
::-moz-selection { ::-moz-selection {
@ -42,10 +42,10 @@ html {
*/ */
hr { hr {
display: block;
height: 1px;
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
display: block;
height: 1px;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }
@ -197,9 +197,9 @@ textarea {
*::before, *::before,
*::after { *::after {
background: #fff !important; background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important; box-shadow: none !important;
/* Black prints faster */
color: #000 !important;
text-shadow: none !important; text-shadow: none !important;
} }
@ -261,13 +261,12 @@ textarea {
} }
} }
body { body {
font-family: "GT Walsheim Pro", Arial;
font-style: normal;
left: 0;
position: relative; position: relative;
top: 0; top: 0;
left: 0;
font-family: 'GT Walsheim Pro', Arial;
font-style: normal;
} }
.margin-auto { .margin-auto {

584
css/libs/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

27
css/main.css
View File

@ -1,21 +1,20 @@
/** /**
libs libs
*/ */
@import 'libs/boilerplate.css'; @import "libs/boilerplate.css";
@import 'libs/normalize.css'; @import "libs/normalize.css";
@import url('https://fonts.cdnfonts.com/css/gt-walsheim-pro'); @import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
@import 'libs/bulma.css'; @import "libs/bulma.css";
/** /**
custom custom
*/ */
@import '0-general.css'; @import "0-general.css";
@import '0-1-nav.css'; @import "0-1-nav.css";
@import '1-cover.css'; @import "1-cover.css";
@import '1-2-main_title.css'; @import "1-2-main_title.css";
@import '2-we-come-from.css'; @import "2-we-come-from.css";
@import '3-open-sesame.css'; @import "3-open-sesame.css";
@import '4-content.css'; @import "4-content.css";
@import '5-popover.css'; @import "5-popover.css";
@import '6-portfolio.css'; @import "6-portfolio.css";

5
humans.txt
View File

@ -3,11 +3,12 @@
# TEAM # TEAM
<name> -- <role> -- <twitter> Digital Theory
Cipher Bliss
# THANKS # THANKS
<name> everyone
# TECHNOLOGY COLOPHON # TECHNOLOGY COLOPHON

BIN
icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 31 KiB

2
index.html
View File

@ -270,6 +270,8 @@
<div class="credits"> <div class="credits">
B. Lemoine - cipherbliss.com B. Lemoine - cipherbliss.com
<br>
Digital Theory
</div> </div>
<nav class="fixed-nav is-fixed-top"> <nav class="fixed-nav is-fixed-top">
<div class="burger-menu is-2"> <div class="burger-menu is-2">

BIN
js/anime-master.zip
View File

Binary file not shown.

107
js/main.js
View File

@ -1,17 +1,17 @@
/** /**
* gsap lib https://greensock.com/get-started-2#controllingYourAnimations * gsap lib https://greensock.com/get-started-2#controllingYourAnimations
*/ */
let development_debug = false; let development_debug = false
gsap.fromTo("#main_title", { gsap.fromTo('#main_title', {
opacity: 0, opacity: 0,
top: 200 top: 200
}, { }, {
opacity: 1, opacity: 1,
top: 100, top: 100,
scale:0.8, scale: 0.8,
duration: 1.5, duration: 1.5,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#cover', trigger: '#cover',
scrub: 1, scrub: 1,
@ -19,7 +19,7 @@ gsap.fromTo("#main_title", {
} }
}) })
gsap.to("#hand", { gsap.to('#hand', {
top: 300, top: 300,
duration: 1, duration: 1,
scrollTrigger: { scrollTrigger: {
@ -27,8 +27,8 @@ gsap.to("#hand", {
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}); })
gsap.to("#main_title", { gsap.to('#main_title', {
top: 150, top: 150,
duration: 1, duration: 1,
scrollTrigger: { scrollTrigger: {
@ -36,54 +36,54 @@ gsap.to("#main_title", {
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}); })
gsap.to("#phone-watches-1", gsap.to('#phone-watches-1',
{ {
left: 500, left: 500,
top: (531 - 400), top: (531 - 400),
scale: 0.8, scale: 0.8,
duration: 1.5, duration: 1.5,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#welcome', trigger: '#welcome',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}) })
gsap.to("#phone-watches-2", gsap.to('#phone-watches-2',
{ {
left: "50vw", left: '50vw',
top: 100, top: 100,
scale: 0.7, scale: 0.7,
duration: 1.25, duration: 1.25,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#welcome', trigger: '#welcome',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
}) })
gsap.to("#phone-watches-3", gsap.to('#phone-watches-3',
{ {
left: "50vw", left: '50vw',
top: 0, top: 0,
scale: 0.8, scale: 0.8,
duration: 1.25, duration: 1.25,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#welcome', trigger: '#welcome',
scrub: 2, scrub: 2,
markers: development_debug, markers: development_debug,
} }
}) })
gsap.to("#phone-watches-4", gsap.to('#phone-watches-4',
{ {
left: "50vw", left: '50vw',
top: -10, top: -10,
scale: 0.5, scale: 0.5,
duration: 3, duration: 3,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#welcome', trigger: '#welcome',
scrub: 2, scrub: 2,
@ -91,13 +91,13 @@ gsap.to("#phone-watches-4",
} }
}) })
gsap.to("#phone-watches-4", gsap.to('#phone-watches-4',
{ {
left: "50vw", left: '50vw',
top: -10, top: -10,
scale: 0.5, scale: 0.5,
duration: 3, duration: 3,
ease: "sine", ease: 'sine',
scrollTrigger: { scrollTrigger: {
trigger: '#welcome', trigger: '#welcome',
scrub: 2, scrub: 2,
@ -105,42 +105,46 @@ gsap.to("#phone-watches-4",
} }
}) })
gsap.to("#content_first", gsap.to('#content_first',
{ {
left: -20, left: -20,
top: -50, top: -50,
opacity: 1, opacity: 1,
duration: 3, duration: 3,
ease: "easeInOut", scale: 1.5,
ease: 'easeInOut',
scrollTrigger: { scrollTrigger: {
trigger: '#content', trigger: '#content',
scrub: 2, scrub: 0.5,
markers: development_debug, markers: development_debug,
} }
}) })
gsap.to("#content_second", gsap.to('#content_second',
{ {
left: -20, left: -40,
top: -50, top: -50,
opacity: 1, opacity: 1,
duration: 2, duration: 2,
ease: "spline", scale: 1.25,
ease: 'spline',
scrollTrigger: { scrollTrigger: {
trigger: '#content', trigger: '#content',
scrub: 2, scrub: 0.5,
markers: development_debug, markers: development_debug,
} }
}) })
// le background coloré grandit légèrement // le background coloré grandit légèrement
gsap.fromTo("#content_all_img", gsap.fromTo('#content_all_img',
{scale:0.8, {
left:-100}, scale: 0.8,
left: -100
},
{ {
scale: 1, scale: 1,
left:-80, left: -80,
ease: "linear", ease: 'linear',
scrollTrigger: { scrollTrigger: {
trigger: '#content_all .columns', trigger: '#content_all .columns',
scrub: 1, scrub: 1,
@ -149,14 +153,16 @@ gsap.fromTo("#content_all_img",
}) })
// TODO faire devenir fixe le background une fois que l'on est passé // TODO faire devenir fixe le background une fois que l'on est passé
gsap.fromTo("#open img", gsap.fromTo('#open img',
{opacity: 0.5,
bottom: "-100vh"},
{ {
opacity:1, opacity: 0.5,
bottom: "50vh", bottom: '-100vh'
},
{
opacity: 1,
bottom: '50vh',
scale: 1.5, scale: 1.5,
ease: "spline", ease: 'spline',
scrollTrigger: { scrollTrigger: {
trigger: '#open-handle', trigger: '#open-handle',
scrub: 2, scrub: 2,
@ -164,11 +170,10 @@ gsap.fromTo("#open img",
} }
}) })
let rotateYCard = '180deg'
let rotateYCard = "180deg"; let offsetCard = '-100px'
let offsetCard = "-100px";
// flip from right // flip from right
gsap.fromTo("#content-2", { gsap.fromTo('#content-2', {
rotateY: rotateYCard, rotateY: rotateYCard,
right: offsetCard, right: offsetCard,
}, },
@ -176,7 +181,7 @@ gsap.fromTo("#content-2", {
rotateY: 0, rotateY: 0,
right: 0, right: 0,
duration: 0.2, duration: 0.2,
ease: "easeInOut", ease: 'easeInOut',
scrollTrigger: { scrollTrigger: {
trigger: '#content-2 .flip-handle', trigger: '#content-2 .flip-handle',
scrub: 1, scrub: 1,
@ -184,28 +189,26 @@ gsap.fromTo("#content-2", {
} }
}) })
function animateCard (id, side) {
function animateCard(id, side){
let fromObject = { let fromObject = {
rotateY: rotateYCard, rotateY: rotateYCard,
} }
fromObject[side] = offsetCard fromObject[side] = offsetCard
let toObject ={ let toObject = {
rotateY: 0, rotateY: 0,
duration: 0.2, duration: 0.2,
ease: "easeInOut", ease: 'easeInOut',
scrollTrigger: { scrollTrigger: {
trigger: '#content-'+id+' .flip-handle', trigger: '#content-' + id + ' .flip-handle',
scrub: 1, scrub: 1,
markers: development_debug, markers: development_debug,
} }
} }
toObject[side] = 0 toObject[side] = 0
gsap.fromTo("#content-"+id, fromObject, gsap.fromTo('#content-' + id, fromObject,
toObject) toObject)
} }

18
js/plugins.js
View File

@ -1,24 +1,24 @@
// Avoid `console` errors in browsers that lack a console. // Avoid `console` errors in browsers that lack a console.
(function() { (function () {
var method; var method
var noop = function () {}; var noop = function () {}
var methods = [ var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn' 'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
]; ]
var length = methods.length; var length = methods.length
var console = (window.console = window.console || {}); var console = (window.console = window.console || {})
while (length--) { while (length--) {
method = methods[length]; method = methods[length]
// Only stub undefined methods. // Only stub undefined methods.
if (!console[method]) { if (!console[method]) {
console[method] = noop; console[method] = noop
} }
} }
}()); }())
// Place any jQuery/helper plugins in here. // Place any jQuery/helper plugins in here.

2233
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -2,21 +2,16 @@
"name": " ", "name": " ",
"version": "0.0.1", "version": "0.0.1",
"description": "", "description": "",
"keywords": "", "keywords": "sesame",
"license": "", "license": "AGPLv3+",
"author": "", "author": "B. Lemoine contact@cipherbliss.com",
"scripts": { "scripts": {
"build": "parcel build index.html", "start": "serve ."
"dev": "parcel index.html --open",
"start": "npm run build && npm run dev",
"test": "echo \"Error: no test specified\" && exit 1"
}, },
"devDependencies": { "devDependencies": {
"parcel-bundler": "^1.8.1" "parcel-bundler": "^1.8.1"
}, },
"dependencies": { "dependencies": {
"anime": "^0.1.2", "serve": "~14.2.0"
"bulma": "^0.9.4",
"scrollmagic": "^2.0.8"
} }
} }

4
site.webmanifest
View File

@ -4,9 +4,9 @@
"icons": [{ "icons": [{
"src": "icon.png", "src": "icon.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "213x264"
}], }],
"start_url": "/?utm_source=homescreen", "start_url": "/?utm_source=homescreen",
"background_color": "#fafafa", "background_color": "#020225",
"theme_color": "#fafafa" "theme_color": "#fafafa"
} }