-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (158 loc) · 6.32 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
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>squizzed</title>
<link rel="stylesheet" href="./css/styles.css" />
<script src="./js/index.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap"
rel="stylesheet"
/>
<a href="bookmarks.html"></a>
</head>
<body data-js="body">
<header class="header" data-js="header">
<span class="h1container" data-js="h1container">
<h1 class="h1" data-js="h1">
<span class="blur">s</span><span class="blur">q</span
><span class="blur">u</span><span class="blur">i</span
><span class="blur">z</span><span class="blur">z</span
><span class="blur">e</span><span class="blur">d</span>
</h1>
</span>
</header>
<main data-js="main">
<section class="pre_cards" data-js="pre_cards"></section>
<section class="cards" data-js="cards">
<span class="card" data-js="card">
<span class="card__hint_cloud" data-js="card__hint_cloud">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
class="card__hint_cloud_svg"
>
<path
class="card__hint_cloud_path"
data-js="card__hint_cloud_path"
d="M260-160q-91 0-155.5-63T40-377q0-78 47-139t123-78q25-92 100-149t170-57q117 0 198.5 81.5T760-520q69 8 114.5 59.5T920-340q0 75-52.5 127.5T740-160H260Z"
/>
</svg>
</span>
<span class="card__hint_sun" data-js="card__hint_sun">
<svg
xmlns="http://www.w3.org/2000/svg"
height="40"
viewBox="0 -960 960 960"
width="40"
>
<path
d="M446.667-766.667V-920h66.666v153.333h-66.666ZM706-659.334l-46.333-46.333 108-109.666 46.666 47.666L706-659.334Zm60.667 212.667v-66.666H920v66.666H766.667ZM446.667-40v-153.333h66.666V-40h-66.666ZM253.333-660.667l-108-107 47-46.666L300.666-706l-47.333 45.333ZM768-145.333l-108.333-109L705-299.666l110 105.999-47 48.334ZM40-446.667v-66.666h153.333v66.666H40Zm153 301.334-47.333-47L253-299.666l24.333 22.333L301.666-254 193-145.333ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-66.666q72 0 122.667-50.667T653.334-480q0-72-50.667-122.667T480-653.334q-72 0-122.667 50.667T306.666-480q0 72 50.667 122.667T480-306.666ZM480-480Z"
/>
</svg>
</span>
<button class="bookmark_button" data-js="bookmark_button">
<svg
class="bookmark_button__icon"
data-js="bookmark_button__icon"
xmlns="xmlns"
="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
class="bookmark_button__svg"
>
<path
class="bookmark_button__svg_path"
data-js="bookmark_button__svg_path"
d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Z"
/>
</svg>
</button>
<p class="question__text">What property flips the axis in flexbox?</p>
<p class="solution" data-js="solution">flex-direction</p>
<button class="show_answer" data-js="toggle_answer_button">
Show Answer
</button>
<ul class="tags">
<li>#html</li>
<li>#flexbox</li>
<li>#css</li>
</ul>
</section>
<!-- <span class="add_button" data-js="add_button"> -->
<svg
class="add_button"
data-js="add_button"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24">
<path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>
</svg>
</section>
</main>
<footer class="navbar">
<button
class="navbar__button current_page"
aria-label="Home"
onclick="window.location.href = 'index.html';"
>
<svg
class="navbar__item"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z" />
</svg>
</button>
<button
class="navbar__button"
aria-label="Bookmarks"
onclick="window.location.href = 'bookmarks.html';"
>
<svg
class="navbar__item"
xmlns="xmlns"
="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path
d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Z"
/>
</svg>
</button>
<button
class="navbar__button"
aria-label="Profile"
onclick="window.location.href = 'profile.html';"
>
<svg
class="navbar__item"
xmlns="xmlns"
="http://www.w3.org/2000/svg"
height="24"
viewBox="0 -960 960 960"
width="24"
>
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"
/>
</svg>
</button>
<!-- <small class="navbar__text">copyright</small> -->
</footer>
</body>
</html>