generated from yandex-praktikum/zakrivayuschiy-teg-f
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (277 loc) · 25.4 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name=”color-scheme” content="light dark">
<title>Закрывающий тег</title>
<link rel="stylesheet" href="./fonts/fonts.css" />
<link rel="stylesheet" href="./styles/variables.css" />
<link rel="stylesheet" href="./styles/globals.css" />
<link rel="stylesheet" href="./styles/style.css" />
<link rel="stylesheet" href="./styles/animations.css" />
<link rel="stylesheet" href="./styles/themes.css" />
<link href="images/fav.ico" rel="icon" sizes="any" />
<link type="image/svg+xml" href="images/favicon.svg" rel="icon"/>
<link rel="apple-touch-icon" href="images/mobile-icon.png" />
<script src="./scripts/set-theme.js"></script>
</head>
<body class="page">
<header class="header">
<a class="html">
</HTML>
</a>
<h1 class="header-title">закрывающий тег</h1>
<nav class="theme-menu header__theme-menu">
<!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
<ul class="theme-menu__list">
<li class="theme-menu__item">
<button type="button" data-theme="dark" class="theme-menu__button beautiful_button">
Темно
</button>
</li>
<li class="theme-menu__item">
<button
type="button"
data-theme="auto"
disabled
class="theme-menu__button beautiful_button"
>
Авто
</button>
</li>
<li class="theme-menu__item">
<button type="button" data-theme="light" class="theme-menu__button beautiful_button">
Светло
</button>
</li>
</ul>
</nav>
</header>
<main>
<ul class="cards__list">
<li class="cards__item zero-sprint">
<h2 class="card-title">Фритрек и нулевой спринт: Подготовка к работе</h2>
<div class = "pic_lable">
<img class="card-img zero-sprint-img" src="images/0sprint.jpg" alt="Горы">
<span aria-hidden="true" class="empty-element"><мрак></span>
</div>
<p class="paragraph paragraph-1">Это было самое начало пути. На этом этапе важно было проникнуться основами и настроиться на учёбу. И, возможно, подумать, как новые знания могут повлиять на ваше будущее.</p>
<p class="paragraph paragraph-2">Вначале было как в темной комнате, в которую ты зашел по доброй воле. Там вроде красиво, комфортно, тепло и все такое, но темно.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item first-sprint-1">
<h2 class="card-title">1 спринт: Я — чистый лист</h2>
<div class = "pic_lable">
<img class="card-img first-sprint-1-img" src="images/1.1sprint.jpg" alt="Бандбинмнтон">
<span aria-hidden="true" class="empty-element"><беззаботно радостно></span>
</div>
<p class="paragraph paragraph-1">На первых этапах мы работали со страхами и сомнениями, которые часто испытывают новички. Один из них — страх перед чистым листом. Это, конечно же, намного сложнее, чем боязнь куска бумаги. Часто за этим ощущением скрываются более глубокие вопросы: с чего начать? а вдруг будет слишком сложно? что, если я не справлюсь?</p>
<p class="paragraph paragraph-2">Вроде получается, даже ощущения радости и беззаботности, как будто в детстве во дворе играешь в банбинктон с девчонками. Есть одно но, у тебя зрение так себе и играешь ты тоже так себе, но в целом да, радостно.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item first-sprint-2">
<h2 class="card-title">1 спринт: А если не получится?</h2>
<div class = "pic_lable">
<img class="card-img first-sprint-2-img" src="images/1.2sprint.jpg" alt="Море">
<span aria-hidden="true" class="empty-element"><нравица></span>
</div>
<p class="paragraph paragraph-1">Первый проект — позади! Но это всё ещё самое начало пути. Радость могла быстро померкнуть и смениться ожиданием провала. Или вы, наоборот, могли вдохновиться успехами и поверить в себя.</p>
<p class="paragraph paragraph-2">Самооценка на уровень выше - сделано что-то своими руками, да и красиво получилось. Идем дальше.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item second-sprint-1">
<h2 class="card-title">2 спринт: Погоня за идеалом</h2>
<div class = "pic_lable">
<img class="card-img second-sprint-1-img" src="images/2.1sprint.JPG" alt="Поход">
<span aria-hidden="true" class="empty-element"><в горку></span>
</div>
<p class="paragraph paragraph-1">На этом этапе вы уже достаточно разбирались в основах вёрстки, чтобы понять, как много ещё впереди. Вы могли попытаться погнаться за идеалом и понять, что он недостижим. А, может, вы вовсе и не подвержены перфекционизму и вместо того, чтобы сделать идеально, старались просто сделать.</p>
<p class="paragraph paragraph-2">А вот дальше такое чувство, как будто ты в походе, идешь уже два часа в гору и не знаешь сколько еще до конечной точки. Интересно, увлекательно, красиво, но в горку.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item second-sprint-2">
<h2 class="card-title">2 спринт: О тех, кто рядом</h2>
<div class = "pic_lable">
<img class="card-img second-sprint-2-img" src="images/2.2sprint.jpg" alt="Друзья">
<span aria-hidden="true" class="empty-element">care</span>
</div>
<p class="paragraph paragraph-1">Всё это время вы были не одиноки (хотя, возможно, иногда и чувствовали, что одни против целого мира). Вас окружали одногруппники, команда сопровождения и просто близкие люди, которым можно пожаловаться, если очередной макет просто так не поддавался. Осваивать что-то новое легче, когда рядом есть единомышленники, не правда ли?</p>
<p class="paragraph paragraph-2">Хорошо, что рядом есть поддержка, любовь, принятие и дружба.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item third-sprint-1">
<h2 class="card-title">3 спринт: Обходные стратегии</h2>
<div class = "pic_lable">
<img class="card-img third-sprint-1-img" src="images/3.1sprint.jpg" alt="Лицо девченки, которая очень устала и не понимает где найти силы">
<span aria-hidden="true" class="empty-element"><уставшее лицо></span>
</div>
<p class="paragraph paragraph-1">На этом курсе вы постоянно решали разные задачи. В какой-то момент вам могло показаться, что решения просто иссякли. Значит, пришло время посмотреть на задачу под другим углом.</p>
<p class="paragraph paragraph-2">Ну тут конечно я притормазила и искала источники силы, до сих пор в поисках, а так все пучком, меня начинает вдохновлять результат и знания, которые не уходят, а накапливаются. ВАУ.</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item third-sprint-2">
<h2 class="card-title">3 спринт: Когда опускаются руки</h2>
<div class = "pic_lable">
<img class="card-img third-sprint-2-img" src="images/3.2sprint.jpg" alt="Котика гладят">
<span aria-hidden="true" class="empty-element"><погладить по голове></span>
</div>
<p class="paragraph paragraph-1">Во время учёбы часто возникает чувство, когда не знаешь, за что хвататься. Вроде и проектную пора сдавать, и задачи хочется порешать, и в теории получше разобраться, и жизнь не забыть пожить. В такие моменты очень нужна концентрация. Вспомните, откуда вы её черпали.</p>
<p class="paragraph paragraph-2">А тут похвалила себя и пошла дальше (то есть в другую кагорту ха-ха)!</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
<li class="cards__item forth-sprint">
<h2 class="card-title">«Сейчас я здесь»</h2>
<div class = "pic_lable">
<img class="card-img forth-sprint-img" src="images/4sprint.jpg" alt="Портал в виде зеркала">
<span aria-hidden="true" class="empty-element"><портал></span>
</div>
<p class="paragraph paragraph-1">Сейчас вы уже очень много знаете о вёрстке. Но это только начало. Во-первых, впереди ещё много материала про «красотищу». Во-вторых, с окончанием курса учёба не заканчивается. Вёрстка — это целый мир. И этот мир постоянно меняется. Познать его полностью не получится, но это тот случай, когда важен сам процесс познания. Ведь часто путь — и есть результат.</p>
<p class="paragraph paragraph-2">Сдаду проект, выдохну и пойду дальше в этот портал. Спасибо!</p>
<span class="like-button">
<button type="button" class="card__icon-button">
<svg class="like-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="36" fill="none" viewBox="0 0 39 36">
<g class="heart">
<path fill="var(--heart-contur-color)" d="M12 6H9v3h3V6Zm3 0h-3v3h3V6ZM9 9H6v3h3V9Zm0 3H6v3h3v-3Zm0 3H6v3h3v-3Zm9-9h-3v3h3V6Zm-6 12H9v3h3v-3Zm3 3h-3v3h3v-3Zm3 3h-3v3h3v-3Zm9-18h3v3h-3V6Zm-3 0h3v3h-3V6Zm6 3h3v3h-3V9Zm0 3h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-9-9h3v3h-3V6Zm6 12h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm-3 3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0-18h-3v3h3V9Z" class="contour"/>
<path fill="var(--main-body-color)" d="M12 9H9v3h3V9Zm3 3h-3v3h3v-3Zm3-3h-3v3h3V9Zm-6 6H9v3h3v-3Zm3 0h-3v3h3v-3Zm0 3h-3v3h3v-3Zm3-6h-3v3h3v-3Zm0 9h-3v3h3v-3Zm0-3h-3v3h3v-3Zm9-9h3v3h-3V9Zm-3 0h3v3h-3V9Zm3 3h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm-3-3h3v3h-3V9Zm6 6h3v3h-3v-3Zm-3 0h3v3h-3v-3Zm0 3h3v3h-3v-3Zm-3-6h3v3h-3v-3Zm0 9h3v3h-3v-3Zm0-3h3v3h-3v-3Zm0 3h-3v3h3v-3Zm0 3h-3v3h3v-3Z" class="main-body"/>
<path fill="var(--core-color)" d="M18 15h-3v3h3v-3Zm3 0h3v3h-3v-3Zm0 0h-3v3h3v-3Zm0-3h-3v3h3v-3Zm0 6h-3v3h3v-3Z" class="core"/>
</g>
<path fill="red" d="M36 13h3v3h-3v-3Zm-9 14h3v3h-3v-3Zm-9 6h3v3h-3v-3Zm-9-6h3v3H9v-3ZM24 0h3v3h-3V0Zm9 3h3v3h-3V3ZM3 3h3v3H3V3Zm9-3h3v3h-3V0ZM0 13h3v3H0v-3Z" class="sparks"/>
</svg>
</button>
<button type="button" class="card__like-button">
<span class="button__text">Like</span>
</button>
</span>
</li>
</ul>
<button
type="button"
onclick="window['dialog-id'].showModal()"
aria-controls="dialog-id"
class="save__botton"
>
<span class="floppy-icon botton-floop-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none" viewBox="0 0 21 21">
<use href="./svg/floppy.svg#button-floppy" fill="var(--botton-difference)"></use>
</svg>
</span>
<span class="save-text">Сохранить на память</span>
</button>
<dialog id="dialog-id">
<div class="opened-dialog">
<div class="floppy-icon dialog-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" fill="none" viewBox="0 0 21 21">
<use href="./svg/floppy.svg#button-floppy" fill="var(--accent-color)"></use>
</svg>
</div>
<h2 class="dialog-text">Вставьте дискету, чтобы продолжить</h2>
<form method="dialog" class="popup-container">
<button type="submit" class="popup-button">
<span class="popup-button-text">ок</span>
</button>
</form>
</div>
</dialog>
</main>
<script src="./scripts/like.js"></script>
</body>
</html>