add instructions in readme
This commit is contained in:
parent
200f7760b5
commit
36ca950aeb
@ -5,6 +5,6 @@ root = true
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
indent_style = tab
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
5
.idea/codeStyles/codeStyleConfig.xml
Normal file
@ -0,0 +1,5 @@
|
||||
<component name="ProjectCodeStyleConfiguration">
|
||||
<state>
|
||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
||||
</state>
|
||||
</component>
|
||||
@ -1,8 +1,13 @@
|
||||
# Digital theory integration website
|
||||
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`
|
||||
- lancer la page index avec `serve`
|
||||
- lancer la page index avec `npm start`
|
||||
- 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.
|
||||
|
||||
@ -1,42 +1,44 @@
|
||||
|
||||
main nav {
|
||||
padding: 24px;
|
||||
color: #fffdfc;
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 130%;
|
||||
text-align: center;
|
||||
color: #FFFDFC;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
float: left;
|
||||
width: 150px;
|
||||
float: left;
|
||||
}
|
||||
.icon-burger{
|
||||
|
||||
.icon-burger {
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 1em;
|
||||
float: left;
|
||||
height: 1em;
|
||||
margin-top: 0.3rem;
|
||||
width: 40px;
|
||||
}
|
||||
.icon-burger .line{
|
||||
|
||||
.icon-burger .line {
|
||||
border-top: 2px solid #fff;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
color: #fffdfc;
|
||||
height: 54px;
|
||||
text-align: center;
|
||||
top: 54px;
|
||||
color: #FFFDFC;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
}
|
||||
|
||||
.fixed-nav{
|
||||
.fixed-nav {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
@ -1,35 +1,34 @@
|
||||
/******** all sections *********/
|
||||
body{
|
||||
body {
|
||||
background: #020225;
|
||||
padding-bottom: 50vh;
|
||||
}
|
||||
|
||||
|
||||
main section {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
height: 1300px;
|
||||
min-height: 1300px;
|
||||
width: 100vw;
|
||||
font-family: 'GT Walsheim Pro', Arial;
|
||||
}
|
||||
|
||||
main section h2 {
|
||||
font-family: 'GT Walsheim Pro', Arial;
|
||||
color: #fffdfc;
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
|
||||
/* or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
/* Secondary 100 */
|
||||
color: #FFFDFC;
|
||||
line-height: 110%;
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
|
||||
.credits{
|
||||
.credits {
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
@ -12,19 +12,19 @@
|
||||
|
||||
#main_title {
|
||||
|
||||
box-sizing: border-box;
|
||||
background: url('/img/sesame.png') no-repeat;
|
||||
background: url("/img/sesame.png") no-repeat;
|
||||
background-size: contain;
|
||||
box-sizing: border-box;
|
||||
|
||||
height: 35vh;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
position: relative;
|
||||
top: 4rem;
|
||||
height: 35vh;
|
||||
width: 95vw;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
#main_title_container h2{
|
||||
margin-top:33vh;
|
||||
#main_title_container h2 {
|
||||
margin-top: 33vh;
|
||||
}
|
||||
|
||||
@ -1,61 +1,63 @@
|
||||
|
||||
|
||||
#hand {
|
||||
background: url('/img/hand 1.png') center;
|
||||
background: url("/img/hand 1.png") center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 1300px;
|
||||
left: 1px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
width: 100vw;
|
||||
z-index: 0
|
||||
}
|
||||
#main_title_container{
|
||||
position:absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
|
||||
#main_title_container {
|
||||
backdrop-filter: blur(3px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cover {
|
||||
background: url('/img/BG 1.png') center no-repeat;
|
||||
background: url("/img/BG 1.png") center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#cover
|
||||
.title-container{
|
||||
text-align:center;
|
||||
.title-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#cover h2 {
|
||||
|
||||
color: #fffdfc;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 120%;
|
||||
text-align: center;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 120%;
|
||||
|
||||
color: #FFFDFC;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#cover .button {
|
||||
top: 16vh;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
right: 0;
|
||||
backdrop-filter: blur(3px);
|
||||
background: linear-gradient(329.49deg,
|
||||
rgba(255, 216, 244, 0) 34.06%,
|
||||
rgba(255, 207, 242, 0.2) 77.26%);
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
height: 150px;
|
||||
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(3px);
|
||||
border-radius: 100%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 16vh;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
@ -1,73 +1,74 @@
|
||||
|
||||
|
||||
#welcome{
|
||||
text-shadow: 0 0 1rem #333;
|
||||
position: absolute;
|
||||
#welcome {
|
||||
background: #000;
|
||||
position: absolute;
|
||||
text-shadow: 0 0 1rem #333;
|
||||
|
||||
}
|
||||
|
||||
#welcome img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#welcome h2 {
|
||||
font-weight: 600;
|
||||
color: #f9f3f1;
|
||||
font-size: 8em;
|
||||
line-height: 90px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
color: #F9F3F1;
|
||||
z-index: 2;
|
||||
line-height: 90px;
|
||||
margin-top: 400px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 80vw;
|
||||
|
||||
margin-top:400px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#welcome .color-emphasis {
|
||||
color: #1E33DA;
|
||||
#welcome .color-emphasis {
|
||||
color: #1e33da;
|
||||
}
|
||||
|
||||
#welcome .phone-container {
|
||||
background: url('/img/section2_phone.png');
|
||||
background: url("/img/section2_phone.png");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/************ phones ************/
|
||||
.phones-land{
|
||||
z-index:-1;
|
||||
.phones-land {
|
||||
float: left;
|
||||
position: static;
|
||||
float:left;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#phone-watches-1 {
|
||||
position: absolute;
|
||||
width: 345px;
|
||||
height: 690px;
|
||||
left: -137px;
|
||||
position: absolute;
|
||||
top: 1531px;
|
||||
width: 345px;
|
||||
}
|
||||
|
||||
#phone-watches-2 {
|
||||
width: 88px;
|
||||
filter: blur(2px);
|
||||
height: 176px;
|
||||
left: -200px;
|
||||
top: 470px;
|
||||
filter: blur(2px);
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
#phone-watches-3 {
|
||||
width: 171px;
|
||||
filter: blur(4px);
|
||||
height: 342px;
|
||||
left: 916px;
|
||||
top: 475px;
|
||||
filter: blur(4px);
|
||||
width: 171px;
|
||||
}
|
||||
|
||||
#phone-watches-4 {
|
||||
width: 275px;
|
||||
filter: blur(6px);
|
||||
height: 550px;
|
||||
left: 1222px;
|
||||
top: 523px;
|
||||
filter: blur(6px);
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,22 +1,17 @@
|
||||
|
||||
#open {
|
||||
box-sizing: border-box;
|
||||
|
||||
position: relative;
|
||||
|
||||
top: 88vh;
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
font-size: 200px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 200px;
|
||||
line-height: 90%;
|
||||
text-align: center;
|
||||
height: 50vh;
|
||||
letter-spacing: -0.04em;
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
line-height: 90%;
|
||||
padding-top: 310px;
|
||||
padding-bottom: 310px;
|
||||
|
||||
color: rgba(248, 243, 241, 0.1);
|
||||
/*height: 72vh;*/
|
||||
position: relative;
|
||||
text-align: center;
|
||||
top: 88vh;
|
||||
}
|
||||
|
||||
#open .text {
|
||||
@ -24,10 +19,11 @@
|
||||
margin-bottom: 400px;
|
||||
}
|
||||
|
||||
#open img{
|
||||
#open img {
|
||||
max-width: 90vw;
|
||||
}
|
||||
#open-handle{
|
||||
float:left;
|
||||
|
||||
#open-handle {
|
||||
float: left;
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
@ -1,206 +1,213 @@
|
||||
|
||||
#content {
|
||||
height: 200px;
|
||||
height: 60vh;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
margin-top: 33vh;
|
||||
}
|
||||
|
||||
#content_all {
|
||||
position: relative;
|
||||
top: 55vh;
|
||||
color: #fffdfc;
|
||||
padding-top: 100px;
|
||||
color: #FFFDFC;
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 120%;
|
||||
}
|
||||
#content_all_img{
|
||||
background: url('/img/bg_content.png');
|
||||
|
||||
#content_all_img {
|
||||
background: url("/img/bg_content.png");
|
||||
background-size: cover;
|
||||
/*width: 100vw;*/
|
||||
height: 150vh;
|
||||
left: 0;
|
||||
margin-top: -50vh;
|
||||
left:0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#content_all .columns {
|
||||
font-size: 100px;
|
||||
margin: 0 auto;
|
||||
max-width: 80vw;
|
||||
top: -133vh;
|
||||
position: relative;
|
||||
font-size: 100px;
|
||||
top: -133vh;
|
||||
}
|
||||
|
||||
#content_all .text {
|
||||
padding-top: 1vh;
|
||||
padding-left: 80px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
text-align:left;
|
||||
padding-right: 80px;
|
||||
padding-top: 1vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#content_all h2 {
|
||||
font-size: 100px !important;
|
||||
line-height: 90px;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
#content_all .columns > .column:nth-of-type(1) {
|
||||
font-size: 1em;
|
||||
line-height: 90px;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
#content_all .color-emphasis {
|
||||
color: #1E33DA;
|
||||
color: #1e33da;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#content_first {
|
||||
|
||||
opacity: 0;
|
||||
height: 35px;
|
||||
margin-bottom: 40px;
|
||||
backdrop-filter: blur(5px);
|
||||
color: #e77064;
|
||||
flex: none;
|
||||
flex-grow: 0;
|
||||
font-size: 40px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
line-height: 95%;
|
||||
text-align: center;
|
||||
height: 35px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #E77064;
|
||||
backdrop-filter: blur(5px);
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
line-height: 95%;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 20vh;
|
||||
opacity: 0;
|
||||
order: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#content_second {
|
||||
opacity: 0;
|
||||
margin-bottom: 100px;
|
||||
width: 90vw;
|
||||
height: 170px;
|
||||
font-family: 'GT Walsheim Pro';
|
||||
backdrop-filter: blur(5px);
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
flex: none;
|
||||
flex-grow: 0;
|
||||
font-family: "GT Walsheim Pro";
|
||||
font-size: 230px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 230px;
|
||||
height: 170px;
|
||||
line-height: 65px;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
backdrop-filter: blur(5px);
|
||||
flex: none;
|
||||
margin-bottom: 100px;
|
||||
opacity: 0;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flip-handle{
|
||||
.flip-handle {
|
||||
background: transparent;
|
||||
height: 10vh;
|
||||
width: 2vw;
|
||||
position: relative;
|
||||
top:-25vh;
|
||||
top: -25vh;
|
||||
width: 2vw;
|
||||
}
|
||||
|
||||
.flip-container{
|
||||
color: #FFFDFC;
|
||||
.flip-container {
|
||||
color: #fffdfc;
|
||||
padding-top: 15vh;
|
||||
transform-origin: right;
|
||||
}
|
||||
.flip-container.flip-from-left{
|
||||
|
||||
.flip-container.flip-from-left {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.flip-container + .flip-container{
|
||||
padding-top:0;
|
||||
.flip-container + .flip-container {
|
||||
height: 90vh;
|
||||
margin-top: -15vh;
|
||||
min-height: 91vh;
|
||||
height: 90vh;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.flip-container .container-text{
|
||||
width: 50%;
|
||||
position: relative;
|
||||
.flip-container .container-text {
|
||||
left: 30vw;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 50%;
|
||||
}
|
||||
.flip-container.flip-from-left .container-text{
|
||||
width: 320px;
|
||||
|
||||
.flip-container.flip-from-left .container-text {
|
||||
left: 613px;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.flip-container .color-emphasis {
|
||||
color: #1E33DA;
|
||||
max-width: 760px;
|
||||
color: #1e33da;
|
||||
margin: 0 auto;
|
||||
max-width: 760px;
|
||||
}
|
||||
.flip-container .text-title{
|
||||
font-weight: 600;
|
||||
|
||||
.flip-container .text-title {
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
margin-top: 158px;
|
||||
line-height: 110%;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 158px;
|
||||
}
|
||||
.flip-container .text-description{
|
||||
font-weight: 400;
|
||||
|
||||
.flip-container .text-description {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
width: 380px;
|
||||
}
|
||||
.flip-container .phone-container{
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
left: 66vw;
|
||||
top: -540px;
|
||||
|
||||
.flip-container .phone-container {
|
||||
background: rgba(225, 196, 183, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 70px;
|
||||
width: 342px;
|
||||
height: 700px;
|
||||
border-color: rgba(255,255,255,0.4);
|
||||
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;
|
||||
top: -540px;
|
||||
}
|
||||
|
||||
.flip-container .phone-container img{
|
||||
.flip-container .phone-container img {
|
||||
height: auto;
|
||||
margin-top: 70px;
|
||||
width: 318px;
|
||||
height: auto;
|
||||
}
|
||||
.flip-container .call-to-action{
|
||||
cursor:pointer;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.flip-container .call-to-action {
|
||||
align-items: center;
|
||||
padding: 12px 36px;
|
||||
gap: 10px;
|
||||
width: 198px;
|
||||
height: 56px;
|
||||
flex: none;
|
||||
order: 2;
|
||||
flex-grow: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 2px solid #743ad5;
|
||||
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-width: 5px;*/
|
||||
/*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/
|
||||
}
|
||||
|
||||
|
||||
#content-2{
|
||||
margin-top:50vh;
|
||||
#content-2 {
|
||||
margin-top: 50vh;
|
||||
}
|
||||
|
||||
#flipping_zone{
|
||||
margin-top: -100vh;
|
||||
#flipping_zone {
|
||||
margin-top: -180vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
/******** phone base *********/
|
||||
|
||||
#popover {
|
||||
background: url('/img/bg_pink.png') no-repeat;
|
||||
background: url("/img/bg_pink.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#popover .dark-emphasis {
|
||||
color: #3B3B49;
|
||||
font-family: 'GT Walsheim Pro';
|
||||
color: #3b3b49;
|
||||
font-family: "GT Walsheim Pro";
|
||||
font-size: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 60px;
|
||||
line-height: 110%;
|
||||
/* identical to box height, or 66px */
|
||||
letter-spacing: -0.04em;
|
||||
/* identical to box height, or 66px */
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.text-grey {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.slider-screen .text {
|
||||
position: relative;
|
||||
left: 55vw;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
top: -30%;
|
||||
width: 400px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.slider-screen .text-title {
|
||||
@ -41,76 +41,76 @@
|
||||
}
|
||||
|
||||
.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-left-radius: 1rem;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.phone-container .bottom {
|
||||
height: 62px;
|
||||
background: url('/img/phone_rectangle_bottom.jpg') no-repeat center;
|
||||
top: 676.5px;
|
||||
position: relative;
|
||||
border-bottom-right-radius: 2rem;
|
||||
background: url("/img/phone_rectangle_bottom.jpg") no-repeat center;
|
||||
border-bottom-left-radius: 2rem;
|
||||
border-bottom-right-radius: 2rem;
|
||||
height: 62px;
|
||||
position: relative;
|
||||
top: 676.5px;
|
||||
}
|
||||
|
||||
.phone-container.transparent {
|
||||
background: rgba(248, 243, 241, 0.1);
|
||||
border-radius: 70px;
|
||||
width: 350px;
|
||||
height: 700px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.slider-screen .phone-container {
|
||||
height: 776px;
|
||||
width: 411px;
|
||||
background: url('/img/phone_cream.png') no-repeat;
|
||||
background: url("/img/phone_cream.png") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
height: 776px;
|
||||
left: 20vw;
|
||||
position: relative;
|
||||
top: 20vh;
|
||||
width: 411px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 40px;
|
||||
top: 56px;
|
||||
float: 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);
|
||||
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 */
|
||||
border-radius: 70px;
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
cursor: pointer;
|
||||
padding: 1.5rem;
|
||||
transform: matrix(-1, 0, 0, 1, 0, 0);
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
float: right;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.arrow-left {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
top: 50vh;
|
||||
float: left;
|
||||
left: 40px;
|
||||
position: relative;
|
||||
top: 50vh;
|
||||
}
|
||||
|
||||
.bullets {
|
||||
position: relative;
|
||||
left: 0;
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
#portfolio {
|
||||
background: url('/img/bg_grey.jpg') no-repeat;
|
||||
background: url("/img/bg_grey.jpg") no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
@ -8,12 +8,12 @@
|
||||
|
||||
#popover .color-emphasis,
|
||||
#portfolio .color-emphasis {
|
||||
color: #E77064;
|
||||
color: #e77064;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#portfolio .phone-container {
|
||||
background: url("/img/phone_shoes.png");
|
||||
height: 776px;
|
||||
background: url('/img/phone_shoes.png');
|
||||
}
|
||||
|
||||
@ -13,18 +13,18 @@
|
||||
|
||||
html {
|
||||
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
background: #020225;
|
||||
color: #f9f3f1;
|
||||
|
||||
font-family: 'GT Walsheim Pro';
|
||||
font-family: "GT Walsheim Pro";
|
||||
|
||||
/* or 90% */
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
letter-spacing: -0.04em;
|
||||
|
||||
/* Secondary 100 */
|
||||
color: #F9F3F1;
|
||||
background: #020225;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
@ -42,10 +42,10 @@ html {
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -197,9 +197,9 @@ textarea {
|
||||
*::before,
|
||||
*::after {
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
/* Black prints faster */
|
||||
box-shadow: none !important;
|
||||
/* Black prints faster */
|
||||
color: #000 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
@ -261,13 +261,12 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: "GT Walsheim Pro", Arial;
|
||||
font-style: normal;
|
||||
left: 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-family: 'GT Walsheim Pro', Arial;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.margin-auto {
|
||||
|
||||
584
css/libs/bulma.css
vendored
584
css/libs/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
27
css/main.css
27
css/main.css
@ -1,21 +1,20 @@
|
||||
|
||||
/**
|
||||
libs
|
||||
*/
|
||||
@import 'libs/boilerplate.css';
|
||||
@import 'libs/normalize.css';
|
||||
@import url('https://fonts.cdnfonts.com/css/gt-walsheim-pro');
|
||||
@import 'libs/bulma.css';
|
||||
@import "libs/boilerplate.css";
|
||||
@import "libs/normalize.css";
|
||||
@import url("https://fonts.cdnfonts.com/css/gt-walsheim-pro");
|
||||
@import "libs/bulma.css";
|
||||
|
||||
/**
|
||||
custom
|
||||
*/
|
||||
@import '0-general.css';
|
||||
@import '0-1-nav.css';
|
||||
@import '1-cover.css';
|
||||
@import '1-2-main_title.css';
|
||||
@import '2-we-come-from.css';
|
||||
@import '3-open-sesame.css';
|
||||
@import '4-content.css';
|
||||
@import '5-popover.css';
|
||||
@import '6-portfolio.css';
|
||||
@import "0-general.css";
|
||||
@import "0-1-nav.css";
|
||||
@import "1-cover.css";
|
||||
@import "1-2-main_title.css";
|
||||
@import "2-we-come-from.css";
|
||||
@import "3-open-sesame.css";
|
||||
@import "4-content.css";
|
||||
@import "5-popover.css";
|
||||
@import "6-portfolio.css";
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
Digital Theory
|
||||
Cipher Bliss
|
||||
|
||||
# THANKS
|
||||
|
||||
<name>
|
||||
everyone
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
|
||||
BIN
icon.png
BIN
icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 31 KiB |
@ -270,6 +270,8 @@
|
||||
|
||||
<div class="credits">
|
||||
B. Lemoine - cipherbliss.com
|
||||
<br>
|
||||
Digital Theory
|
||||
</div>
|
||||
<nav class="fixed-nav is-fixed-top">
|
||||
<div class="burger-menu is-2">
|
||||
|
||||
Binary file not shown.
107
js/main.js
107
js/main.js
@ -1,17 +1,17 @@
|
||||
/**
|
||||
* 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,
|
||||
top: 200
|
||||
}, {
|
||||
opacity: 1,
|
||||
top: 100,
|
||||
scale:0.8,
|
||||
scale: 0.8,
|
||||
duration: 1.5,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#cover',
|
||||
scrub: 1,
|
||||
@ -19,7 +19,7 @@ gsap.fromTo("#main_title", {
|
||||
}
|
||||
})
|
||||
|
||||
gsap.to("#hand", {
|
||||
gsap.to('#hand', {
|
||||
top: 300,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
@ -27,8 +27,8 @@ gsap.to("#hand", {
|
||||
scrub: 1,
|
||||
markers: development_debug,
|
||||
}
|
||||
});
|
||||
gsap.to("#main_title", {
|
||||
})
|
||||
gsap.to('#main_title', {
|
||||
top: 150,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
@ -36,54 +36,54 @@ gsap.to("#main_title", {
|
||||
scrub: 1,
|
||||
markers: development_debug,
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
gsap.to("#phone-watches-1",
|
||||
gsap.to('#phone-watches-1',
|
||||
{
|
||||
left: 500,
|
||||
top: (531 - 400),
|
||||
scale: 0.8,
|
||||
duration: 1.5,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#welcome',
|
||||
scrub: 1,
|
||||
markers: development_debug,
|
||||
}
|
||||
})
|
||||
gsap.to("#phone-watches-2",
|
||||
gsap.to('#phone-watches-2',
|
||||
{
|
||||
left: "50vw",
|
||||
left: '50vw',
|
||||
top: 100,
|
||||
scale: 0.7,
|
||||
duration: 1.25,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#welcome',
|
||||
scrub: 1,
|
||||
markers: development_debug,
|
||||
}
|
||||
})
|
||||
gsap.to("#phone-watches-3",
|
||||
gsap.to('#phone-watches-3',
|
||||
{
|
||||
left: "50vw",
|
||||
left: '50vw',
|
||||
top: 0,
|
||||
scale: 0.8,
|
||||
duration: 1.25,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#welcome',
|
||||
scrub: 2,
|
||||
markers: development_debug,
|
||||
}
|
||||
})
|
||||
gsap.to("#phone-watches-4",
|
||||
gsap.to('#phone-watches-4',
|
||||
{
|
||||
left: "50vw",
|
||||
left: '50vw',
|
||||
top: -10,
|
||||
scale: 0.5,
|
||||
duration: 3,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#welcome',
|
||||
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,
|
||||
scale: 0.5,
|
||||
duration: 3,
|
||||
ease: "sine",
|
||||
ease: 'sine',
|
||||
scrollTrigger: {
|
||||
trigger: '#welcome',
|
||||
scrub: 2,
|
||||
@ -105,42 +105,46 @@ gsap.to("#phone-watches-4",
|
||||
}
|
||||
})
|
||||
|
||||
gsap.to("#content_first",
|
||||
gsap.to('#content_first',
|
||||
{
|
||||
left: -20,
|
||||
top: -50,
|
||||
opacity: 1,
|
||||
duration: 3,
|
||||
ease: "easeInOut",
|
||||
scale: 1.5,
|
||||
ease: 'easeInOut',
|
||||
scrollTrigger: {
|
||||
trigger: '#content',
|
||||
scrub: 2,
|
||||
scrub: 0.5,
|
||||
markers: development_debug,
|
||||
}
|
||||
})
|
||||
|
||||
gsap.to("#content_second",
|
||||
gsap.to('#content_second',
|
||||
{
|
||||
left: -20,
|
||||
left: -40,
|
||||
top: -50,
|
||||
opacity: 1,
|
||||
duration: 2,
|
||||
ease: "spline",
|
||||
scale: 1.25,
|
||||
ease: 'spline',
|
||||
scrollTrigger: {
|
||||
trigger: '#content',
|
||||
scrub: 2,
|
||||
scrub: 0.5,
|
||||
markers: development_debug,
|
||||
}
|
||||
})
|
||||
|
||||
// le background coloré grandit légèrement
|
||||
gsap.fromTo("#content_all_img",
|
||||
{scale:0.8,
|
||||
left:-100},
|
||||
gsap.fromTo('#content_all_img',
|
||||
{
|
||||
scale: 0.8,
|
||||
left: -100
|
||||
},
|
||||
{
|
||||
scale: 1,
|
||||
left:-80,
|
||||
ease: "linear",
|
||||
left: -80,
|
||||
ease: 'linear',
|
||||
scrollTrigger: {
|
||||
trigger: '#content_all .columns',
|
||||
scrub: 1,
|
||||
@ -149,14 +153,16 @@ gsap.fromTo("#content_all_img",
|
||||
})
|
||||
|
||||
// TODO faire devenir fixe le background une fois que l'on est passé
|
||||
gsap.fromTo("#open img",
|
||||
{opacity: 0.5,
|
||||
bottom: "-100vh"},
|
||||
gsap.fromTo('#open img',
|
||||
{
|
||||
opacity:1,
|
||||
bottom: "50vh",
|
||||
opacity: 0.5,
|
||||
bottom: '-100vh'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
bottom: '50vh',
|
||||
scale: 1.5,
|
||||
ease: "spline",
|
||||
ease: 'spline',
|
||||
scrollTrigger: {
|
||||
trigger: '#open-handle',
|
||||
scrub: 2,
|
||||
@ -164,11 +170,10 @@ gsap.fromTo("#open img",
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
let rotateYCard = "180deg";
|
||||
let offsetCard = "-100px";
|
||||
let rotateYCard = '180deg'
|
||||
let offsetCard = '-100px'
|
||||
// flip from right
|
||||
gsap.fromTo("#content-2", {
|
||||
gsap.fromTo('#content-2', {
|
||||
rotateY: rotateYCard,
|
||||
right: offsetCard,
|
||||
},
|
||||
@ -176,7 +181,7 @@ gsap.fromTo("#content-2", {
|
||||
rotateY: 0,
|
||||
right: 0,
|
||||
duration: 0.2,
|
||||
ease: "easeInOut",
|
||||
ease: 'easeInOut',
|
||||
scrollTrigger: {
|
||||
trigger: '#content-2 .flip-handle',
|
||||
scrub: 1,
|
||||
@ -184,28 +189,26 @@ gsap.fromTo("#content-2", {
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
function animateCard(id, side){
|
||||
function animateCard (id, side) {
|
||||
|
||||
let fromObject = {
|
||||
rotateY: rotateYCard,
|
||||
}
|
||||
fromObject[side] = offsetCard
|
||||
|
||||
let toObject ={
|
||||
let toObject = {
|
||||
rotateY: 0,
|
||||
duration: 0.2,
|
||||
ease: "easeInOut",
|
||||
ease: 'easeInOut',
|
||||
scrollTrigger: {
|
||||
trigger: '#content-'+id+' .flip-handle',
|
||||
trigger: '#content-' + id + ' .flip-handle',
|
||||
scrub: 1,
|
||||
markers: development_debug,
|
||||
}
|
||||
}
|
||||
toObject[side] = 0
|
||||
|
||||
gsap.fromTo("#content-"+id, fromObject,
|
||||
gsap.fromTo('#content-' + id, fromObject,
|
||||
toObject)
|
||||
}
|
||||
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
// Avoid `console` errors in browsers that lack a console.
|
||||
(function() {
|
||||
var method;
|
||||
var noop = function () {};
|
||||
(function () {
|
||||
var method
|
||||
var noop = function () {}
|
||||
var methods = [
|
||||
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||||
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
|
||||
];
|
||||
var length = methods.length;
|
||||
var console = (window.console = window.console || {});
|
||||
]
|
||||
var length = methods.length
|
||||
var console = (window.console = window.console || {})
|
||||
|
||||
while (length--) {
|
||||
method = methods[length];
|
||||
method = methods[length]
|
||||
|
||||
// Only stub undefined methods.
|
||||
if (!console[method]) {
|
||||
console[method] = noop;
|
||||
console[method] = noop
|
||||
}
|
||||
}
|
||||
}());
|
||||
}())
|
||||
|
||||
// Place any jQuery/helper plugins in here.
|
||||
|
||||
2233
package-lock.json
generated
2233
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -2,21 +2,16 @@
|
||||
"name": " ",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"keywords": "",
|
||||
"license": "",
|
||||
"author": "",
|
||||
"keywords": "sesame",
|
||||
"license": "AGPLv3+",
|
||||
"author": "B. Lemoine contact@cipherbliss.com",
|
||||
"scripts": {
|
||||
"build": "parcel build index.html",
|
||||
"dev": "parcel index.html --open",
|
||||
"start": "npm run build && npm run dev",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"start": "serve ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"parcel-bundler": "^1.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"anime": "^0.1.2",
|
||||
"bulma": "^0.9.4",
|
||||
"scrollmagic": "^2.0.8"
|
||||
"serve": "~14.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
"icons": [{
|
||||
"src": "icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
"sizes": "213x264"
|
||||
}],
|
||||
"start_url": "/?utm_source=homescreen",
|
||||
"background_color": "#fafafa",
|
||||
"background_color": "#020225",
|
||||
"theme_color": "#fafafa"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user