From 5097535c960b7c93c707ad0361ad9ed74f56e1a9 Mon Sep 17 00:00:00 2001
From: Abhishek Dumaniya <abhishekdumaniya196@gmail.com>
Date: Mon, 20 May 2024 18:27:14 +0530
Subject: [PATCH] Improved UI of footer

---
 index.html | 129 +++++++++++++++++++++-----------------
 style.css  | 181 ++++++++++++++++++++++++++---------------------------
 2 files changed, 161 insertions(+), 149 deletions(-)

diff --git a/index.html b/index.html
index f2f859b4..e6eec9b9 100644
--- a/index.html
+++ b/index.html
@@ -617,74 +617,89 @@ <h1>Give Us Your Valuable Feedback.</h1>
 
  
   <!-- ############### Footer ############### -->
- 
- 
-  <footer id="footer">
-    <div class="footer-top">
-      <div class="container">
-        <div class="row">
 
-          <div class="col-lg-3 col-md-6">
-            <div class="footer-info">
-              <h3>RapiDoc</h3>
-              <p>
-                Address<br>
-                Delhi, India<br><br>
-                <strong>Phone:</strong> <i class="bi bi-phone"></i><a href="tel:+91 1234567890">+91 1234567890</a><br>
-                <strong>Email:</strong> <a href="mailto:rapidoc@mail.com">rapidoc@mail.com</a>
-                <br>
-              </p>
-              <div class="social-links mt-3">
-                <a href="#" class="facebook"><i class="fa-brands fa-facebook-f"></i></a>
-                <a href="#" class="instagram"><i class="fa-brands fa-instagram"></i></a>
-                <a href="#" class="twitter"><i class="fa-brands fa-x-twitter"></i></a>
-                <a href="#" class="google-plus"><i class="fa-brands fa-skype"></i></a>
-                <a href="#" class="linkedin"><i class="fa-brands fa-linkedin-in"></i></a>
-              </div>
-            </div>
-          </div>
+  <footer>
+    <div class="row">
+      <!-- map -->
+      <div class="col" id="col1">
+        <div class="contact-location">
+          <!-- <img style="height: 100%;;" src="img/home icon.webp" alt="" class="logo"> -->
+          <iframe
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"
+            width="100%" height="200px" style="border: 0; padding: 2rem 2em 0 0" allowfullscreen="" loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+      </div>
+      <!-- map -->
 
-          <div class="col-lg-2 col-md-6 footer-links">
-            <h4>Links</h4>
-            <ul>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">Home</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#about">About us</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#services">Services</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#doctor">Doctors</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="Html-Files/contact.html">Contact</a></li>
-            </ul>
-          </div>
+      <!-- contact -->
+      <div class="col" id="col2">
+        <h3>
+          Contact
+          <div class="underline"><span></span></div>
+        </h3>
 
-          <div class="col-lg-3 col-md-6 footer-links">
-            <h4>Our Services</h4>
-            <ul>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">Location Services</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">Online OPDs</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">Availability Status</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">Pharmacy Services</a></li>
-              <li><i class="bx bx-chevron-right"></i> <a href="#">User Benefits</a></li>
-            </ul>
+        <p><a href="">contact@rapidoc.com</a></p>
+        <p><a href="">+91 1234567890</a></p>
+      </div>
+      <!-- contact -->
+
+      <!-- Links -->
+      <div class="col" id="col3">
+        <h3>
+          Quick Links
+          <div class="underline"><span></span></div>
+        </h3>
+        <div class="quick-links" id="bottom">
+          <!-- <div class="footer-title">
+                        QUICK LINKS
+                    </div> -->
+          <div class="quick-links-info">
+            <div><a href="./index.html">Home</a></div>
+            <div><a href="#about">About us</a></div>
+            <div><a href="./Html-Files/contact.html">Contact us</a></div>
+            <div><a href="#services">Services</a></div>
+            <div><a href="#doctors">Doctors</a></div>
           </div>
+        </div>
+      </div>
+      <!-- links -->
+
+      <div class="col" id="col4">
+        <h3>
+            SOCIAL
+            <div class="underline"><span></span></div>
+        </h3>
+        <div class="social-icons">
+            
+            <div class="social">
+                <a href="#" target="_blank"><img
+                        src="#" alt="">Instagram</a>
 
-          <div class="col-lg-4 col-md-6 footer-newsletter">
-            <h4>Daily Newsletter</h4>
-            <p>Get your medical insights! Subscribe to our newsletters now!</p>
-            <form action="" method="post">
-              <input type="email" name="email" placeholder="Email"><input type="submit" value="Subscribe">
-            </form>
+            </div>
+            <div class="social">
+                <a href="#" target="_blank"><img
+                        src="" alt="">LinkedIn</a>
 
-          </div>
+            </div>
+            <div class="social">
+                <a href="#"><img src="" alt=""> Facebook</a>
 
+            </div>
         </div>
-      </div>
+    </div>
     </div>
 
-    <div class="container">
-      <div class="copyright">
-        &copy; 2024 Copyright <strong><span>RapiDoc</span></strong>. All Rights Reserved
-      </div>
+    <!-- Copyright -->
+    <div id="copyright" style="text-align: center;">
+      <p style="align-items: center;">
+        © Copyright &nbsp; <span> RapiDoc </span> &nbsp; | All Rights
+        Reserved
+      </p>
+      <p>Designed by RapiDoc</p>
     </div>
