-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (133 loc) · 9.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="index.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--<script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>-->
<style>
@media (max-width: 800px) {
.flex {
flex-direction: column;
}
nav {
flex: 2;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="flex">
<nav id="navbar">
<header>
<h1>Table of Contents</h1>
</header>
<a class="nav-link" href="#Topic_1">Topic 1</a>
<a class="nav-link" href="#Topic_2">Topic 2</a>
<a class="nav-link" href="#Topic_3">Topic 3</a>
<a class="nav-link" href="#Topic_4">Topic 4</a>
<a class="nav-link" href="#Topic_5">Topic 5</a>
</nav>
<main id="main-doc">
<header class="main-doc-title">
<h1>Technical Documentation</h1>
</header>
<div class="main-doc-content">
<section id="Topic_1" class="main-section anchor">
<header>
<h3>Topic 1</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet urna sed urna hendrerit,
id lacinia nisi dictum. Phasellus sed consectetur justo. Nunc id luctus ante. Nam ut dolor consequat,
mattis sapien in, eleifend massa. Quisque massa velit, porta vitae fringilla eget, tincidunt
eget turpis. Suspendisse ultrices nisl mauris, vitae semper diam iaculis ut. Vestibulum eleifend
nisi eu condimentum suscipit. Integer vel justo nisi. Maecenas scelerisque sit amet ante suscipit
pharetra.</p>
<code>var other = [ 1, 2, ...params ]</code>
<p>Phasellus quis diam tristique, semper neque efficitur, porttitor enim. Aenean a pulvinar dui. Quisque
accumsan accumsan interdum. Maecenas vestibulum dolor enim, vitae luctus leo euismod vel. Ut
dui enim, efficitur vel tincidunt eget, porta at turpis. Etiam ac est laoreet lectus facilisis
elementum a eu libero. Integer egestas ipsum ac lacus luctus rhoncus. Cras sed velit non lectus
commodo finibus. Aenean mauris tellus, dignissim sit amet tortor sit amet, accumsan malesuada
tortor. Quisque sagittis nunc ipsum, ut congue dolor imperdiet eu. Nunc sit amet tellus massa.
Nunc euismod nisi vitae dolor congue, quis placerat tortor mollis. Aenean pellentesque eleifend
justo ut lacinia. Etiam vel tristique lacus, nec tincidunt purus. Suspendisse potenti. Etiam
eget mauris in diam semper malesuada.</p>
</section>
<section id="Topic_2" class="main-section anchor">
<header>
<h3>Topic 2</h3>
</header>
<p>Curabitur ac ligula interdum, blandit neque et, tempus dui. Fusce sollicitudin rhoncus dui et congue.
Curabitur rutrum mi tempus ligula sodales, sit amet imperdiet lectus tristique. Proin quis orci
turpis.</p>
<code>const PI = 3.141593</code>
<p>Ut pulvinar nunc vitae odio finibus luctus. Duis dui velit, posuere in pulvinar sed, pulvinar non
nibh. Nulla porta purus urna, quis rhoncus nulla lobortis vitae. Maecenas sed elit non velit
aliquam rhoncus. Morbi sed est ac neque porta dignissim. Donec faucibus consectetur quam auctor
vulputate. Ut tellus ligula, suscipit at volutpat vel, dapibus in nulla.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Sed eget est maximus eros lacinia malesuada.</li>
<li>Vivamus rhoncus risus nec felis scelerisque placerat.</li>
<li>Morbi sed enim vitae tortor mollis maximus.</li>
<li>Curabitur blandit ipsum ut tortor tincidunt varius nec faucibus purus.</li>
</ul>
</section>
<section id="Topic_3" class="main-section anchor">
<header>
<h3>Topic 3</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae lectus augue. Nullam a felis
vel erat semper commodo. Fusce suscipit nisi sit amet nunc dignissim, et sagittis dui iaculis.
Proin a dolor blandit, vehicula lorem non, ornare leo. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque tincidunt lectus mi, id consectetur ante fermentum et.</p>
<code>obj = { x, y }</code>
<p>Donec nec euismod augue. Duis lacinia augue eget eros consectetur, at bibendum neque iaculis. Vivamus
metus turpis, facilisis quis sapien id, porttitor commodo ligula. Sed sit amet fermentum nibh.
Suspendisse convallis mi ac mollis efficitur. Nullam leo metus, interdum sit amet velit nec,
aliquet accumsan arcu. Pellentesque vel ullamcorper ex. Curabitur lectus est, laoreet pharetra
felis eu, feugiat porttitor velit.
</p>
<p> In pretium arcu vestibulum felis varius fringilla. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Pellentesque elementum iaculis lorem vitae dignissim. Ut ut ipsum semper, pretium
erat vitae, laoreet metus. Etiam ullamcorper condimentum semper. Nullam eu magna lacus. Integer
id ipsum at ligula porta hendrerit eu quis erat</p>
</section>
<section id="Topic_4" class="main-section anchor">
<header>
<h3>Topic 4</h3>
</header>
<p>Proin ultrices vulputate tellus, sit amet euismod sapien venenatis sed. Duis a augue vulputate, consectetur
neque a, ornare felis. Donec posuere ante dignissim eros accumsan, quis tristique libero placerat.
Vivamus ac interdum risus. Vestibulum ullamcorper risus vel urna laoreet, at pellentesque magna
fermentum. Pellentesque fringilla sem nec lacus imperdiet pellentesque.</p>
<code>var customer = { name: "Foo" }</code>
<p> Donec auctor laoreet sem, ac laoreet lorem pretium eget. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Cras non convallis mi. Vivamus in lacus lectus.
Integer bibendum sit amet eros ut ultrices. Vestibulum consectetur enim quis congue fringilla.
Donec accumsan sapien sit amet lectus bibendum, vel faucibus nulla maximus. Pellentesque pretium
dui eget fermentum feugiat. Sed sagittis ligula magna, quis placerat sapien dignissim eget.</p>
</section>
<section id="Topic_5" class="main-section anchor">
<header>
<h3>Topic 5</h3>
</header>
<p>Vivamus sed placerat risus. Donec commodo quam nibh, sit amet tempor enim placerat ut. Aenean consectetur,
libero a eleifend pulvinar, urna dui efficitur tellus, eget iaculis enim lectus nec eros. Vestibulum
malesuada, nulla eu imperdiet pharetra, risus ligula iaculis nulla, in finibus arcu sem ut arcu.</p>
<code>odds = evens.map(v => v + 1)</code><br>
<code>pairs = evens.map(v => ({ even: v, odd: v + 1 }))</code><br>
<code>nums = evens.map((v, i) => v + i)</code><br>
<p>Nunc in leo quis augue volutpat fringilla tincidunt sit amet enim. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Morbi tempor viverra eros.</p>
</section>
</div>
</main>
</div>
</div>
</body>
</html>