-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (70 loc) · 2.65 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
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Include external HTML with W3.js (only works on localhost?)</title>
<style>
header, footer {
display: flex;
min-height: 200px;
background-color: pink;
align-items: center;
justify-content: center;
}
section {
display: flex;
background-color: hotpink;
align-items: center;
min-height: 40px;
justify-content: center;
}
</style>
</head>
<body>
<!-- HEADER (INCLUDE) -->
<header w3-include-html="includes/tpl-header.html"></header>
<main>
<!-- CONTENT -->
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias odit officia vero tempora itaque dolorem id dignissimos sapiente, eius, dolor porro aliquam officiis soluta aspernatur quidem ex sed! Recusandae, delectus!
</p>
<p>
Magnam beatae in fuga eos, id commodi ea ut laudantium quam reprehenderit veritatis odit esse enim? Natus nihil nobis at tenetur illum saepe veniam, debitis consequatur? Corporis nulla rem provident!
</p>
</div>
<!-- INCLUDE > TEST -->
<section w3-include-html="includes/bn-test.html"></section>
<!-- CONTENT > TEXT -->
<div>
<p>
Id totam, architecto ullam cum ducimus quibusdam tempora illo, quam necessitatibus culpa impedit labore atque illum! Earum dolor incidunt provident repudiandae facilis pariatur consectetur nisi. Quaerat error omnis aperiam facilis?
</p>
<p>
Ex quidem labore sint dolorum? Repellat, fugit. Est distinctio dolorum modi veniam ullam magnam itaque, nam neque laborum eum omnis, quaerat fugiat commodi sit atque aliquid harum. Saepe, minima asperiores.
</p>
</div>
<!-- INCLUDE > TEST -->
<section w3-include-html="includes/bn-test.html"></section>
<!-- CONTENT -->
<div>
<p>
Id commodi ea ut laudantium quam reprehenderit veritatis odit esse enim? Natus nihil nobis at tenetur illum saepe veniam, debitis consequatur? Corporis nulla rem provident! Est distinctio dolorum modi veniam ullam magnam itaque, nam neque laborum eum omnis, quaerat fugiat commodi sit atque aliquid harum. Saepe, minima asperiores.
</p>
</div>
</main>
<!-- FOOTER (INCLUDE) -->
<footer w3-include-html="includes/tpl-footer.html"></footer>
<script src="w3.js"></script>
<script>
w3.includeHTML();
/* OTHER SNIPPET I NEED TO ENABLE
setTimeout(function () {
var element = document.getElementById("tab1");
element.classList.add("active");
}, 1000)
*/
</script>
</body>
</html>