#9 Closed. finished footer

vietanhdtd · May 9, 2019 · a1660b6 · a1660b6
1 parent 0b8addc
commit a1660b6
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
         integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -65,10 +66,41 @@ <h4 class="header-subtitle">"Because the platypus both lays eggs and produces mi
         </div>
     </section>
     <footer class="">
-        <div class="container">
-            <a href="#" class="navbar-brand"><img src="img/platypus-logo.png" alt="Startup-logo" height="45px"></a>
-            <div class="communities"><a>Communities</a></div>
-            <div class="communities"><a>Communities</div>
+        <div class="container row">
+            <a href="#" class="navbar-brand" style="margin-top: 50px;"><img src="img/platypus-logo.png" alt="Startup-logo"
+                    height="85px"></a>
+            <div class="footer-links d-flex col-6">
+                <div class="list-header"><a class="font-weight-bold">Company</a>
+                    <ul class="footer-list text-muted">
+                        <li><a>About</a></li>
+                        <li><a>Jobs</a></li>
+                        <li><a>Contact</a></li>
+                    </ul>
+                </div>
+                <div class="list-header"><a class="font-weight-bold">Communities</a>
+                    <ul class="footer-list text-muted">
+                        <li><a>Rescuers</a></li>
+                        <li><a>Forum</a></li>
+                        <li><a>Investor</a></li>
+                        <li><a>Event</a></li>
+                    </ul>
+                </div>
+                <div class="list-header"><a class="font-weight-bold">Useful Links</a>
+                    <ul class="footer-list text-muted">
+                        <li><a>Help</a></li>
+                        <li><a>Health</a></li>
+                        <li><a>Extra Tips</a></li>
+                    </ul>
+                </div>
+            </div>
+                <div class="social-media-btn col-4">
+                    <ul class="row">
+                        <li><a href="#" class="fa fa-instagram"></a></li>
+                        <li><a href="#" class="fa fa-twitter"></a></li>
+                        <li><a href="#" class="fa fa-facebook"></a></li>
+                    </ul>
+                </div>
+
         </div>
     </footer>
 

diff --git a/style.css b/style.css
@@ -111,5 +111,56 @@ footer {
     padding-bottom: 20px;
 }
 
+/* footer style */
+.container {
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+
+}
+
+li {
+    list-style: none;
+    color: #F09048;
+}
+li:hover{
+    color: #D86000;
+    cursor: pointer;
+}
+
+.footer-links {
+
+}
+
+.list-header {
+    width: 100%;
+    color: #D86000;
+    line-height: 50px;
+    margin-top: 50px;
+}
 
+.social-media-btn {
+    justify-content: center;
+    display: flex;
+    margin-top: 50px;
+}
 
+.fa {
+    margin: 0px 20px 0 0;
+    padding: 15px;
+    width: 60px;
+    height: 60px;
+    font-size: 30px;
+    text-align: center;
+    border-radius: 50%;
+    color: #D86000;
+    background-color: #222326;
+    text-decoration: none;
+}
+.fa:hover{
+    color: #D86000;
+    cursor: pointer;
+}
+a:hover {
+    text-decoration: none;
+}