-
Notifications
You must be signed in to change notification settings - Fork 1
/
article.html
278 lines (259 loc) · 13.8 KB
/
article.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kyoshi Island Gazette</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<header>
<h1><a href="index.html">Kyoshi Island Gazette</a></h1>
<nav>
<a id="nav-skip" href="#content">Skip to content</a>
<ul>
<li class="menu-label">Sections</li>
<li><a href="index.html">Local</a></li>
<li><a href="index.html">Earth Kingdom</a></li>
<li><a href="index.html">Opinion</a></li>
<li class="flyout">
<span class="more">More</span>
<ul>
<li><a href="index.html">Travel</a></li>
<li><a href="index.html">Arts & Culture</a></li>
<li><a href="index.html">Personals</a></li>
<li><a href="index.html">Comics</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="popular-stories">
<h2>Popular Stories</h2>
<ul>
<li>
<a href="article.html">
<img src="media/teapot-square.jpg"
alt="subject's beloved teapot">
<h3>Interview with a Fire War Veteran</h3>
</a>
</li>
<li>
<a href="article.html">
<img src="media/wall.jpg"
alt="shot of the exterior wall of Ba Sing Se">
<h3>Siege on Ba Sing Se Ends!</h3>
</a>
</li>
<li>
<a href="article.html">
<img src="media/glacier.jpg"
alt="southern water trible territory">
<h3>Where is the New Avatar?</h3>
</a>
</li>
<li>
<a href="article.html">
<img src="media/lantern.jpg"
alt="a lantern from last year's festival">
<h3>Kyoshi Day Festival Schedule Released!</h3></a>
</li>
</ul>
</section>
<main id="content">
<article id="feature">
<h2>Interview with a Fire War Veteran</h2>
<h3>Insights from a member of the Southern Water Tribe.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque eget eros et odio malesuada dignissim
dictum sed dui. Etiam volutpat dapibus sem, ut cursus purus
pharetra et. Quisque finibus eros quis finibus
tincidunt. Donec finibus nibh ut neque luctus, vel tempor
libero finibus. Etiam in mattis velit. Integer rutrum turpis
id nisi feugiat, tempor sodales ipsum venenatis. Vestibulum
sit amet tincidunt urna. Nullam in porttitor enim. Aliquam
eget elit sed magna viverra finibus non quis quam. Class
aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Proin auctor velit a nulla feugiat
vestibulum.</p>
<p>Cras sed pharetra tellus, eget commodo massa. Nulla ut quam
ultrices, posuere orci et, condimentum lectus. Duis porttitor
magna purus, vitae suscipit nunc semper sed. Maecenas vitae
scelerisque metus. Pellentesque tempus rhoncus
eros. Pellentesque elit lacus, egestas vel euismod a, tempor
nec neque. Mauris id turpis luctus, interdum arcu in, sodales
metus. Aliquam blandit mi arcu, nec imperdiet nunc varius
eu. Ut ligula elit, consequat in lorem quis, lobortis lacinia
neque. Praesent semper nunc eu est ultrices, in tempor lectus
luctus. Nulla id ex viverra, fringilla orci ut, commodo
mi. Integer blandit quam a erat tempor pretium. Aliquam nec
augue mollis, consectetur odio quis, varius elit. Cras
interdum neque nibh, quis suscipit ipsum lacinia
rhoncus. Nullam ut congue sapien.</p>
<picture>
<source media="(max-width: 1024px)"
srcset="media/teapot-square.jpg">
<img
srcset="media/teapot-320w.jpg,
media/teapot-640w.jpg 2x"
src="media/teapot-640w.jpg"
alt="subject's beloved teapot">
</picture>
<p>Vivamus mollis urna vel ullamcorper posuere. Quisque sit amet
posuere odio. Aliquam erat volutpat. Phasellus nec vestibulum
turpis. Curabitur augue justo, dignissim vel magna eget,
ultricies egestas quam. Suspendisse potenti. Nunc ac sem
justo. Proin non risus sit amet nisi tempor blandit a non
massa. Aenean sodales nibh nec luctus mattis. Ut tristique
dolor nec mattis faucibus. Nam in arcu augue. Nunc vitae
faucibus lorem. Fusce ac augue id magna condimentum
molestie. Ut malesuada mi mauris. Integer suscipit venenatis
nibh et cursus.</p>
<p>Morbi sit amet orci mi. Suspendisse tempor urna arcu, quis
suscipit lacus consectetur nec. Etiam nec gravida massa. Nunc
non nisl quis augue laoreet dignissim. Proin gravida, elit a
bibendum efficitur, nibh felis pretium nisl, id ultrices
tortor tortor quis arcu. Nullam dictum ipsum sed metus
vehicula, sed pellentesque orci tempor. Donec quis erat
interdum, viverra magna pharetra, convallis orci. Suspendisse
mollis imperdiet dui ut tempor. Nam vitae leo vitae sapien
rhoncus lobortis nec eu ex. Nunc suscipit gravida libero ut
efficitur. Donec vehicula eu mauris sed cursus. Curabitur
ultricies tortor velit, a rutrum ipsum eleifend auctor. Nulla
sem massa, accumsan vel porttitor vel, sollicitudin et
lacus. Curabitur quis nibh nec diam pellentesque tempus.</p>
<p>Morbi pharetra lectus ac blandit placerat. Phasellus at ipsum
et sapien ornare commodo. Suspendisse porttitor egestas
tempor. Fusce sit amet blandit risus. In a massa vel neque
mattis venenatis quis a urna. Suspendisse potenti. Aliquam
tempus vulputate posuere. Cras accumsan nisl vel sodales
faucibus. Nunc maximus diam vitae ligula sodales, ac semper
libero lacinia. Proin et dolor sit amet nunc sollicitudin
efficitur ut in neque. Vivamus tristique porttitor
commodo. Morbi ultricies justo eget consectetur pulvinar. Nam
facilisis sapien ac urna fermentum, a euismod ante
pretium. Nullam vestibulum elit erat, eu sollicitudin leo
mollis at.</p>
<p>Integer semper augue ac ex malesuada consequat. Nunc sit amet
dolor ipsum. Nulla facilisi. Nunc lobortis risus a massa
rhoncus, et egestas magna vestibulum. Aenean quis pharetra
eros. Curabitur efficitur leo at odio cursus condimentum vel
id nibh. Proin nulla leo, porttitor ut tellus a, vulputate
tempor orci. Maecenas ultricies arcu id orci gravida, eu
pellentesque nisl interdum. Nam pretium magna a urna gravida
mollis. Cras tempus venenatis nisi. Proin tortor leo,
facilisis quis viverra sed, laoreet at tortor. Sed blandit
dapibus interdum. Vivamus orci augue, scelerisque eget orci
in, ultricies commodo elit. Praesent ut leo posuere, porttitor
sapien sit amet, hendrerit metus.</p>
<blockquote>Everything changed when the Fire Nation
attacked.</blockquote>
<p>Donec in arcu tempor, tristique ligula ac, sollicitudin
lacus. Nullam et porta arcu. Phasellus vel eleifend
odio. Quisque quis posuere quam. Ut elementum ac nunc sit amet
gravida. Vestibulum ultrices hendrerit turpis nec
laoreet. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Suspendisse nec
semper libero. Duis vel sodales dolor. Aenean nec tempus
sapien.</p>
<p>Maecenas elementum enim ac facilisis dignissim. Aenean a elit
vel leo lacinia commodo sed id odio. Mauris bibendum, libero
ut tempus tempus, lorem lacus tristique mauris, sed fringilla
magna ex vitae est. Donec efficitur lorem rhoncus turpis
ultricies convallis. Nullam vitae mauris sed libero tristique
sagittis dignissim a ante. Morbi posuere, tortor a cursus
maximus, ligula mauris tristique nibh, id porttitor lorem
tellus a tortor. Sed euismod lectus ut tortor efficitur
aliquam. Quisque tristique elementum ante iaculis
sodales. Nunc vel massa lectus. Proin vel tristique
dolor. Nunc vulputate at ligula sed euismod. Integer eget
tempus erat. Sed tristique rhoncus mauris, sit amet vestibulum
velit consequat eget. Curabitur ornare, erat eget rutrum
maximus, erat purus tempus eros, vitae vehicula urna odio vel
eros.</p>
<p>Sed viverra mi in tortor blandit fringilla. Donec convallis
quam sem, a posuere dui maximus nec. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nam at arcu tempus, posuere turpis vel, volutpat
lectus. Duis nec magna ac felis fringilla varius ut ac
purus. Fusce blandit placerat libero. Donec sit amet suscipit
urna. Curabitur ut porta urna, vel interdum sapien. Duis vel
est non dui dictum ultrices vitae eget nulla. Nam aliquet sem
ac venenatis eleifend. Fusce et porttitor risus, sed ornare
augue. Ut nunc erat, aliquet quis finibus ut, eleifend at
ligula. Vivamus porttitor velit eget gravida eleifend.</p>
<aside>
<h3>The Fire War</h3>
<p>Maecenas sit amet quam at justo consequat laoreet. Etiam
condimentum erat vitae lacinia accumsan. Ut commodo augue
lacus, vitae varius felis vestibulum ac. Nam ut ultrices
ex. Phasellus in mollis est, a pharetra orci. Integer orci
orci, fringilla vitae metus eu, rutrum rhoncus diam. Donec
hendrerit mollis mauris sed condimentum. Sed nec eleifend
enim, et posuere velit.</p>
</aside>
<p>Etiam aliquet nisl elit, quis faucibus lectus fermentum
id. Vivamus a egestas justo. Nam lacinia sapien aliquam
vestibulum ultricies. In hac habitasse platea
dictumst. Quisque et eleifend nunc. Pellentesque pharetra nisl
id pellentesque congue. Donec quis arcu a nunc fringilla
dapibus. Praesent rhoncus suscipit augue sed tempus. Proin
sapien metus, aliquet vitae lacus eget, vulputate bibendum
diam. Vestibulum posuere ligula at nulla accumsan
varius. Praesent congue est eget accumsan venenatis. Maecenas
egestas gravida ex, non eleifend est sollicitudin vel. Nunc
convallis vestibulum lectus a finibus.</p>
<p>Suspendisse ultricies erat egestas sodales pulvinar. Cras
varius lorem eu ultricies mollis. Sed et metus aliquet,
tincidunt eros a, mattis eros. In luctus nisi quis sagittis
porttitor. Curabitur lobortis euismod dolor, eget laoreet est
pharetra a. Vestibulum aliquam vel sapien eu consequat. Morbi
aliquet nulla sem, aliquet malesuada elit egestas et. Sed
vulputate orci eget quam sollicitudin, eget lacinia sapien
vehicula. Quisque sollicitudin pretium ultricies. Cras congue
tempor odio vitae vehicula. Suspendisse ac pretium
sapien. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Vivamus ut bibendum
leo. Aliquam felis sem, finibus quis efficitur eu, interdum
quis odio. Morbi convallis rhoncus mauris, at consequat ex
pellentesque quis. Maecenas non pretium libero.</p>
<blockquote>
Only the Avatar, master of all four elements could stop
them, but when the world needed him most he vanished.
</blockquote>
<p>Aliquam tincidunt, nisl sed ultricies dictum, nisl augue
pharetra elit, vitae laoreet turpis erat condimentum
nisi. Cras turpis augue, placerat quis est id, laoreet
suscipit velit. In ut leo tempor, accumsan elit vel, cursus
felis. Etiam vitae eros et erat sodales fringilla. Duis
euismod nisi felis, at luctus ex tempus vitae. Aliquam vel
purus tortor. Nullam mattis pulvinar facilisis. Phasellus
hendrerit, sem vitae iaculis fringilla, neque nunc dictum
diam, vel porttitor dui tellus at ex. Sed lobortis mattis
dolor id viverra. Sed gravida lacinia convallis. In hac
habitasse platea dictumst.</p>
<p>Phasellus vestibulum gravida lacus, id luctus lacus varius
in. Suspendisse cursus arcu in finibus ultrices. Nullam vel
posuere mauris, non dapibus neque. Curabitur ultrices ante nec
nulla bibendum porttitor. Fusce id tempus ipsum. In tincidunt
finibus orci, vel posuere leo viverra quis. Mauris libero dui,
pharetra congue nisl eget, condimentum feugiat justo. Mauris
maximus mi sed suscipit commodo.</p>
<p>Suspendisse congue feugiat justo sed rutrum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Cras ultricies dapibus facilisis. Sed bibendum
tincidunt sollicitudin. Ut vitae bibendum diam. Donec ut
lacinia nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aenean vel orci
sit amet dolor efficitur dignissim. Donec sed odio laoreet,
aliquet ipsum ut, interdum augue. Nulla facilisis, elit non
facilisis sodales, dolor quam sagittis est, ut tincidunt est
massa eget massa.</p>
</article>
</main>
<footer>
Published by the Kyoshi Island Gazette. 35th Market Street,
Kyoshi Island, Earth Kingdom. All images are public domain.
</footer>
</body>