footer completed

Author: alirezatayebinejad

index.html

@@ -364,7 +364,60 @@ <h5>get e-mail updates about out latest shop and <span>special offers</span></h5
 
     <!--footer section-->
 
-    <footer></footer>
+    <footer>
+      <div id="footer">
+        <div class="contact">
+          <a href="indext.html"><img src="images/logo.png" alt="" /></a>
+          <br> <br>
+          <br> 
+          <h3>Contact</h3>
+          <address>
+            <p><b>Address:</b> Wellington Road, Street 32. San Francisco</p>
+            <p><b>Phone:</b> Wellington Road, Street 32. San Francisco</p>
+            <p><b>Hours</b> 10:00 - 18:00. Mon - Sat</p>
+          </address>
+          <h3>Follow Us</h3>
+          <br> 
+          <div class="socials">
+            <a href="#"><i class="fa-brands fa-facebook-square"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+            <a href="#"><i class="fa-brands fa-telegram"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-twitter"></i></a>
+          </div>
+        </div>
+        <div class="about">
+          <h3>About</h3>
+          <br> 
+          <a href="#">About Us</a>
+          <a href="#">Delivery Information</a>
+          <a href="#">Privacy Policy</a>
+          <a href="#">Terms & Conditions</a>
+          <a href="#">Contact Us</a>
+        </div>
+        <div class="myaccount ">
+          <h3>My account</h3>
+          <br> 
+          <a href="#">Sign In</a>
+          <a href="#">View Cart</a>
+          <a href="#">My Wishlist</a>
+          <a href="#">Track My Order</a>
+          <a href="#">Help</a>
+        </div>
+        <div class="install">
+          <h3>Install App</h3>
+          <br> 
+          <p>From App Store or Google Play</p>
+          <div class="download">
+            <a href="#"><img src="images/pay/app.jpg" alt=""></a>
+            <a href="#"><img src="images/pay/play.jpg" alt=""></a>
+          </div>
+          <p>Secured Payment Gateways</p>
+          <img src="images/pay/pay.png" alt="">
+        </div>
+        
+      </div>
+    </footer>
 
     <script src="script.js"></script>
   </body>

style.css

@@ -309,7 +309,7 @@ span {
   justify-content: center;
   padding: 25px;
   background-size: cover;
-  backdrop-filter:blur(8%);
+  backdrop-filter: blur(8%);
 }
 #banners .big-banners button {
   margin-top: 20px;
@@ -357,52 +357,52 @@ span {
   padding: 25px;
   background-size: cover;
 }
-#banners .small-banners h2{
+#banners .small-banners h2 {
   font-size: 25px;
 }
-#banners .small-banners h5{
+#banners .small-banners h5 {
   color: #771818;
 }
 
 /* newsletter section styles */
 
-#newsletter{
+#newsletter {
   background-image: url(images/banner/b14.png);
   background-repeat: no-repeat;
-  background-position:  180px;
+  background-position: 180px;
   background-color: #041e42;
   height: 160px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 75px;
 }
-#newsletter .newsletter-text h3{
+#newsletter .newsletter-text h3 {
   color: white;
   font-size: 30px;
   padding: 0 0 15px 0;
 }
-#newsletter .newsletter-text h5{
+#newsletter .newsletter-text h5 {
   color: rgb(151, 151, 151);
   font-size: 17px;
 }
-#newsletter .newsletter-text h5 span{
+#newsletter .newsletter-text h5 span {
   color: rgb(216, 182, 29);
 }
-#newsletter .form input{
+#newsletter .form input {
   padding: 20px;
   width: 350px;
   height: 56px;
   background-color: #d1d0d0;
   border-radius: 6px 0 0 6px;
   font-size: 18px;
-  
+
   border: none;
   outline: none;
   margin-right: -4px;
   margin-top: 1px;
 }
-#newsletter .form button{
+#newsletter .form button {
   margin-left: 0;
   padding: 20px;
   border: none;
@@ -413,3 +413,34 @@ span {
   border-radius: 0 6px 6px 0;
   cursor: pointer;
 }
+
+/* footer section styles */
+
+#footer{
+  display: flex;
+  align-items:flex-start;
+  justify-content: space-between;
+  padding: 75px;
+  background-color: #ececec;
+}
+#footer div{
+}
+#footer p, #footer a{
+  color: rgb(109, 109, 109);
+  text-decoration: none;
+}
+#footer a:hover{
+  color:#088178;
+}
+#footer .about a{
+  display: block;
+  padding:8px 0;
+}
+#footer .myaccount a{
+  display: block;
+  padding:8px 0;
+}
+#footer .download img{
+  border: 1px solid #08817969;
+  border-radius: 7px;
+}