Merge pull request #660 from Gunpreet08/improve-home-page

Improved navbar and Home page
tushargupta1504 · Oct 30, 2024 · 24ba202 · 24ba202
2 parents 6df025a + a5168d3
commit 24ba202
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/blog.html b/blog.html
@@ -69,6 +69,7 @@
         font-size: 16px;
         color: #444;
     }
+
 </style>
 </head>
 
@@ -79,11 +80,11 @@
     <input type="checkbox" id="toggler">
     <label for="toggler" class="fas fa-bars"></label>
     <a href="#" class="logo"><img src="img/swasthya-logo.png" alt="Swasthya Point"></a>
-    <nav class="navbar">
-        <a href="index.html">Home</a>
-        <a href="blog.html">Blogs</a>
-        <a href="nearby.html">Nearby</a>
-        <a href="appointment.html">Book Your Appointment</a>
+    <nav class="navbar bg-dark">
+        <a  href="index.html">Home</a>
+        <a  href="blog.html">Blogs</a>
+        <a  href="nearby.html">Nearby</a>
+        <a  href="appointment.html">Book Your Appointment</a>
         <div class="dark-btn-navbar">
             <label id="dark-change"></label>
         </div>

diff --git a/index.html b/index.html
@@ -145,22 +145,31 @@
         }
 
         /* Add custom styles for buttons */
+
         .btn {
-            background-color: #007bff;
+            background-color: black;
             /* Primary color */
-            border: none;
+            border-radius:20px;
+
             /* Remove border */
             color: #fff;
             /* White text */
-            transition: background-color 0.3s;
+            /*transition: background-color 0.3s;
             /* Smooth background transition */
         }
+
 
         .btn:hover {
-            background-color: #3e91e9;
+            background-color: white;
+            color: black;
+
             /* Darker shade on hover */
         }
 
+        .nav-link:hover{
+            color: green !important;
+        }
+
         /* Responsive design */
         @media (max-width: 768px) {
             .container {
@@ -173,19 +182,19 @@
 
 <body>
     <!-- header section starts -->
-    <nav class="navbar">
+    <nav class="navbar bg-dark">
         <div class="logo"><img src="./img/swasthya-logo.png" alt=""></div>
         <div class="menu-toggle" id="mobile-menu">
             <span class="bar"></span>
             <span class="bar"></span>
             <span class="bar"></span>
         </div>
         <ul class="nav-list">
-            <li><a href="#home">Home</a></li>
-            <li><a href="#about">About Us</a></li>
-            <li><a href="#services">Services</a></li>
-            <li><a href="#blog">Blog</a></li>
-            <li><a href="#contact">Contact</a></li>
+            <li><a class="nav-link text-white" href="#home">Home</a></li>
+            <li><a class="nav-link text-white" href="#about">About Us</a></li>
+            <li><a class="nav-link text-white" href="#services">Services</a></li>
+            <li><a class="nav-link text-white" href="#blog">Blog</a></li>
+            <li><a class="nav-link text-white" href="#contact">Contact</a></li>
             <div class="menu"><i class="fa-solid fa-bars"></i></div>
         </ul>
     </nav>
@@ -211,7 +220,7 @@ <h3>Your Health, Our Priority</h3>
             <span>Personalized Care for Every Patient</span>
             <p>We believe in a patient-centered approach, offering a wide range of medical services tailored to meet
                 your unique health needs.</p>
-            <a href="#" class="btn">EXPLORE</a>
+            <a href="#" class="btn btn-outline-dark d-grid px-5 py-3 ">EXPLORE</a>
         </div>
 
         <div style="height: 100vh; filter: brightness(0.7);">

diff --git a/style.css b/style.css
@@ -109,10 +109,10 @@ body {
 
 }
 
-.nav-list a:hover {
+/*.nav-list a:hover {
     background-color: white;
     border-radius: 5px;
-}
+}*/
 
 .menu-toggle {
     display: none;
@@ -153,7 +153,7 @@ body {
     }
     .bar{
         margin-left: 500px;
-        margin-bottom: ;
+        /*margin-bottom: ;*/
     }
 
 
@@ -364,7 +364,7 @@ header .navbar a{
     font-size: 5rem;
     color: #ffffff;
     font-weight: bold;
-    text-shadow: 0 0 4px #ffffff;
+    /*text-shadow: 0 0 4px #ffffff;*/
 }
 
 .home .content span{
@@ -379,7 +379,7 @@ header .navbar a{
     color: #ffffff;
     padding: 1rem 0;
     line-height: 1.5;
-    text-decoration: underline;
+    /*text-decoration: underline;*/
     text-decoration-style: solid;
 }
 
@@ -469,12 +469,12 @@ ul{
     gap: 20px;
     margin-left: 20px;
 }
-ul li .nav-link:hover{
+/*ul li .nav-link:hover{
     background: var(--blue);
     color: white;
     border-radius: 30px;
     transition: all 0.5s;
-}
+}*/
 .card-body{
     position: relative;
     max-width: 7;
@@ -550,6 +550,7 @@ ul li .nav-link:hover{
     height: 50px !important;
 }
 
+
 .carousel-inner h6 {
     text-transform: uppercase;
     letter-spacing: .1rem;
@@ -850,8 +851,7 @@ form{
     transform: translateX(200px); /* Adjust the value based on how much you want to slide the image */
 
 }
-}
-} 
+
 * {
     padding: 0;
     margin: 0;