-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
181 lines (167 loc) · 13.3 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description"
content="Create a sticky navigation bar with this JavaScript Sticky Nav project, ensuring easy access to navigation links." />
<meta name="keywords" content="sticky nav, JavaScript navigation, sticky bar, basic nav project, user interface" />
<meta property="og:title" content="Sticky Nav" />
<meta property="og:description"
content="Create a sticky navigation bar with this JavaScript Sticky Nav project, ensuring easy access to navigation links." />
<meta property="og:image" content="https://coderespite.com/image/js-projects/sticky-nav.png" />
<meta property="og:url" content="https://coderespite.com/projects/js-projects/sticky-nav" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Sticky Nav" />
<meta name="twitter:description"
content="Create a sticky navigation bar with this JavaScript Sticky Nav project, ensuring easy access to navigation links." />
<meta name="twitter:image" content="https://coderespite.com/image/js-projects/sticky-nav.png" />
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky navBar</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<img src="sample.avif" alt="">
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="content">
<div class="image">
<img src="sample.avif" alt="sample">
</div>
<h1>Welcome to our website</h1>
<div class="para">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum veritatis aliquam at obcaecati
ipsam itaque, ullam labore iure laudantium impedit odit culpa cumque qui et, necessitatibus omnis
illo? Possimus, eos!
Hic accusantium distinctio, excepturi, veritatis soluta repellat recusandae assumenda temporibus
quia eum, exercitationem pariatur. Ipsum eius commodi et voluptatem, blanditiis ipsa! Qui illum
eveniet accusantium minima deleniti debitis eum totam!
Earum eos ullam dignissimos. Placeat ratione esse exercitationem earum excepturi. Recusandae numquam
qui excepturi. Dicta nobis aut vero alias quod voluptas, provident sequi ea et magnam blanditiis!
Architecto, natus? Culpa.
Rerum facilis eveniet et nihil soluta illum adipisci dolorum eaque, maxime porro delectus ea odio
explicabo, libero, repellendus tenetur voluptas velit reprehenderit nam ab omnis aliquam amet
aspernatur! Voluptatibus, assumenda.
Beatae omnis eius voluptates hic quasi. Nam, et maiores! Quidem, eligendi repellendus! Iusto, vel
voluptatum sequi voluptatibus neque tempore minima mollitia corrupti rerum suscipit autem sunt
asperiores aliquam amet repellendus.
Exercitationem animi praesentium cum cupiditate voluptates nihil sunt! Ipsum vitae aspernatur
distinctio tempora, nesciunt perferendis ad sint molestias dolor nemo officiis asperiores magnam
molestiae deserunt voluptates, rerum, nisi sed incidunt!
Eligendi quis cum quaerat tenetur non, nihil fuga ullam quia vero ipsa odio sit, enim laboriosam
doloremque at quo! Aliquid, quae animi. Hic tempore, necessitatibus fugit tenetur porro quam
impedit.
Veritatis ab minus dignissimos. Ex saepe ipsum ad minus. Reprehenderit, earum, tenetur repellat
laboriosam incidunt architecto consequatur adipisci ipsam, aut dolores eveniet alias? Dicta a
assumenda recusandae itaque in maiores.
Ipsa, quisquam excepturi aut ab temporibus, suscipit pariatur incidunt similique saepe sequi
quaerat? Reiciendis deserunt voluptatem, voluptatum numquam repudiandae recusandae, consectetur
magni ipsam pariatur eum accusantium. Minima odit sint deserunt.
Impedit illum necessitatibus quam nobis doloribus, illo ex. Deserunt officiis error quis ut ea,
nulla quod eveniet perferendis earum, laborum dolorem sapiente beatae iure, possimus maiores id
totam. Nam, totam.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum veritatis aliquam at obcaecati
ipsam itaque, ullam labore iure laudantium impedit odit culpa cumque qui et, necessitatibus omnis
illo? Possimus, eos!
Hic accusantium distinctio, excepturi, veritatis soluta repellat recusandae assumenda temporibus
quia eum, exercitationem pariatur. Ipsum eius commodi et voluptatem, blanditiis ipsa! Qui illum
eveniet accusantium minima deleniti debitis eum totam!
Earum eos ullam dignissimos. Placeat ratione esse exercitationem earum excepturi. Recusandae numquam
qui excepturi. Dicta nobis aut vero alias quod voluptas, provident sequi ea et magnam blanditiis!
Architecto, natus? Culpa.
Rerum facilis eveniet et nihil soluta illum adipisci dolorum eaque, maxime porro delectus ea odio
explicabo, libero, repellendus tenetur voluptas velit reprehenderit nam ab omnis aliquam amet
aspernatur! Voluptatibus, assumenda.
Beatae omnis eius voluptates hic quasi. Nam, et maiores! Quidem, eligendi repellendus! Iusto, vel
voluptatum sequi voluptatibus neque tempore minima mollitia corrupti rerum suscipit autem sunt
asperiores aliquam amet repellendus.
Exercitationem animi praesentium cum cupiditate voluptates nihil sunt! Ipsum vitae aspernatur
distinctio tempora, nesciunt perferendis ad sint molestias dolor nemo officiis asperiores magnam
molestiae deserunt voluptates, rerum, nisi sed incidunt!
Eligendi quis cum quaerat tenetur non, nihil fuga ullam quia vero ipsa odio sit, enim laboriosam
doloremque at quo! Aliquid, quae animi. Hic tempore, necessitatibus fugit tenetur porro quam
impedit.
Veritatis ab minus dignissimos. Ex saepe ipsum ad minus. Reprehenderit, earum, tenetur repellat
laboriosam incidunt architecto consequatur adipisci ipsam, aut dolores eveniet alias? Dicta a
assumenda recusandae itaque in maiores.
Ipsa, quisquam excepturi aut ab temporibus, suscipit pariatur incidunt similique saepe sequi
quaerat? Reiciendis deserunt voluptatem, voluptatum numquam repudiandae recusandae, consectetur
magni ipsam pariatur eum accusantium. Minima odit sint deserunt.
Impedit illum necessitatibus quam nobis doloribus, illo ex. Deserunt officiis error quis ut ea,
nulla quod eveniet perferendis earum, laborum dolorem sapiente beatae iure, possimus maiores id
totam. Nam, totam.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum veritatis aliquam at obcaecati
ipsam itaque, ullam labore iure laudantium impedit odit culpa cumque qui et, necessitatibus omnis
illo? Possimus, eos!
Hic accusantium distinctio, excepturi, veritatis soluta repellat recusandae assumenda temporibus
quia eum, exercitationem pariatur. Ipsum eius commodi et voluptatem, blanditiis ipsa! Qui illum
eveniet accusantium minima deleniti debitis eum totam!
Earum eos ullam dignissimos. Placeat ratione esse exercitationem earum excepturi. Recusandae numquam
qui excepturi. Dicta nobis aut vero alias quod voluptas, provident sequi ea et magnam blanditiis!
Architecto, natus? Culpa.
Rerum facilis eveniet et nihil soluta illum adipisci dolorum eaque, maxime porro delectus ea odio
explicabo, libero, repellendus tenetur voluptas velit reprehenderit nam ab omnis aliquam amet
aspernatur! Voluptatibus, assumenda.
Beatae omnis eius voluptates hic quasi. Nam, et maiores! Quidem, eligendi repellendus! Iusto, vel
voluptatum sequi voluptatibus neque tempore minima mollitia corrupti rerum suscipit autem sunt
asperiores aliquam amet repellendus.
Exercitationem animi praesentium cum cupiditate voluptates nihil sunt! Ipsum vitae aspernatur
distinctio tempora, nesciunt perferendis ad sint molestias dolor nemo officiis asperiores magnam
molestiae deserunt voluptates, rerum, nisi sed incidunt!
Eligendi quis cum quaerat tenetur non, nihil fuga ullam quia vero ipsa odio sit, enim laboriosam
doloremque at quo! Aliquid, quae animi. Hic tempore, necessitatibus fugit tenetur porro quam
impedit.
Veritatis ab minus dignissimos. Ex saepe ipsum ad minus. Reprehenderit, earum, tenetur repellat
laboriosam incidunt architecto consequatur adipisci ipsam, aut dolores eveniet alias? Dicta a
assumenda recusandae itaque in maiores.
Ipsa, quisquam excepturi aut ab temporibus, suscipit pariatur incidunt similique saepe sequi
quaerat? Reiciendis deserunt voluptatem, voluptatum numquam repudiandae recusandae, consectetur
magni ipsam pariatur eum accusantium. Minima odit sint deserunt.
Impedit illum necessitatibus quam nobis doloribus, illo ex. Deserunt officiis error quis ut ea,
nulla quod eveniet perferendis earum, laborum dolorem sapiente beatae iure, possimus maiores id
totam. Nam, totam.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum veritatis aliquam at obcaecati
ipsam itaque, ullam labore iure laudantium impedit odit culpa cumque qui et, necessitatibus omnis
illo? Possimus, eos!
Hic accusantium distinctio, excepturi, veritatis soluta repellat recusandae assumenda temporibus
quia eum, exercitationem pariatur. Ipsum eius commodi et voluptatem, blanditiis ipsa! Qui illum
eveniet accusantium minima deleniti debitis eum totam!
Earum eos ullam dignissimos. Placeat ratione esse exercitationem earum excepturi. Recusandae numquam
qui excepturi. Dicta nobis aut vero alias quod voluptas, provident sequi ea et magnam blanditiis!
Architecto, natus? Culpa.
Rerum facilis eveniet et nihil soluta illum adipisci dolorum eaque, maxime porro delectus ea odio
explicabo, libero, repellendus tenetur voluptas velit reprehenderit nam ab omnis aliquam amet
aspernatur! Voluptatibus, assumenda.
Beatae omnis eius voluptates hic quasi. Nam, et maiores! Quidem, eligendi repellendus! Iusto, vel
voluptatum sequi voluptatibus neque tempore minima mollitia corrupti rerum suscipit autem sunt
asperiores aliquam amet repellendus.
Exercitationem animi praesentium cum cupiditate voluptates nihil sunt! Ipsum vitae aspernatur
distinctio tempora, nesciunt perferendis ad sint molestias dolor nemo officiis asperiores magnam
molestiae deserunt voluptates, rerum, nisi sed incidunt!
Eligendi quis cum quaerat tenetur non, nihil fuga ullam quia vero ipsa odio sit, enim laboriosam
doloremque at quo! Aliquid, quae animi. Hic tempore, necessitatibus fugit tenetur porro quam
impedit.
Veritatis ab minus dignissimos. Ex saepe ipsum ad minus. Reprehenderit, earum, tenetur repellat
laboriosam incidunt architecto consequatur adipisci ipsam, aut dolores eveniet alias? Dicta a
assumenda recusandae itaque in maiores.
Ipsa, quisquam excepturi aut ab temporibus, suscipit pariatur incidunt similique saepe sequi
quaerat? Reiciendis deserunt voluptatem, voluptatum numquam repudiandae recusandae, consectetur
magni ipsam pariatur eum accusantium. Minima odit sint deserunt.
Impedit illum necessitatibus quam nobis doloribus, illo ex. Deserunt officiis error quis ut ea,
nulla quod eveniet perferendis earum, laborum dolorem sapiente beatae iure, possimus maiores id
totam. Nam, totam.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>