forked from holger1411/Stride-HTML-Bootstrap-Template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.html
285 lines (257 loc) · 14.9 KB
/
content.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!doctype html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="A growing collection of ready to use components for the CSS framework Bootstrap 5">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon.png">
<meta name="author" content="Holger Koenemann">
<meta name="generator" content="Eleventy v2.0.0">
<meta name="HandheldFriendly" content="true">
<title>Plain Content Sample Page</title>
<link rel="stylesheet" href="css/theme.min.css">
<style>
/* inter-300 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navScroll">
<nav id="navScroll" class="navbar navbar-expand-lg navbar-light" tabindex="0">
<div class="container">
<a class="navbar-brand pe-4 fs-4" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-layers-half" viewbox="0 0 16 16">
<path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
</svg>
<span class="ms-1 fw-bolder">Stride</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#services" aria-label="Brings you to the frontpage">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">
About us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#numbers">
Numbers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workwithus">
Work with us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">
Testimonials
</a>
</li>
</ul>
<a href="https://templatedeck.com" data-splitbee-event="Click Download" aria-label="Download this template" class="link-dark pb-1 link-fancy me-2">
Download this Template <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download ms-1" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</a>
</div>
</div>
</nav>
<main>
<div class="py-vh-5 w-100 overflow-hidden" id="services">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-12 col-lg-10 col-xl-8">
<h1 class="display-1 fw-bold border-bottom border-dark pb-4">A Simple Sample Content Page</h1>
<p class="lead py-vh-2">De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi
dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro.
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>
</div>
<div class="col-12">
<figure class="py-vh-2 pt-0">
<blockquote class="blockquote blockquote-xl">
<p>"Zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams."</p>
</blockquote>
<figcaption class="blockquote-footer">
Chuck Norris in
<cite title="Source Title">Delta Force</cite>
</figcaption>
</figure>
</div>
<div class="col-12 col-lg-10 col-xl-8">
<p>De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus
comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains
an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses
ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in
magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.
</p>
</div>
<div class="col-12 col-lg-10 col-xl-8">
<p>
<img src="img/webp/people15.webp" class="img-fluid float-start p-3 pt-0 ps-0" alt="article image" data-aos="fade">Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens.
Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam
unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.De carne lumbering
animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella
viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies.
Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead. Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams.
Pestilentia est plague haec decaying ambulabat mortuos. Sicut zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint
terribiles undeath legionis. Alii missing oculis aliorum sicut serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.
</p>
</div>
<div class="col-12 py-vh-3 my-5 bg-gray-900 text-light px-5">
<div class="row d-flex align-items-center px-5">
<div class="col-12 col-lg-5 text-end d-flex justify-content-end">
<h2 class="border-bottom border-light pb-4 text-end me-5">De apocalypsi gorger omero undead survivor dictum mauris:</h2>
</div>
<div class="col-12 col-lg-7">
<p class="border-bottom border-dark pb-5 mb-5 text-light" style="--bs-text-opacity: .5;">De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless
mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem
virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>
<p class="border-bottom border-dark pb-5 mb-5 text-light" style="--bs-text-opacity: .5;">De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless
mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem
virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>
<p class="text-light" style="--bs-text-opacity: .5;">
Cum horribilem walking dead resurgere de crazed sepulcris creaturis, zombie sicut de grave feeding iride et serpens. Pestilentia, shaun ofthe dead scythe animated corpses ipsa screams. Pestilentia est plague haec decaying ambulabat mortuos. Sicut
zeder apathetic malus voodoo. Aenean a dolor plan et terror soulless vulnerum contagium accedunt, mortui iam vivam unlife. Qui tardius moveri, brid eof reanimator sed in magna copia sint terribiles undeath legionis. Alii missing oculis aliorum sicut
serpere crabs nostram. Putridi braindead odores kill and infect, aere implent left four dead.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container small border-top">
<div class="row py-5 d-flex justify-content-between">
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-layers-half" viewbox="0 0 16 16">
<path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
</svg>
<address class="text-secondary mt-3">
<strong>Stride, Inc.</strong><br>
1355 Market St, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<h3 class="h6 mb-3">Company</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="#">Lorem ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Dolor sitam est</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Sed odio cras</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Commodo tortor ac</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-end p-5">
<h3 class="h6 mb-3">Products</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="#">Fusce dapibus est</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Donec sed dui</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Tortor mauris</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Ut fermentum massa</a>
</li>
<li class="nav-item">
<a class="nav-link link-secondary ps-0" href="#">Magna mollis</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-6 col-xl-3 p-5">
<h3 class="h6 mb-3">Subpages</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link link-secondary ps-0" aria-current="page" href="404.html">404 System Page</a>
<a class="nav-link link-secondary ps-0" aria-current="page" href="register.html">Register System Page</a>
<a class="nav-link link-secondary ps-0" aria-current="page" href="content.html">Simple Text Content Page</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container text-center py-3 small">Made by <a href="https://templatedeck.com" class="link-fancy" target="_blank">templatedeck.com</a>
</div>
</footer>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
duration: 800, // values from 0 to 3000, with step 50ms
});
</script>
<script>
let scrollpos = window.scrollY
const header = document.querySelector(".navbar")
const header_height = header.offsetHeight
const add_class_on_scroll = () => header.classList.add("scrolled", "shadow-sm")
const remove_class_on_scroll = () => header.classList.remove("scrolled", "shadow-sm")
window.addEventListener('scroll', function() {
scrollpos = window.scrollY;
if (scrollpos >= header_height) { add_class_on_scroll() }
else { remove_class_on_scroll() }
console.log(scrollpos)
})
</script>
</body>
</html>