-
Notifications
You must be signed in to change notification settings - Fork 0
/
bookmarks.html
93 lines (84 loc) · 5.17 KB
/
bookmarks.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="8"/>
<title id="Home">Quiz App</title>
<link rel="stylesheet" href="./css/styles.css"/>
</head>
<body>
<header class="header">
<h1 class="header__heading">Quiz App</h1>
</header>
<main>
<section class="card">
<button class="card__bookmark" data-js="card__bookmark_1">
<div class="ribbon choose" data-js="ribbon1"></div>
</button>
<p class="card__question">
What property flips the axes in flexbox?
</p>
<button type="button" class="card__answer toggle-button" data-js="card__answer__toggle__button1">Show answer</button>
<div class="card__answer__toggle1" data-js="card__answer__toggle1">This is the answer</div>
<p class ="answer__tags">
<tag class="card__tag" >#HTML</tag>
<tag class="card__tag">#flexbox</tag>
<tag class="card__tag">#css</tag>
</p>
</section>
<section class="card">
<button class="card__bookmark" data-js="card__bookmark_2">
<div class="ribbon choose" data-js="ribbon2"></div>
</button>
<p class="card__question">
Lorem ipsum dolor sit?
</p>
<button class="card__answer">Show answer</button>
<p class ="answer__tags">
<tag class="card__tag">#css-positioning</tag>
<tag class="card__tag">#github</tag>
<tag class="card__tag">#teamwork</tag>
</p>
</section>
<section class="card">
<button class="card__bookmark" data-js="card__bookmark_3">
<div class="ribbon choose" data-js="ribbon"></div>
</button>
<p class="card__question">
What does a mouse eat?
</p>
<button class="card__answer">Show answer</button>
<p class ="answer__tags">
<tag class="card__tag">#favourite food</tag>
<tag class="card__tag">#animal-love</tag>
<tag class="card__tag">#breakfast</tag>
</p>
</section>
</main>
<footer class="nav__footer">
<a href="/index.html">
<button class="footer__button"><svg class="footer__button" xmlns="http://www.w3.org/2000/svg" width="35" height="45" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</svg>
</button>
</a>
<a href="/bookmarks.html">
<button type="button" class="footer__button footer__button-current">
<svg class xmlns="http://www.w3.org/2000/svg" width="35" height="45"viewBox="0 0 384 512"> <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 48C0 21.5 21.5 0 48 0l0 48V441.4l130.1-92.9c8.3-6 19.6-6 27.9 0L336 441.4V48H48V0H336c26.5 0 48 21.5 48 48V488c0 9-5 17.2-13 21.3s-17.6 3.4-24.9-1.8L192 397.5 37.9 507.5c-7.3 5.2-16.9 5.9-24.9 1.8S0 497 0 488V48z"/>
</svg>
</button>
</a>
<a href="/form.html">
<button type="button" class="footer__button">
<svg class xmlns="http://www.w3.org/2000/svg" width="35" height="45"viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>
</button>
</a>
<a href="/profile.html">
<button type="button" class="profile footer__button">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="45" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"/>
</svg>
</button>
</a>
</footer>
</section>
</body>