Skip to content

Commit 8ad3e35

Browse files
Jay-TopherJay-Topher
committed
4 done
1 parent 496aa3e commit 8ad3e35

2 files changed

Lines changed: 75 additions & 17 deletions

File tree

‎4-navbar/setup/app.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,10 @@
33
// add - add class
44
// remove - remove class
55
// toggle - toggles class
6+
7+
const navToggle = document.querySelector(".nav-toggle");
8+
const links = document.querySelector('.links');
9+
10+
navToggle.addEventListener('click', function() {
11+
links.classList.toggle('show-links');
12+
})

‎4-navbar/setup/index.html‎

Lines changed: 68 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,72 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Navbar</title>
7-
<!-- font-awesome -->
8-
<link
9-
rel="stylesheet"
10-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11-
/>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Navbar</title>
7+
<!-- font-awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
11+
/>
1212

13-
<!-- styles -->
14-
<link rel="stylesheet" href="styles.css" />
15-
</head>
16-
<body>
17-
<h1>navbar project</h1>
18-
<!-- javascript -->
19-
<script src="app.js"></script>
20-
</body>
13+
<!-- styles -->
14+
<link rel="stylesheet" href="styles.css" />
15+
</head>
16+
<body>
17+
<nav>
18+
<!-- nav header -->
19+
<div class="nav-header">
20+
<img src="./logo.svg" alt="logo" class="logo" />
21+
<button class="nav-toggle">
22+
<i class="fas fa-bars"></i>
23+
</button>
24+
</div>
25+
<!-- links -->
26+
<ul class="links">
27+
<li>
28+
<a href="index.html">home</a>
29+
</li>
30+
<li>
31+
<a href="about.html">about</a>
32+
</li>
33+
<li>
34+
<a href="projects.html">projects</a>
35+
</li>
36+
<li>
37+
<a href="contact.html">contact</a>
38+
</li>
39+
</ul>
40+
<!-- social media -->
41+
<ul class="social-icons">
42+
<li>
43+
<a href="https://www.twitter.com">
44+
<i class="fab fa-facebook"></i>
45+
</a>
46+
</li>
47+
<li>
48+
<a href="https://www.twitter.com">
49+
<i class="fab fa-twitter"></i>
50+
</a>
51+
</li>
52+
<li>
53+
<a href="https://www.twitter.com">
54+
<i class="fab fa-behance"></i>
55+
</a>
56+
</li>
57+
<li>
58+
<a href="https://www.twitter.com">
59+
<i class="fab fa-linkedin"></i>
60+
</a>
61+
</li>
62+
<li>
63+
<a href="https://www.twitter.com">
64+
<i class="fab fa-sketch"></i>
65+
</a>
66+
</li>
67+
</ul>
68+
</nav>
69+
<!-- javascript -->
70+
<script src="app.js"></script>
71+
</body>
2172
</html>

0 commit comments

Comments
 (0)