-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
76 lines (65 loc) · 3.04 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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS basics</title>
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/colors.css">
<link rel="stylesheet" href="styles/basics.css">
<link rel="stylesheet" href="styles/team.css">
<link rel="stylesheet" href="styles/characters.css">
</head>
<body>
<section class="team-section">
<h1>Jouw Sprookjesteam</h1>
<p id="team-counter">nog <span>8</span></p>
<progress max="8" value="0" aria-labelledby="team-counter"></progress>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="character-section">
<h2>kies Sprookjesmensen en/of</h2>
<ul>
<li><button>elf <img src="images/elf.svg" alt="elf"></button></li>
<li><button>fairy <img src="images/fairy.svg" alt="fairy"></button></li>
<li><button>king <img src="images/king.svg" alt="king"></button></li>
<li><button>queen <img src="images/queen.svg" alt="queen"></button></li>
<li><button>knight <img src="images/knight.svg" alt="knight"></button></li>
<li><button>prince <img src="images/prince.svg" alt="prince"></button></li>
<li><button>princess <img src="images/princess.svg" alt="princess"></button></li>
<li><button>robin <img src="images/robin.svg" alt="robin"></button></li>
<li><button>wizard <img src="images/wizard.svg" alt="wizard"></button></li>
<li><button>witch <img src="images/witch.svg" alt="witch"></button></li>
</ul>
<button class="list-button" data-direction="left" aria-label="naar links"></button>
<button class="list-button" data-direction="right" aria-label="naar rechts"></button>
</section>
<section class="character-section">
<h2>… kies Sprookjesdieren</h2>
<ul>
<li><button>dragon <img src="images/dragon.svg" alt="dragon"></button></li>
<li><button>kikker <img src="images/frog.svg" alt="kikker"></button></li>
<li><button>leeuw <img src="images/lion.svg" alt="leeuw"></button></li>
<li><button>meermin <img src="images/mermaid.svg" alt="meermin"></button></li>
<li><button>boeman <img src="images/ogre.svg" alt="boeman"></button></li>
<li><button>fenix <img src="images/phoenix.svg" alt="fenix"></button></li>
<li><button>big <img src="images/pig.svg" alt="big"></button></li>
<li><button>kat <img src="images/puss.svg" alt="kat"></button></li>
<li><button>konijn <img src="images/rabbit.svg" alt="konijn"></button></li>
<li><button>wolf <img src="images/wolf.svg" alt="wolf"></button></li>
</ul>
<button class="list-button" data-direction="left" aria-label="naar links"></button>
<button class="list-button" data-direction="right" aria-label="naar rechts"></button>
</section>
<script src="scripts/script.js"></script>
</body>
</html>