From a0a925a8ed729b8fe2ebcfc246b2c78652a1985d Mon Sep 17 00:00:00 2001
From: Tsaha11 <tuhin727066@gmail.com>
Date: Sat, 31 Dec 2022 15:52:42 +0530
Subject: [PATCH] Footer UI changed

---
 index.css  | 56 ++++++++++++++++++++++++++++++++++++++++++++++++------
 index.html | 27 +++++++++++++-------------
 2 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/index.css b/index.css
index e313e23..ed96be0 100644
--- a/index.css
+++ b/index.css
@@ -456,10 +456,15 @@ header{
 footer{
     display:flex;
     flex-wrap: wrap;
+    position: relative;
+    bottom: 0;
+    width: 100%;
     align-items: stretch;
     justify-content: space-around;
     width: 100%;
-    background-color: lightgrey;
+    background-color: black;
+    color: white;
+    font-family: 'Poppins',sans-serif;
 }
 
 .footer--col{
@@ -480,24 +485,63 @@ footer{
 }
 
 input{
-    font-size : 1.25rem;
+    font-size : 1.45rem;
     padding : 1rem;
     margin: .5rem;
+    width: 80%;
+
 }
 .col--a{
     padding : 1rem;
     font-size : 2rem;
     font-weight: lighter;
     text-decoration: none;
-    color: black;
+    color: white;
+}
+.footer--col .button{
+  width: 80%;
+  margin: auto;
+  margin-top: 2%;
+  border-radius: 9px;
+}
+.footer--col .button:hover{
+  background-color: white;
+  color: black;
+  cursor: pointer;
 }
 .col--item{
-    font-size: 2rem;
-    font-weight: lighter;
+    font-size: 1.9rem;
+    margin: 1%;
+}
+.col--item span,.col--a{
+  color: rgb(124, 118, 118);
+  font-size: 1.7rem;
+
+}
+.col--links{
+  width: 50%;
+  align-items: center;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+.col--item span:hover,.col--a:hover{
+  color: whitesmoke;
+  cursor: pointer;
 }
 .col--heading{
     font-size: 2.5rem;
-    font-weight: lighter;
+    font-weight: bolder;
+    transform: scale(1.1);
+    font-family: 'Bungee Shade', cursive;
+    font-family: 'Cutive', serif;
+    font-family: 'Poppins', sans-serif;
+}
+.col--item i{
+  font-size: 1.65rem;
+  margin-right: 3%;
 }
   /*---RESPONSIVE DESIGN---*/
 
diff --git a/index.html b/index.html
index fb5780b..ee10015 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Shopo</title>
     <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Lato" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="index.css" rel="stylesheet">
     <script src="index.js"></script>
     <link href="toastr.css" rel="stylesheet"/>
@@ -132,25 +133,25 @@
         </div>
         <footer>
                 <div class="footer--col">
-                    <span class="col--heading">Contact Us</span>
-                    <input type="text" placeholder="Name">
-                    <input type="text" placeholder="Email">
-                    <input type="text" placeholder="Message">
-                    <div class="button">Submit</div>
+                    <span class="col--heading">Store</span>
+                    <div class="col--item"><label><i class="fa fa-map-marker" aria-hidden="true"></i></label><span>Name</div>
+                    <div class="col--item"><label><i class="fa fa-phone" aria-hidden="true"></i></label><span>9301223122</span></div>
+                    <div class="col--item"><label><i class="fa fa-envelope" aria-hidden="true"></i></label><span>@gmail.com</span></div>
                 </div>
                 <div class="footer--col">
                     <span class="col--heading">About</span>
-                    <a href="#" class="col--a">About us</a>
-                    <a href="#" class="col--a">We're hiring</a>
-                    <a href="#" class="col--a">Support</a>
-                    <a href="#" class="col--a">Help</a>
+                    <div class="col--links"><a href="#" class="col--a">About us</a></div>
+                    <div class="col--links"><a href="#" class="col--a">We're hiring</a></div>
+                    <div class="col--links"><a href="#" class="col--a">Help</a></div>
+                    <div class="col--links"><a href="#" class="col--a">Support</a></div>
 
                 </div>
                 <div class="footer--col">
-                    <span class="col--heading">Store</span>
-                    <div class="col--item">Company Name</div>
-                    <div class="col--item">9528364012</div>
-                    <div class="col--item">ex@mail.com</div>
+                    <span class="col--heading">Contact Us</span>
+                    <div class="col--field"><input type="text" placeholder="Name"></div>
+                    <div class="col--field"><input type="text" placeholder="Email"></div>
+                    <div class="col--field"><input type="text" placeholder="Message"></div>
+                    <div class="button">Submit</div>
                 </div>
 
         </footer>