-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
265 lines (265 loc) · 10.1 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
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
<!DOCTYPE html>
<html lang="en">
<!-- head -->
<head>
<title>
Sports in Haarlem
</title>
<link rel="icon" type="image/png" href="fav/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="fav/favicon-16x16.png" sizes="16x16" />
<!-- meta -->
<meta charset="UTF-8">
<meta name="description" content="website about sport clubs in Haarlem">
<meta name="keywords" content="Sport, Haarlem, Taekwando, Hockey, Swimming, Town, Exercise">
<meta name="author" content="Marijn Ploeg">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<!-- body -->
<body>
<!--Navigation-->
<nav>
<ul class="grid-nav" id="NavigationBar">
<li class="grid-nav-title">
<a href="#Home" class="headerLogo">Haarlem-Sports</a>
</li>
<li class="grid-nav-main">
<a href="#Home" class="navLinks">Home</a>
</li>
<li class="grid-nav-sec">
<a href="#SecondaryContent" class="navLinks">About Haarlem</a>
</li>
<li class="grid-nav-sport">
<a href="#SportContent" class="navLinks">Sport Clubs</a>
</li>
<li class="grid-nav-contact">
<a href="#headerContact" class="navLinks">Contact</a>
</li>
</ul>
</nav>
<!--Header-->
<header id="Home" class="heroImage">
<a href="#MainContent">
<img class="logo" src="img/logo.png" alt="Logo">
</a>
<h1 class="headerTitle">
<a href="#MainContent" class="welcome">Welcome!</a>
</h1>
</header>
<!--Main content-->
<section id="MainContent">
<article>
<header class="MainTitle">
<h3>
Home
</h3>
</header>
<p class="MainText">
When people come to Haarlem they are often surprised by the beautiful old-fashioned houses in the center, the friendliness of the residents and the cheerfulness in the city. Haarlem is known for its gorgeous markets, beautiful old-Dutch alleys and pleasant atmosphere.
</p>
<aside>
<img src="img/Street.png" alt="Street" title="Alley in Haarlem" class="SideImage">
</aside>
<footer>
<p class="FooterHome">
Written by: Marijn Ploeg 2019 ©
</p>
</footer>
<a href="#SecondaryContent">
<img src="img/down-arrow.svg" alt="down-arrow" class="arrow">
</a>
</article>
</section>
<!--Secondary content-->
<section id="SecondaryContent">
<article>
<header class="AboutTitle">
<h3>
The Heart of Haarlem
</h3>
</header>
<p class="AboutText">
The center of Haarlem is marked by its beautiful alleys, calm streets and friendly people. You'll often find little stalls on the markets where you can buy delicious food from local farms, amazing products and lovely people.
</p>
<p class="AboutText">
Only 15 minutes by train, Haarlem makes an excellent base for visitors to Amsterdam. It is also very close to historic Leiden, the cheese markets of Alkmaar and an hour from The Hague and vibrant Rotterdam. This makes Haarlem an excellent choice to stay in when exploring North and South Holland.
</p>
<img src="img/winkel.png" alt="shop" title="Shop in Haarlem" class="AboutImage">
<footer>
<p class="AboutFooter">
Written by: Marijn Ploeg©
</p>
</footer>
<a href="#SportContent">
<img src="img/down-arrow.svg" alt="down-arrow" class="arrow">
</a>
</article>
</section>
<!--Sport content-->
<section id="SportContent">
<article>
<header class="sportTitle">
<h3>
Sport locations
</h3>
</header>
<ul class="sport-grid">
<li class="sport">
<p class="sportText">
Rood-Wit is the fourth-oldest hockey club in the Netherlands. Located on one of the most beautiful complexes in the Netherlands with a beautiful new clubhouse.
</p>
<a href="https://www.roodwit.nl">
<img src="img/hockey.png" alt="hockey" title="Roow Wit Hockey" class="images">
</a>
<h1>
Rood-Wit
</h1>
</li>
<li class="sport">
<p class="sportText">
Kenamju Sports club offers a wonderful place for sports and relaxation for juniors and seniors. There is also a nice spa with a pool.
</p>
<a href="https://www.kenamju.nl">
<img src="img/gym.png" alt="kenamju" title="Kenamju Gym" class="images">
</a>
<h1>
Kenamju
</h1>
</li>
<li class="sport">
<p class="sportText">
Soccer club DSS is a soccer club in Haarlem North. The football club promotes sportiness and fun and the matches are fun to watch.
</p>
<a href="https://www.dssvoetbal.nl">
<img src="img/dss.png" alt="dss" title="DSS Soccerclub" class="images">
</a>
<h1>
DSS
</h1>
</li>
<li class="sport">
<p class="sportText">
Kiteclub North Sea offers besides lessons cozy kite surfing adventures and good gear rental and the staff is vert friendly and helpfull.
</p>
<a href="https://northseakitesurfschool.nl">
<img src="img/kitesurf.png" alt="kitesurf" title="North Sea Kite School" class="images">
</a>
<h1>
North Sea Kiteschool
</h1>
</li>
<li class="sport">
<p class="sportText">
LTC Eindenhout is a tennis club with a social and pleasant character. The tennis park is near the Bosch en Vaart district and is easily accessible.
</p>
<a href="https://www.eindenhout.nl">
<img src="img/tennis.png" alt="tennis" title="Tennis club Eindenhout" class="images">
</a>
<h1>
Eindehout Tennis
</h1>
</li>
<li class="sport">
<p class="sportText">
OpStoom sports club is a sports club for your children. At OpStoom you can let your child move and exercise.
</p>
<a href="https://opstoom.nl/kinderopvang/haarlem/sportclub">
<img src="img/kidsport.png" alt="opstoom" title="Fitness for Children at OpStoom" class="images">
</a>
<h1>
OpStoom sportclub
</h1>
</li>
<li class="sport">
<p class="sportText">
At gym TrainMore you can really pump up your muscles. Motivated sportsmen work out at this gym and there are professional trainers to help you.
</p>
<a href="https://trainmore.nl">
<img src="img/trainmore.png" alt="trainmore" title="Muscle gym TrainMore" class="images">
</a>
<h1>
Gym TrainMore
</h1>
</li>
<li class="sport">
<p class="sportText">
Squash, Cardio and Fitness gym Haarlem is for everyone who wants to play squash or work out on fitness in group classes or fitness.
</p>
<a href="https://squashhaarlem.nl/">
<img src="img/squash.png" alt="squash" title="Squash gym Haarlem" class="images">
</a>
<h1>
Squashclub Haarlem
</h1>
</li>
<li class="sport">
<p class="sportText">
At the boerhave pool you can swim or get lessons. The pool has two baths, one for fun and one for lessons. There is a cafeteria with nice food.
</p>
<a href="https://www.sro.nl//accommodaties/zwembaden/haarlem/boerhaavebad">
<img src="img/zwemmen.png" alt="boerhavebath" title="Pool in Haarlem" class="images">
</a>
<h1>
Boerhavepool Haarlem
</h1>
</li>
<li class="sport">
<p class="sportText">
The Korean martial art Taekwondo is a fighting sport where the athletes you their feet as well as their hands , the literal translation of Taekwondo is:"The way of the Feet and Fist".
</p>
<a href="https://www.taekwon.nl/taekwondo">
<img src="img/karate.png" alt="Taekwondo" title="Taekwondo gym in Haarlem" class="images">
</a>
<h1>
Taekwondo centre
</h1>
</li>
</ul>
</article>
</section>
<!-- Refferal -->
<aside id="Referral">
<header class="referralTitle">
Taekwondo
</header>
<p class="referralText">
Taekwondo is originally a Korean martial art (martial art), where both hand and foot techniques are used. The literal translation of the word Taekwondo is: "The way of the foot and the fist". The word Taekwondo is made up of 3 parts: Tae (foot). The foot represents all leg techniques such as kicking and jumping.
Kwon (fist). The hand stands for all hand and arm techniques such as punching, blocking, grasping, clamping and throwing. Do (the way). The road is the path that you follow while practicing Taekwondo and mainly represents the mental part.
</p>
<footer class="referralFooter">
<a href="https://www.taekwon.nl/taekwondo" class="referral"> Click here for full website </a>
</footer>
</aside>
<!-- contact -->
<header id="headerContact">
<video autoplay muted loop id="contactBackground">
<source src="vid/contact.mp4" type="video/mp4">
<source src="vid/contactOGG.ogg" type="video/ogg">
</video>
</header>
<form action="http://witan.nl/inholland/testform.php" id="Contact" class="contactForm" method="get">
<h3>
Contact
</h3>
<h4>
Send us a message if you have any questions.
</h4>
<fieldset>
<input placeholder="Your name" type="text" required>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="text" required>
</fieldset>
<fieldset>
<input placeholder="Type your message here...." type="text" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
<!-- Footer -->
<footer>
<p class="FixedFooter">Designed by</p>
<a href="https://marijnploeg.nl" target="_blank" class="FixedFooter" title="MarijnPloeg">Marijn Ploeg</a>
</footer>
</body>
</html>