From fe05f430011c7474356d9f12a108712656dbbe59 Mon Sep 17 00:00:00 2001 From: Hugo Averty Date: Mon, 1 Jun 2020 20:29:14 +0200 Subject: [PATCH] Adding LP details : animations, effect, styles --- landing_page/dist/index.html | 29 ++++++++----- landing_page/src/sass/styles.scss | 68 +++++++++++++++++++++++-------- 2 files changed, 68 insertions(+), 29 deletions(-) diff --git a/landing_page/dist/index.html b/landing_page/dist/index.html index 0402b1ea..0fcd8260 100644 --- a/landing_page/dist/index.html +++ b/landing_page/dist/index.html @@ -29,7 +29,7 @@
- CONTRIBUTE + CONTRIBUTE
@@ -40,6 +40,9 @@
+
+
+
@@ -79,7 +82,7 @@
-

Used by millions of people worldwilde and companies such as :

+

THEY MAY APPROVE

@@ -97,28 +100,32 @@
-

People love WorkAdventure

+

Why they loved Work Adventure

-

« Good job boys! You've made 32bit great again »

-

Donald T. Whashington DC

+

« Since I see life in 32px, I think I feel happier. »

+

Donald, Whashington DC

-

« Your characters are so well dressed, who is the creator? »

-

Anna W. New York City

+

« For me, who hates hugs, I can't live without it... »

+

Anna, New York City

-

« I hate you! This rocket app is more powerfull then my missiles »

-

Kim J-U. Pyongyang

+

« Par webcam les gens ne me font plus de réflexion sur mes cheveux. Trop cool ! »

+

Kim. Pyongyang

+
+
+

« Since it's fun, I scare my colleagues a little less. »

+

Emmanuel. France

-
+
- +
diff --git a/landing_page/src/sass/styles.scss b/landing_page/src/sass/styles.scss index 4522533f..14f7bf81 100644 --- a/landing_page/src/sass/styles.scss +++ b/landing_page/src/sass/styles.scss @@ -22,11 +22,10 @@ } header { - background: #28A7FC url("../images/header.png") no-repeat bottom; + background: #28A7FC url("../images/sky.jpg") no-repeat bottom; background-size: 100%; height: 37rem; - background-attachment: fixed; - background-position: 0px 67%; + position: relative; .section{ position: relative; } @@ -52,8 +51,35 @@ header { } } } + .clouds { + content: ""; + position: absolute; + bottom: 0; + right: 0; + height: 162px; + overflow: hidden; + width: 100%; + z-index: 1; + .cloud { + background: url('../images/cloud.png') repeat-x; + height: 162px; + width: 4000px; + -webkit-animation-name: prop-600; + -webkit-animation-duration: 60s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction:alternate; + } + } } +@-webkit-keyframes prop-600 { + 0% { + -webkit-transform: translateX(0px); + } + 100% { + -webkit-transform: translateX(-400px); + } +} .custom-link{ font-family: "VCR OSD Mono"; font-size: 18px; @@ -72,21 +98,15 @@ header { bottom: -24px; padding: 20px; text-align: center; - transition: all 0.5s ease; - -webkit-transition: all 500ms cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */ - -webkit-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); - -moz-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); - -o-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); - transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ - - -webkit-transition-timing-function: cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */ - -webkit-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); - -moz-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); - -o-transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); - transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ + z-index: 2; + transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ + //transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ &:hover { transform: scale(1.1); color: white; + font-size: 24px; + padding: 12px; + text-decoration: none; } &.contribute { background-image: url('../images/btn-bg-2.png'); @@ -152,6 +172,11 @@ img{ height: 100%; margin: 0 auto; padding: 20px; + transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */ + border-radius: 10px; + &:hover { + transform: scale(1.1); + } .step-image { position: relative; &:after { @@ -162,6 +187,7 @@ img{ position: absolute; bottom: -25px; left: 25px; + border-radius: 10px; } img { width: 100%; @@ -188,12 +214,14 @@ img{ &.quotes{ h2{ - font-size: 2rem; + font-family: 'Karmatic Arcade'; + font-size: 34px; + margin: 40px 0; } .quote-item{ padding: 1rem 0; - text-align: right; + text-align: center; .quote{ font-size: 1.5rem; margin-right: 3rem; @@ -201,9 +229,13 @@ img{ letter-spacing: 2px; } .author{ - + font-size: 1rem; + letter-spacing: 0px; } } } } +.footer { + padding: 2rem; +}