-  </footer><!-- End Footer -->
+  </footer>
+
 
   <div id="preloader"></div>
   <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
diff --git a/style.css b/style.css
index 84e582a1..38f45bdb 100644
--- a/style.css
+++ b/style.css
@@ -1200,139 +1200,136 @@ section {
 
 
 /*################----Footer----################*/
-#footer {
-  background: #000;
-  padding: 0 0 30px 0;
-  color: #fff;
-  font-size: 14px;
+
+
+footer {
+  width: 100%;
+  background: linear-gradient(to right, #0f0f0f, #00093d);
+  color: #ffff;
+  line-height: 20px;
 }
 
-#footer .footer-top {
-  background: #000;
-  padding: 60px 0 30px 0;
+.footer-title {
+  font-weight: 700;
+  font-size: 26px;
+  margin-bottom: 22px;
 }
 
-#footer .footer-top .footer-info {
-  margin-bottom: 30px;
+.row {
+  width: 90%;
+  margin: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
-#footer .footer-top .footer-info h3 {
-  font-size: 24px;
-  margin: 0 0 20px 0;
-  padding: 2px 0 2px 0;
-  line-height: 1;
-  font-weight: 700;
+.col {
+  padding: 20px 0;
 }
 
-#footer .footer-top .footer-info p {
-  font-size: 14px;
-  line-height: 24px;
-  margin-bottom: 0;
-  font-family: "Roboto", sans-serif;
+.col h3 {
+  font-size: 25px;
 }
 
-#footer .footer-top .social-links a {
-  font-size: 18px;
-  display: inline-block;
-  background: #3fbcc0a4;
-  color: #fff;
-  line-height: 1;
-  padding: 8px 0;
-  margin-right: 4px;
-  border-radius: 4px;
-  text-align: center;
-  width: 36px;
-  height: 36px;
-  transition: 0.3s;
+#col1 {
+  flex-basis: 40%;
+  margin-right: 40px;
 }
 
-#footer .footer-top .social-links a:hover {
-  background: #3fbcc0c1;
-  text-decoration: none;
+#col2 {
+  flex-basis: 20%;
+  margin-right: 10px;
+  font-size: 15px;
 }
 
-#footer .footer-top h4 {
-  font-size: 16px;
-  font-weight: 600;
-  position: relative;
-  padding-bottom: 12px;
+#col3 {
+  flex-basis: 15%;
 }
 
-#footer .footer-top .footer-links {
+#col4 {
+  flex-basis: 15%;
+}
+
+.logo {
   margin-bottom: 30px;
 }
 
-#footer .footer-top .footer-links ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+.col h3 {
+  width: fit-content;
+  margin-bottom: 40px;
+  position: relative;
 }
 
-#footer .footer-top .footer-links ul i {
-  padding-right: 2px;
-  color: #3fbcc0a4;
-  font-size: 18px;
-  line-height: 1;
+#col2 p {
+  margin-bottom: 18px;
 }
 
-#footer .footer-top .footer-links ul li {
-  padding: 10px 0;
-  display: flex;
-  align-items: center;
+#col2 p a {
+  font-size: 15px;
+  padding-top: 10px;
+  color: #fff;
 }
 
-#footer .footer-top .footer-links ul li:first-child {
-  padding-top: 0;
+.email-id {
+  width: fit-content;
+  margin: 20px 0;
+  border-bottom: 1px solid #ccc;
 }
 
-#footer .footer-top .footer-links ul a {
+.quick-links-info div {
+  margin-bottom: 20px;
+}
+
+.quick-links-info div a {
   color: #fff;
-  transition: 0.3s;
-  display: inline-block;
-  line-height: 1;
+  font-size: 15px;
 }
 
-#footer .footer-top .footer-links ul a:hover {
-  color: #3fbbc0;
+.underline {
+  width: 100%;
+  height: 5px;
+  background: #767676;
+  border-radius: 3px;
+  position: absolute;
+  top: 25px;
+  left: 0;
+  overflow: hidden;
 }
 
-#footer .footer-top .footer-newsletter form {
-  margin-top: 30px;
+.underline span {
+  width: 15px;
+  height: 100%;
   background: #fff;
-  padding: 6px 10px;
-  position: relative;
-  border-radius: 4px;
+  border-radius: 3px;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  /* animation: moving 1s linear infinite; */
 }
 
-#footer .footer-top .footer-newsletter form input[type="email"] {
-  border: 0;
-  padding: 4px;
-  width: calc(100% - 110px);
-}
+@keyframes moving {
+  0% {
+    left: -20px;
+  }
 
-#footer .footer-top .footer-newsletter form input[type="submit"] {
-  position: absolute;
-  text-decoration: none;
-  border: none;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  background: none;
-  font-size: 16px;
-  padding: 0 20px;
-  background: #3fbcc0a4;
-  color: #fff;
-  transition: 0.3s;
-  border-radius: 0 4px 4px 0;
+  100% {
+    left: 100%;
+  }
 }
 
-#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
-  background: #3fbcc0a4;
+.social-icons img:hover {
+  transition: 0.5s ease-in-out;
+  transform: scale(1.1);
 }
 
-#footer .copyright {
+.social a{
+  margin-bottom: 10px;
   text-align: center;
-  padding-top: 30px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  color: white;
+
 }