Skip to content

Commit 4f00ec9

Browse files
Yashop181Yashop181
committed
color changing and responsive navbar added
1 parent b591985 commit 4f00ec9

File tree

6 files changed

+399
-0
lines changed

6 files changed

+399
-0
lines changed

‎navbar/About.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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 rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>ABout page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h1>ABout page</h1>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<h1>ABout page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<!-- Your content here -->
37+
<h1>ABout page</h1>
38+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
39+
<!-- Your content here -->
40+
<h1>ABout page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<!-- Your content here -->
43+
<h1>ABout page</h1>
44+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
45+
<!-- Your content here -->
46+
<h1>ABout page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<!-- Your content here -->
49+
<h1>ABout page</h1>
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h1>ABout page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h1>ABout page</h1>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<h1>ABout page</h1>
59+
60+
<!-- Your content here -->
61+
</div>
62+
<script src="script.js"></script>
63+
</body>
64+
</html>

‎navbar/contact.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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 rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>Contact page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<h1>Contact page</h1>
31+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
32+
<h1>Contact page</h1>
33+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
34+
<h1>Contact page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<h1>Contact page</h1>
37+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
38+
<h1>Contact page</h1>
39+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
40+
<h1>Contact page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<h1>Contact page</h1>
43+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
44+
<h1>Contact page</h1>
45+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
46+
<h1>Contact page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<h1>Contact page</h1>
49+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
50+
<h1>Contact page</h1>
51+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
52+
<h1>Contact page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<h1>Contact page</h1>
55+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
56+
<h1>Contact page</h1>
57+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
58+
<h1>Contact page</h1>
59+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
60+
61+
<!-- Your content here -->
62+
</div>
63+
<script src="script.js"></script>
64+
</body>
65+
</html>

‎navbar/index.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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 rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h2>Welcome to my website!</h2>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h2>Welcome to my website!</h2>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
35+
<!-- Your content here -->
36+
<h2>Welcome to my website!</h2>
37+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
38+
<!-- Your content here -->
39+
<h2>Welcome to my website!</h2>
40+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
41+
<!-- Your content here -->
42+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
43+
<!-- Your content here -->
44+
<h2>Welcome to my website!</h2>
45+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
46+
<!-- Your content here -->
47+
<h2>Welcome to my website!</h2>
48+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
49+
<!-- Your content here -->
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h2>Welcome to my website!</h2>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h2>Welcome to my website!</h2>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
59+
<!-- Your content here -->
60+
<h2>Welcome to my website!</h2>
61+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
62+
<!-- Your content here -->
63+
<h2>Welcome to my website!</h2>
64+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
65+
<!-- Your content here -->
66+
67+
<!-- Your content here -->
68+
</div>
69+
<script src="script.js"></script>
70+
</body>
71+
</html>

‎navbar/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
window.onload = function () {
2+
var toggleButton = document.getElementById("navbar-toggle");
3+
var navbarLinks = document.getElementById("navbar-links");
4+
var navbar = document.getElementById("navbar");
5+
6+
toggleButton.onclick = function () {
7+
navbarLinks.classList.toggle("show");
8+
};
9+
10+
// Close navbar when a link is clicked
11+
navbarLinks.querySelectorAll("a").forEach(function(link) {
12+
link.addEventListener("click", function() {
13+
navbarLinks.classList.remove("show");
14+
});
15+
});
16+
17+
window.addEventListener("scroll", function () {
18+
if (window.scrollY > 50) {
19+
navbar.classList.add("scrolled");
20+
} else {
21+
navbar.classList.remove("scrolled");
22+
}
23+
});
24+
};

‎navbar/services.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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 rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="navbar" id="navbar">
11+
<div class="navbar-logo">Logo</div>
12+
<div class="navbar-links" id="navbar-links">
13+
<a href="index.html">Home</a>
14+
<a href="About.html">About</a>
15+
<a href="services.html">Services</a>
16+
<a href="contact.html">Contact</a>
17+
</div>
18+
<div class="navbar-toggle" id="navbar-toggle">
19+
<div class="bar"></div>
20+
<div class="bar"></div>
21+
<div class="bar"></div>
22+
</div>
23+
</div>
24+
<div class="content">
25+
<h2>Welcome to my website!</h2>
26+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
27+
<!-- Your content here -->
28+
<h1>service page</h1>
29+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
30+
<!-- Your content here -->
31+
<h1>service page</h1>
32+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
33+
<!-- Your content here -->
34+
<h1>service page</h1>
35+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
36+
<!-- Your content here -->
37+
<h1>service page</h1>
38+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
39+
<!-- Your content here -->
40+
<h1>service page</h1>
41+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
42+
<!-- Your content here -->
43+
<h1>service page</h1>
44+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
45+
<!-- Your content here -->
46+
<h1>service page</h1>
47+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
48+
<!-- Your content here -->
49+
<h1>service page</h1>
50+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
51+
<!-- Your content here -->
52+
<h1>service page</h1>
53+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
54+
<!-- Your content here -->
55+
<h1>service page</h1>
56+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
57+
<!-- Your content here -->
58+
<h1>service page</h1>
59+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
60+
<!-- Your content here -->
61+
<h1>service page</h1>
62+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
63+
<!-- Your content here -->
64+
<h1>service page</h1>
65+
<p>This is a demo of a responsive navbar with a hamburger menu.</p>
66+
<!-- Your content here -->
67+
<h1>service page</h1>
68+
69+
70+
<!-- Your content here -->
71+
</div>
72+
<script src="script.js"></script>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)