-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
350 lines (325 loc) · 12.4 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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Ida From" />
<meta name="description" content="Bike event in Vänern, Sweden" />
<meta
name="keywords"
content="Cykel, Gravel, Gravelcykel, Vänern, Vänern Gravel Adventure"
/>
<link
rel="shortcut icon"
type="image/png"
href="assets/favicon/favicon-16x16.png"
;
sizes="16x16"
/>
<link
rel="shortcut icon"
type="image/png"
href="assets/favicon/favicon-32x32.png"
;
sizes="32x32"
/>
<link
rel="apple-touch-icon"
sizes="192x192"
href="assets/favicon/apple-touch-icon.png"
/>
<!--
<meta property=\"og:site_name\" content=\"$1\">\n<meta property=\"og:title\" content=\"$2\" />\n<meta property=\"og:description\" content=\"$3\" />\n<meta property=\"og:image\" content=\"$4\" />\n<meta name=\"twitter:image\" content=\"$5\" />\n<meta name=\"twitter:card\" content=\"$6\" />\n<meta name=\"twitter:image:alt\" content=\"$7\">\n<meta propety=\"og:url\" content=\"$8\" />
-->
<link rel="stylesheet" href="/styles/global.css" />
<link
rel="preload"
href="/styles/fonts.css"
as="font"
type="font/woff2"
crossorigin
/>
<link rel="stylesheet" href="/styles/fonts.css" />
<link rel="stylesheet" href="/styles/logotype.css" />
<link rel="stylesheet" href="/styles/main.css" />
<link rel="stylesheet" href="/styles/route-grid.css" />
<link rel="stylesheet" href="/styles/accom-grid.css" />
<link rel="stylesheet" href="/styles/equipment-grid.css" />
<link rel="stylesheet" href="/styles/reg-grid.css" />
<link rel="stylesheet" href="/styles/animations.css" />
<link rel="stylesheet" href="/styles/footer.css" />
<title>Vänern Gravel Adventure</title>
</head>
<body>
<div class="grid-container">
<header>
<div class="grid-logo">
<img class="logotype" src="/assets/logga.svg" alt="logotype" />
</div>
</header>
<main>
<div class="grid-item1"><span class="name"></span></div>
<div class="grid-item1">
<h1>
Äventyret <br />
runt Vänern
</h1>
</div>
<div class="grid-item2">
<p>
Vänern Gravel Adventure är ett cykeläventyr som bjuder på
outforskade grusvägar runt Sveriges största sjö. Vi delar upp de 52
milen på tre etapper med två nätter på hotell med gemensam 3-rätters
middag. Detta är ingen tävling utan en upplevelse med gemensam start
men som var och en tar sig an utifrån sina förutsättningar.
Bansträckningen för alla tre etapper får du via en GPX-fil i god tid
före loppet. Det kommer att finnas en kvastbil för hjälp med
mekaniska bekymmer eller om du skulle behöva bli upplockad på vägen.
</p>
</div>
<div class="grid-item3">
<p>
Vid varje etappmål bjuds du på After Bike med något gott att äta och
dricka som belöning för dagens prestation. Dagens äventyr delar vi
sedan med varandra under kvällens gemensamma middag.
</p>
</div>
<div class="btn-sign-up-container">
<button class="btn-sign-up">Anmäl dig här!</button>
<div class="arrow"></div>
</div>
</main>
</div>
<button data-model-target="#modal" class="btn-info">Snabb-fakta</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="info-box-title">
<h2>Snabbfakta</h2>
</div>
</div>
<div class="info-text-box">
<p>Ett graveläventyr runt Vänern med start och mål i Källby.</p>
<p>52 mil, 70% grusväg, 3 etapper.</p>
<p>
2 hotellnätter, 2 trerätters middagar och någon energipåfyllning vid
varje etappmål.
</p>
<p>
Tillgång till kvastbil och transport av packning. Rutten på en
GPX-fil.
</p>
<p>Pris: 4000kr</p>
</div>
</div>
<section class="route-grid-container">
<div class="empty-grid"></div>
<div class="img-map-icon-grid-item">
<img
class="map-icon-img"
src="/assets/Icon-awesome-map-marked-alt.svg"
alt="Bakgrundsbild som visar en illustration på en pinnål över en karta"
/>
</div>
<div class="route-grid-item1 scroll-animation">
<h2 class="route-title">Rutten</h2>
<h3 class="etapp">Etapp 1: Källby - Åmål</h3>
<p class="etapp-info">
Etapp 1 är 190 km med start i Källby och målgång i Åmål.
</p>
<h3 class="etapp">Etapp 2: Åmål - Kristinehamn</h3>
<p class="etapp-info">
Etapp 2 är 149 km med start i Åmål och målgång i Kristinehamn.
</p>
<h3 class="etapp">Etapp 2: Kristinehamn - Källby</h3>
<p class="etapp-info">
Etapp 3 är 150 km med start i Kristinehamn och målgång i Källby.
</p>
</div>
<div class="route-grid-item2">
<img
class="map-img"
src="/assets/map.svg"
alt="Karta över loppet med tre pinnålar som visar ettaperna"
/>
</div>
</section>
<section class="accommodations-grid-container">
<div class="accom-grid-empty-item"></div>
<div class="accom-grid-item1 scroll-animation">
<h2 class="acm-title">Boende & mat</h2>
</div>
<div class="img-town-grid-item">
<img
class="town-img"
src="/assets/town.svg"
alt="Illustration på en stad"
/>
</div>
<div class="accom-grid-item2 scroll-animation">
<h3>Natt 1 - Åmåls Stadshotell</h3>
<p>
Åmåls stadshotell ligger mitt i pittoreska Åmål, vid Åmålsån och strax
ovanför småbåtshamnen där ån mynnar ut i Vänern. På hotellet finns 29
individuellt inredda rum i olika storlek och i Restaurang Bakfickan
äter vår första middag.
</p>
<p>Mer information om hotellet och restaurangen hittar du</p>
<a
href="https://www.amalsstadshotell.se"
aria-label="link to åmåls stadshotell"
>här</a
>
<div class="placemarker-container">
<img src="/assets/Icon-material-place.svg" alt="kartnål" />
<p class="accom-city">Åmål</p>
</div>
</div>
<div class="accom-grid-item3 scroll-animation">
<h3>Natt 2 - Statt Kristinehamn</h3>
<p>
Stadshotellet i Kristinehamn ligger i en anrik byggnad från 1878, mitt
på torget i Kristinehamn. På ena sidan rinner älven Varnan och på den
andra ligger gågatan med affärer och småbutiker. Hotellet har 38
nyrenoverade rum och i hotellets Restaurang Axel intar vi kvällens
middag.
</p>
<p>Mer information om hotellet och restaurangen hittar du</p>
<a
href="https://stattkristinehamn.se/"
aria-label="Link to Stadshotellet i Kristinehamn"
>här</a
>
<div class="placemarker-container">
<img src="/assets/Icon-material-place.svg" alt="kartnål" />
<p class="accom-city">Kristinehamn</p>
</div>
</div>
</section>
<section class="equipment-grid-container">
<div class="equip-empty-grid"></div>
<div class="equip-grid-item2 scroll-animation">
<h2 class="equip-title">Utrustning</h2>
<p>
Du väljer själv vilken typ av cykel du vill ha men vi rekommenderar
gravel/cykelcross. Det fungerar givetvis också med en mountainbike.
Självklart bär alla cykelhjälm och kläder efter väder. Alla deltagare
bör ha med telefon för att, om olyckan är framme, kunna ringa till
kvastbilen eller till sjukvård. Det kan även vara bra med en powerbank
för att säkerställa att du inte blir utan batteri. Energi och vatten
har du med efter eget behov och din övriga packning transporteras med
bil till etappmålet.
</p>
</div>
<div class="equip-grid-item3">
<img
class="bike-img"
src="/assets/bike.svg"
alt="illustration på en cykel"
/>
</div>
<div class="equip-grid-item4"></div>
<div class="equip-grid-item5 scroll-animation">
<div class="equip-list-wrapper">
<h2 class="equip-title">Deltagarens ansvar</h2>
<!-- Gör om till en unordered list-->
<ul>
<li>Har egen olycksfallsförsäkring.</li>
<li>
Visar hänsyn till andra deltagare samt till boende och åskådare
utmed banan.
</li>
<li>Tar hand om sitt eget skräp.</li>
<li>Hjälper varandra om något oförutsett inträffar.</li>
<li>Meddelar funktionär om man bryter.</li>
</ul>
</div>
</div>
</section>
<section class="register-grid-container" id="down">
<div class="reg-empty-grid"></div>
<div class="reg-grid-item1 scroll-animation">
<h2 class="acm-title">Anmälningsavgift</h2>
</div>
<div class="reg-grid-item3 scroll-animation">
<p>Priset för detta äventyr är 4000 kr per person.</p>
<p>I priset ingår följande:</p>
<ul>
<li>
Två övernattningar på hotell i dubbelrum eller enkelrum mot extra
avgift, inklusive frukost.
</li>
<li>Två trerätters middagar exklusive dryck.</li>
<li>Två depåstopp.</li>
<li>Tre After Bike med något att äta och dricka.</li>
<li>Transport av packning.</li>
<li>Tillgång till kvastbil.</li>
<li>52 mil tillsammans med andra cykelnördar.</li>
</ul>
</div>
<div class="reg-grid-item4">
<div class="reg-form-wrapper">
<h2>Anmäl dig här</h2>
<form action="">
<label for="name">Namn*</label>
<input type="text" id="name" placeholder="John Smith" required />
<label for="address">Adress*</label>
<input
type="text"
id="address"
placeholder="Karlagatan 22"
required
/>
<label for="number">Telefonnummer*</label>
<input
type="number"
id="number"
placeholder="nnnnnnnnnn"
required
/>
<label for="email">Mejladress*</label>
<input
type="email"
id="email"
placeholder="example@example.com"
required
/>
<label for="allergies">Allergier*</label>
<input type="text" id="allergies" placeholder="Nötter" required />
<label for="other">Övrig info</label>
<textarea type="text" id="other"> </textarea>
<p>
Vid frågor kontakta:
<a href="mailto: vanerngravel@gmail.com">
vanerngravel@gmail.com</a
>
</p>
<button type="submit">Registrera</button>
</form>
</div>
</div>
<div class="reg-grid-item5"></div>
<div class="reg-grid-item6"></div>
</section>
<footer>
<div class="footer-section">
<h2>Vår samarbetspartner</h2>
<picture>
<source
srcset="/assets/Bianchi_Product_1_2x.webp"
media="(min-width: 800px)"
/>
<source
srcset="/assets/Bianchi_Product_1_1x.webp"
media="(min-width: 300px)"
/>
<img
src="/assets/Bianchi_Product_1_1x.webp"
alt="Company logo for Bianchi"
/>
</picture>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>