-
Notifications
You must be signed in to change notification settings - Fork 0
/
bookmarks.html
130 lines (129 loc) · 4.15 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
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
<!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.css" />
</head>
<body>
<header class="header">
<h1 class="header__title">Bookmarks</h1>
</header>
<main>
<ul class="card-list">
<li class="card-list__item">
<article class="card">
<h2 class="card__question">
Daniel Radcliffe became a global star in the film industry due to
his performance in which film franchise?
</h2>
<button class="card__button-answer" type="button">
Show answer
</button>
<p class="card__answer">Harry Potter</p>
<ul class="card__tag-list">
<li class="card__tag-list-item">#danielradcliffe</li>
<li class="card__tag-list-item">#hewhomustnotbenamed</li>
<li class="card__tag-list-item">#abracadabra</li>
</ul>
<div class="card__button-bookmark">
<button
class="bookmark bookmark--active"
aria-label="bookmark"
type="button"
>
<svg
class="bookmark__icon"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
>
<path
d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
/>
</svg>
</button>
</div>
</article>
</li>
</ul>
</main>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">
<a
class="navigation__link"
href="/index.html"
aria-label="go to home page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"
/>
</svg>
</a>
</li>
<li class="navigation__list-item navigation__list-item--active">
<a
class="navigation__link"
href="/bookmarks.html"
aria-label="go to bookmarks page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"
/>
</svg>
</a>
</li>
<li class="navigation__list-item">
<a
class="navigation__link"
href="/profile.html"
aria-label="go to profile page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewbox="0 0 24 24"
width="24px"
>
<path
d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 9c2.7 0 5.8 1.29 6 2v1H6v-.99c.2-.72 3.3-2.01 6-2.01m0-11C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
/>
</svg>
</a>
</li>
<li class="navigation__list-item">
<a
class="navigation__link"
href="/form.html"
aria-label="go to form page"
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
width="24px"
viewBox="0 0 448 512"
>
<path
d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
/>
</svg>
</a>
</li>
</ul>
</nav>
</body>
</html>