Skip to content

Commit af56937

Browse files
added code to file
previously I had forgot to add code. This time I have uploaded the full code
1 parent 1fdc094 commit af56937

File tree

1 file changed

+52
-0
lines changed

1 file changed

+52
-0
lines changed

Responsive navbar/index.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Responsive Navbar</title>
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
8+
<style>
9+
.nav-item {
10+
position: relative;
11+
transition: transform 0.3s ease, box-shadow 0.3s ease;
12+
}
13+
.nav-item::after {
14+
content: '';
15+
position: absolute;
16+
width: 100%;
17+
height: 2px;
18+
background: linear-gradient(90deg, red, green, blue);
19+
bottom: -4px;
20+
left: 0;
21+
transform: scaleX(0);
22+
transition: transform 0.3s ease;
23+
}
24+
.nav-item:hover::after {
25+
transform: scaleX(1);
26+
}
27+
.nav-item:hover {
28+
transform: scale(1.1);
29+
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 0, 255, 0.5);
30+
}
31+
.navbar {
32+
transition: box-shadow 0.3s ease;
33+
}
34+
.navbar:hover {
35+
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 0, 255, 0.5);
36+
}
37+
</style>
38+
</head>
39+
<body class="bg-gray-900 text-white">
40+
<nav class="navbar bg-gray-800 p-4">
41+
<div class="container mx-auto flex justify-between items-center">
42+
<a href="#" class="text-2xl font-bold">Brand</a>
43+
<ul class="flex space-x-4">
44+
<li><a href="#" class="nav-item px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20">Home</a></li>
45+
<li><a href="#" class="nav-item px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20">About</a></li>
46+
<li><a href="#" class="nav-item px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20">Services</a></li>
47+
<li><a href="#" class="nav-item px-3 py-2 rounded-md hover:bg-gradient-to-r from-white/10 to-white/20">Contact</a></li>
48+
</ul>
49+
</div>
50+
</nav>
51+
</body>
52+
</html>

0 commit comments

Comments
 (0)