-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_all.html
146 lines (137 loc) · 4.97 KB
/
index_all.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
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Quiz App</title>
<link rel="stylesheet" href="./styles/index.css" />
<script type="module" defer src="index.js"></script>
</head>
<body class="app-grid viewportheight">
<h1 class="app-grid__header padding-15 bg-green">Quiz-App</h1>
<!-- -->
<!-- -->
<main class="app-grid__scrollarea bg-pastel" data-page="home">
<article
data-js="card"
class="card position-relative padding-20 margin-20"
>
<button data-js="bookmark-button" class="position-absolute bookmark">
<svg
data-js="bookmark"
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
fill="var(--color-green)"
stroke="var(--color-green-light)"
viewBox="0 0 16 16"
>
<path
d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"
/>
</svg>
</button>
<h2>Frage:</h2>
<p class="marginleft-20">Das flächenmäßig kleinste Bundesland heißt?</p>
<button data-js="answerbutton" class="button__action">
Antwort anzeigen
</button>
<p data-js="answertext" class="card__hide">Bremen</p>
<ul role="list" class="flex flex-wrap gap-5 justify-evenly">
<li class="padding margin-auto">Berlin</li>
<li class="padding margin-auto">Hamburg</li>
<li class="padding margin-auto">Bremen</li>
<li class="padding margin-auto">Saarland</li>
</ul>
</article>
<article
data-js="card"
class="card position-relative padding-20 margin-20"
>
<button data-js="bookmark-button" class="position-absolute bookmark">
<svg
data-js="bookmark"
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
fill="var(--color-green)"
stroke="var(--color-green-light)"
viewBox="0 0 16 16"
>
<path
d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"
/>
</svg>
</button>
<h2>Frage:</h2>
<p class="marginleft-20">Einen Feinschmecker nennt man auch?</p>
<button data-js="answerbutton" class="button__action">
Antwort anzeigen
</button>
<p data-js="answertext" class="card__hide">Gourmet</p>
<ul role="list" class="flex flex-wrap gap-5 justify-evenly">
<li class="padding margin-auto">Gourmet</li>
<li class="padding margin-auto">Gourmed</li>
<li class="padding margin-auto">Genießer</li>
<li class="padding margin-auto">Leckermäulchen</li>
</ul>
</article>
<article
data-js="card"
class="card position-relative padding-20 margin-20"
>
<button data-js="bookmark-button" class="position-absolute bookmark">
<svg
data-js="bookmark"
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
fill="var(--color-green)"
stroke="var(--color-green-light)"
viewBox="0 0 16 16"
>
<path
d="M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"
/>
</svg>
</button>
<h2>Frage:</h2>
<p class="marginleft-20">
Welche Gürtelfarbe existiert nicht im Kampfsport Karate?
</p>
<button data-js="answerbutton" class="button__action">
Antwort anzeigen
</button>
<p data-js="answertext" class="card__hide">Rot</p>
<ul role="list" class="flex flex-wrap gap-5 justify-evenly">
<li class="padding margin-auto">Schwarz</li>
<li class="padding margin-auto">Weiß</li>
<li class="padding margin-auto">Braun</li>
<li class="padding margin-auto">Rot</li>
</ul>
</article>
</main>
<!-- Navigation Bar -->
<nav class="bg-ochre">
<section data-nav="home" class="active app-grid__nav">
<a href="index.html" class="active"
><img src="./images/home.svg" alt="home"
/></a>
</section>
<section data-nav="bookmark" class="app-grid__nav">
<a href="bookmark.html"
><img src="./images/bookmark.svg" alt="bookmarks"
/></a>
</section>
<section data-nav="create" class="app-grid__nav">
<a href="create.html"><img src="./images/create.svg" alt="create" /></a>
</section>
<section data-nav="profile" class="app-grid__nav">
<a href="profile.html"
><img src="./images/profile.svg" alt="profile"
/></a>
</section>
</nav>
</body>
</html>