generated from shanep/web-dev-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (167 loc) · 7.33 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accessibility assessment</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<h1>Welcome to our wildlife website</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
</ul>
<form class="search">
<input type="search" name="q" placeholder="Search query" aria-label="Search">
<input type="submit" value="Go!">
</form>
</nav>
<main>
<article>
<h2>The trouble with Bears</h2>
<p>By Evan Wild</p>
<p>Tall, lumbering, angry, dangerous. The real live bears of this world are proud, independent creatures,
self-serving and always on the hunt for food. Nothing like the bears you see on TV, like Baloo from renowned
documentary, <em>The Jungle Book.</em></p>
<p>So what are bears really like, and why does the world's media portray them with such a skewed vision? In this
article we try to answer those questions, and give you a real insight into the life of the bear.</p>
<h3>Types of bear</h3>
<p>Bears come in two varieties — large and medium. You don't get small bears. If you have seen a small bear, then
it
was in fact probably a baby bear (cub) from another species.</p>
<p>Bears can also be classified in terms of their habitat — both large and medium bears are just as at home in
urban
areas as they are in the countryside. Different habitats encourage different behavior however, as you'll find
out below. The below table also gives you some useful facts about bears.</p>
<table
summary="This table displays information about different types of bears, their coat colors, sizes, habitats, lifespan, and diet.">
<thead>
<tr>
<th>Bear Type</th>
<th>Coat</th>
<th>Adult size</th>
<th>Habitat</th>
<th>Lifespan</th>
<th>Diet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wild</td>
<td>Brown or black</td>
<td>1.4 to 2.8 meters</td>
<td>Woods and forests</td>
<td>25 to 28 years</td>
<td>Fish, meat, plants</td>
</tr>
<tr>
<td>Urban</td>
<td>North Face</td>
<td>18 to 22</td>
<td>Condos and coffee shops</td>
<td>20 to 32 years</td>
<td>Starbucks, sushi</td>
</tr>
</tbody>
</table>
<h3>Habitats and Eating habits</h3>
<p>Wild bears eat a variety of meat, fish, fruit, nuts, and other naturally growing ingredients. In general they
will
hunt for food themselves in woodland or rivers, but at a push they will track down their sustenance from farms
or
country houses. They tend to live in relative isolation, in caves, tents, or cottages.</p>
<img src="media/wild-bear.jpg" alt="A wild bear is seen standing tall in a river">
<p>Urban (gentrified) bears on the other hand have largely abandoned the old ways. They will hunt other urban
creatures if necessary (including other predators like rats and foxes), but prefer to scavenge from readily
available urban food outlets like dumpsters, bins, and fast food joints. When food has proven scarce, urban
bears
have even been known to break into people's kitchens and steal essentials like baked beans, ready meals, and
microwave ovens.</p>
<img src="media/urban-bear.jpg" alt="A bear is seen in an urban setting standing within a cage.">
<p>Urban bears will sleep anywhere they can, from bus shelters and parks, to the toilets in McDonalds, to their
own
apartment.</p>
<h3>Mating rituals</h3>
<p>Bears are romantic creatures by nature, and will naturally look for a mate that they can spend the rest of
their
lives with. They will woo a potential suitor by making their dwelling look attractive — for example with cave
paintings or a bed of reeds in the case of a wild bear, and mood lighting and a Michael Bublé CD in the case of
an
urban bear.</p>
<p>The following audio clip contains a fact file providing more details about bear mating rituals, along with
samples
and quotes from experts.</p>
<audio controls>
<source src="media/bear.mp3" type="audio/mp3">
<source src="media/bear.ogg" type="audio/ogg">
<p>It looks like your browser doesn't support HTML5 audio players. You can download it instead.</p>
<ul>
<li><a href="media/bear.mp3" download>Download MP3</a></li>
<li><a href="media/bear.ogg" download>Download OGG</a></li>
</ul>
</audio>
<div class="audio-transcript">
<h3>Audio Transcript:</h3>
<p><em>This isn't really an audio fact file about bears, but it is an audio file that you can transcribe.</em>
</p>
</div>
<aside>
<h3>About the author</h3>
<p>Evan Wild is an unemployed plumber from Doncaster, who has been really "in to" wildlife since childhood. He
once
went to Chester Zoo on holiday, but got ill after eating a doner kebab.</p>
<p>He has never seen a bear, but once read a Daily Mail article about them, and thinks they sound cool.</p>
</aside>
<section class="comments">
<div class="show-hide" tabindex="0">Show comments</div>
<div class="comment-wrapper">
<h2>Add comment</h2>
<form class="comment-form">
<div class="flex-pair">
<label for="name">Your name:</label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="flex-pair">
<label for="comment">Your comment:</label>
<input type="text" name="comment" id="comment" placeholder="Enter your comment">
</div>
<div>
<input type="submit" value="Submit comment">
</div>
</form>
<h2>Comments</h2>
<ul class="comment-container">
<li>
<p>Bob Fossil</p>
<p>Oh I am so glad you taught me all about the big brown angry guys in the woods. With their sniffing
little noses and their bad attitudes, they can sure be a menace — I was thinking of putting them all in
a truck and driving them outta here. I run a zoo, you know.</p>
</li>
</ul>
</div>
</section>
</article>
<div class="secondary">
<h2>Related</h2>
<ul>
<li><a href="#">The trouble with Bees</a></li>
<li><a href="#">The trouble with Otters</a></li>
<li><a href="#">The trouble with Penguins</a></li>
<li><a href="#">The trouble with Octopi</a></li>
<li><a href="#">The trouble with Lemurs</a></li>
</ul>
</div>
</main>
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
<script src="/js/main.js"></script>
</body>
</html>