forked from juthikashetye/Code-Range-Demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigation.html
178 lines (153 loc) · 4.01 KB
/
navigation.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Favorite Things</title>
</head>
<body>
<header>
<h1>My Favorite Things</h1>
<!-- Primary Navigation -->
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="animals.html">Animals</a>
</li>
<li>
<a href="movies.html">Movies</a>
</li>
</ul>
</nav>
<!-- Secondary Navigation -->
<nav>
<ul>
<li>
<a href="#cakeRecipe">Chocolate Cake Recipe</a>
</li>
<li>
<a href="#ramenRecipe">Ramen Recipe</a>
</li>
</ul>
</nav>
</header>
<main>
<h2>Favorite Food</h2>
<article>
<h3>Chocolate Cake</h3>
<section id="cakeRecipe">
<h4>Recipe</h4>
<p>Lorem <a href="https://www.youtube.com">ipsum dolor</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br><br>Ut enim ad minim veniam, quis <a href="https://www.wikipedia.org">Visit Wikipedia</a> nostrud exercitation ullamco.</p>
<!-- bold & italics -->
<p>
My <em>favorite</em> food is <b>chocolate cake.</b>
<br>
<strong>Warning: Cake contains nuts.</strong>
<br>
<i>All the problems in the world are solved by chocolate -Anonymous.</i>
</p>
</section>
<section>
<h4>History</h4>
<p>Lorem ipsum dolor sit <a href="https://www.worldwildlife.org">WWF Website</a> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<pre>
I had a cat,
Who was so fat.
He could not even,
Sit on his mat.
He had a hat,
That did not fit.
He put it on,
And then it split
</pre>
<p>
I had a cat,
Who was so fat.
He could not even,
Sit on his mat.
He had a hat,
That did not fit.
He put it on,
And then it split
</p>
<!-- wbr -->
<p>Thisisa<wbr>veryvery<wbr>veryvery<wbr>veryveryvery<wbr>veryveryvery<wbr>veryvery<wbr>veryveryvery<wbr>veryvery<wbr>veryver<wbr>yveryvery<wbr>veryveryvery<wbr>veryvery<wbr>longword</p>
<aside>
<h5>Trivia</h5>
<p>Chocolate is made from <mark>cocoa</mark> beans</p>
</aside>
<!-- del & ins -->
<p>I like <del>vanilla</del> <ins>chocolate</ins> cake</p>
<!-- sup & sub -->
<p>2<sup>2</sup> = 4</p>
<p>Chemical formula of water is H<sub>2</sub>O</p>
</section>
</article>
<hr>
<article>
<h3>Ramen</h3>
<section id="ramenRecipe">
<h4>Recipe</h4>
<h5>Ingredients</h5>
<!-- unordered lists -->
<ul>
<li>Broth
<ul>
<li>Broth
<ul>
<li>Broth</li>
<li>Noodles</li>
<li>Vegetables</li>
<li>Seasoning</li>
</ul>
</li>
<li>Noodles</li>
<li>Vegetables</li>
<li>Seasoning</li>
</ul>
</li>
<li>Noodles</li>
<li>Vegetables</li>
<li>Seasoning</li>
</ul>
<h5>Instructions</h5>
<!-- ordered lists -->
<ol start="10" reversed>
<li>Boil vegetables in broth.</li>
<li>Add noodles & cook for 5 min.</li>
<li>Season with spice mix.</li>
</ol>
<ol reversed>
<li>Boil vegetables in broth.</li>
<li>Add noodles & cook for 5 min.</li>
<li>Season with spice mix.</li>
</ol>
</section>
<section>
<h4>History</h4>
<!-- description list -->
<dl>
<dt>Ramen</dt>
<dd>- Japanese noodle soup</dd>
</dl>
</section>
</article>
</main>
<footer>
<!-- mailto: -->
<a href="mailto:[email protected]">Email Code Range</a>
<br>
<!-- tel: -->
<a href="tel:123 456 7890">Call Us</a>
<br>
<a href="terms.html">Terms of use</a>
<br>
<a href="policy.html">Privacy policy</a>
<!-- small -->
<p><small>Copyright 2020 Code Range, Juthika Shetye</small></p>
</footer>
</body>
</html>