Changed the footer into a much attractive and professional footer

arpit456jain · Oct 1, 2023 · be95ede · be95ede
1 parent b03f47e
commit be95ede
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 30 deletions.
diff --git a/Coffee Website Template/css/style.css b/Coffee Website Template/css/style.css
@@ -503,30 +503,30 @@ section{
     padding:1rem 0;
 }
 
-.footer{
-    background:var(--black);
-    text-align: center;
-}
 
-.footer .share{
-    padding:1rem 0;
+
+.footer .share {
+    padding: 1rem 0;
+    text-align: center;
+    margin-top: -90px; /* Adjusted margin-top to move the social media icons closer to the upper border */
 }
 
-.footer .share a{
+.footer .share a {
     height: 5rem;
     width: 5rem;
     line-height: 5rem;
     font-size: 2rem;
-    color:#fff;
-    border:var(--border);
-    margin:.3rem;
+    color: #fff;
+    border: var(--border);
+    margin: 0.3rem;
     border-radius: 50%;
 }
 
-.footer .share a:hover{
+.footer .share a:hover {
     background-color: var(--main-color);
 }
 
+
 .footer .links{
     display: flex;
     justify-content: center;
@@ -556,6 +556,11 @@ section{
 .footer .credit span{
     color:var(--main-color);
 }
+.column h2 {
+    font-size: 24px;
+    margin-bottom: 15px;
+    margin-top: 0; /* Add this line to remove default margin from h2 */
+}
 
 
 
@@ -639,4 +644,80 @@ section{
         font-size: 50%;
     }
 
+}
+
+
+/*footer*/
+
+.footer {
+    display: flex;
+    justify-content: space-around;
+    background-color: var(--black);
+    color: #fff;
+    padding: 40px 20px 30px 20px;
+    flex-wrap: wrap;
+}
+
+.column {
+    width: 220px;
+    margin-bottom: 30px;
+}
+
+.column h2 {
+    font-size: 24px;
+    margin-bottom: 15px;
+    margin-top: 0;
+}
+
+.column p,
+.column ul {
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    line-height: 1.5;
+}
+
+.column ul li {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.column ul li i {
+    margin-right: 10px;
+}
+
+.column ul li a {
+    color: #fff;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.column ul li a:hover {
+    color: #ffcc00;
+}
+
+
+
+
+.footer .social-icons-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px; /* Adjust margin-top to create space between social icons and text */
+}
+
+.footer .social-icons-container .share {
+    display: flex;
+}
+
+.footer .made-with-love {
+    text-align: center;
+    font-size: 14px;
+    margin-top: 30px;
+}
+
+.footer .made-with-love i {
+    color: red;
 }
diff --git a/Coffee Website Template/index.html b/Coffee Website Template/index.html
@@ -396,27 +396,52 @@ <h1 class="heading"> our <span>blogs</span> </h1>
 
 <!-- footer section starts  -->
 
-<section class="footer">
-
-    <div class="share">
-        <a href="#" class="fab fa-facebook-f"></a>
-        <a href="#" class="fab fa-twitter"></a>
-        <a href="#" class="fab fa-instagram"></a>
-        <a href="#" class="fab fa-linkedin"></a>
-        <a href="#" class="fab fa-pinterest"></a>
-    </div>
 
-    <div class="links">
-        <a href="#">home</a>
-        <a href="#">about</a>
-        <a href="#">menu</a>
-        <a href="#">products</a>
-        <a href="#">review</a>
-        <a href="#">contact</a>
-        <a href="#">blogs</a>
+<div class="footer">
+    <div class="column">
+        <a href="#" class="logo">
+            <img src="images/logo.png" alt="">
+        </a>
+        <br><br>
+        <p>Small description about the coffee shop goes here.</p>
     </div>
-
-</section>
+    <div class="column">
+        <h2>Contact Us</h2>
+        <ul>
+            <li><i class="fas fa-phone"></i> +1 (123) 456-7890</li>
+            <li><i class="fas fa-envelope"></i> info@example.com</li>
+            <li><i class="fas fa-map-marker-alt"></i> 123 Main St, Cityville, USA</li>
+        </ul>
+    </div>
+    <div class="column">
+        <h2>Important Links</h2>
+        <ul>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Menu</a></li>
+            <li><a href="#">Contact</a></li>
+        </ul>
+    </div>
+    <div class="column">
+        <h2>Opening Hours</h2>
+        <p>Mon-Fri: 8am - 8pm<br>Sat-Sun: 9am - 6pm</p>
+    </div>
+</div>
+<div class="footer">
+    <!-- Your existing content -->
+    <div class="social-icons-container">
+        <div class="share">
+            <a href="#"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-linkedin"></i></a>
+            <a href="#"><i class="fab fa-pinterest"></i></a>
+        </div>
+        <div class="made-with-love">
+            Made with <i class="fas fa-heart" style="color: red;"></i> by YourName. All rights reserved.
+        </div>
+    </div>
+</div>
 
 <!-- footer section ends -->