-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (147 loc) · 6.69 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
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Captuelt er et nyt sted at finde informationer om handicap venlige steder.
Tilmeld dig vores nyhedsbrev og få rabater, til mange gode handicap venlige steder. Uanset handicap">
<meta name="author" content="Lasse Aakjær">
<link rel="stylesheet" href="https://use.typekit.net/noy3cum.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/main.min.css">
<title>Captuelt Forside</title>
</head>
<body>
<progress value="0" max="500"></progress>
<header>
<nav>
<a href="#">
<img src="./images/captuelt.svg" alt="Captuelt Logo">
</a>
<!-- https://www.w3.org/TR/wai-aria/#aria-label -->
<button id="nav-icon1" aria-label="closed" tabindex="0">
<span></span>
<span></span>
<span></span>
</button>
<!-- https://www.w3schools.com/css/css_dropdowns.asp -->
<div id="dropdown" class="dropdown" role="menu" tabindex="0" aria-label="closed">
<h2 aria-labelledby="dropdown">Artikler</h2>
<div class="dropdown-content" role="navigation" aria-label="side navigation">
<ul>
<li role="option">
<a href="./artikler/5-handicappet-steder.html">
5 Handicap venlige steder i Aarhus
</a>
</li>
<li role="option">
<a href="./artikler/offentlig-transport-i-kørestol.html">
Offentlig Transport i Kørestol
</a>
</li>
<li role="option">
<a href="./artikler/tilgængelighed-paa-nettet.html">
Tilgængelighed på Nettet
</a>
</li>
</ul>
</div>
</div>
<div class="overlay">
<h2>Artikler</h2>
<p><a href="./artikler/5-handicappet-steder.html">5 Handicap venlige steder i Aarhus</a></p><br>
<p><a href="./artikler/offentlig-transport-i-kørestol.html">Offentlig Transport i Kørestol</a></p> <br>
<p><a href="./artikler/tilgængelighed-paa-nettet.html">Tilgængelighed på Nettet</a></p>
</div>
</nav>
</header>
<!-- Photos https://www.pexels.com/search/people/
https://unsplash.com/@chrisjoelcampbell -->
<section id="big-photo">
<div id="shadow">
<h1>Tilmeld dig vores nyhedsbrev</h1>
<p>Vær med på vores mailingliste og modtag nyheder om de bedste steder, trends og opdateringer.</p>
<div class="cta">
<a href="#newsletter"> Tilmeld </a>
</div>
</div>
</section>
<h2>Bruger Tips</h2>
<section id="usertips">
<div class="bruger">
<img src="./images/user1-opt.jpg" alt="Peter Gade">
<p class="username">Peter Gade</p>
<p class="usermsg">De nyere lokalbusser har kørestolsramper, enten manuelle eller automatiske. I de større
byer har busserne lave gulve samt knapper, der kan holde dørene åbne indtil alle er kommet ind eller ud.
</p>
</div>
<div class="bruger">
<img src="./images/user2-opt.jpg" alt="Sophia Hansen">
<p class="username">Sophia Hansen</p>
<p class="usermsg">Hvis brusesædet fx er på et handicapegnet værelse, er det en god ide, at det kan justeres
i højde.
Til hoteller anbefales, at et brusesæde kan klare en vægt på 150 kg.</p>
</div>
<div class="bruger">
<img src="./images/user3-opt.jpg" alt="Stine Jensen">
<p class="username">Stine Jensen</p>
<p class="usermsg">I alle vandretursfoldere, der er blevet udgivet siden ca. 2000 har vi vurderet
handicapvenligheden - primært tilgængeligheden med kørestol - for området. </p>
</div>
</section>
<section id="newsletter">
<p>Tilmeld dig vores nyhedsbrev og få en mail, med vores nyeste rabatter.</p>
<form>
<div class="form-item">
<label for="name">Dit navn</label>
<input id="name" type="text" value="" placeholder="Your Name">
</div>
<div class="form-item">
<label for="email">Din email</label>
<input id="email" type="email" value="" inputmode="email" placeholder="Your Email">
</div>
<!-- https://stackoverflow.com/questions/6046110/styling-form-with-label-above-inputs -->
<br style="clear:both">
<input type="submit" value="Tilmeld">
</form>
</section>
<h2>Vores Redaktion</h2>
<section id="redektion">
<div class="person">
<img src="./images/redaktion1-opt.jpg" alt="Portræt af Henrik Krag Nielsen">
<p>Henrik Krag Nielsen</p>
</div>
<div class="person">
<img src="./images/redaktion2-opt.jpg" alt="Portræt af Nicklas Dyrelund Christensen">
<p>Nicklas Dyrelund Christensen</p>
</div>
<div class="person">
<img src="./images/redaktion3-opt.jpg" alt="Portræt af Maria Christensen">
<p>Maria Christensen</p>
</div>
<div class="person">
<img src="./images/redaktion4-opt.jpg" alt="Portræt af Niels Stenslund Bjerg">
<p>Niels Stenslund Bjerg</p>
</div>
<div class="person">
<img src="./images/redaktion5-opt.jpg" alt="Portræt Helle Friis Bach">
<p>Helle Friis Bach</p>
</div>
<div class="person">
<img src="./images/redaktion6-opt.jpg" alt="Portræt Signe Bruun">
<p>Signe Bruun</p>
</div>
</section>
<footer>
<h3>Kontakt</h3>
<p>Ryesgade 20</p>
<p>2200 København N</p>
<p>Danmark</p>
<h3>Redaktion</h3>
<p>Skriv til vores redaktion</p>
<p>captuelt@redaktion.com</p>
<p id="copyright">Copyright © Captuelt Companie 2019 </p>
</footer>
<script src="./js/main.js"></script>
</body>
</html>