Skip to content

Commit bd4729f

Browse files
tushargupta1504tushargupta1504
authored
Merge pull request #684 from SanikaThorat60/main
Update index.html
2 parents 8100e28 + 5290f15 commit bd4729f

File tree

1 file changed

+100
-30
lines changed

1 file changed

+100
-30
lines changed

‎index.html

+100-30
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,9 @@
4343
#root {
4444
flex: 1;
4545
}
46-
46+
.h1 {
47+
font-size: 40px;
48+
}
4749
.follow-us {
4850
-ms-flex-align: center;
4951
display: flex;
@@ -170,47 +172,115 @@
170172
/* Darker shade on hover */
171173
}
172174

173-
.nav-link:hover{
174-
color: green !important;
175-
}
176-
175+
177176
/* Responsive design */
178177
@media (max-width: 768px) {
179178
.container {
180179
padding: 20px;
181180
/* Adjust padding on smaller screens */
182181
}
183182
}
183+
.navbar {
184+
position: relative;
185+
display: flex;
186+
justify-content: space-between;
187+
align-items: center;
188+
padding: 1rem;
189+
}
190+
.nav-list {
191+
list-style: none;
192+
display: flex;
193+
gap: 20px;
194+
}
195+
.nav-link {
196+
text-decoration: none;
197+
color: white;
198+
padding: 10px;
199+
}
200+
.nav-link:hover,
201+
.nav-link.active {
202+
background-color: rgba(255, 255, 255, 0.1);
203+
border-radius: 5px;
204+
}
205+
.dropdown {
206+
display: none;
207+
position: absolute;
208+
background-color: rgba(0, 0, 0, 0.8);
209+
list-style: none;
210+
padding: 10px;
211+
}
212+
li:hover .dropdown {
213+
display: block;
214+
}
215+
.menu-toggle {
216+
display: none;
217+
cursor: pointer;
218+
}
219+
220+
/* Mobile styles */
221+
@media (max-width: 768px) {
222+
.nav-list {
223+
display: none;
224+
flex-direction: column;
225+
width: 100%;
226+
position: absolute;
227+
top: 60px;
228+
left: 0;
229+
background-color: rgba(0, 0, 0, 0.9);
230+
}
231+
.nav-list.active {
232+
display: flex;
233+
}
234+
.menu-toggle {
235+
display: flex;
236+
}
237+
}
184238
</style>
185239
</head>
186240

187241
<body>
188242
<!-- header section starts -->
189243
<nav class="navbar bg-dark">
190-
<div class="logo"><img src="./img/swasthya-logo.png" alt=""></div>
191-
<div class="menu-toggle" id="mobile-menu">
192-
<span class="bar"></span>
193-
<span class="bar"></span>
194-
<span class="bar"></span>
195-
</div>
196-
<ul class="nav-list">
197-
<li><a class="nav-link text-white" href="#home">Home</a></li>
198-
<li><a class="nav-link text-white" href="#about">About Us</a></li>
199-
<li><a class="nav-link text-white" href="#services">Services</a></li>
200-
<li><a class="nav-link text-white" href="#blog">Blog</a></li>
201-
<li><a class="nav-link text-white" href="#contact">Contact</a></li>
202-
<div class="menu"><i class="fa-solid fa-bars"></i></div>
203-
</ul>
204-
</nav>
205-
<script>
206-
const mobileMenu = document.getElementById('mobile-menu');
207-
const navList = document.querySelector('.nav-list');
208-
209-
mobileMenu.addEventListener('click', () => {
210-
navList.classList.toggle('active');
211-
});
212-
</script>
213-
244+
<div class="logo">
245+
<img src="./img/swasthya-logo.png" alt="Swasthya Logo">
246+
</div>
247+
<div class="menu-toggle" id="mobile-menu" aria-label="Toggle navigation" tabindex="0">
248+
<span class="bar"></span>
249+
<span class="bar"></span>
250+
<span class="bar"></span>
251+
</div>
252+
<ul class="nav-list">
253+
<li><a class="nav-link text-white" href="#home">Home</a></li>
254+
<li><a class="nav-link text-white" href="#about">About Us</a></li>
255+
<li>
256+
<a class="nav-link text-white" href="#services">Services</a>
257+
<ul class="dropdown">
258+
<li><a class="dropdown-link text-white" href="#service1">Service 1</a></li>
259+
<li><a class="dropdown-link text-white" href="#service2">Service 2</a></li>
260+
<li><a class="dropdown-link text-white" href="#service3">Service 3</a></li>
261+
</ul>
262+
</li>
263+
<li><a class="nav-link text-white" href="#blog">Blog</a></li>
264+
<li><a class="nav-link text-white" href="#contact">Contact</a></li>
265+
<div class="menu"><i class="fa-solid fa-bars"></i></div>
266+
</ul>
267+
</nav>
268+
269+
<script>
270+
const mobileMenu = document.getElementById('mobile-menu');
271+
const navList = document.querySelector('.nav-list');
272+
273+
mobileMenu.addEventListener('click', () => {
274+
navList.classList.toggle('active');
275+
});
276+
277+
// Optional: Close menu when clicking outside
278+
document.addEventListener('click', (event) => {
279+
if (!navList.contains(event.target) && !mobileMenu.contains(event.target)) {
280+
navList.classList.remove('active');
281+
}
282+
});
283+
</script>
214284

215285
<!-- header section ends -->
216286

@@ -1147,4 +1217,4 @@ <h3 class="ml-40">Follow Us</h3>
11471217

11481218
</body>
11491219

1150-
</html>
1220+
</html>

0 commit comments

Comments
 (0)