From b463a7e19ce319111317a5ba8e68ce0dbd8b6923 Mon Sep 17 00:00:00 2001
From: JANHVI TIWARI <tjanhvi2003@outlook.com>
Date: Mon, 21 Jun 2021 19:33:23 +0530
Subject: [PATCH] Updated footer design

---
 .vscode/settings.json |   3 +
 index.html            |  68 +++++++++++----
 main.css              | 192 +++++++++++++++++++++++++++++++++++-------
 3 files changed, 216 insertions(+), 47 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 64790ef..b9a4b71 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
     <title>SpacexMK</title>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="images/fav.png" type="image/x-icon"> 
     <link rel="stylesheet" href="main.css"/>
 
@@ -110,22 +112,56 @@
           </div>
         </div>
     </div>
-    <footer>
-        <div class="sm-handle">
-            <a href="https://linkedin.com/in/manan-kohli" class="sm-button" target="_blank">
-
-                <i class="fab fa-linkedin">	</i>
-            </a>
-            <a href="https://github.com/manankohlii" class="sm-button" target="_blank">
-                <i class="fab fa-github"></i>
-            </a>
-            <a href="https://twitter.com/manankohlii" class="sm-button" target="_blank">
-                <i class="fab fa-twitter"></i>
-            </a>
-            </div>
-            <br>
-            <p class="copyright">&copy Copyright <script>document.write(new Date().getFullYear())</script> |❤️Manan Kohli</a></p>
-    </footer>
+    <footer class="footer-distributed">
+ 
+        <div class="footer-left">
+        
+        <h3>Space<span>XMK</span></h3>
+        
+        <p class="footer-links">
+        <a href="#">Launches</a>
+        ·
+        <a href="#">Cores</a>
+        ·
+        <a href="#">Rockets</a>
+       
+        </p>
+        
+        <p class="footer-company-name">&copy; Copyright 2021 |❤️Manan Kohli</p>
+        </div>
+        
+        <div class="footer-center">
+        
+        <div>
+        <i class="fa fa-map-marker"></i>
+        <p> Delhi, India</p>
+        </div>
+        
+        <div>
+        <i class="fa fa-envelope"></i>
+        <p><a href="mailto:support@company.com">manankohli77@gmail.com</a></p>
+        </div>
+        
+        </div>
+        
+        <div class="footer-right">
+        
+        <p class="footer-company-about">
+        <span>About Us</span>
+        Uses the freely available SpacexAPI and basic HTML CSS and JS to give details of missions.
+        </p>
+        
+        <div class="footer-icons">
+        
+        <a href="https://twitter.com/manankohlii" target="_blank"><i class="fa fa-twitter"></i></a>
+        <a href="https://www.linkedin.com/in/manan-kohli/" target="_blank"><i class="fa fa-linkedin"></i></a>
+        <a href="https://github.com/manankohlii" target="_blank"><i class="fa fa-github"></i></a>
+        
+        </div>
+        
+        </div>
+        
+        </footer>
     </div>
     
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
diff --git a/main.css b/main.css
index 5ba2caa..dae9f49 100644
--- a/main.css
+++ b/main.css
@@ -462,40 +462,170 @@ main {
 }
 
 /*Footer*/
-footer {
+
+.footer-distributed{
   background-color: #000000;
   animation: glow 3s ease-in-out infinite alternate;
   background: linear-gradient(90deg, #ff8633 -40%, black 50%, #ff8633 140%);
+  width: 100%;
+  text-align: left;
+  font: bold 16px sans-serif;
+  padding: 25px 25px;
+  margin-top: 80px;
+ }
+  
+ .footer-distributed .footer-left,
+ .footer-distributed .footer-center,
+ .footer-distributed .footer-right{
+  display: inline-block;
+  vertical-align: top;
+ }
+  
+ .footer-distributed .footer-left{
+  width: 40%;
+ }
+  
+ .footer-distributed h3{
+  color:  #ffffff;
+  font: normal 36px 'Cookie', cursive;
+  margin: 0;
+ }
+  
+ .footer-distributed h3 span{
+  color:  #bd0606;
+ }
+  
+  
+ .footer-distributed .footer-links{
+  color:  #ffffff;
+  margin: 20px 0 12px;
+  padding: 0;
+ }
+  
+ .footer-distributed .footer-links a{
+  display:inline-block;
+  line-height: 1.8;
+  text-decoration: none;
+  color:  inherit;
+ }
+  
+ .footer-distributed .footer-company-name{
+  color:  #8f9296;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0;
+  word-spacing: 2px;
+  letter-spacing: 1.5px;
+ }
+  
+  
+ .footer-distributed .footer-center{
+  width: 35%;
+ }
+  
+ .footer-distributed .footer-center i{
+  background-color:  #33383b;
+  color: #ffffff;
+  font-size: 25px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
   text-align: center;
-  padding-bottom: 15px;
-}
-.sm-handle {
-  display: flex;
-  padding-top: 2rem;
-  justify-content: center;
-}
-.sm-button {
-  margin: 0px 10px 0px;
-  border-radius: 100%;
-  border: 1px solid #bababa;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  line-height: 42px;
+  margin: 10px 15px;
+  vertical-align: middle;
+ }
+  
+ .footer-distributed .footer-center i.fa-envelope{
+  font-size: 17px;
+  line-height: 38px;
+ }
+  
+ .footer-distributed .footer-center p{
+  display: inline-block;
+  color: #ffffff;
+  vertical-align: middle;
+  margin:0;
+ }
+  
+ .footer-distributed .footer-center p span{
+  display:block;
+  font-weight: normal;
+  font-size:14px;
+  line-height:2;
+ }
+  
+ .footer-distributed .footer-center p a{
+  color:  #5383d3;
+  text-decoration: none;;
+ }
+  
+ .footer-distributed .footer-right{
+  width: 20%;
+ }
+  
+ .footer-distributed .footer-company-about{
+  line-height: 20px;
+  color:  #92999f;
+  font-size: 13px;
+  font-weight: normal;
+  margin: 0;
+ }
+  
+ .footer-distributed .footer-company-about span{
+  display: block;
+  color:  #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 20px;
+ }
+  
+ .footer-distributed .footer-icons{
+  margin-top: 25px;
+ }
+  
+ .footer-distributed .footer-icons a{
+  display: inline-block;
+  width: 35px;
+  height: 35px;
   cursor: pointer;
-}
-.sm-button:hover {
+  background-color:  #33383b;
+  border-radius: 2px;
+  
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 35px;
+  
+  margin-right: 3px;
+  margin-bottom: 5px;
+ }
+ .footer-distributed .footer-icons a:hover{
   background: linear-gradient(to right, #6500ff, #f3df27);
-}
-
-.fab {
-  color: #fff;
-  font-size: 16px;
-}
-.copyright {
-  font-size: 10px;
-  word-spacing: 2px;
-  color: white;
-  letter-spacing: 1.5px;
-}
+ } 
+  
+ @media (max-width: 880px) {
+  
+  .footer-distributed{
+  font: bold 14px sans-serif;
+  
+  }
+  
+  .footer-distributed .footer-left,
+  .footer-distributed .footer-center,
+  .footer-distributed .footer-right{
+  display: block;
+  width: 100%;
+  margin-bottom: 40px;
+  text-align: center;
+  }
+  
+  .footer-distributed .footer-center i{
+  margin-left: 0;
+  }
+  .main {
+  line-height: normal;
+  font-size: auto;
+  }
+  
+ }
\ No newline at end of file