Adding pixel style on step images

landing_page/dist/index.html

@@ -58,6 +58,9 @@
                 </div>
             </div>
         </div>
+        <div class="clouds clouds-2">
+            <div class="cloud"></div>
+        </div>
         <div class="clouds">
             <div class="cloud"></div>
         </div>
@@ -68,19 +71,19 @@
                 <div class="col-12 col-md-4 text-center my-3 my-md-0">
                     <div class="image-item">
                         <h2>Choose your map</h2>
-                        <div class="step-image"><img src="static/images/Bitmap3.png"></div>
+                        <div class="step-image"><img src="static/images/step 1.png"></div>
                     </div>
                 </div>
                 <div class="col-12 col-md-4 text-center my-3 my-md-0">
                     <div class="image-item">
                         <h2>Select your character</h2>
-                        <div class="step-image"><img src="static/images/Bitmap2.png"></div>
+                        <div class="step-image"><img src="static/images/step 2.png"></div>
                     </div>
                 </div>
                 <div class="col-12 col-md-4 text-center my-3 my-md-0">
                     <div class="image-item">
                         <h2>Let's go explore and talk&nbsp;!</h2>
-                        <div class="step-image"><img src="static/images/bitmap.png"></div>
+                        <div class="step-image"><img src="static/images/step 3.png"></div>
                     </div>
                 </div>
             </div>
@@ -149,7 +152,7 @@
                 </div>
                 <div class="col-6 col-md-6 my-3 my-md-0 floppy">
                     <img src="static/images/floppy.png" />
-                    <div>Soon available on floppy !<br/><span>otherwise it's open source and on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
+                    <div>Soon available on floppy !<br/><span>otherwise, open source and on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
                 </div>
             </div>
             <div class="container-fluid container-lg">

landing_page/src/sass/styles.scss

@@ -66,6 +66,14 @@ header {
         overflow: hidden;
         width: 100%;
         z-index: 1;
+        &.clouds-2 {
+            bottom: 25px;
+            .cloud {
+                transform: translateX(50px);
+                -webkit-animation-duration: 80s;
+                opacity: .6;
+            }
+        }
         .cloud {
             background: url('../images/cloud.png') repeat-x;
             height: 162px;
@@ -194,7 +202,7 @@ img{
             .step-image {
                 position: relative;
                 &:after {
-                    transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
+                    transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
                     content:"";
                     height: 100%;
                     width: 100%;
@@ -202,13 +210,12 @@ img{
                     position: absolute;
                     bottom: -25px;
                     left: 25px;
-                    border-radius: 10px;
+                    background: url('../images/bg-step.png') no-repeat bottom right;
                 }
                 img {
                     width: 100%;
                     z-index: 2;
                     position: relative;
-                    border-radius: 10px;
                 }
             }
             h2{
@@ -240,7 +247,6 @@ img{
             text-align: center;
             .quote{
                 font-size: 1.5rem;
-                margin-right: 3rem;
                 margin-bottom: 0.5rem;
                 letter-spacing: 2px;
             }