├── .vscode
└── settings.json
├── adaptive.html
├── all_forms.html
├── blocks.html
├── bootstrap.html
├── border.html
├── dist
├── style.css
└── template.css
├── flex.html
├── form_resut.html
├── forms.html
├── heart.html
├── img
├── 14599548cf809a7a93f08f5671e4eb34.jpg
├── cat_box_256.png
├── cat_box_64.png
├── cat_cage_256.png
├── cat_cage_64.png
├── cat_clean_256.png
├── cat_clean_64.png
├── cat_eyes_256.png
├── cat_eyes_64.png
├── cat_purr_256.png
├── cat_purr_64.png
├── cat_tied_256.png
├── cat_tied_64.png
├── favorites.png
├── i.webp
├── original.jpg
├── snake.svg
└── snake2.svg
├── index.html
├── loader.html
├── max600.css
├── pseudo.html
├── pz1.html
├── readme.md
├── style.css
├── style.scss
└── template.scss
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "compile-hero.disable-compile-files-on-did-save-code": false
3 | }
--------------------------------------------------------------------------------
/adaptive.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
138 |
139 |
140 |
157 |
158 |
159 | Lorem ipsum dolor
160 |
161 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio id non voluptas est ullam. Temporibus nostrum cumque, veritatis cum voluptas ullam eos veniam fuga, aperiam, saepe ex minima quas iste!
162 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio id non voluptas est ullam. Temporibus nostrum cumque, veritatis cum voluptas ullam eos veniam fuga, aperiam, saepe ex minima quas iste!
163 |
164 |
165 |
166 | List
167 |
168 | item 1
169 | item 2
170 | item 3
171 | item 4
172 | item 5
173 |
174 |
175 |
176 | Lorem
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 | Copyright 2024
192 |
193 |
194 |
195 |
196 |
--------------------------------------------------------------------------------
/all_forms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | replit
8 |
9 |
18 |
19 |
20 |
21 |
22 |
50 |
132 |
133 |
134 |
135 |
136 |
137 |
--------------------------------------------------------------------------------
/blocks.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
23 |
24 |
25 |
26 |
27 |
28 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/bootstrap.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
120 |
121 |
122 |
123 | dsfsdfs
124 | dsfsdfs
125 | dsfsdfs
126 | dsfsdfs
127 | dsfsdfs
128 | dsfsdfs
129 |
130 |
131 |
132 |
133 |
134 | #
135 | Имя
136 | Фамилия
137 | Обращение
138 |
139 |
140 |
141 |
142 | 1
143 | Mark😁
144 | Otto
145 | @mdo
146 |
147 |
148 | 2
149 | Jacob
150 | Thornton
151 | @fat
152 |
153 |
154 | 3
155 | Larry the Bird
156 | @twitter
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
176 |
182 |
183 | This is the first item's accordion body.
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
203 | Home
204 |
205 |
206 |
207 |
217 | Profile
218 |
219 |
220 |
221 |
231 | Messages
232 |
233 |
234 |
235 |
236 |
237 |
238 |
244 | home
245 |
246 |
252 | profile
253 |
254 |
260 | messages
261 |
262 |
263 |
264 |
265 |
266 |
273 | kjhdfkghkjufd
274 |
275 |
276 |
277 |
279 |
280 |
--------------------------------------------------------------------------------
/border.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/dist/style.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | }
6 |
7 | .name {
8 | width: 6;
9 | border: 1px solid gray;
10 | display: block;
11 | position: absolute;
12 | }
13 |
14 | p {
15 | border: 1px solid;
16 | border: 2px dotted;
17 | }
18 |
19 | * {
20 | text-align: center;
21 | }
22 | * .margin-1 {
23 | margin: 5px;
24 | }
25 | * .margin-2 {
26 | margin: 10px;
27 | }
28 | * .margin-3 {
29 | margin: 15px;
30 | }
31 | * .margin-4 {
32 | margin: 20px;
33 | }
34 | * .margin-5 {
35 | margin: 25px;
36 | }
37 | * .margin-6 {
38 | margin: 30px;
39 | }
40 | * .margin-7 {
41 | margin: 35px;
42 | }
43 | * .margin-8 {
44 | margin: 40px;
45 | }
46 | * .margin-9 {
47 | margin: 45px;
48 | }
49 | * .margin-10 {
50 | margin: 50px;
51 | }
52 |
53 | .centered-elements {
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | border: 1px solid gray;
58 | }
59 |
60 | .box {
61 | -webkit-border-radius: 10px;
62 | -moz-border-radius: 10px;
63 | -ms-border-radius: 10px;
64 | -o-border-radius: 10px;
65 | border-radius: 10px;
66 | }
67 |
68 | .d-none {
69 | display: none;
70 | }
71 |
72 | .d-flex {
73 | display: flex;
74 | }
75 |
76 | .d-block {
77 | display: block;
78 | }
79 |
80 | .d-inline {
81 | display: inline;
82 | }
83 |
84 | .d-inline-flex {
85 | display: inline-flex;
86 | }
87 |
88 | .d-inline-grid {
89 | display: inline-grid;
90 | }
91 |
92 | .d-grid {
93 | display: grid;
94 | }
95 |
96 | @media screen and (max-width: 500px) {
97 | .d-sm-none {
98 | display: none;
99 | }
100 | }
101 |
102 | @media screen and (max-width: 500px) {
103 | .d-sm-flex {
104 | display: flex;
105 | }
106 | }
107 |
108 | @media screen and (max-width: 500px) {
109 | .d-sm-block {
110 | display: block;
111 | }
112 | }
113 |
114 | @media screen and (max-width: 500px) {
115 | .d-sm-inline {
116 | display: inline;
117 | }
118 | }
119 |
120 | @media screen and (max-width: 500px) {
121 | .d-sm-inline-flex {
122 | display: inline-flex;
123 | }
124 | }
125 |
126 | @media screen and (max-width: 500px) {
127 | .d-sm-inline-grid {
128 | display: inline-grid;
129 | }
130 | }
131 |
132 | @media screen and (max-width: 500px) {
133 | .d-sm-grid {
134 | display: grid;
135 | }
136 | }
137 |
138 | @media screen and (max-width: 700px) {
139 | .d-sm-none {
140 | display: none;
141 | }
142 | }
143 |
144 | @media screen and (max-width: 700px) {
145 | .d-sm-flex {
146 | display: flex;
147 | }
148 | }
149 |
150 | @media screen and (max-width: 700px) {
151 | .d-sm-block {
152 | display: block;
153 | }
154 | }
155 |
156 | @media screen and (max-width: 700px) {
157 | .d-sm-inline {
158 | display: inline;
159 | }
160 | }
161 |
162 | @media screen and (max-width: 700px) {
163 | .d-sm-inline-flex {
164 | display: inline-flex;
165 | }
166 | }
167 |
168 | @media screen and (max-width: 700px) {
169 | .d-sm-inline-grid {
170 | display: inline-grid;
171 | }
172 | }
173 |
174 | @media screen and (max-width: 700px) {
175 | .d-sm-grid {
176 | display: grid;
177 | }
178 | }
179 |
180 | @media screen and (max-width: 1000px) {
181 | .d-sm-none {
182 | display: none;
183 | }
184 | }
185 |
186 | @media screen and (max-width: 1000px) {
187 | .d-sm-flex {
188 | display: flex;
189 | }
190 | }
191 |
192 | @media screen and (max-width: 1000px) {
193 | .d-sm-block {
194 | display: block;
195 | }
196 | }
197 |
198 | @media screen and (max-width: 1000px) {
199 | .d-sm-inline {
200 | display: inline;
201 | }
202 | }
203 |
204 | @media screen and (max-width: 1000px) {
205 | .d-sm-inline-flex {
206 | display: inline-flex;
207 | }
208 | }
209 |
210 | @media screen and (max-width: 1000px) {
211 | .d-sm-inline-grid {
212 | display: inline-grid;
213 | }
214 | }
215 |
216 | @media screen and (max-width: 1000px) {
217 | .d-sm-grid {
218 | display: grid;
219 | }
220 | }
221 |
222 | @media screen and (max-width: 1400px) {
223 | .d-sm-none {
224 | display: none;
225 | }
226 | }
227 |
228 | @media screen and (max-width: 1400px) {
229 | .d-sm-flex {
230 | display: flex;
231 | }
232 | }
233 |
234 | @media screen and (max-width: 1400px) {
235 | .d-sm-block {
236 | display: block;
237 | }
238 | }
239 |
240 | @media screen and (max-width: 1400px) {
241 | .d-sm-inline {
242 | display: inline;
243 | }
244 | }
245 |
246 | @media screen and (max-width: 1400px) {
247 | .d-sm-inline-flex {
248 | display: inline-flex;
249 | }
250 | }
251 |
252 | @media screen and (max-width: 1400px) {
253 | .d-sm-inline-grid {
254 | display: inline-grid;
255 | }
256 | }
257 |
258 | @media screen and (max-width: 1400px) {
259 | .d-sm-grid {
260 | display: grid;
261 | }
262 | }
263 |
264 | @media screen and (max-width: 1600px) {
265 | .d-sm-none {
266 | display: none;
267 | }
268 | }
269 |
270 | @media screen and (max-width: 1600px) {
271 | .d-sm-flex {
272 | display: flex;
273 | }
274 | }
275 |
276 | @media screen and (max-width: 1600px) {
277 | .d-sm-block {
278 | display: block;
279 | }
280 | }
281 |
282 | @media screen and (max-width: 1600px) {
283 | .d-sm-inline {
284 | display: inline;
285 | }
286 | }
287 |
288 | @media screen and (max-width: 1600px) {
289 | .d-sm-inline-flex {
290 | display: inline-flex;
291 | }
292 | }
293 |
294 | @media screen and (max-width: 1600px) {
295 | .d-sm-inline-grid {
296 | display: inline-grid;
297 | }
298 | }
299 |
300 | @media screen and (max-width: 1600px) {
301 | .d-sm-grid {
302 | display: grid;
303 | }
304 | }
305 |
306 | @media screen and (max-width: 500px) {
307 | .d-md-none {
308 | display: none;
309 | }
310 | }
311 |
312 | @media screen and (max-width: 500px) {
313 | .d-md-flex {
314 | display: flex;
315 | }
316 | }
317 |
318 | @media screen and (max-width: 500px) {
319 | .d-md-block {
320 | display: block;
321 | }
322 | }
323 |
324 | @media screen and (max-width: 500px) {
325 | .d-md-inline {
326 | display: inline;
327 | }
328 | }
329 |
330 | @media screen and (max-width: 500px) {
331 | .d-md-inline-flex {
332 | display: inline-flex;
333 | }
334 | }
335 |
336 | @media screen and (max-width: 500px) {
337 | .d-md-inline-grid {
338 | display: inline-grid;
339 | }
340 | }
341 |
342 | @media screen and (max-width: 500px) {
343 | .d-md-grid {
344 | display: grid;
345 | }
346 | }
347 |
348 | @media screen and (max-width: 700px) {
349 | .d-md-none {
350 | display: none;
351 | }
352 | }
353 |
354 | @media screen and (max-width: 700px) {
355 | .d-md-flex {
356 | display: flex;
357 | }
358 | }
359 |
360 | @media screen and (max-width: 700px) {
361 | .d-md-block {
362 | display: block;
363 | }
364 | }
365 |
366 | @media screen and (max-width: 700px) {
367 | .d-md-inline {
368 | display: inline;
369 | }
370 | }
371 |
372 | @media screen and (max-width: 700px) {
373 | .d-md-inline-flex {
374 | display: inline-flex;
375 | }
376 | }
377 |
378 | @media screen and (max-width: 700px) {
379 | .d-md-inline-grid {
380 | display: inline-grid;
381 | }
382 | }
383 |
384 | @media screen and (max-width: 700px) {
385 | .d-md-grid {
386 | display: grid;
387 | }
388 | }
389 |
390 | @media screen and (max-width: 1000px) {
391 | .d-md-none {
392 | display: none;
393 | }
394 | }
395 |
396 | @media screen and (max-width: 1000px) {
397 | .d-md-flex {
398 | display: flex;
399 | }
400 | }
401 |
402 | @media screen and (max-width: 1000px) {
403 | .d-md-block {
404 | display: block;
405 | }
406 | }
407 |
408 | @media screen and (max-width: 1000px) {
409 | .d-md-inline {
410 | display: inline;
411 | }
412 | }
413 |
414 | @media screen and (max-width: 1000px) {
415 | .d-md-inline-flex {
416 | display: inline-flex;
417 | }
418 | }
419 |
420 | @media screen and (max-width: 1000px) {
421 | .d-md-inline-grid {
422 | display: inline-grid;
423 | }
424 | }
425 |
426 | @media screen and (max-width: 1000px) {
427 | .d-md-grid {
428 | display: grid;
429 | }
430 | }
431 |
432 | @media screen and (max-width: 1400px) {
433 | .d-md-none {
434 | display: none;
435 | }
436 | }
437 |
438 | @media screen and (max-width: 1400px) {
439 | .d-md-flex {
440 | display: flex;
441 | }
442 | }
443 |
444 | @media screen and (max-width: 1400px) {
445 | .d-md-block {
446 | display: block;
447 | }
448 | }
449 |
450 | @media screen and (max-width: 1400px) {
451 | .d-md-inline {
452 | display: inline;
453 | }
454 | }
455 |
456 | @media screen and (max-width: 1400px) {
457 | .d-md-inline-flex {
458 | display: inline-flex;
459 | }
460 | }
461 |
462 | @media screen and (max-width: 1400px) {
463 | .d-md-inline-grid {
464 | display: inline-grid;
465 | }
466 | }
467 |
468 | @media screen and (max-width: 1400px) {
469 | .d-md-grid {
470 | display: grid;
471 | }
472 | }
473 |
474 | @media screen and (max-width: 1600px) {
475 | .d-md-none {
476 | display: none;
477 | }
478 | }
479 |
480 | @media screen and (max-width: 1600px) {
481 | .d-md-flex {
482 | display: flex;
483 | }
484 | }
485 |
486 | @media screen and (max-width: 1600px) {
487 | .d-md-block {
488 | display: block;
489 | }
490 | }
491 |
492 | @media screen and (max-width: 1600px) {
493 | .d-md-inline {
494 | display: inline;
495 | }
496 | }
497 |
498 | @media screen and (max-width: 1600px) {
499 | .d-md-inline-flex {
500 | display: inline-flex;
501 | }
502 | }
503 |
504 | @media screen and (max-width: 1600px) {
505 | .d-md-inline-grid {
506 | display: inline-grid;
507 | }
508 | }
509 |
510 | @media screen and (max-width: 1600px) {
511 | .d-md-grid {
512 | display: grid;
513 | }
514 | }
515 |
516 | @media screen and (max-width: 500px) {
517 | .d-lg-none {
518 | display: none;
519 | }
520 | }
521 |
522 | @media screen and (max-width: 500px) {
523 | .d-lg-flex {
524 | display: flex;
525 | }
526 | }
527 |
528 | @media screen and (max-width: 500px) {
529 | .d-lg-block {
530 | display: block;
531 | }
532 | }
533 |
534 | @media screen and (max-width: 500px) {
535 | .d-lg-inline {
536 | display: inline;
537 | }
538 | }
539 |
540 | @media screen and (max-width: 500px) {
541 | .d-lg-inline-flex {
542 | display: inline-flex;
543 | }
544 | }
545 |
546 | @media screen and (max-width: 500px) {
547 | .d-lg-inline-grid {
548 | display: inline-grid;
549 | }
550 | }
551 |
552 | @media screen and (max-width: 500px) {
553 | .d-lg-grid {
554 | display: grid;
555 | }
556 | }
557 |
558 | @media screen and (max-width: 700px) {
559 | .d-lg-none {
560 | display: none;
561 | }
562 | }
563 |
564 | @media screen and (max-width: 700px) {
565 | .d-lg-flex {
566 | display: flex;
567 | }
568 | }
569 |
570 | @media screen and (max-width: 700px) {
571 | .d-lg-block {
572 | display: block;
573 | }
574 | }
575 |
576 | @media screen and (max-width: 700px) {
577 | .d-lg-inline {
578 | display: inline;
579 | }
580 | }
581 |
582 | @media screen and (max-width: 700px) {
583 | .d-lg-inline-flex {
584 | display: inline-flex;
585 | }
586 | }
587 |
588 | @media screen and (max-width: 700px) {
589 | .d-lg-inline-grid {
590 | display: inline-grid;
591 | }
592 | }
593 |
594 | @media screen and (max-width: 700px) {
595 | .d-lg-grid {
596 | display: grid;
597 | }
598 | }
599 |
600 | @media screen and (max-width: 1000px) {
601 | .d-lg-none {
602 | display: none;
603 | }
604 | }
605 |
606 | @media screen and (max-width: 1000px) {
607 | .d-lg-flex {
608 | display: flex;
609 | }
610 | }
611 |
612 | @media screen and (max-width: 1000px) {
613 | .d-lg-block {
614 | display: block;
615 | }
616 | }
617 |
618 | @media screen and (max-width: 1000px) {
619 | .d-lg-inline {
620 | display: inline;
621 | }
622 | }
623 |
624 | @media screen and (max-width: 1000px) {
625 | .d-lg-inline-flex {
626 | display: inline-flex;
627 | }
628 | }
629 |
630 | @media screen and (max-width: 1000px) {
631 | .d-lg-inline-grid {
632 | display: inline-grid;
633 | }
634 | }
635 |
636 | @media screen and (max-width: 1000px) {
637 | .d-lg-grid {
638 | display: grid;
639 | }
640 | }
641 |
642 | @media screen and (max-width: 1400px) {
643 | .d-lg-none {
644 | display: none;
645 | }
646 | }
647 |
648 | @media screen and (max-width: 1400px) {
649 | .d-lg-flex {
650 | display: flex;
651 | }
652 | }
653 |
654 | @media screen and (max-width: 1400px) {
655 | .d-lg-block {
656 | display: block;
657 | }
658 | }
659 |
660 | @media screen and (max-width: 1400px) {
661 | .d-lg-inline {
662 | display: inline;
663 | }
664 | }
665 |
666 | @media screen and (max-width: 1400px) {
667 | .d-lg-inline-flex {
668 | display: inline-flex;
669 | }
670 | }
671 |
672 | @media screen and (max-width: 1400px) {
673 | .d-lg-inline-grid {
674 | display: inline-grid;
675 | }
676 | }
677 |
678 | @media screen and (max-width: 1400px) {
679 | .d-lg-grid {
680 | display: grid;
681 | }
682 | }
683 |
684 | @media screen and (max-width: 1600px) {
685 | .d-lg-none {
686 | display: none;
687 | }
688 | }
689 |
690 | @media screen and (max-width: 1600px) {
691 | .d-lg-flex {
692 | display: flex;
693 | }
694 | }
695 |
696 | @media screen and (max-width: 1600px) {
697 | .d-lg-block {
698 | display: block;
699 | }
700 | }
701 |
702 | @media screen and (max-width: 1600px) {
703 | .d-lg-inline {
704 | display: inline;
705 | }
706 | }
707 |
708 | @media screen and (max-width: 1600px) {
709 | .d-lg-inline-flex {
710 | display: inline-flex;
711 | }
712 | }
713 |
714 | @media screen and (max-width: 1600px) {
715 | .d-lg-inline-grid {
716 | display: inline-grid;
717 | }
718 | }
719 |
720 | @media screen and (max-width: 1600px) {
721 | .d-lg-grid {
722 | display: grid;
723 | }
724 | }
725 |
726 | @media screen and (max-width: 500px) {
727 | .d-xl-none {
728 | display: none;
729 | }
730 | }
731 |
732 | @media screen and (max-width: 500px) {
733 | .d-xl-flex {
734 | display: flex;
735 | }
736 | }
737 |
738 | @media screen and (max-width: 500px) {
739 | .d-xl-block {
740 | display: block;
741 | }
742 | }
743 |
744 | @media screen and (max-width: 500px) {
745 | .d-xl-inline {
746 | display: inline;
747 | }
748 | }
749 |
750 | @media screen and (max-width: 500px) {
751 | .d-xl-inline-flex {
752 | display: inline-flex;
753 | }
754 | }
755 |
756 | @media screen and (max-width: 500px) {
757 | .d-xl-inline-grid {
758 | display: inline-grid;
759 | }
760 | }
761 |
762 | @media screen and (max-width: 500px) {
763 | .d-xl-grid {
764 | display: grid;
765 | }
766 | }
767 |
768 | @media screen and (max-width: 700px) {
769 | .d-xl-none {
770 | display: none;
771 | }
772 | }
773 |
774 | @media screen and (max-width: 700px) {
775 | .d-xl-flex {
776 | display: flex;
777 | }
778 | }
779 |
780 | @media screen and (max-width: 700px) {
781 | .d-xl-block {
782 | display: block;
783 | }
784 | }
785 |
786 | @media screen and (max-width: 700px) {
787 | .d-xl-inline {
788 | display: inline;
789 | }
790 | }
791 |
792 | @media screen and (max-width: 700px) {
793 | .d-xl-inline-flex {
794 | display: inline-flex;
795 | }
796 | }
797 |
798 | @media screen and (max-width: 700px) {
799 | .d-xl-inline-grid {
800 | display: inline-grid;
801 | }
802 | }
803 |
804 | @media screen and (max-width: 700px) {
805 | .d-xl-grid {
806 | display: grid;
807 | }
808 | }
809 |
810 | @media screen and (max-width: 1000px) {
811 | .d-xl-none {
812 | display: none;
813 | }
814 | }
815 |
816 | @media screen and (max-width: 1000px) {
817 | .d-xl-flex {
818 | display: flex;
819 | }
820 | }
821 |
822 | @media screen and (max-width: 1000px) {
823 | .d-xl-block {
824 | display: block;
825 | }
826 | }
827 |
828 | @media screen and (max-width: 1000px) {
829 | .d-xl-inline {
830 | display: inline;
831 | }
832 | }
833 |
834 | @media screen and (max-width: 1000px) {
835 | .d-xl-inline-flex {
836 | display: inline-flex;
837 | }
838 | }
839 |
840 | @media screen and (max-width: 1000px) {
841 | .d-xl-inline-grid {
842 | display: inline-grid;
843 | }
844 | }
845 |
846 | @media screen and (max-width: 1000px) {
847 | .d-xl-grid {
848 | display: grid;
849 | }
850 | }
851 |
852 | @media screen and (max-width: 1400px) {
853 | .d-xl-none {
854 | display: none;
855 | }
856 | }
857 |
858 | @media screen and (max-width: 1400px) {
859 | .d-xl-flex {
860 | display: flex;
861 | }
862 | }
863 |
864 | @media screen and (max-width: 1400px) {
865 | .d-xl-block {
866 | display: block;
867 | }
868 | }
869 |
870 | @media screen and (max-width: 1400px) {
871 | .d-xl-inline {
872 | display: inline;
873 | }
874 | }
875 |
876 | @media screen and (max-width: 1400px) {
877 | .d-xl-inline-flex {
878 | display: inline-flex;
879 | }
880 | }
881 |
882 | @media screen and (max-width: 1400px) {
883 | .d-xl-inline-grid {
884 | display: inline-grid;
885 | }
886 | }
887 |
888 | @media screen and (max-width: 1400px) {
889 | .d-xl-grid {
890 | display: grid;
891 | }
892 | }
893 |
894 | @media screen and (max-width: 1600px) {
895 | .d-xl-none {
896 | display: none;
897 | }
898 | }
899 |
900 | @media screen and (max-width: 1600px) {
901 | .d-xl-flex {
902 | display: flex;
903 | }
904 | }
905 |
906 | @media screen and (max-width: 1600px) {
907 | .d-xl-block {
908 | display: block;
909 | }
910 | }
911 |
912 | @media screen and (max-width: 1600px) {
913 | .d-xl-inline {
914 | display: inline;
915 | }
916 | }
917 |
918 | @media screen and (max-width: 1600px) {
919 | .d-xl-inline-flex {
920 | display: inline-flex;
921 | }
922 | }
923 |
924 | @media screen and (max-width: 1600px) {
925 | .d-xl-inline-grid {
926 | display: inline-grid;
927 | }
928 | }
929 |
930 | @media screen and (max-width: 1600px) {
931 | .d-xl-grid {
932 | display: grid;
933 | }
934 | }
935 |
936 | @media screen and (max-width: 500px) {
937 | .d-xxl-none {
938 | display: none;
939 | }
940 | }
941 |
942 | @media screen and (max-width: 500px) {
943 | .d-xxl-flex {
944 | display: flex;
945 | }
946 | }
947 |
948 | @media screen and (max-width: 500px) {
949 | .d-xxl-block {
950 | display: block;
951 | }
952 | }
953 |
954 | @media screen and (max-width: 500px) {
955 | .d-xxl-inline {
956 | display: inline;
957 | }
958 | }
959 |
960 | @media screen and (max-width: 500px) {
961 | .d-xxl-inline-flex {
962 | display: inline-flex;
963 | }
964 | }
965 |
966 | @media screen and (max-width: 500px) {
967 | .d-xxl-inline-grid {
968 | display: inline-grid;
969 | }
970 | }
971 |
972 | @media screen and (max-width: 500px) {
973 | .d-xxl-grid {
974 | display: grid;
975 | }
976 | }
977 |
978 | @media screen and (max-width: 700px) {
979 | .d-xxl-none {
980 | display: none;
981 | }
982 | }
983 |
984 | @media screen and (max-width: 700px) {
985 | .d-xxl-flex {
986 | display: flex;
987 | }
988 | }
989 |
990 | @media screen and (max-width: 700px) {
991 | .d-xxl-block {
992 | display: block;
993 | }
994 | }
995 |
996 | @media screen and (max-width: 700px) {
997 | .d-xxl-inline {
998 | display: inline;
999 | }
1000 | }
1001 |
1002 | @media screen and (max-width: 700px) {
1003 | .d-xxl-inline-flex {
1004 | display: inline-flex;
1005 | }
1006 | }
1007 |
1008 | @media screen and (max-width: 700px) {
1009 | .d-xxl-inline-grid {
1010 | display: inline-grid;
1011 | }
1012 | }
1013 |
1014 | @media screen and (max-width: 700px) {
1015 | .d-xxl-grid {
1016 | display: grid;
1017 | }
1018 | }
1019 |
1020 | @media screen and (max-width: 1000px) {
1021 | .d-xxl-none {
1022 | display: none;
1023 | }
1024 | }
1025 |
1026 | @media screen and (max-width: 1000px) {
1027 | .d-xxl-flex {
1028 | display: flex;
1029 | }
1030 | }
1031 |
1032 | @media screen and (max-width: 1000px) {
1033 | .d-xxl-block {
1034 | display: block;
1035 | }
1036 | }
1037 |
1038 | @media screen and (max-width: 1000px) {
1039 | .d-xxl-inline {
1040 | display: inline;
1041 | }
1042 | }
1043 |
1044 | @media screen and (max-width: 1000px) {
1045 | .d-xxl-inline-flex {
1046 | display: inline-flex;
1047 | }
1048 | }
1049 |
1050 | @media screen and (max-width: 1000px) {
1051 | .d-xxl-inline-grid {
1052 | display: inline-grid;
1053 | }
1054 | }
1055 |
1056 | @media screen and (max-width: 1000px) {
1057 | .d-xxl-grid {
1058 | display: grid;
1059 | }
1060 | }
1061 |
1062 | @media screen and (max-width: 1400px) {
1063 | .d-xxl-none {
1064 | display: none;
1065 | }
1066 | }
1067 |
1068 | @media screen and (max-width: 1400px) {
1069 | .d-xxl-flex {
1070 | display: flex;
1071 | }
1072 | }
1073 |
1074 | @media screen and (max-width: 1400px) {
1075 | .d-xxl-block {
1076 | display: block;
1077 | }
1078 | }
1079 |
1080 | @media screen and (max-width: 1400px) {
1081 | .d-xxl-inline {
1082 | display: inline;
1083 | }
1084 | }
1085 |
1086 | @media screen and (max-width: 1400px) {
1087 | .d-xxl-inline-flex {
1088 | display: inline-flex;
1089 | }
1090 | }
1091 |
1092 | @media screen and (max-width: 1400px) {
1093 | .d-xxl-inline-grid {
1094 | display: inline-grid;
1095 | }
1096 | }
1097 |
1098 | @media screen and (max-width: 1400px) {
1099 | .d-xxl-grid {
1100 | display: grid;
1101 | }
1102 | }
1103 |
1104 | @media screen and (max-width: 1600px) {
1105 | .d-xxl-none {
1106 | display: none;
1107 | }
1108 | }
1109 |
1110 | @media screen and (max-width: 1600px) {
1111 | .d-xxl-flex {
1112 | display: flex;
1113 | }
1114 | }
1115 |
1116 | @media screen and (max-width: 1600px) {
1117 | .d-xxl-block {
1118 | display: block;
1119 | }
1120 | }
1121 |
1122 | @media screen and (max-width: 1600px) {
1123 | .d-xxl-inline {
1124 | display: inline;
1125 | }
1126 | }
1127 |
1128 | @media screen and (max-width: 1600px) {
1129 | .d-xxl-inline-flex {
1130 | display: inline-flex;
1131 | }
1132 | }
1133 |
1134 | @media screen and (max-width: 1600px) {
1135 | .d-xxl-inline-grid {
1136 | display: inline-grid;
1137 | }
1138 | }
1139 |
1140 | @media screen and (max-width: 1600px) {
1141 | .d-xxl-grid {
1142 | display: grid;
1143 | }
1144 | }
1145 |
1146 | body {
1147 | margin: 0;
1148 | padding: 0;
1149 | }
1150 | body:hover {
1151 | color: blue;
1152 | }
1153 | body div {
1154 | padding: 10px;
1155 | }
1156 | body > p {
1157 | font-size: 40px;
1158 | color: #cd5656;
1159 | }
1160 | body > p:before {
1161 | content: "Страница 12!";
1162 | }
1163 |
1164 | .button {
1165 | padding: 20px;
1166 | }
1167 | .button_alert {
1168 | color: #d3ff58;
1169 | }
1170 | .button_success {
1171 | color: #3ba93b;
1172 | }
1173 | @media screen {
1174 | .button {
1175 | font-size: 10px;
1176 | }
1177 | }
--------------------------------------------------------------------------------
/dist/template.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
--------------------------------------------------------------------------------
/flex.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/form_resut.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/forms.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
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 | Comedy
51 | Horror
52 | Drama
53 | Thriller
54 | Science Fiction
55 | Fantasy
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/heart.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/img/14599548cf809a7a93f08f5671e4eb34.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/14599548cf809a7a93f08f5671e4eb34.jpg
--------------------------------------------------------------------------------
/img/cat_box_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_box_256.png
--------------------------------------------------------------------------------
/img/cat_box_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_box_64.png
--------------------------------------------------------------------------------
/img/cat_cage_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_cage_256.png
--------------------------------------------------------------------------------
/img/cat_cage_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_cage_64.png
--------------------------------------------------------------------------------
/img/cat_clean_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_clean_256.png
--------------------------------------------------------------------------------
/img/cat_clean_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_clean_64.png
--------------------------------------------------------------------------------
/img/cat_eyes_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_eyes_256.png
--------------------------------------------------------------------------------
/img/cat_eyes_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_eyes_64.png
--------------------------------------------------------------------------------
/img/cat_purr_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_purr_256.png
--------------------------------------------------------------------------------
/img/cat_purr_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_purr_64.png
--------------------------------------------------------------------------------
/img/cat_tied_256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_tied_256.png
--------------------------------------------------------------------------------
/img/cat_tied_64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/cat_tied_64.png
--------------------------------------------------------------------------------
/img/favorites.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/favorites.png
--------------------------------------------------------------------------------
/img/i.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/i.webp
--------------------------------------------------------------------------------
/img/original.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/img/original.jpg
--------------------------------------------------------------------------------
/img/snake.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
18 |
21 |
24 |
25 |
26 |
45 |
51 |
52 |
57 |
59 |
62 |
65 |
69 |
70 |
73 |
77 |
78 |
81 |
85 |
86 |
89 |
93 |
94 |
97 |
101 |
102 |
105 |
109 |
110 |
113 |
117 |
118 |
121 |
125 |
126 |
129 |
133 |
134 |
137 |
141 |
142 |
145 |
149 |
150 |
153 |
157 |
158 |
161 |
165 |
166 |
169 |
173 |
174 |
177 |
181 |
182 |
185 |
189 |
190 |
193 |
197 |
198 |
201 |
205 |
206 |
209 |
213 |
214 |
217 |
221 |
222 |
223 |
224 |
225 |
226 |
--------------------------------------------------------------------------------
/img/snake2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
18 |
21 |
24 |
25 |
26 |
45 |
51 |
52 |
57 |
59 |
62 |
65 |
69 |
70 |
73 |
77 |
78 |
81 |
85 |
86 |
89 |
93 |
94 |
97 |
101 |
102 |
105 |
109 |
110 |
113 |
117 |
118 |
121 |
125 |
126 |
129 |
133 |
134 |
137 |
141 |
142 |
145 |
149 |
150 |
153 |
157 |
158 |
161 |
165 |
166 |
169 |
173 |
174 |
177 |
181 |
182 |
185 |
189 |
190 |
193 |
197 |
198 |
201 |
205 |
206 |
209 |
213 |
214 |
217 |
221 |
222 |
223 |
224 |
225 |
226 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | Для начала работы дома
21 |
22 |
23 | Ученье свет, а не ученье - тьма.
24 |
25 |
26 |
27 | ⊃ ⊃ ⊃ <p> Текст параграфа </p> HTML
28 |
29 |
30 |
31 | /\„„./\
32 | (='•'= )
33 | (") „. (")
34 | \,\„„/,/
35 | │„„. „│
36 | /„/„\„\
37 | („) ''(„)
38 | ((
39 | ))
40 | ((
41 |
42 |
43 |
44 |
45 |
46 |
47 |
12
48 |
1
49 |
2
50 |
3
51 |
6
52 |
9
53 |
54 |
55 |
56 |
На ПК здесь коты и таблица
57 |
58 |
59 |
60 | Заголовок таблицы
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | sfs
69 | fgfdg
70 | fsgsdf
71 | fsddsf
72 | gfdsgfg
73 |
74 |
75 |
76 |
77 | jkldjfglk
78 | fgkldjlkdf
79 | dfjlk
80 | jlkdf
81 | kljlkj
82 |
83 |
84 | lkjlkj
85 | jlkjlkj
86 | jl
87 |
88 |
89 | jlkjlk
90 | wertwer
91 | werwer
92 |
93 |
94 |
95 |
96 | sfs
97 | fgfdg
98 | fsgsdf
99 | fsddsf
100 | gfdsgfg
101 |
102 |
103 |
104 |
105 |
106 |
Cats Galery
107 |
108 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
menu
123 |
124 |
128 |
129 | main content
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | Установить
144 | git
145 | VS Code
146 | Ввести в терминал VS Code (открывается комбинацией клавиш CTRL+~)
147 |
148 | git config --global user.name "Ваше имя"
149 | git config --global user.email вашапочта@домен.ру
150 |
151 |
152 | Клонировать Репозиторий git
153 |
154 |
155 | ПЗ 1
156 |
157 | Валидатор 1
158 | Валидатор 2
159 |
160 |
161 | Яндекс.Диск
162 | Поток документа
163 | Блочная модель
164 | CSS селекторы
165 | cubic-bezier
166 | Функции времени
167 | 3D трансформации
168 | Кубик
169 | z-index
170 | Для Давида
171 | Генератор таблиц
172 | Анимированная рамка
173 | Блочная модель, псевдоэлементы
174 | min, max, clamp
175 | Grid generator
176 | Игра в Grid
177 | Дизайны портфолио
178 | Элементы бутстрап
179 | Шпаргалка классов бутстрап
180 | Бутстрап на русском
181 | SCSS
182 | Переменные в CSS
183 |
184 |
185 |
Списки
186 |
187 | gfdsgsdf
188 | gfdsgsdfsdfsdf
189 | gfdsgsdfsdfsdf
190 | gfdsgsdfsdfsdf
191 | gfdsgsdfsdfsdf
192 | gfdsgsdfsdfsdf
193 | gfdsgsdfsdfsdf
194 |
195 |
196 |
197 |
198 | Термин 1
199 | Описание термина 1
200 | Термин 2
201 | Описание термина 2
202 | Термин 3
203 | Описание термина 3
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 |
Теги HTML
237 |
Последний заголовок
238 |
239 |
Строковые теги
240 |
241 | Текст внутри тегов
242 | Тег, который ничего не делает
243 | Просто наклонный текст
244 | Просто жирный текст
245 | Важная фраза, которую заметит поисковый робот (наклонный)
246 | Важная фраза, которую заметит поисковый робот (жирный)
247 |
248 |
250 |
251 |
252 |
253 |
Заголовок 3-го уровня
254 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
255 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
256 | minima!
257 |
258 |
259 |
260 |
Блочные теги
261 |
Блочная цитата
262 |
263 |
264 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
265 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
266 | minima!
267 |
Заголовок 3-го уровня
268 |
269 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
270 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
271 | minima!
272 |
Заголовок 4-го уровня
273 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
274 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
275 | minima!
276 |
277 |
299 |
Заголовок 5-го уровня
300 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
301 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
302 | minima!
303 |
Заголовок 6-го уровня
304 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore impedit, nesciunt numquam quasi nobis
305 | exercitationem aliquam ab ex? Repellat tempore alias saepe dolore magnam ipsum corrupti provident et tenetur
306 | minima!
307 |
308 |
309 |
310 |
311 |
Правила HTML
312 |
313 | Все пробелы, табуляция и начало новых строк преобразуются в обычный пробел. Поэтому очень желательно
314 | форматировать текст
315 | с отступами
316 | Весь текст должен быть отформатирован в виде тегов. Обязательно присутствуют открывающий и закрывающий тег
317 |
318 | Если у элемента нет содержимого, закрывающий тег ему НЕ нужен
319 | Всегда должны быть теги основы: html, head, body
320 | Правило «матрешки»: всегда соблюдать вложенность элементов и не допускать их пересечения
321 | Значения атрибутов всегда берутся в кавычки
322 | Атрибутов у элемента может быть несколько, они отделяются друг от друга пробелами
323 | Универсальными атрибутами для всех тегов являются: id, class, style, title, tabindex
324 | Комментарии в HTML предназначены для того, чтобы скрыть часть кода и записываются так:
325 |
326 |
327 |
328 |
329 |
330 |
331 |
--------------------------------------------------------------------------------
/loader.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
59 |
60 |
61 |
64 |
65 |
--------------------------------------------------------------------------------
/max600.css:
--------------------------------------------------------------------------------
1 | blockquote {
2 | display: none;
3 | }
4 |
5 | table {
6 | display: none;
7 | }
8 |
9 | .layout .flex {
10 | flex-direction: column;
11 | }
12 |
13 | .layout main {
14 | width: 100%;
15 | box-sizing: border-box;
16 | }
17 |
18 | .flex div {
19 | width: 100%;
20 | }
21 |
22 | .layout .flex div aside:last-child {
23 | margin-bottom: 0;
24 | }
25 |
26 | .layout .vertical {
27 | writing-mode: initial;
28 | text-orientation: initial;
29 | width: 100%;
30 | box-sizing: border-box;
31 | }
32 |
33 | .catGalery {
34 | display: none;
35 | }
36 |
37 | .menu {
38 | display: none;
39 | }
40 |
41 | br+img {
42 | width: 100%;
43 | }
44 |
45 | .onMobile {
46 | display: block;
47 | }
--------------------------------------------------------------------------------
/pseudo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | replit
8 |
9 |
118 |
119 |
120 |
121 |
122 | HOME
123 |
124 |
125 |
126 |
127 |
128 | inl
129 |
130 |
131 | ine
132 |
133 |
134 | inline
135 | block
136 | -block
137 |
138 | inline
139 | block
140 | -block
141 |
142 |
143 | block
144 | block
145 |
146 |
147 |
148 | block
149 | Выдели меня
150 |
151 |
152 | sdfsdfsdfs
153 | adfasdasdf
154 | adfasdasdf
155 |
156 |
157 |
158 | dfdfsd
159 | dfdfsd
160 | dfdfsd
161 | dfdfsd
162 | dfdfsd
163 | dfdfsd
164 | dfdfsd
165 | dfdfsd
166 | dfdfsd
167 | dfdfsd
168 | dfdfsd
169 | dfdfsd
170 | dfdfsd
171 | dfdfsd
172 | dfdf sd
173 | dfdfsd
174 | dfdfsd
175 | dfdfsd
176 | dfdfsd
177 | dfdfsd
178 | dfdfsd
179 |
180 |
181 |
182 | Lorem ipsum, dolor si d amet consectetur adipisicing elit. Quod velit hic delectus dolore nobis sint architecto
183 | voluptatibus adipisci nostrum aut, tempora obcaecati ad odio commodi aliquam quas ut fuga doloremque!
184 | Nesciunt ipsam officia rerum, facilis nobis odit at excepturi nemo soluta officiis doloremque maxime, suscipit
185 | magnam nulla quisquam ratione aspernatur! Qui esse non dignissimos eligendi maxime placeat nisi similique
186 | repellendus?
187 |
188 |
189 |
190 |
sdgdfhdfgdfg
191 |
sfsdf
192 |
sfsdf
193 |
sfsdf
194 |
sfsdf
195 |
sfsdf
196 |
ghjfghjgh
197 |
198 |
sfsdf
199 |
sfsdf
200 |
201 |
202 |
203 |
204 |
205 |
--------------------------------------------------------------------------------
/pz1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
33 |
34 |
35 |
36 |
37 |
38 | kjhsbfkjhskjf
39 |
40 | V ehicle
41 |
42 | A vehicle (from Latin: vehiculum[1]) is a machine that transports people or cargo. Vehicles include wagons, bicycles,
43 | motor vehicles (motorcycles, cars, trucks, buses), railed vehicles (trains, trams), watercraft (ships, boats),
44 | amphibious vehicles (screw-propelled vehicle, hovercraft), aircraft (airplanes, helicopters) and spacecraft.[2]
45 |
46 | Land vehicles are classified bro
47 |
48 | fgsdfsdf sfsd fsd fs
49 |
50 | adly by what is used to apply steering and drive forces against the ground: wheeled,
51 | tracked, railed or skied. ISO 3833-1977 is the standard, also internationally used in legislation, for road vehicles
52 | types, terms and definitions.[3]
53 |
54 | [1] - "vehicle, n.", OED Online, Oxford University Press, November 2010
55 |
56 | [2] - Halsey, William D. (Editorial Director): MacMillan Contemporary Dictionary, page 1106. MacMillan Publishing, 1979.
57 | ISBN 0-02-080780-5
58 |
59 | [3] - ISO 3833:1977 Road vehicles – Types – Terms and definitions Webstore.anis.org
60 | В рамках приличия
61 |
62 |
63 | Жмакнуть
64 | Сквиш — это мягкая и приятная на ощупь игрушка. В продаже есть сквиши самых разных форм: в виде фруктов,
65 | тортиков, животных, придуманных персонажей и так далее. Сквиши приятно мять в руках, из-за чего их ещё называют
66 | игрушками-антистресс. «Жмаканье» в руках сквиша помогает снять напряжение, избавиться от стресса.
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gakmannn/web36HTML/59b6087547370576ebcf6ef2ba207ff6d6602fed/readme.md
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | max-width: 1000px;
3 | margin: 0 auto;
4 | background-color: aliceblue;
5 | }
6 |
7 | /* html {
8 | font-size: 16px;
9 | }
10 | @media screen and (max-width:600px) {
11 | html {
12 | font-size: 20px;
13 | }
14 | } */
15 | * {
16 | box-sizing: border-box;
17 | }
18 |
19 | body {
20 | max-width: 1200px;
21 | margin: 20px auto;
22 | background-color: rgb(144, 165, 183);
23 | padding: 20px;
24 | /* font-family: Lato, Verdana, Geneva, sans-serif; */
25 | font-family: 'Courier New', Courier, monospace;
26 | }
27 |
28 | .onMobile {
29 | display: none;
30 | }
31 |
32 | a {
33 | display: inline-block;
34 | padding: 5px;
35 | border-radius: 10px;
36 | color: black;
37 | text-decoration: none;
38 | background-color: aquamarine;
39 | margin-bottom: 3px;
40 | font-family: Lato, Verdana, Geneva, sans-serif;
41 | transition: background-color 2s ease 2s, color 5s;
42 | /* transition: all 0.8s ease 0s */
43 | }
44 |
45 | .catGalery a {
46 | display: inline-block;
47 | padding: 0;
48 | border-radius: 0px;
49 | color: black;
50 | text-decoration: none;
51 | background-color: transparent;
52 | margin-bottom: 0px;
53 | border: 1px solid rgb(210, 208, 208);
54 | border-left: none;
55 | border-bottom: none;
56 | padding: 10px;
57 | height: 68px;
58 | }
59 |
60 | a:hover {
61 | color: #6e4aff;
62 | background-color: aqua;
63 | transition: .5s;
64 | }
65 |
66 | .catGalery a:hover {
67 | background-color: transparent;
68 | }
69 |
70 | .catGalery a:active {
71 | background-color: red;
72 | }
73 |
74 | .teal {
75 | background-color: teal;
76 | }
77 |
78 | .witeText {
79 | color: white;
80 | }
81 |
82 | #PZ1 {
83 | background-color: hsl(35, 100%, 50%);
84 | }
85 |
86 | #PZ1:hover {
87 | background-color: aqua;
88 | }
89 |
90 | p {
91 | /* font: [font-style | font-variant | font-weight | font-stretch] font-size [/line-height] font-family | inherit */
92 | font: normal 16px/20px Tahoma;
93 | text-align: justify;
94 |
95 | }
96 |
97 | h1 {
98 | text-align: center;
99 | }
100 |
101 | .dotted {
102 | text-decoration: underline dotted;
103 | }
104 |
105 | .big-first-letter p::first-letter {
106 | font-size: 20px;
107 | }
108 |
109 | p::selection {
110 | background-color: brown;
111 | color: aliceblue;
112 | }
113 |
114 | .experiment {
115 | /* list-style-type: decimal (по умолчанию, можно не
116 | указывать) | decimal-leading-zero | armenian |
117 | georgian | lower-alpha | lower-greek | lower-latin |
118 | lower-roman | upper-alpha | upper-latin |
119 | upper-roman */
120 | list-style-type: none;
121 | list-style-image: url(img/snake.svg);
122 | /* Поставить маркер внутрь элемента (по умолчанию снаружи) */
123 | list-style-position: inside;
124 | /* list-style: list-style-type list-style-position
125 | list-style-image;
126 | */
127 | }
128 |
129 | .experiment li {
130 | height: 25px;
131 | }
132 |
133 | .experiment li:hover {
134 | list-style-image: url(img/snake2.svg);
135 | }
136 |
137 | blockquote {
138 | margin: 20px auto;
139 | width: 400px;
140 | text-align: center;
141 | position: relative;
142 | }
143 |
144 | blockquote::before {
145 | position: absolute;
146 | left: -30px;
147 | content: '<<';
148 | }
149 |
150 | blockquote::after {
151 | content: '>>';
152 | right: -30px;
153 | position: absolute;
154 | }
155 |
156 | .radius {
157 | border-radius: 20px;
158 | }
159 |
160 | img:hover {
161 | opacity: 0.5;
162 | }
163 |
164 | .shadow {
165 | box-shadow: -6px -6px 6px #a7a7a7;
166 | }
167 |
168 | .around-shadow {
169 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
170 | }
171 |
172 | /* background-color: red | #ff0000 | #f00 |
173 | rgb(255, 0, 0) |
174 | rgba(255, 0, 0, .7) |
175 | transparent (по умолчанию */
176 |
177 | /* background-image: none (по умолчанию)|
178 | url(путь_к_изображению.расширение) */
179 |
180 | /* backround-repeat: repeat (по умолчанию) |
181 | no-repeat | repeat-x | repeat-y |
182 | space | round */
183 |
184 | /* background-position: [left | center | right | % | px,
185 | em, pt и др.]
186 | [top | center | bottom | % | px,
187 | em, pt и др. */
188 |
189 | /* background-size: [ размер в px, pt, em, rem и др. | % |
190 | auto ]{1,2} | cover | contain */
191 |
192 | /* background-attachment fixed | scroll | local */
193 |
194 | /* background-origin: padding-box | border-box | content-box */
195 |
196 | /* background-clip: padding-box | border-box (по умолчанию) | content-box | text */
197 |
198 | /* background: background-image ||
199 | background-position/background-size ||
200 | background-repeat ||
201 | background-attachment ||
202 | background-origin ||
203 | background-clip ||
204 | background-color */
205 |
206 | #rools {
207 | background: url(img/original.jpg) 82% 26%/234px no-repeat, url(img/original.jpg) 28% 26%/234px no-repeat;
208 |
209 | }
210 |
211 | .box {
212 | width: 120px;
213 | height: 120px;
214 | box-shadow:
215 | inset 0 0 6px 0 #c000ff,
216 | 0 0 0 3px #c000ff,
217 | 0 0 6px 3px #c000ff,
218 | 0 0 0 7px #18191C,
219 | 0 0 0 10px #6e4aff,
220 | 0 0 6px 10px #6e4aff,
221 | 0 0 0 14px #18191C,
222 | 0 0 0 17px #c000ff,
223 | 0 0 6px 17px #c000ff;
224 | }
225 |
226 | .square {
227 | display: inline-block;
228 | }
229 |
230 | .circle {
231 | display: inline-block;
232 | margin-left: 60px;
233 | border-radius: 50%;
234 | }
235 |
236 | .catGalery {
237 | border: 1px solid rgb(210, 208, 208);
238 | width: 512px;
239 | margin: 50px auto;
240 | }
241 |
242 | .layout {
243 | text-transform: uppercase;
244 | margin: 50px auto;
245 | max-width: 800px;
246 | color: white;
247 | font-weight: bold;
248 | }
249 |
250 | .layout header {
251 | background-color: #923158;
252 | padding: 20px 40px;
253 | }
254 |
255 | .layout nav,
256 | .layout footer {
257 | background-color: #6e1237;
258 | padding: 10px 40px;
259 | margin: 10px 0;
260 | }
261 |
262 | .layout aside,
263 | .layout main {
264 | background-color: #b65b80;
265 | padding: 20px 40px;
266 | }
267 |
268 | .layout .flex div aside {
269 | margin-bottom: 10px;
270 | }
271 |
272 | .layout section {
273 | background-color: #db92af;
274 | padding: 5px 40px 60px;
275 | margin: 10px 0;
276 | }
277 |
278 | .layout main {
279 | width: 600px;
280 | }
281 |
282 | .layout .flex {
283 | display: flex;
284 | gap: 10px;
285 | flex-direction: row;
286 | justify-content: space-between;
287 | align-items: flex-start
288 | }
289 |
290 | .layout .vertical {
291 | writing-mode: vertical-lr;
292 | text-orientation: upright;
293 | }
294 |
295 | .a1 {
296 | visibility: visible;
297 | transition: 1s;
298 | }
299 |
300 | .a1:hover {
301 | visibility: hidden;
302 | transition: 1s;
303 | }
304 |
305 | /* @keyframes name{
306 | from {
307 | условие анимации
308 | }
309 | to {
310 | условие анимации
311 | }
312 | } */
313 | pre {
314 | position: fixed;
315 | left: 10%;
316 | top: 80%;
317 | background-color: #db92af;
318 | border-radius: 30%;
319 | animation: play 5s ease-in-out infinite;
320 | /* animation: name duration timing-function delay iteration-count direction fill-mode; */
321 | }
322 |
323 | /* @keyframes play{
324 | from {
325 | left: 10%;
326 | top: 80%;
327 | }
328 | to {
329 | left: 10%;
330 | top: 0%;
331 | }
332 | }
333 | @keyframes play{
334 | 0% {
335 | left: 10%;
336 | top: 80%;
337 | }
338 | 25% {
339 | left: 10%;
340 | top: 0%;
341 | }
342 | 50% {
343 | left: 80%;
344 | top: 0%;
345 | }
346 | 75% {
347 | left: 80%;
348 | top: 80%;
349 | }
350 | 100% {
351 | left: 10%;
352 | top: 80%;
353 | }
354 | }*/
355 |
356 | .watch {
357 | width: 200px;
358 | height: 200px;
359 | margin: 20px auto;
360 | border: 3px blue solid;
361 | border-radius: 50%;
362 | position: relative;
363 | }
364 |
365 | .watch div {
366 | position: absolute;
367 | }
368 |
369 | .center {
370 | width: 5px;
371 | height: 5px;
372 | top: calc(50% - (5px/2));
373 | left: calc(50% - (5px/2));
374 | background-color: #c000ff;
375 | border-radius: 50%;
376 | }
377 |
378 | .seconds {
379 | height: 80px;
380 | width: 3px;
381 | background-color: #d3242a;
382 | left: calc(50% - (3px/2));
383 | top: 20px;
384 | transform-origin: bottom center;
385 | animation: time 60s steps(60) infinite;
386 | }
387 |
388 | .minutes {
389 | height: 60px;
390 | width: 3px;
391 | background-color: #2941c9;
392 | left: calc(50% - (3px/2));
393 | top: 40px;
394 | transform-origin: bottom center;
395 | animation: time 3600s linear infinite;
396 | }
397 |
398 | .hours {
399 | height: 40px;
400 | width: 3px;
401 | background-color: #4a24d3;
402 | left: calc(50% - (3px/2));
403 | top: 60px;
404 | transform-origin: bottom center;
405 | animation: time 86400s linear infinite;
406 | }
407 |
408 | @keyframes time {
409 | from {
410 | transform: rotate(0);
411 | }
412 |
413 | to {
414 | transform: rotate(360deg);
415 | }
416 | }
417 |
418 | .twelv {
419 | top: 10px;
420 | left: 50%;
421 | transform: translateX(-50%);
422 | }
423 |
424 | .three {
425 | right: 10px;
426 | top: 50%;
427 | transform: translateY(-50%) rotate(90deg);
428 | }
429 |
430 | .six {
431 | bottom: 10px;
432 | left: 50%;
433 | transform: translateX(-50%) rotate(180deg);
434 | }
435 |
436 | .nine {
437 | left: 10px;
438 | top: 50%;
439 | transform: translateY(-50%) rotate(270deg);
440 | }
441 |
442 | .one {
443 | transform: rotate(30deg) translateX(-50%);
444 | transform-origin: 0px 90px;
445 | }
446 |
447 | .two {
448 | transform: rotate(60deg) translateX(-50%);
449 | transform-origin: 0px 90px;
450 | }
451 |
452 | /* внешние границы всей таблицы */
453 | table {
454 | border: 1px solid black;
455 | border-collapse: collapse;
456 | font-size: 16px;
457 | }
458 |
459 | /* границы ячеек заголовков столбцов */
460 | th {
461 | font-size: 1.5em;
462 | border: 1px solid red;
463 | }
464 |
465 | /* границы ячеек основной части */
466 | td {
467 | font-size: 1em;
468 | border: 1px solid blue;
469 | }
470 |
471 | #uniq {
472 | width: 30vw;
473 | height: 20vh;
474 | text-align: right;
475 | vertical-align: bottom;
476 | }
477 |
478 | .col-1 {
479 | background-color: #ffcccc;
480 | }
481 |
482 | .col-2 {
483 | background-color: #ff9999;
484 | }
485 |
486 | .col-3 {
487 | background-color: #aa9999;
488 | }
489 |
490 | .menu a {
491 | display: block;
492 | border-radius: 0;
493 | background: green;
494 | color: white;
495 | margin: 0;
496 | text-transform: capitalize;
497 | transition: 1s;
498 | }
499 |
500 | .menu ul {
501 | list-style: none;
502 | padding: 0;
503 | margin: 0;
504 | display: flex;
505 | width: auto;
506 | position: relative;
507 | background: green;
508 | }
509 |
510 | .menu li {
511 | position: relative;
512 | padding: 1px;
513 | background: rgb(5, 64, 5);
514 | }
515 |
516 | .menu a:hover {
517 | background: rgb(5, 64, 5);
518 | transition: 1s;
519 | }
520 |
521 | .menu li ul {
522 | display: none;
523 | position: absolute;
524 | }
525 |
526 | .menu li:hover>ul {
527 | display: flex;
528 | flex-direction: column;
529 | }
530 |
531 | .menu .inner {
532 | left: 100%;
533 | top: 0;
534 | }
535 |
536 | @media print {
537 | body {
538 | background-color: white;
539 | }
540 | img {
541 | display: none;
542 | }
543 | }
544 |
545 | @media screen and (max-width:1200px) {
546 | body {
547 | background-color: #2941c9;
548 | }
549 | }
550 |
551 | @media screen and (max-width:800px) {
552 | body {
553 | background-color: #954f74;
554 | }
555 | }
556 |
557 | @media screen and (max-width:600px) {
558 | body {
559 | background-color: #7cc929;
560 | }
561 | blockquote {
562 | display: none;
563 | }
564 |
565 | table {
566 | display: none;
567 | }
568 |
569 | .layout .flex {
570 | flex-direction: column;
571 | }
572 |
573 | .layout main {
574 | width: 100%;
575 | box-sizing: border-box;
576 | }
577 |
578 | .flex div {
579 | width: 100%;
580 | }
581 |
582 | .layout .flex div aside:last-child {
583 | margin-bottom: 0;
584 | }
585 |
586 | .layout .vertical {
587 | writing-mode: initial;
588 | text-orientation: initial;
589 | width: 100%;
590 | box-sizing: border-box;
591 | }
592 |
593 | .catGalery {
594 | display: none;
595 | }
596 |
597 | .menu {
598 | display: none;
599 | }
600 |
601 | br+img {
602 | width: 100%;
603 | }
604 |
605 | .onMobile {
606 | display: block;
607 | }
608 | }
--------------------------------------------------------------------------------
/style.scss:
--------------------------------------------------------------------------------
1 | @import "template";
2 |
3 | $redChanel1: 205;
4 | $redChanel2: 59;
5 | $greenChanel1: 86;
6 | $greenChanel2: 169;
7 | $blueChanel1: 86;
8 | $blueChanel2: 59;
9 |
10 | $danger: rgb(205, 86, 86);
11 | $success: rgb(59, 169, 59);
12 | $page: 12;
13 |
14 | @function double($width) {
15 | @return $width * 2;
16 | }
17 |
18 | .name {
19 | width: double(3);
20 | border: 1px solid gray;
21 | display: block;
22 | position: absolute;
23 | }
24 |
25 | p {
26 | @if 1 + 1 == 2 { border: 1px solid; }
27 | @if 3 < 5 { border: 2px dotted; }
28 | @if null { border: 3px double; }
29 | }
30 |
31 | @mixin zebra() {
32 | @for $i from 1 through 10 {
33 | .margin-#{$i} {
34 | margin: 5px*$i;
35 | }
36 | }
37 | }
38 | * {
39 | @include zebra();
40 | text-align: center;
41 | }
42 |
43 | @mixin flexible () {
44 | display: flex;
45 | justify-content: center;
46 | align-items: center;
47 | }
48 |
49 | .centered-elements {
50 | @include flexible ();
51 | border: 1px solid gray;
52 | }
53 |
54 | @mixin border-radius($radius) { // Префиксы для:
55 | -webkit-border-radius: $radius; // Chrome и Safari
56 | -moz-border-radius: $radius; // Firefox
57 | -ms-border-radius: $radius; // Internet Explorer
58 | -o-border-radius: $radius; // Opera
59 | border-radius: $radius; // Стандартный CSS
60 | }
61 | // Пример использования миксина border-radius после его создания
62 | .box { @include border-radius(10px); }
63 |
64 | $sm: 500px;
65 | $md: 700px;
66 | $lg: 1000px;
67 | $xl: 1400px;
68 | $xxl: 1600px;
69 |
70 | @each $display in none, flex, block, inline, inline-flex, inline-grid, grid {
71 | .d-#{$display} {
72 | display: #{$display};
73 | }
74 | }
75 |
76 | @each $size in sm, md, lg, xl, xxl {
77 | @each $s in $sm, $md, $lg, $xl, $xxl {
78 | @each $display in none, flex, block, inline, inline-flex, inline-grid, grid {
79 | .d-#{$size}-#{$display} {
80 | @media screen and (max-width:#{$s}){
81 | display: #{$display};
82 | }
83 | }
84 | }
85 | }
86 | }
87 |
88 | body {
89 | margin: 0;
90 | padding: 0;
91 | &:hover {
92 | color: blue;
93 | }
94 | div {
95 | padding: 10px;
96 | }
97 | >p {
98 | font-size: 20px*2;
99 | color: $danger;
100 | &:before { content: "Страница #{ $page }!"; }
101 | }
102 | }
103 |
104 | .button {
105 | padding: 20px;
106 | &_alert {
107 | color: rgb(205+6, 86*3, 86+2);
108 | }
109 | &_success {
110 | color: $success;
111 | }
112 | @media screen {
113 | &{
114 | font-size: 10px;
115 | }
116 | }
117 | }
--------------------------------------------------------------------------------
/template.scss:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
--------------------------------------------------------------------------------