-
Notifications
You must be signed in to change notification settings - Fork 55
/
index.html
120 lines (116 loc) · 3.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 - Transparent Navbar</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
.banner-image {
background-image: url('img/banner-img.jpg');
background-size: cover;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container">
<a class="navbar-brand" href="#">Web Zone</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Banner Image -->
<div
class="banner-image w-100 vh-100 d-flex justify-content-center align-items-center"
>
<div class="content text-center">
<h1 class="text-white">WEB ZONE</h1>
</div>
</div>
<!-- Main Content Area -->
<div class="container my-5 d-grid gap-5">
<div class="p-5 border">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores
natus iusto fugit id saepe neque rerum magni laudantium accusantium
dolorem numquam quasi.
</p>
</div>
<div class="p-5 border">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores
natus iusto fugit id saepe neque rerum magni laudantium accusantium
dolorem numquam quasi.
</p>
</div>
<div class="p-5 border">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores
natus iusto fugit id saepe neque rerum magni laudantium accusantium
dolorem numquam quasi.
</p>
</div>
<div class="p-5 border">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores
natus iusto fugit id saepe neque rerum magni laudantium accusantium
dolorem numquam quasi.
</p>
</div>
<div class="p-5 border">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus veniam ipsa earum quibusdam, atque ipsum error maiores
natus iusto fugit id saepe neque rerum magni laudantium accusantium
dolorem numquam quasi. df
</p>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
var nav = document.querySelector('nav');
window.addEventListener('scroll', function () {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
</body>
</html>