Adding social links and floppy

landing_page/dist/index.html

@@ -19,8 +19,26 @@
     <header>
         <div class="container-lg section">
             <div class="over-image">
-                <div class="logo">
+                <div class="row">
-                    <img src="static/images/logo.png">
+                    <div class="col-6 col-md-6 my-3 my-md-0">
+                        <div class="logo">
+                            <img src="static/images/logo.png">
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-6 my-3 my-md-0">
+                        <div class="social-links">
+                            Share your experience
+                            <a href="" target="_BLANK">
+                                <img class="social-image" src="static/images/facebook.png" />
+                            </a>
+                            <a href="" target="_BLANK">
+                                <img class="social-image" src="static/images/linkedin.png" />
+                            </a>
+                            <a href="" target="_BLANK">
+                                <img class="social-image" src="static/images/twitter.png" />
+                            </a>
+                        </div>
+                    </div>
                 </div>
                 <div class="title text-center">
                     <h1>Your workplace<br/>but better</h1>
@@ -125,7 +143,15 @@
     </div>
     <div class="bg-white footer">
         <div class="container-fluid container-lg">
-            <a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
+            <div class="row">
+                <div class="col-6 col-md-6 my-3 my-md-0">
+                    <a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
+                </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 on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
+                </div>
+            </div>
         </div>
     </div>
 </body>

landing_page/src/sass/styles.scss

@@ -40,7 +40,13 @@ header {
         .logo{
             margin: 1rem 0;
         }
-
+        .social-links {
+            text-align: right;
+            padding-top: 36px;
+            a {
+                margin-left: 20px;
+            }
+        }
         .title {
             padding: 5rem 0;
             color: black;
@@ -65,7 +71,7 @@ header {
             height: 162px;
             width: 4000px;
             -webkit-animation-name: prop-600;
-            -webkit-animation-duration: 60s;
+            -webkit-animation-duration: 50s;
             -webkit-animation-iteration-count: infinite;
             -webkit-animation-direction:alternate;
         }
@@ -175,10 +181,17 @@ img{
             transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
             &:hover {
                 transform: scale(1.1);
+                .step-image {
+                    &:after {
+                        bottom: -10px;
+                        left: 10px;
+                    }
+                }
             }
             .step-image {
                 position: relative;
                 &:after {
+                    transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
                     content:"";
                     height: 100%;
                     width: 100%;
@@ -237,5 +250,18 @@ img{
 }
 .footer {
     padding: 2rem;
+    .floppy {
+        img {
+            float: right;
+            margin-left: 20px;
+        }
+        div {
+            float: right;
+            margin-left: 15px;
+            span {
+                color: grey;
+            }
+        }
+    }
 }