forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
248 lines (236 loc) · 11.1 KB
/
index.html
File metadata and controls
248 lines (236 loc) · 11.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>My Hobbies</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<ul>
<li><a class="nav-link" href="#About">About</a></li>
<li><a class="nav-link" href="#Badminton">Badminton</a></li>
<li><a class="nav-link" href="#Cycling">Cycling</a></li>
<li><a class="nav-link" href="#Morris Dancing">Morris Dancing</a></li>
</ul>
</nav>
</header>
<!-- <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div> -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle mr-auto" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button> <div class="dropdown-menu">
<a class="dropdown-item">
Test1
</a>
<a class="dropdown-item">
Test2
</a>
<a class="dropdown-item">
Test3
</a>
</div>
<main id="About">
<article>
<div class="row">
<div class="col-md-8 bg-primary">
<h1>About</h1>
<p>Dear readers,<br>
Welcome to my <strong>hobby's</strong> page.<br>
Before <abbr title="Coronavirus Disease">COVID-19</abbr>, I enjoy doing the following hobbies:<br>
</div>
<div class="col-md-4 bg-secondary">
<ol>
<li><a href="#Badminton">Badminton</a></li>
<li><a href="#Cycling">Cycling</a></li>
<li><a href="#Morris Dancing">Morris Dancing</a></li>
</ol>
The hobbies keep me fit and healthy, as well as socializing with my friends.
</p>
</div>
</div>
</article>
</main>
<section id="Badminton">
<h2>Badminton</h2>
<figure>
<img src="img/Olympics_2012_Mixed_Doubles_Final.jpg" alt="2012 Olympic's Mixed Doubles Final - wikipedia">
</figure>
<article>
<p>
Badminton is a racquet sport played using racquets to hit a shuttlecock across a net. Although it may be played
with larger teams, the most common forms of the game are "singles" (with one player per side) and "doubles"
(with
two players per side). Badminton is often played as a casual outdoor activity in a yard or on a beach; formal
games are played on a rectangular indoor court. Points are scored by striking the shuttlecock with the racquet
and
landing it within the opposing side's half of the court.
</p>
<br>
<p>
Each side may only strike the shuttlecock once before it passes over the net. Play ends once the shuttlecock has
struck the floor or if a fault has been called by the umpire, service judge, or (in their absence) the opposing
side.[1]
</p>
<br>
<p>
The shuttlecock is a feathered or (in informal matches) plastic projectile which flies differently from the
balls
used in many other sports. In particular, the feathers create much higher drag, causing the shuttlecock to
decelerate more rapidly. Shuttlecocks also have a high top speed compared to the balls in other racquet sports.
The flight of the shuttlecock gives the sport its distinctive nature.
</p>
<br>
<p>
The game developed in British India from the earlier game of battledore and shuttlecock. European play came to
be
dominated by Denmark but the game has become very popular in Asia, with recent competitions dominated by China.
Since 1992, badminton has been a Summer Olympic sport with four events: men's singles, women's singles, men's
doubles, and women's doubles,[2] with mixed doubles added four years later. At high levels of play, the sport
demands excellent fitness: players require aerobic stamina, agility, strength, speed, and precision. It is also
a
technical sport, requiring good motor coordination and the development of sophisticated racquet movements.[3]
</p>
<a href="https://en.wikipedia.org/wiki/Badminton">For more information</a>
</article>
</section>
<section id="Cycling">
<h2>Cycling</h2>
<figure>
<img src="img/Bike_at_Prins_hendrikkade_Amsterdam_centraal.JPG"
alt="Bike at Prins Hendrikkade Amsterdam Central - wikipedia">
</figure>
<article>
<p>
Cycling, also called bicycling or biking, is the use of bicycles for transport, recreation, exercise or
sport.[1]
People engaged in cycling are referred to as "cyclists",[2] "bicyclists",[3] or "bikers".[4] Apart from
two-wheeled bicycles, "cycling" also includes the riding of unicycles, tricycles, quadracycles, recumbent and
similar human-powered vehicles (HPVs).
</p>
<br>
<p>
Bicycles were introduced in the 19th century and now number approximately one billion worldwide.[5] They are the
principal means of transportation in many parts of the world.
</p>
<br>
<p>
Cycling is widely regarded as a very effective and efficient mode of transportation[6][7] optimal for short to
moderate distances.
</p>
<br>
<p>
Bicycles provide numerous possible benefits in comparison with motor vehicles, including the sustained physical
exercise involved in cycling, easier parking, increased maneuverability, and access to roads, bike paths and
rural
trails. Cycling also offers a reduced consumption of fossil fuels, less air or noise pollution, and much reduced
traffic congestion. These lead to less financial cost to the user as well as to society at large (negligible
damage to roads, less road area required). By fitting bicycle racks on the front of buses, transit agencies can
significantly increase the areas they can serve.[8]
</p>
<br>
<p>
In addition, cycling provides a variety of health benefits. The World Health Organization (WHO) states that
cycling can reduce the risk of cancers, heart disease, and diabetes that are prevalent in sedentary
lifestyles.[9]
Cycling on stationary bikes have also been used as part of rehabilitation for lower limb injuries, particularly
after hip surgery.[10] Individuals who cycle regularly have also reported mental health improvements, including
less perceived stress and better vitality.[11]
</p>
<br>
<p>
Among the disadvantages of cycling are the requirement of bicycles (excepting tricycles or quadracycles) to be
balanced by the rider in order to remain upright, the reduced protection in crashes in comparison to motor
vehicles,[12] often longer travel time (except in densely populated areas), vulnerability to weather conditions,
difficulty in transporting passengers, and the fact that a basic level of fitness is required for cycling
moderate
to long distances.
</p>
<a href="https://en.wikipedia.org/wiki/Cycling">For more information</a>
</article>
</section>
<section id="Morris Dancing">
<h2>Morris Dancing</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8evpNCPklZU" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<article>
<p>
Morris dancing is a form of English folk dance usually accompanied by music. It is based on rhythmic stepping
and
the execution of choreographed figures by a group of dancers, usually wearing bell pads on their shins.
Implements
such as sticks, swords and handkerchiefs may also be wielded by the dancers. In a small number of dances for one
or two people, steps are near and across a pair of clay tobacco pipes laid one across the other on the floor.
They
clap their sticks, swords, or handkerchiefs together to match with the dance.
</p>
<br>
<p>
The earliest known and surviving English written mention of Morris dance is dated to 1448 and records the
payment
of seven shillings to Morris dancers by the Goldsmiths' Company in London.[1] Further mentions of Morris dancing
occur in the late 15th century, and there are also early records such as bishops' "Visitation Articles"
mentioning
sword dancing, guising and other dancing activities, as well as mumming plays.
</p>
<br>
<p>
While the earliest records invariably mention "Morys" in a court setting, and a little later in the Lord Mayors'
Processions in London, it had assumed the nature of a folk dance performed in the parishes by the mid 17th
century.
</p>
<br>
<p>
There are around 150 Morris jingles (or teams) in the United States.[2] English expatriates form a larger part
of
the Morris tradition in Australia, Canada, New Zealand[3] and Hong Kong. There are isolated groups in other
countries, for example those in Utrecht and Helmond,[4] Netherlands; the Arctic Morris Group of Helsinki,
Finland[5] and Stockholm, Sweden; as well as in Cyprus[6] and St. Petersburg, Russia.[7]
</p>
<br>
<p>
The world of Morris is organised and supported by three organisations: Morris Ring,[8] Morris Federation[9] and
Open Morris.[10]
</p>
<a href="https://en.wikipedia.org/wiki/Morris_dance">For more information</a>
</article>
</section>
<footer>
<p>This page created for educational purposes only</p>
<nav>
<ul>
<li>
<a class="nav-link" href="index.html"> Home</a>
</li>
<li>
<a class="nav-link" href="#About">About</a>
</li>
</ul>
</nav>
</footer>
<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous">
</script>
</body>
</html>