Merge pull request Anishkagupta04#904 from meetarora10/app-branch

Made the Book An Appointment page responsive .
Anjaliavv51 · Jul 28, 2024 · 7ab76a9 · 7ab76a9
2 parents dd8bdca + e8274e8
commit 7ab76a9
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 4 deletions.
diff --git a/Html-Files/Css-Files/appointStyle.css b/Html-Files/Css-Files/appointStyle.css
@@ -148,8 +148,8 @@ button:hover {
     background-color: #cfcece;
     padding: 20px;
     border-radius: 5px;
-    width: 100%;
-    max-width: 100vw;
+    width: 111%;
+    max-width: 108vw;
     box-sizing: border-box;
     text-align: center;
 }
@@ -163,7 +163,7 @@ footer {
     color: white;
     text-align: center;
     padding: 10px 0;
-    width: 100%;
+    width: 106%;
     bottom: 0;
 }
 
@@ -189,7 +189,7 @@ footer ul li a {
     }
 
     input[type="date"] {
-        width: 100%;
+        width: 90%;
     }
 }
 

diff --git a/Html-Files/appointment.html b/Html-Files/appointment.html
@@ -6,6 +6,35 @@
     <title>RapiDoc</title>
     <link rel="shortcut icon" href="/assets/img/favi-Appoint.png" type="image/x-icon" >
     <link rel="stylesheet" href="./Css-Files/appointStyle.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <style>
+        #progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            background-color: #3fbcc0;
+            z-index: 9999;
+        }
+        .social-wrapper{
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .social-links span{
+            margin-left: 20px;
+        }
+        .icons{
+            position: relative;
+            left: 154px;
+            bottom: 17px;
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+        }
+    </style>
 </head>
 <body>
     <div id="progressBar"></div>
@@ -99,6 +128,43 @@ <h2>Doctor's Contact Information</h2>
     </div>
 
     <footer>
+        <div class="footer-bottom">
+            <div class="footer-bottom-wrapper">
+              <small id="ss">© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
+                Reserved Made with ❤️ by RapiDoc</small>
+              <div class="social-wrapper">
+                <div class="social-links">
+                  <div style="margin-top: 4px;font-family: sans-serif;"><i>Follow&nbsp;Us&nbsp;:&nbsp;</i></div>
+                <div class="icons">
+                    <span  id="insta">
+                        <a href="https://www.instagram.com" target="_blank">
+                          <i class="fab fa-instagram"></i>
+                        </a>
+                      </span>
+                      <span id="twit">
+                        <a  href="https://www.twitter.com" target="_blank">
+                          <i class="bi bi-twitter-x"></i>
+                        </a>
+                      </span>
+                      <span id="git">
+                        <a  href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank">
+                          <i class="fab fa-github"></i>
+                        </a>
+                      </span>
+                      <span id="linkd">
+                        <a  href="https://www.linkedin.com" target="_blank">
+                          <i class="fab fa-linkedin"></i>
+                        </a>
+                      </span>
+
+                        <span id="fb"><a  href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></sp>
+                       <span id="phn"> <a  href="+91 1234567890" title="+91 1234567890" target="_blank"><i class="fa-solid fa-phone"></i></a></span>
+                        <span id="mail1" ><a  href="info@rapidoc.com" target="_blank"><i class="fa-solid fa-envelope"></i></a></span>
+                    </div>
+                </div>
+              </div>
+            </div>
+          </div>
         <p>&copy; 2024 Doctor's Clinic</p>
         <p>Opening Hours: Mon-Fri 10:00am - 5:00pm</p>
     </footer>