Adding LP details : animations, effect, styles

landing_page/dist/index.html

@@ -29,7 +29,7 @@
                 </div>
                 <div class="row justify-content-md-center pt-5" style="margin-top: 100px;">
                     <div class="col col-lg-3">
-                        <a class="custom-link contribute" href="#" title="CONTRIBUTE !">CONTRIBUTE
+                        <a class="custom-link contribute" target="_BLANK" href="https://github.com/thecodingmachine/workadventure" title="CONTRIBUTE !">CONTRIBUTE
                         </a>
                     </div>
                     <div class="col col-lg-3">
@@ -40,6 +40,9 @@
                 </div>
             </div>
         </div>
+        <div class="clouds">
+            <div class="cloud"></div>
+        </div>
     </header>
     <div class="section bg-white how-to">
         <div class="container-fluid container-lg">
@@ -79,7 +82,7 @@
     </div>
     <div class="bg-gray section used-by">
         <div class="container-fluid container-lg">
-            <h2 class="text-center pb-4">Used by millions of people worldwilde and companies such as :</h2>
+            <h2 class="text-center pb-4">THEY MAY APPROVE</h2>
             <div class="row justify-content-md-center align-items-center">
                 <div class="col col-md-auto">
                     <img src="static/images/atari.png">
@@ -97,28 +100,32 @@
         </div>
         </div>
     <div class="container-fluid container-lg section quotes">
-        <h2 class="text-center">People love WorkAdventure</h2>
+        <h2 class="text-center">Why they loved Work Adventure</h2>
         <div class="row justify-content-center">
             <div class="col-12 col-md-9">
                 <div class="quote-item">
-                    <p class="quote">&laquo;&nbsp;Good job boys! You've made 32bit great again&nbsp;&raquo;</p>
+                    <p class="quote">&laquo;&nbsp;Since I see life in 32px, I think I feel happier.&nbsp;&raquo;</p>
-                    <p class="author">Donald T. Whashington DC</p>
+                    <p class="author">Donald, Whashington DC</p>
                 </div>
                 <div class="quote-item">
-                    <p class="quote">&laquo;&nbsp;Your characters are so well dressed, who is the creator?&nbsp;&raquo;</p>
+                    <p class="quote">&laquo;&nbsp;For me, who hates hugs, I can't live without it...&nbsp;&raquo;</p>
-                    <p class="author">Anna W. New York City</p>
+                    <p class="author">Anna, New York City</p>
                 </div>
                 <div class="quote-item">
-                    <p class="quote">&laquo;&nbsp;I hate you! This rocket app is more powerfull then my missiles&nbsp;&raquo;</p>
+                    <p class="quote">&laquo;&nbsp;Par webcam les gens ne me font plus de réflexion sur mes cheveux. Trop cool !&nbsp;&raquo;</p>
-                    <p class="author">Kim J-U. Pyongyang</p>
+                    <p class="author">Kim. Pyongyang</p>
+                </div>
+                <div class="quote-item">
+                    <p class="quote">&laquo;&nbsp;Since it's fun, I scare my colleagues a little less.&nbsp;&raquo;</p>
+                    <p class="author">Emmanuel. France</p>
                 </div>
             </div>
 
         </div>
     </div>
-    <div class="section bg-white footer">
+    <div class="bg-white footer">
         <div class="container-fluid container-lg">
-            <img src="static/images/Logo TCM.png">
+            <a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
         </div>
     </div>
 </body>

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;
+    position: relative;
-    background-position: 0px 67%;
     .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;
+    z-index: 2;
-    -webkit-transition: all 500ms cubic-bezier(0.000, 0, 1.000, 1); /* older webkit */
+    transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
-    -webkit-transition: all 500ms cubic-bezier(0.000, -0.600, 1.000, 1.650);
+    //transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
-    -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 */
     &: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;
+}