added new button

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}

nav_bar/nav_bar.css

@@ -5,7 +5,7 @@ body {
 
 .topnav {
   overflow: hidden;
-    background-color: #FFFF;
+  background-color: #ffff;
 }
 
 .topnav a {
@@ -19,6 +19,7 @@ body {
 
 .topnav a:hover {
   color: red;
+  background-color: aliceblue;
 }
 
 .topnav a.active {

nav_bar/nav_bar.html

@@ -11,8 +11,8 @@
       </div>
       <!--This is the top nav bar-->
       <div class="topnav">
-        <a class="active" href="#home">Home</a>
+        <a href="#home">Home</a>
-        <a href="#aboutus">About Us</a>
+        <a class="active" href="#aboutus">About Us</a>
         <a href="#doctors">Doctors</a>
         <a href="#department">Department</a>
         <a href="#newsandmedia">New and Media</a>

top_header/top_header.css

@@ -1,10 +1,11 @@
-
+body::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
 .doctor_img {
   width: 95vw;
   margin-left: 30px;
   margin-right: 30px;
   margin-top: 50px;
-   
 }
 
 .title_1 {
@@ -19,20 +20,17 @@
   color: rgb(181, 181, 181);
   font-size: 10;
   font-weight: lighter;
-
 }
 
 .book-appointment {
   background-color: white;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s;
   width: 75%;
   position: absolute;
-    top: 110%;
+  top: 105%;
-    left: 50%;
+  left: 12%;
-    transform: translate(-50%, -50%);
+  margin-bottom: 100px;
-
 }
 
 h4 {
@@ -40,11 +38,10 @@
   padding-top: 10px;
 }
 
-
 .rounded-input {
   border: 1px solid #ccc;
   border-radius: 10px; /* Adjust this value to change the radius */
-    padding: 5px;
+  padding: 10px;
   width: 30%;
   height: 35px; /* Set the width of each input field */
   margin: 1%; /* Add some margin for spacing */
@@ -57,17 +54,35 @@
   margin-bottom: 10px; /* Add some margin for spacing */
 }
 
-
 /* Style for the "Book Appointment" button */
 .book-appointment-button {
-    background-color: #17C1A3;
+  background-color: #17c1a3;
   border-color: white;
   color: white;
   border-radius: 10px;
-    padding: 5px;
+  padding: 15px;
-    width: 30%;
+  width: 33%;
-    height: 50px;
+  height: 55px;
   margin: 1%;
   cursor: pointer;
   outline: none;
+  border: none;
+}
+
+/* Style for the "Book Appointment" button */
+.small {
+  background-color: #17c1a3;
+  color: white;
+  border-radius: 10px;
+  padding: 15px;
+  width: 15%;
+  height: 55px;
+  margin: 1%;
+  cursor: pointer;
+  outline: none;
+  border: none;
+}
+
+.book-appointment-div {
+  margin-left: 80px;
 }

top_header/top_header.html

@@ -27,36 +27,45 @@
 
       <!--starting of the rest of the header code-->
       <div class="top-header-container">
-       
         <div class="img_container">
           <img class="doctor_img" src="img/doctor_img.png" alt="doc image" />
         </div>
 
         <div class="title_1">
           <h1>Love & Care to Humanity</h1>
-          <h3>Fastest-Growing Multi Speciality Hospital in South Kerala</h1>
+          <h3>Fastest-Growing Multi Speciality Hospital in South Kerala</h3>
         </div>
 
+        <div class="book-appointment-div">
+          <button class="book-appointment-button small">
+            Book Appointment
+          </button>
+        </div>
       </div>
 
       <div class="book-appointment">
         <h4>Book an Appoinment</h4>
 
         <div class="input-container">
-            <input type="text" placeholder="Full name" class="rounded-input">
+          <input type="text" placeholder="Full name" class="rounded-input" />
-            <input type="text" placeholder="Phone number" class="rounded-input">
+          <input type="text" placeholder="Phone number" class="rounded-input" />
-            <input type="text" placeholder="Select Date" class="rounded-input">
+          <input type="text" placeholder="Select Date" class="rounded-input" />
         </div>
 
         <div class="input-container">
-            <input type="text" placeholder="Select Department" class="rounded-input">
+          <input
-            <input type="text" placeholder="Select Doctor" class="rounded-input">
+            type="text"
+            placeholder="Select Department"
+            class="rounded-input"
+          />
+          <input
+            type="text"
+            placeholder="Select Doctor"
+            class="rounded-input"
+          />
           <button class="book-appointment-button">Book Appointment</button>
         </div>
       </div>
-     
-    
-
     </div>
   </body>
 </html>