├── .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 |
141 |
142 | 145 | 146 |
147 | 156 |
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 | 175 | 188 |
189 |
190 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /all_forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | replit 8 | 9 | 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 | 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 | 125 |
126 |
127 | 128 | 129 |
130 | 131 |
132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /blocks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
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 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 |
#ИмяФамилияОбращение
1Mark😁Otto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
160 |
161 | 162 |
163 |
164 |

165 | 175 |

176 |
182 |
183 | This is the first item's accordion body. 184 |
185 |
186 |
187 | 188 |
189 | 190 | 191 | 235 | 236 | 237 |
238 |
244 | home 245 |
246 |
252 | profile 253 |
254 |
260 | messages 261 |
262 |
263 | 264 | 265 | 266 | 275 | 276 | 277 | 279 | 280 | -------------------------------------------------------------------------------- /border.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 55 | 56 | 57 |
58 | cat 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 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 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 | 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 |
Заголовок таблицы
sfsfgfdgfsgsdffsddsfgfdsgfg
jkldjfglkfgkldjlkdfdfjlkjlkdfkljlkj
lkjlkjjlkjlkjjl
jlkjlkwertwerwerwer
sfsfgfdgfsgsdffsddsfgfdsgfg
104 | 105 |
106 |

Cats Galery

107 |
108 | 110 |
111 | 112 | 113 | 114 | 115 | 116 | 117 |
118 |
119 | 120 |
121 |
header
122 | 123 |
124 |
125 | 126 | 127 |
128 |
129 | main content 130 |
section 1
131 |
section 2
132 |
133 | 134 |
135 | 136 |
137 | 138 |
139 |
140 | 141 |
    142 |
  1. Установить 144 | git
    2. 145 |
  2. VS Code
    3. 146 |
  3. Ввести в терминал VS Code (открывается комбинацией клавиш CTRL+~) 147 | 151 |
    4. 152 |
  4. Клонировать Репозиторий git
    5. 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 | 195 |
196 | 197 |
198 |
Термин 1
199 |
Описание термина 1
200 |
Термин 2
201 |
Описание термина 2
202 |
Термин 3
203 |
Описание термина 3
204 |
205 | 206 |
    207 |
  1. Площади 208 |
      209 |
    1. Дворцовая площадь
      2. 210 |
    2. Рыночная площадь
      3. 211 |
    212 |
    2. 213 |
  2. Замки 214 | 218 |
    3. 219 |
  3. Старе Място
    4. 220 |
  4. Музеи 221 | 229 |
    5. 230 |
  5. Краковское предместье
    6. 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 |
278 | 298 |
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 |
  1. Все пробелы, табуляция и начало новых строк преобразуются в обычный пробел. Поэтому очень желательно 314 | форматировать текст 315 | с отступами
    2. 316 |
  2. Весь текст должен быть отформатирован в виде тегов. Обязательно присутствуют открывающий и закрывающий тег 317 |
    3. 318 |
  3. Если у элемента нет содержимого, закрывающий тег ему НЕ нужен
    4. 319 |
  4. Всегда должны быть теги основы: html, head, body
    5. 320 |
  5. Правило «матрешки»: всегда соблюдать вложенность элементов и не допускать их пересечения
    6. 321 |
  6. Значения атрибутов всегда берутся в кавычки
    7. 322 |
  7. Атрибутов у элемента может быть несколько, они отделяются друг от друга пробелами
    8. 323 |
  8. Универсальными атрибутами для всех тегов являются: id, class, style, title, tabindex
    9. 324 |
  9. Комментарии в HTML предназначены для того, чтобы скрыть часть кода и записываются так:
    10. 325 |
326 |
327 | 328 | 329 | 330 | 331 | -------------------------------------------------------------------------------- /loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 59 | 60 | 61 |
62 |
63 |
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 | 156 | 157 |
    158 |
  1. dfdfsd
    2. 159 |
  2. dfdfsd
    3. 160 |
  3. dfdfsd
    4. 161 |
  4. dfdfsd
    5. 162 |
  5. dfdfsd
    6. 163 |
  6. dfdfsd
    7. 164 |
  7. dfdfsd
    8. 165 |
  8. dfdfsd
    9. 166 |
  9. dfdfsd
    10. 167 |
  10. dfdfsd
    11. 168 |
  11. dfdfsd
    12. 169 |
  12. dfdfsd
    13. 170 |
  13. dfdfsd
    14. 171 |
  14. dfdfsd
    15. 172 |
  15. dfdfsd
    16. 173 |
  16. dfdfsd
    17. 174 |
  17. dfdfsd
    18. 175 |
  18. dfdfsd
    19. 176 |
  19. dfdfsd
    20. 177 |
  20. dfdfsd
    21. 178 |
  21. dfdfsd
    22. 179 |
180 | 181 |

182 | Lorem ipsum, dolor sid 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 | Vehicle 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 | } --------------------------------------------------------------------------------