Skip to content

Commit 70d2ff2

Browse files
everett2323everett2323
committed
added navbar
1 parent 727bc8a commit 70d2ff2

File tree

3 files changed

+174
-1
lines changed

3 files changed

+174
-1
lines changed

‎Location.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html lang="ug">
2+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
3+
<head>
4+
<title>Home Haunt</title>
5+
<link rel="icon" type="image/x-icon" href="favicon.ico">
6+
</head>
7+
<h1 style="font-size: 100px; text-align: center;">HOME HAUNT</h1>
8+
<body class="container py-4 ">
9+
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top shadow-sm">
10+
<div class="container-fluid">
11+
<a class="navbar-brand" href="index.html">Home Haunt</a>
12+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
13+
<span class="navbar-toggler-icon"></span>
14+
</button>
15+
<div class="collapse navbar-collapse" id="navbarNav">
16+
<ul class="navbar-nav me-auto">
17+
<li class="nav-item">
18+
<a class="nav-link" href="index.html">Home</a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link" href="Location.html">Location</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="about.html">About</a>
25+
</li>
26+
</ul>
27+
<div class="form-check form-switch">
28+
29+
<input class="form-check-input" type="checkbox" id="darkModeToggle">
30+
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
31+
</div>
32+
</div>
33+
</div>
34+
</nav>
35+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-qL8I+dP/6FybDW7HbJRL5thH+vwNHkEvsayzY9Tl2IbbVYUew+OrCXaRkfj4ZGnF" crossorigin="anonymous"></script>
36+
<script>
37+
38+
const toggle = document.getElementById("darkModeToggle");
39+
const html = document.documentElement;
40+
if (localStorage.getItem("theme") === "dark") {
41+
html.setAttribute("data-bs-theme", "dark");
42+
toggle.checked = true;
43+
}
44+
toggle.addEventListener("change", () => {
45+
46+
if (toggle.checked) {
47+
html.setAttribute("data-bs-theme", "dark");
48+
localStorage.setItem("theme", "dark");
49+
}else{
50+
html.setAttribute("data-bs-theme", "light");
51+
localStorage.setItem("theme", "light");
52+
}
53+
54+
});
55+
56+
</script>
57+
58+
</html>

‎about.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html lang="ug">
2+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
3+
<head>
4+
<title>Home Haunt</title>
5+
<link rel="icon" type="image/x-icon" href="favicon.ico">
6+
</head>
7+
<h1 style="font-size: 100px; text-align: center;">HOME HAUNT</h1>
8+
<body class="container py-4 ">
9+
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top shadow-sm">
10+
<div class="container-fluid">
11+
<a class="navbar-brand" href="index.html">Home Haunt</a>
12+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
13+
<span class="navbar-toggler-icon"></span>
14+
</button>
15+
<div class="collapse navbar-collapse" id="navbarNav">
16+
<ul class="navbar-nav me-auto">
17+
<li class="nav-item">
18+
<a class="nav-link" href="index.html">Home</a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link" href="Location.html">Location</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="about.html">About</a>
25+
</li>
26+
</ul>
27+
<div class="form-check form-switch">
28+
29+
<input class="form-check-input" type="checkbox" id="darkModeToggle">
30+
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
31+
</div>
32+
</div>
33+
</div>
34+
</nav>
35+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-qL8I+dP/6FybDW7HbJRL5thH+vwNHkEvsayzY9Tl2IbbVYUew+OrCXaRkfj4ZGnF" crossorigin="anonymous"></script>
36+
<script>
37+
38+
const toggle = document.getElementById("darkModeToggle");
39+
const html = document.documentElement;
40+
if (localStorage.getItem("theme") === "dark") {
41+
html.setAttribute("data-bs-theme", "dark");
42+
toggle.checked = true;
43+
}
44+
toggle.addEventListener("change", () => {
45+
46+
if (toggle.checked) {
47+
html.setAttribute("data-bs-theme", "dark");
48+
localStorage.setItem("theme", "dark");
49+
}else{
50+
html.setAttribute("data-bs-theme", "light");
51+
localStorage.setItem("theme", "light");
52+
}
53+
54+
});
55+
56+
</script>
57+
58+
</html>

‎index.html‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,65 @@
1-
<html>
1+
<html lang="ug">
2+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
23
<head>
34
<title>Home Haunt</title>
45
<link rel="icon" type="image/x-icon" href="favicon.ico">
56
</head>
67
<h1 style="font-size: 100px; text-align: center;">HOME HAUNT</h1>
8+
<body class="container py-4 ">
9+
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top shadow-sm">
10+
<div class="container-fluid">
11+
<a class="navbar-brand" href="index.html">Home Haunt</a>
12+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
13+
<span class="navbar-toggler-icon"></span>
14+
</button>
15+
<div class="collapse navbar-collapse" id="navbarNav">
16+
<ul class="navbar-nav me-auto">
17+
<li class="nav-item">
18+
<a class="nav-link" href="index.html">Home</a>
19+
</li>
20+
<li class="nav-item">
21+
<a class="nav-link" href="Location.html">Location</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="about.html">About</a>
25+
</li>
26+
</ul>
27+
<div class="form-check form-switch">
728

29+
<input class="form-check-input" type="checkbox" id="darkModeToggle">
30+
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
31+
</div>
32+
</div>
33+
</div>
34+
</nav>
35+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-qL8I+dP/6FybDW7HbJRL5thH+vwNHkEvsayzY9Tl2IbbVYUew+OrCXaRkfj4ZGnF" crossorigin="anonymous"></script>
36+
<script>
37+
38+
const toggle = document.getElementById("darkModeToggle");
39+
const html = document.documentElement;
40+
if (localStorage.getItem("theme") === "dark") {
41+
html.setAttribute("data-bs-theme", "dark");
42+
toggle.checked = true;
43+
}
44+
toggle.addEventListener("change", () => {
45+
46+
if (toggle.checked) {
47+
html.setAttribute("data-bs-theme", "dark");
48+
localStorage.setItem("theme", "dark");
49+
}else{
50+
html.setAttribute("data-bs-theme", "light");
51+
localStorage.setItem("theme", "light");
52+
}
53+
54+
});
55+
56+
</script>
57+
<section class="text-center py-5">
58+
<h1 class="display-4 fw-bold">Hey everyone, This is the HH website</h1>
59+
<p class="lead">This is where you learn everything about HH</p>
60+
<p class="fs-5"> FOXGUYGAMES</p>
61+
<div class="mt-4">
62+
<a href="about.html" class="= btn btn-primary btn-lg me-2">About Us!</a>
63+
</div>
64+
</section>
865
</html>

0 commit comments

Comments
 (0)