-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
396 lines (354 loc) · 30.4 KB
/
index.html
File metadata and controls
396 lines (354 loc) · 30.4 KB
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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!DOCTYPE html>
<html lang="ru">
<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>Сайт с мини-играми</title>
<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header center">
<div class="header__star-wrapper">
<svg class="header__star-position header__star-big" viewBox="0 0 999.251 923.195"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="999.250977"
height="923.195312" fill="none">
<path id="Vector1"
d="M262.063 294.173C262.063 284.386 298.602 0 298.602 0L402.19 254.969L572.775 16.3679L490.576 300.754L749.546 241.919L502.738 395.53L691.618 575.296L463.106 483.782L527.062 758.381L377.761 529.567L210.217 791.061L262.011 483.782L0 503.413L237.634 395.53L0 209.183L262.063 294.173Z"
fill="rgb(188,236,48)" fill-rule="nonzero"
transform="matrix(-0.316421,0.948619,-0.963363,-0.268199,999.251,212.162)" />
<path id="Vector2"
d="M298.602 0L402.19 254.969L572.775 16.3679L490.576 300.754L749.546 241.919L502.738 395.53L691.618 575.296L463.106 483.782L527.062 758.381L377.761 529.567L210.217 791.061L262.011 483.782L0 503.413L237.634 395.53L0 209.183L262.063 294.173C262.063 284.386 298.602 0 298.602 0Z"
fill-rule="nonzero" stroke="rgb(32,32,39)" stroke-linecap="round" stroke-width="1"
transform="matrix(-0.316421,0.948619,-0.963363,-0.268199,999.251,212.162)" />
</svg>
<svg class="header__star-position header__star-big-beam1" viewBox="0 0 318.417 164.003"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="318.417480"
height="164.002594" fill="none">
<path id="Vector4780" d="M241.293 0.502007L317.5 88.8819L0.500488 163.502" stroke="rgb(32,32,39)"
stroke-linecap="round" stroke-width="1" />
</svg>
<svg class="header__star-position header__star-big-beam2" viewBox="0 0 143.537 180.002"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="143.536621"
height="180.001953" fill="none">
<path id="Vector4781" d="M18.5844 0.5L142.502 0.5L0.501953 179.5" stroke="rgb(32,32,39)"
stroke-linecap="round" stroke-width="1" />
</svg>
<svg class="header__star-position header__star-big-beam3" viewBox="0 0 220.884 419.323"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220.884277"
height="419.322906" fill="none">
<path id="Vector4782" d="M0.501953 79.8677L114.262 0.822235L220.383 418.822" stroke="rgb(32,32,39)"
stroke-linecap="round" stroke-width="1" />
</svg>
<svg class="header__star-position header__star-big-beam4" viewBox="0 0 81.4814 128.334"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81.481445"
height="128.333801" fill="none">
<path id="Vector4788" d="M56.8884 1.04858L0.729492 59.8133L80.7295 127.049L56.8884 1.04858Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
<path id="Vector4789" d="M56.8884 1.04858L80.7295 127.049L0.729492 59.8133L56.8884 1.04858Z"
fill-rule="evenodd" stroke="rgb(32,32,39)" stroke-linecap="round" stroke-width="1" />
</svg>
<svg class="header__star-position header__star-big-beam5" viewBox="0 0 35.002 125.001"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.001953"
height="125.001465" fill="none">
<path id="Vector4791" d="M0.500977 0.500732L34.501 124.501" stroke="rgb(32,32,39)"
stroke-linecap="round" stroke-width="1" />
</svg>
<svg class="header__star-position header__star1" viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="35.000000" height="35.000000" fill="none">
<path id="Star_3"
d="M22.2266 12.7734L18.0331 1.44077L17.5 0L16.9669 1.44077L12.7734 12.7734L1.44077 16.9669L3.55271e-15 17.5L1.44077 18.0331L12.7734 22.2266L16.9669 33.5592L17.5 35L18.0331 33.5592L22.2266 22.2266L33.5592 18.0331L35 17.5L33.5592 16.9669L22.2266 12.7734ZM32.1185 17.5L21.8796 13.7113L21.4483 13.5517L17.5 2.88154L13.5517 13.5517L2.88154 17.5L13.5517 21.4483L17.5 32.1185L21.4483 21.4483L32.1185 17.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__star2" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="57.000000" height="57.000000" fill="none">
<path id="header__star2"
d="M36.1976 20.8024L57 28.5L36.1976 36.1976L28.5 57L20.8024 36.1976L3.55271e-15 28.5L20.8024 20.8024L28.5 0L36.1976 20.8024Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
<path id="Star_2"
d="M36.1976 20.8024L29.0331 1.44077L28.5 0L27.9669 1.44077L20.8024 20.8024L1.44077 27.9669L3.55271e-15 28.5L1.44077 29.0331L20.8024 36.1976L27.9669 55.5592L28.5 57L29.0331 55.5592L36.1976 36.1976L55.5592 29.0331L57 28.5L55.5592 27.9669L36.1976 20.8024ZM54.1185 28.5L35.8505 21.7403L35.4193 21.5807L28.5 2.88154L21.5807 21.5807L2.88154 28.5L21.5807 35.4193L28.5 54.1185L35.4193 35.4193L54.1185 28.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__star3" viewBox="0 0 37 37" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="37.000000" height="37.000000" fill="none">
<path id="header__star3"
d="M23.4967 13.5033L37 18.5L23.4967 23.4967L18.5 37L13.5033 23.4967L3.55271e-15 18.5L13.5033 13.5033L18.5 0L23.4967 13.5033Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
<path id="header__star-3"
d="M23.4967 13.5033L19.0331 1.44077L18.5 0L17.9669 1.44077L13.5033 13.5033L1.44077 17.9669L3.55271e-15 18.5L1.44077 19.0331L13.5033 23.4967L17.9669 35.5592L18.5 37L19.0331 35.5592L23.4967 23.4967L35.5592 19.0331L37 18.5L35.5592 17.9669L23.4967 13.5033ZM34.1185 18.5L23.1496 14.4412L22.7184 14.2816L18.5 2.88154L14.2816 14.2816L2.88154 18.5L14.2816 22.7184L18.5 34.1185L22.7184 22.7184L34.1185 18.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__star4" viewBox="0 0 83 83" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="83.000000" height="83.000000" fill="none">
<path id="header__star4"
d="M52.7088 30.2912L42.0331 1.44077L41.5 0L40.9669 1.44077L30.2912 30.2912L1.44077 40.9669L7.10543e-15 41.5L1.44077 42.0331L30.2912 52.7088L40.9669 81.5592L41.5 83L42.0331 81.5592L52.7088 52.7088L81.5592 42.0331L83 41.5L81.5592 40.9669L52.7088 30.2912ZM80.1185 41.5L52.3617 31.2291L51.9305 31.0695L41.5 2.88154L31.0695 31.0695L2.88154 41.5L31.0695 51.9305L41.5 80.1185L51.9305 51.9305L80.1185 41.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
</div>
<div class="header__mobile-wrapper">
<svg class="header__star-position header__mobile-star-big" viewBox="0 0 301.643 274.928"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="301.643066"
height="274.927948" fill="none">
<path id="Vector3"
d="M78.1499 88.7162C78.1499 85.7646 89.0463 0 89.0463 0L119.937 76.893L170.807 4.93622L146.295 90.7009L223.522 72.9576L149.922 119.283L206.248 173.497L138.103 145.898L157.175 228.711L112.652 159.706L62.6889 238.567L78.1344 145.898L0 151.818L70.865 119.283L0 63.0852L78.1499 88.7162Z"
fill="rgb(188,236,48)" fill-rule="nonzero"
transform="matrix(-0.320303,0.947315,-0.964293,-0.264839,301.643,63.1819)" />
<path id="Vector4"
d="M89.0463 0L119.937 76.893L170.807 4.93622L146.295 90.7009L223.522 72.9576L149.922 119.283L206.248 173.497L138.103 145.898L157.175 228.711L112.652 159.706L62.6889 238.567L78.1344 145.898L0 151.818L70.865 119.283L0 63.0852L78.1499 88.7162C78.1499 85.7646 89.0463 0 89.0463 0Z"
fill-rule="nonzero" stroke="rgb(32,32,39)" stroke-linecap="round" stroke-width="1"
transform="matrix(-0.320303,0.947315,-0.964293,-0.264839,301.643,63.1819)" />
</svg>
<svg class="header__star-position header__mobile-star-1" viewBox="0 0 21 21"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.000000"
height="21.000000" fill="none">
<path id="Star3"
d="M13.336 7.66405L10.5 0L9.96687 1.44077L7.66405 7.66405L1.44077 9.96687L1.77636e-15 10.5L1.44077 11.0331L7.66405 13.336L9.96687 19.5592L10.5 21L11.0331 19.5592L13.336 13.336L19.5592 11.0331L21 10.5L19.5592 9.96687L13.336 7.66405ZM18.1185 10.5L12.9889 8.6019L12.5577 8.44232L10.5 2.88154L8.44232 8.44232L2.88154 10.5L8.44232 12.5577L10.5 18.1185L12.5577 12.5577L18.1185 10.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__mobile-star-2" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.000000"
height="35.000000" fill="none">
<path id="header__mobile-star-2"
d="M22.2266 12.7734L35 17.5L22.2266 22.2266L17.5 35L12.7734 22.2266L3.55271e-15 17.5L12.7734 12.7734L17.5 0L22.2266 12.7734Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
<path id="Star2"
d="M22.2266 12.7734L18.0331 1.44077L17.5 0L16.9669 1.44077L12.7734 12.7734L1.44077 16.9669L3.55271e-15 17.5L1.44077 18.0331L12.7734 22.2266L16.9669 33.5592L17.5 35L18.0331 33.5592L22.2266 22.2266L33.5592 18.0331L35 17.5L33.5592 16.9669L22.2266 12.7734ZM32.1185 17.5L21.8796 13.7113L21.4483 13.5517L17.5 2.88154L13.5517 13.5517L2.88154 17.5L13.5517 21.4483L17.5 32.1185L21.4483 21.4483L32.1185 17.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__mobile-star-3" viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.000000"
height="18.000000" fill="none">
<path id="Star_5"
d="M11.4308 6.56918L18 9L11.4308 11.4308L9 18L6.56918 11.4308L1.77636e-15 9L6.56918 6.56918L9 0L11.4308 6.56918Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
<path id="Star5"
d="M11.4308 6.56918L9.53313 1.44077L9 0L8.46687 1.44077L6.56918 6.56918L1.44077 8.46687L1.77636e-15 9L1.44077 9.53313L6.56918 11.4308L8.46687 16.5592L9 18L11.4308 11.4308L16.5592 9.53313L18 9L16.5592 8.46687L11.4308 6.56918ZM15.1185 9L11.0838 7.50703L10.6525 7.34746L9 2.88154L7.34746 7.34746L2.88154 9L7.34746 10.6525L9 15.1185L10.6525 10.6525L15.1185 9Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
<svg class="header__star-position header__mobile-star-4" viewBox="0 0 39 41"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39.000000"
height="41.000000" fill="none">
<path id="header__mobile-star-4"
d="M24.7668 14.9631L20.0301 1.50595L19.5 0L18.9699 1.50595L14.2332 14.9631L1.37914 19.9635L3.55271e-15 20.5L1.37914 21.0365L14.2332 26.0369L18.9699 39.494L19.5 41L20.0301 39.494L24.7668 26.0369L37.6209 21.0365L39 20.5L37.6209 19.9635L24.7668 14.9631ZM36.2417 20.5L24.4042 15.8951L23.976 15.7285L19.5 3.0119L15.024 15.7285L2.75829 20.5L15.024 25.2715L19.5 37.9881L23.976 25.2715L36.2417 20.5Z"
fill="rgb(32,32,39)" fill-rule="evenodd" />
</svg>
</div>
<div class="header__text">
<h1 class="header__heading">Добро пожаловать <br>на мой сайт мини-игр</h1>
<h3 class="header__description">Тебе предстоит пройти несколько увлекательных игр. Если готов, нажимай
<strong>
«Поехали!» </strong> и <strong>приступай.</strong>
</h3>
<a class="header__link link smooth-scroll" href="#about-section">Поехали!</a>
</div>
</header>
<div class="scrollbar">
<div class="scrollbar__box">
<p class="scrollbar__text">Викторина</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
<p class="scrollbar__text">угадай число</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
<p class="scrollbar__text">Переверни текст</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
<p class="scrollbar__text">Простая арифметика</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
<p class="scrollbar__text">Камень, ножницы, бумага</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
<p class="scrollbar__text">Генератор случайных цветов</p>
<img class="scrollbar__img" src="img/Stars/Star__scrollbar.png" alt="Picture">
<img class="scrollbar__img__mobile" src="img/Stars/mobili__star__scrollbar.png" alt="Picture">
</div>
</div>
<main class="main">
<div class="main__content-wrapper">
<svg class="main__star-position main__star-big" viewBox="0 0 649.562 649.563"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="649.562500"
height="649.562744" fill="none">
<defs>
<filter id="filter_0" width="649.562500" height="649.562744" x="0.000000" y="0.000000"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feOffset dx="0.000000" dy="4.000000" in="SourceAlpha" />
<feGaussianBlur stdDeviation="1.33333337" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0 " />
<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
</filter>
</defs>
<g filter="url(#filter_0)">
<path id="Star1"
d="M341.736 191.327L340.81 191.746L340.562 190.761L292.874 2.04089L292.358 0L291.843 2.04089L244.155 190.761L243.906 191.746L242.981 191.327L65.7006 110.945L63.7834 110.076L65.0575 111.751L182.872 266.7L183.487 267.509L182.582 267.971L9.20501 356.457L7.33004 357.414L9.43456 357.463L204.035 361.96L205.05 361.984L204.847 362.98L165.93 553.701L165.509 555.764L166.859 554.149L291.707 404.809L292.358 404.029L293.01 404.809L417.858 554.149L419.208 555.764L418.787 553.701L379.869 362.98L379.666 361.984L380.682 361.961L575.282 357.463L577.387 357.414L575.512 356.457L402.134 267.971L401.229 267.509L401.844 266.7L519.659 111.752L520.933 110.076L519.016 110.945L341.736 191.327ZM517.742 112.621L341.223 192.657L340.134 193.151L292.358 4.08177L244.583 193.151L66.9747 112.621L185.007 267.856L11.3095 356.506L206.269 361.012L167.28 552.086L292.358 402.47L417.437 552.086L378.447 361.012L573.407 356.506L399.709 267.856L517.742 112.621Z"
fill="rgb(188,236,48)" fill-rule="evenodd"
transform="matrix(0.993029,-0.117873,0.117873,0.993029,0,68.9225)" />
</g>
</svg>
<svg class="main__star-position main__star1" viewBox="0 0 34.1729 34.1727"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34.172852"
height="34.172729" fill="none">
<path id="Star11"
d="M19.9018 11.4374L16.2028 1.44077L15.6696 0L15.1365 1.44077L11.4374 11.4374L1.44077 15.1365L1.77636e-15 15.6696L1.44077 16.2028L11.4374 19.9018L15.1365 29.8985L15.6696 31.3392L16.2028 29.8985L19.9018 19.9018L29.8985 16.2028L31.3392 15.6696L29.8985 15.1365L19.9018 11.4374ZM28.4577 15.6696L19.5548 12.3753L19.1236 12.2157L15.6696 2.88154L12.2157 12.2157L2.88154 15.6696L12.2157 19.1236L15.6696 28.4577L19.1236 19.1236L28.4577 15.6696Z"
fill="rgb(188,236,48)" fill-rule="evenodd"
transform="matrix(0.995484,0.0949294,-0.0949294,0.995484,2.9751,0)" />
</svg>
<svg class="main__star-position main__star2" viewBox="0 0 59.5347 59.5347"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="59.534668"
height="59.534668" fill="none">
<path id="Star12"
d="M34.6724 19.9259L27.8323 1.44077L27.2991 0L26.766 1.44077L19.9259 19.9259L1.44077 26.766L3.55271e-15 27.2991L1.44077 27.8323L19.9259 34.6724L26.766 53.1575L27.2991 54.5983L27.8323 53.1575L34.6724 34.6724L53.1575 27.8323L54.5983 27.2991L53.1575 26.766L34.6724 19.9259ZM51.7167 27.2991L34.3254 20.8637L33.8941 20.7042L27.2991 2.88154L20.7042 20.7042L2.88154 27.2991L20.7042 33.8941L27.2991 51.7167L33.8941 33.8941L51.7167 27.2991Z"
fill="rgb(188,236,48)" fill-rule="evenodd"
transform="matrix(0.995484,0.0949294,-0.0949294,0.995484,5.18311,0)" />
</svg>
<svg class="main__star-position main__star3" viewBox="0 0 39.2119 39.2119"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39.211914"
height="39.211914" fill="none">
<path id="Star7"
d="M22.319 12.8265L18.1059 1.44077L17.5728 0L17.0396 1.44077L12.8265 12.8265L1.44077 17.0396L3.55271e-15 17.5728L1.44077 18.1059L12.8265 22.319L17.0396 33.7048L17.5728 35.1455L18.1059 33.7048L22.319 22.319L33.7048 18.1059L35.1455 17.5728L33.7048 17.0396L22.319 12.8265ZM32.264 17.5728L21.972 13.7644L21.5407 13.6048L17.5728 2.88154L13.6048 13.6048L2.88154 17.5728L13.6048 21.5407L17.5728 32.264L21.5407 21.5407L32.264 17.5728Z"
fill="rgb(188,236,48)" fill-rule="evenodd"
transform="matrix(0.992365,0.123334,-0.123334,0.992365,4.33447,0)" />
</svg>
<svg class="main__star-position main__star4" viewBox="0 0 75.0879 75.0876"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75.087891"
height="75.087646" fill="none">
<path id="Star6"
d="M43.7303 25.1314L34.964 1.44077L34.4309 0L33.8977 1.44077L25.1314 25.1314L1.44077 33.8977L7.10543e-15 34.4309L1.44077 34.964L25.1314 43.7303L33.8977 67.4209L34.4308 68.8617L34.964 67.4209L43.7303 43.7303L67.4209 34.964L68.8617 34.4309L67.4209 33.8977L43.7303 25.1314ZM65.9802 34.4309L43.3833 26.0692L42.952 25.9097L34.4309 2.88154L25.9097 25.9097L2.88154 34.4309L25.9097 42.952L34.4308 65.9802L42.952 42.952L65.9802 34.4309Z"
fill="rgb(188,236,48)" fill-rule="evenodd"
transform="matrix(0.995484,0.0949294,-0.0949294,0.995484,6.53711,0)" />
</svg>
<svg class="main__star-position main__star5" viewBox="0 0 41 41" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="41.000000" height="41.000000" fill="none">
<path id="Star10"
d="M26.0369 14.9631L21.0331 1.44077L20.5 0L19.9669 1.44077L14.9631 14.9631L1.44077 19.9669L3.55271e-15 20.5L1.44077 21.0331L14.9631 26.0369L19.9669 39.5592L20.5 41L21.0331 39.5592L26.0369 26.0369L39.5592 21.0331L41 20.5L39.5592 19.9669L26.0369 14.9631ZM38.1185 20.5L25.6898 15.901L25.2586 15.7414L20.5 2.88154L15.7414 15.7414L2.88154 20.5L15.7414 25.2586L20.5 38.1185L25.2586 25.2586L38.1185 20.5Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
</svg>
<svg class="main__star-position main__star6" viewBox="0 0 69 69" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="69.000000" height="69.000000" fill="none">
<path id="Star8"
d="M43.8181 25.1819L35.0331 1.44077L34.5 0L33.9669 1.44077L25.1819 25.1819L1.44077 33.9669L7.10543e-15 34.5L1.44077 35.0331L25.1819 43.8181L33.9669 67.5592L34.5 69L35.0331 67.5592L43.8181 43.8181L67.5592 35.0331L69 34.5L67.5592 33.9669L43.8181 25.1819ZM66.1185 34.5L43.4711 26.1197L43.0399 25.9601L34.5 2.88154L25.9601 25.9601L2.88154 34.5L25.9601 43.0399L34.5 66.1185L43.0399 43.0399L66.1185 34.5Z"
fill="rgb(188,236,48)" fill-rule="evenodd" />
</svg>
</div>
<section class="about center" id="about-section">
<h2 class="about__heading">Об играх</h2>
<h3 class="about__text">В моей коллекции представлено 6 игр на разные темы. Игры несложные — в них может
поиграть каждый. Все игры доступны для пользования.</h3>
<div class="about__game-box">
<article class="about__game position-game-1">
<a class="smooth-scroll" href="#content__game-guess-the-number">
<img class="about__game-img" src="img/about__game1.jpg" alt="Угадай число">
<span class="about__game-number">Игра № 1</span>
<h4 class="about__game-name">Угадай число</h4>
</a>
</article>
<article class="about__game position-game-2">
<a class="smooth-scroll" href="#content__game-simple-arithmetic">
<img class="about__game-img" src="img/about__game2.jpg" alt="Простая арифметика">
<span class="about__game-number">Игра № 2</span>
<h4 class="about__game-name">Простая арифметика</h4>
</a>
</article>
<article class="about__game position-game-3">
<a class="smooth-scroll" href="#content__game-flip-the-text">
<img class="about__game-img" src="img/about__game3.jpg" alt="Переверни текст">
<span class="about__game-number">Игра № 3</span>
<h4 class="about__game-name">Переверни текст</h4>
</a>
</article>
<article class="about__game position-game-4">
<a class="smooth-scroll" href="#content__game-rock-paper-scissors">
<img class="about__game-img" src="img/about__game4.jpg" alt="Камень, ножницы, бумага">
<span class="about__game-number">Игра № 4</span>
<h4 class="about__game-name about__game-width">Камень, ножницы, бумага</h4>
</a>
</article>
<article class="about__game position-game-5">
<a class="smooth-scroll" href="#content__game-simple-quiz">
<img class="about__game-img" src="img/about__game5.jpg" alt="Простая викторина">
<span class="about__game-number">Игра № 5</span>
<h4 class="about__game-name about__game-width">Простая викторина</h4>
</a>
</article>
<article class="about__game position-game-6">
<a class="smooth-scroll" href="#content__game-random-color-generator">
<img class="about__game-img" src="img/about__game6.jpg" alt="Генератор случайных цветов">
<span class="about__game-number">Игра № 6</span>
<h4 class="about__game-name about__game-width">Генератор случайных цветов</h4>
</a>
</article>
</div>
</section>
<section class="content center">
<h2 class="content__heading">Мини-игры</h2>
<article class="content__game content__game-reverse" id="content__game-guess-the-number">
<div class="content__game-text">
<h4 class="content__game-name">Угадай число</h4>
<span class="content__game-info">Попробуй угадать случайное число от 1 до 100.</span>
<a class="content__link link" href="#" onclick="guessTheNumber();">Играть!</a>
</div>
<div class="content__game-img img-game-1">
</div>
</article>
<article class="content__game content__game-column" id="content__game-simple-arithmetic">
<div class="content__game-img img-game-2">
</div>
<div class="content__game-text">
<h4 class="content__game-name">Простая арифметика</h4>
<span class="content__game-info">Попробуй решить простые арифметические задачи.</span>
<a class="content__link link" href="#" onclick="simpleArithmetic();">Играть!</a>
</div>
</article>
<article class="content__game content__game-reverse" id="content__game-flip-the-text">
<div class="content__game-text">
<h4 class="content__game-name">Переверни текст</h4>
<span class="content__game-info">Попробуй ввести текст, который будет перевернут.</span>
<a class="content__link link" href="#" onclick="flipTheText();">Играть!</a>
</div>
<div class="content__game-img img-game-3">
</div>
</article>
<article class="content__game content__game-column" id="content__game-rock-paper-scissors">
<div class="content__game-img img-game-4">
</div>
<div class="content__game-text">
<h4 class="content__game-name">Камень,<br>ножницы,<br>бумага</h4>
<span class="content__game-info">Сыграй в популярную игру против компьютера.</span>
<a class="content__link link" href="#" onclick="rockPaperScissors();">Играть!</a>
</div>
</article>
<article class=" content__game content__game-reverse" id="content__game-simple-quiz">
<div class="content__game-text">
<h4 class="content__game-name">Простая викторина</h4>
<span class="content__game-info"> Отвечай на вопросы викторины с вариантами
ответов.</span>
<a class="content__link link" href="#" onclick="simpleQuiz();">Играть!</a>
</div>
<div class="content__game-img img-game-5">
</div>
</article>
<article class="content__game content__game-column" id="content__game-random-color-generator">
<div class="content__game-img img-game-6">
</div>
<div class="content__game-text">
<h4 class="content__game-name">Генератор случайных<br>цветов</h4>
<span class="content__game-info">Игра, в которой при клике на кнопку фон страницы меняется на
случайный.</span>
<a class="content__link link link-game-6" href="#" onclick="randomColorGenerator();">Играть!</a>
<button class="content__btn" style="display: none;">Поменять фон</button>
</div>
</article>
</section>
</main>
<footer class="footer center">
<h3 class="footer__text">Все права защищены.</h3>
</footer>
<script src="index.js"></script>
</body>
</html>