├── css └── style.css ├── icons ├── Group 5.svg ├── facebook.svg ├── instagram.svg ├── left.svg ├── logo.svg ├── right.svg ├── switch.svg └── veg.svg ├── img ├── header.jpg ├── slider │ ├── slider1.jpg │ ├── slider2.jpg │ ├── slider3.jpg │ ├── slider4.jpg │ └── slider5.jpg └── tabs │ ├── 1.png │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── index.html └── js └── script.js /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext); 2 | * { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | font-family: Roboto, sans-serif; 7 | } 8 | a { 9 | text-decoration: none; 10 | } 11 | .container { 12 | max-width: 1200px; 13 | margin: 0 auto; 14 | } 15 | .title { 16 | font-size: 36px; 17 | font-weight: 400; 18 | } 19 | .header { 20 | width: 100%; 21 | height: 100vh; 22 | background: url('../img/header.jpg') center no-repeat; 23 | background-size: cover; 24 | position: relative; 25 | } 26 | .header__content { 27 | position: absolute; 28 | top: 35%; 29 | translate: translateY(-35%); 30 | width: 400px; 31 | } 32 | .header__content h2 { 33 | font-size: 65px; 34 | color: rgb(236, 236, 72); 35 | text-transform: uppercase; 36 | transform: rotate(-10deg); 37 | text-shadow: 10px 10px rgba(0, 0, 0, 0.5); 38 | margin-bottom: 50px; 39 | } 40 | .button { 41 | display: inline-block; 42 | font-family: 'Montserrat', Helvetica, sans-serif; 43 | font-size: 16px; 44 | -webkit-font-smoothing: antialiased; 45 | position: relative; 46 | padding: 8px 16px; 47 | border: none; 48 | color: white; 49 | transition: 0.2s; 50 | text-decoration: none; 51 | border: white solid 1px; 52 | text-transform: uppercase; 53 | letter-spacing: 1px; 54 | opacity: 0.95; 55 | padding-right: 3.5em; 56 | cursor: pointer; 57 | } 58 | .button:before, 59 | .button:after { 60 | position: absolute; 61 | padding-top: inherit; 62 | padding-bottom: inherit; 63 | font-size: inherit; 64 | top: 0; 65 | bottom: 0; 66 | right: 0; 67 | width: 2.8em; 68 | transition: 0.2s; 69 | transform-origin: 50% 60%; 70 | } 71 | 72 | /* Arrow Button Markup */ 73 | .arrow { 74 | background: #3c3b6e; 75 | } 76 | .arrow:hover { 77 | background: #b22234; 78 | } 79 | .arrow:active, 80 | .arrow:focus { 81 | background: #b22234; 82 | } 83 | /* Entity Icon */ 84 | .arrow:after { 85 | content: '\2794'; 86 | } 87 | /* Set Arrow Icon Bounce Animation */ 88 | .arrow:hover:after { 89 | -webkit-animation: bounceright 0.3s alternate ease infinite; 90 | animation: bounceright 0.3s alternate ease infinite; 91 | } 92 | /* Phone Button Markup */ 93 | .phone { 94 | background: #333; 95 | } 96 | .phone:hover { 97 | background: #111; 98 | } 99 | .phone:active, 100 | .phone:focus { 101 | background: #3c3b6e; 102 | } 103 | 104 | /* Entity Icon */ 105 | .phone:after { 106 | content: '\260E'; 107 | } 108 | /* Set Phone Icon Wiggle Animation */ 109 | .phone:hover:after { 110 | -webkit-animation: wiggle 0.05s alternate ease infinite; 111 | animation: wiggle 0.05s alternate ease infinite; 112 | } 113 | 114 | /* Animations */ 115 | 116 | @-webkit-keyframes bounceright { 117 | from { 118 | -webkit-transform: translateX(0); 119 | } 120 | to { 121 | -webkit-transform: translateX(3px); 122 | } 123 | } 124 | @-webkit-keyframes wiggle { 125 | from { 126 | -webkit-transform: rotate(0deg); 127 | } 128 | to { 129 | -webkit-transform: rotate(30deg); 130 | } 131 | } 132 | @keyframes bounceright { 133 | from { 134 | transform: translateX(0); 135 | } 136 | to { 137 | transform: translateX(3px); 138 | } 139 | } 140 | @keyframes wiggle { 141 | from { 142 | transform: rotate(0deg); 143 | } 144 | to { 145 | transform: rotate(30deg); 146 | } 147 | } 148 | .btn__group { 149 | width: 100%; 150 | height: 100%; 151 | display: flex; 152 | justify-content: cpace-between; 153 | align-items: center; 154 | } 155 | .preview { 156 | padding: 28px 0 100px 0; 157 | position: relative; 158 | background-color: #594657; 159 | } 160 | .preview__life { 161 | font-weight: 700; 162 | font-size: 20px; 163 | margin-left: 35px; 164 | margin-top: 35px; 165 | } 166 | .bgc_blue { 167 | position: absolute; 168 | right: 0; 169 | top: -155px; 170 | width: 50vw; 171 | height: 900px; 172 | background: rgba(146, 242, 255, 0.15); 173 | z-index: -1; 174 | } 175 | .tabcontainer { 176 | display: flex; 177 | width: 1130px; 178 | margin: 0 auto; 179 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); 180 | border-radius: 10px; 181 | } 182 | .tabcontent { 183 | width: 850px; 184 | position: relative; 185 | } 186 | .tabcontent img { 187 | width: 100%; 188 | height: 100%; 189 | object-fit: cover; 190 | } 191 | .tabcontent__descr { 192 | position: absolute; 193 | top: 0; 194 | left: 0; 195 | bottom: 0; 196 | right: 0; 197 | width: 100%; 198 | height: 100%; 199 | background: rgb(89, 70, 87, 0.5); 200 | padding: 50px; 201 | font-size: 24px; 202 | font-weight: 300; 203 | line-height: 36px; 204 | color: rgb(255, 255, 255, 0.6); 205 | border: 1px solid #fff; 206 | } 207 | .tabheader { 208 | width: 280px; 209 | padding: 35px 30px; 210 | background-color: #938791; 211 | } 212 | .tabheader h3 { 213 | font-weight: 700; 214 | font-size: 16px; 215 | } 216 | .tabheader__items { 217 | margin-top: 35px; 218 | padding-left: 26px; 219 | border-left: 1px solid #000; 220 | } 221 | .tabheader__item { 222 | font-weight: 700; 223 | font-size: 18px; 224 | font-weight: 300; 225 | margin-top: 10px; 226 | color: rgba(0, 0, 0, 0.6); 227 | cursor: pointer; 228 | transition: 0.3s all; 229 | } 230 | .tabheader__item_active { 231 | color: #000; 232 | font-size: 22px; 233 | font-weight: 700; 234 | } 235 | .offer { 236 | height: 80vh; 237 | background: #594657; 238 | } 239 | .offer__slider { 240 | width: 90%; 241 | height: 100%; 242 | display: flex; 243 | flex-direction: column; 244 | align-items: flex-start; 245 | margin: 0 auto; 246 | } 247 | .offer__slider-counter { 248 | display: flex; 249 | width: 180px; 250 | align-items: center; 251 | font-size: 24px; 252 | color: rgba(0, 0, 0, 0.5); 253 | } 254 | .offer__slider-wrapper { 255 | width: 100%; 256 | margin-top: 15px; 257 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25); 258 | } 259 | .offer__slider-prev { 260 | margin-right: 10px; 261 | cursor: pointer; 262 | } 263 | .offer__slider-next { 264 | margin-left: 10px; 265 | cursor: pointer; 266 | } 267 | .offer__slider #current { 268 | font-size: 48px; 269 | font-weight: 700; 270 | color: #000; 271 | } 272 | .offer__slide { 273 | position: relative; 274 | width: 100%; 275 | height: 590px; 276 | } 277 | .offer__slide img { 278 | width: 100%; 279 | height: 100%; 280 | object-fit: cover; 281 | } 282 | .menu { 283 | background-color: #594657; 284 | padding: 100px 0 50px 0; 285 | } 286 | .menu .container { 287 | display: flex; 288 | justify-content: space-between; 289 | align-items: flex-start; 290 | } 291 | .menu .title { 292 | text-align: center; 293 | } 294 | .menu__field { 295 | margin-top: 50px; 296 | padding: 50px 0; 297 | width: 100%; 298 | background-color: #938791; 299 | } 300 | .menu__item { 301 | width: 320px; 302 | min-height: 450px; 303 | background: url('../img/header.jpg'); 304 | box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25); 305 | font-size: 16px; 306 | font-weight: 300; 307 | border: 1px solid #fff; 308 | } 309 | .menu__item img { 310 | width: 100%; 311 | height: 200px; 312 | object-fit: cover; 313 | } 314 | .menu__item-subtitle { 315 | font-weight: 700; 316 | font-size: 18px; 317 | padding: 0 20px; 318 | margin-top: 20px; 319 | } 320 | .menu__item-descr { 321 | margin-top: 20px; 322 | padding: 0 20px; 323 | } 324 | .menu__item-divider { 325 | width: 100%; 326 | height: 1px; 327 | background-color: rgba(0, 0, 0, 0.25); 328 | margin-top: 40px; 329 | } 330 | .menu__item-price { 331 | display: flex; 332 | justify-content: space-between; 333 | align-items: center; 334 | padding: 10px 20px; 335 | } 336 | .menu__item-price span { 337 | font-size: 24px; 338 | font-weight: 700; 339 | } 340 | .order { 341 | padding-bottom: 80px; 342 | background-color: #594657; 343 | } 344 | .order .title { 345 | text-align: center; 346 | } 347 | .order__form { 348 | margin-top: 70px; 349 | padding: 0 100px; 350 | display: flex; 351 | justify-content: space-between; 352 | align-items: center; 353 | } 354 | .order__form img { 355 | transform: scale(1.5); 356 | } 357 | .order__input { 358 | width: 280px; 359 | height: 50px; 360 | background: #303030; 361 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 362 | border: none; 363 | font-size: 18px; 364 | padding: 0 20px; 365 | outline: 0; 366 | border-radius: 5px; 367 | border: 1px solid #fff; 368 | text-align: center; 369 | color: #fff; 370 | } 371 | .order__input::placeholder { 372 | color: rgb(255, 255, 255, 0.6); 373 | } 374 | .order_btn { 375 | width: 280px; 376 | height: 50px; 377 | font-size: 18px; 378 | padding: 8px 40px; 379 | border-radius: 5px; 380 | } 381 | .promotion { 382 | padding: 70px 0 240px 0; 383 | position: relative; 384 | background-color: #594657; 385 | } 386 | .promotion .container { 387 | display: flex; 388 | } 389 | .promotion .bgc_y { 390 | position: absolute; 391 | width: 50%; 392 | height: 499px; 393 | background: rgba(243, 255, 222, 0.35); 394 | z-index: -1; 395 | top: -50px; 396 | left: 0; 397 | } 398 | .promotion__text { 399 | width: 50%; 400 | } 401 | .promotion__descr { 402 | margin-top: 40px; 403 | font-size: 20px; 404 | line-height: 24px; 405 | font-weight: 300; 406 | } 407 | .promotion__descr span { 408 | font-weight: 700; 409 | font-size: 26px; 410 | } 411 | .promotion__timer { 412 | width: 50%; 413 | } 414 | .promotion__timer .title { 415 | text-align: right; 416 | } 417 | .promotion__timer .timer { 418 | margin-top: 60px; 419 | padding-left: 95px; 420 | display: flex; 421 | justify-content: space-between; 422 | align-items: center; 423 | } 424 | .promotion__timer .timer__block { 425 | width: 102px; 426 | height: 120px; 427 | background: #938791; 428 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); 429 | font-size: 16px; 430 | font-weight: 300; 431 | text-align: center; 432 | border: 1px solid #fff; 433 | } 434 | .promotion__timer .timer__block span { 435 | display: block; 436 | margin-top: 20px; 437 | margin-bottom: 5px; 438 | font-size: 56px; 439 | font-weight: 700; 440 | } 441 | .modal { 442 | position: fixed; 443 | top: 0; 444 | left: 0; 445 | z-index: 1050; 446 | display: none; 447 | width: 100%; 448 | height: 100vh; 449 | overflow: hidden; 450 | background-color: rgba(0, 0, 0, 0.5); 451 | } 452 | .modal__dialog { 453 | max-width: 500px; 454 | margin: 40px auto; 455 | } 456 | .modal__content { 457 | position: relative; 458 | width: 100%; 459 | padding: 40px; 460 | background-color: rgb(255, 255, 255, 0.6); 461 | border: 1px solid rgba(0, 0, 0, 0.2); 462 | border-radius: 4px; 463 | max-height: 80vh; 464 | overflow-y: auto; 465 | } 466 | .modal__close { 467 | position: absolute; 468 | top: 8px; 469 | right: 14px; 470 | font-size: 30px; 471 | color: #000; 472 | opacity: 0.5; 473 | font-weight: 700; 474 | border: none; 475 | background-color: transparent; 476 | cursor: pointer; 477 | } 478 | .modal__title { 479 | text-align: center; 480 | font-size: 22px; 481 | text-transform: uppercase; 482 | } 483 | .modal__input { 484 | display: block; 485 | margin: 20px auto 20px auto; 486 | width: 280px; 487 | height: 50px; 488 | background: #303030; 489 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 490 | font-size: 18px; 491 | padding: 0 20px; 492 | outline: 0; 493 | border-radius: 5px; 494 | border: 1px solid #fff; 495 | text-align: center; 496 | color: #fff; 497 | } 498 | .modal_btn { 499 | display: block; 500 | margin: 20px auto 20px auto; 501 | width: 280px; 502 | height: 50px; 503 | font-size: 18px; 504 | padding: 8px 40px; 505 | border-radius: 5px; 506 | } 507 | .loader { 508 | width: 100vw; 509 | height: 100vh; 510 | overflow: hidden; 511 | position: fixed; 512 | display: flex; 513 | justify-content: center; 514 | align-items: center; 515 | background-color: #2d3436; 516 | background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%); 517 | z-index: 99999; 518 | perspective: 500px; 519 | transition: all 0.5s ease; 520 | } 521 | section { 522 | position: absolute; 523 | transform-style: preserve-3d; 524 | } 525 | .paper_man_wrapper { 526 | -webkit-animation: cameraY 7000ms linear infinite; 527 | animation: cameraY 7000ms linear infinite; 528 | } 529 | 530 | .paper_man { 531 | top: -100px; 532 | left: -50px; 533 | -webkit-animation: jump 250ms -110ms ease-in-out infinite alternate; 534 | animation: jump 250ms -110ms ease-in-out infinite alternate; 535 | } 536 | .paper_man .part { 537 | background: white; 538 | } 539 | .paper_man .part::before { 540 | content: ''; 541 | position: absolute; 542 | width: 100%; 543 | height: 100%; 544 | background: #646464; 545 | transform: translateZ(-1px); 546 | } 547 | .paper_man_body { 548 | transform-origin: 50% 100%; 549 | transform: rotateX(-20deg); 550 | width: 60px; 551 | height: 100px; 552 | -webkit-animation: shake4 2000ms -100ms ease-in-out infinite; 553 | animation: shake4 2000ms -100ms ease-in-out infinite; 554 | } 555 | .paper_man_head { 556 | transform-origin: 50% 100%; 557 | top: -40px; 558 | left: calc(50% - 20px); 559 | width: 40px; 560 | height: 40px; 561 | transform: rotateX(-10deg); 562 | -webkit-animation: shake4 1000ms -800ms ease-in-out infinite; 563 | animation: shake4 1000ms -800ms ease-in-out infinite; 564 | } 565 | .paper_man_arm.left { 566 | transform-origin: 0 0; 567 | right: 0px; 568 | -webkit-animation: shake1 1000ms -400ms ease-in-out infinite; 569 | animation: shake1 1000ms -400ms ease-in-out infinite; 570 | } 571 | .paper_man_arm.right { 572 | transform-origin: 100% 0; 573 | left: -20px; 574 | -webkit-animation: shake1 1000ms -900ms ease-in-out infinite; 575 | animation: shake1 1000ms -900ms ease-in-out infinite; 576 | } 577 | .paper_man_arm_1 { 578 | transform-origin: 50% 0; 579 | width: 20px; 580 | height: 50px; 581 | } 582 | .paper_man_arm_2 { 583 | transform-origin: 50% 0; 584 | bottom: -50px; 585 | width: 20px; 586 | height: 50px; 587 | } 588 | .left .paper_man_arm_2 { 589 | -webkit-animation: shake3 1000ms -800ms ease-in-out infinite; 590 | animation: shake3 1000ms -800ms ease-in-out infinite; 591 | } 592 | .right .paper_man_arm_2 { 593 | -webkit-animation: shake3 1000ms -300ms ease-in-out infinite; 594 | animation: shake3 1000ms -300ms ease-in-out infinite; 595 | } 596 | .paper_man_arm_hand { 597 | transform-origin: 50% 0; 598 | bottom: -15px; 599 | width: 20px; 600 | height: 15px; 601 | } 602 | .left .paper_man_arm_hand { 603 | -webkit-animation: shake3 1000ms -200ms ease-in-out infinite; 604 | animation: shake3 1000ms -200ms ease-in-out infinite; 605 | } 606 | .right .paper_man_arm_hand { 607 | -webkit-animation: shake3 1000ms -700ms ease-in-out infinite; 608 | animation: shake3 1000ms -700ms ease-in-out infinite; 609 | } 610 | .paper_man_leg { 611 | transform-origin: 50% 0; 612 | top: 100px; 613 | } 614 | .paper_man_leg.left { 615 | right: 30px; 616 | -webkit-animation: shake1 1000ms ease-in-out infinite; 617 | animation: shake1 1000ms ease-in-out infinite; 618 | } 619 | .paper_man_leg.right { 620 | left: 0; 621 | -webkit-animation: shake1 1000ms -500ms ease-in-out infinite; 622 | animation: shake1 1000ms -500ms ease-in-out infinite; 623 | } 624 | .paper_man_leg_1 { 625 | transform-origin: 50% 0; 626 | width: 30px; 627 | height: 50px; 628 | } 629 | .paper_man_leg_2 { 630 | transform-origin: 50% 0; 631 | bottom: -40px; 632 | width: 30px; 633 | height: 40px; 634 | } 635 | .left .paper_man_leg_2 { 636 | -webkit-animation: shake2 1000ms -600ms ease-in-out infinite; 637 | animation: shake2 1000ms -600ms ease-in-out infinite; 638 | } 639 | .right .paper_man_leg_2 { 640 | -webkit-animation: shake2 1000ms -100ms ease-in-out infinite; 641 | animation: shake2 1000ms -100ms ease-in-out infinite; 642 | } 643 | .paper_man_leg_foot { 644 | transform-origin: 50% 0; 645 | bottom: -20px; 646 | width: 30px; 647 | height: 20px; 648 | } 649 | .left .paper_man_leg_foot { 650 | -webkit-animation: shake3 1000ms -400ms ease-in-out infinite; 651 | animation: shake3 1000ms -400ms ease-in-out infinite; 652 | } 653 | .right .paper_man_leg_foot { 654 | -webkit-animation: shake3 1000ms -900ms ease-in-out infinite; 655 | animation: shake3 1000ms -900ms ease-in-out infinite; 656 | } 657 | 658 | @-webkit-keyframes shake1 { 659 | 0% { 660 | transform: rotateX(80deg); 661 | } 662 | 50% { 663 | transform: rotateX(-80deg); 664 | } 665 | 100% { 666 | transform: rotateX(80deg); 667 | } 668 | } 669 | 670 | @keyframes shake1 { 671 | 0% { 672 | transform: rotateX(80deg); 673 | } 674 | 50% { 675 | transform: rotateX(-80deg); 676 | } 677 | 100% { 678 | transform: rotateX(80deg); 679 | } 680 | } 681 | @-webkit-keyframes shake2 { 682 | 0% { 683 | transform: rotateX(0deg); 684 | } 685 | 50% { 686 | transform: rotateX(-100deg); 687 | } 688 | 100% { 689 | transform: rotateX(0deg); 690 | } 691 | } 692 | @keyframes shake2 { 693 | 0% { 694 | transform: rotateX(0deg); 695 | } 696 | 50% { 697 | transform: rotateX(-100deg); 698 | } 699 | 100% { 700 | transform: rotateX(0deg); 701 | } 702 | } 703 | @-webkit-keyframes shake3 { 704 | 0% { 705 | transform: rotateX(10deg); 706 | } 707 | 50% { 708 | transform: rotateX(120deg); 709 | } 710 | 100% { 711 | transform: rotateX(10deg); 712 | } 713 | } 714 | @keyframes shake3 { 715 | 0% { 716 | transform: rotateX(10deg); 717 | } 718 | 50% { 719 | transform: rotateX(120deg); 720 | } 721 | 100% { 722 | transform: rotateX(10deg); 723 | } 724 | } 725 | @-webkit-keyframes shake4 { 726 | 0% { 727 | transform: rotateX(-30deg); 728 | } 729 | 50% { 730 | transform: rotateX(-10deg); 731 | } 732 | 100% { 733 | transform: rotateX(-30deg); 734 | } 735 | } 736 | @keyframes shake4 { 737 | 0% { 738 | transform: rotateX(-30deg); 739 | } 740 | 50% { 741 | transform: rotateX(-10deg); 742 | } 743 | 100% { 744 | transform: rotateX(-30deg); 745 | } 746 | } 747 | @-webkit-keyframes cameraY { 748 | 0% { 749 | transform: rotateY(0deg); 750 | } 751 | 100% { 752 | transform: rotateY(360deg); 753 | } 754 | } 755 | @keyframes cameraY { 756 | 0% { 757 | transform: rotateY(0deg); 758 | } 759 | 100% { 760 | transform: rotateY(360deg); 761 | } 762 | } 763 | @-webkit-keyframes cameraX { 764 | 0% { 765 | transform: rotateX(-50deg); 766 | } 767 | 100% { 768 | transform: rotateX(50deg); 769 | } 770 | } 771 | @keyframes cameraX { 772 | 0% { 773 | transform: rotateX(-50deg); 774 | } 775 | 100% { 776 | transform: rotateX(50deg); 777 | } 778 | } 779 | @-webkit-keyframes jump { 780 | 0% { 781 | transform: rotateX(10deg) translateY(0); 782 | } 783 | 100% { 784 | transform: rotateX(20deg) translateY(-30px); 785 | } 786 | } 787 | @keyframes jump { 788 | 0% { 789 | transform: rotateX(10deg) translateY(0); 790 | } 791 | 100% { 792 | transform: rotateX(20deg) translateY(-30px); 793 | } 794 | } 795 | 796 | .show { 797 | display: block; 798 | } 799 | .hide { 800 | display: none; 801 | } 802 | .fade { 803 | animation-name: fade; 804 | animation-duration: 1.5s; 805 | } 806 | @keyframes fade { 807 | 0% { 808 | opacity: 0; 809 | } 810 | 100% { 811 | opacity: 1; 812 | } 813 | } 814 | -------------------------------------------------------------------------------- /icons/Group 5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 16 | 18 | image/svg+xml 19 | 21 | 22 | 23 | 24 | 26 | 29 | 33 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /icons/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/switch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/veg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/header.jpg -------------------------------------------------------------------------------- /img/slider/slider1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/slider/slider1.jpg -------------------------------------------------------------------------------- /img/slider/slider2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/slider/slider2.jpg -------------------------------------------------------------------------------- /img/slider/slider3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/slider/slider3.jpg -------------------------------------------------------------------------------- /img/slider/slider4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/slider/slider4.jpg -------------------------------------------------------------------------------- /img/slider/slider5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/slider/slider5.jpg -------------------------------------------------------------------------------- /img/tabs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/tabs/1.png -------------------------------------------------------------------------------- /img/tabs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/tabs/2.jpg -------------------------------------------------------------------------------- /img/tabs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/tabs/3.jpg -------------------------------------------------------------------------------- /img/tabs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/tabs/4.jpg -------------------------------------------------------------------------------- /img/tabs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/6f006397969eda1554b7f98307974b781d5b821c/img/tabs/5.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Serial 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 |
51 |
52 |
53 |

Central Intellegance

54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 | 62 | 63 |
64 |
65 |
66 |
67 |
68 |

Category Of Series

69 |
70 |
Drama
71 |
Comedy
72 |
Documentary
73 |
Sport
74 |
Fantastic
75 |
76 |
77 | 78 |
79 | drama 80 |
81 | Drama is the specific mode of fiction represented in performance: 82 | a play, opera, mime, ballet, etc., performed in a theatre, or on 83 | radio or television.[1] Considered as a genre of poetry in 84 | general, the dramatic mode has been contrasted with the epic and 85 | the lyrical modes ever since Aristotle's Poetics (c. 335 BC)—the 86 | earliest work of dramatic theory.[2] The term "drama" comes from a 87 | Greek word "draō" meaning "to do / to act" (Classical Greek: 88 | δρᾶμα, drama), which is derived from "I do" (Classical Greek: 89 | δράω, drao). The two masks associated with drama represent the 90 | traditional generic division between comedy and tragedy. In 91 | English (as was the analogous case in many other European 92 | languages), the word play or game. 93 |
94 |
95 | 96 | 97 |
98 | comedy 99 |
100 | Comedy (from the Greek: κωμῳδία, kōmōdía) is a genre of fiction 101 | that consists of discourses or works intended to be humorous or 102 | amusing by inducing laughter, especially in theatre, film, 103 | stand-up comedy, television, radio, books, or any other 104 | entertainment medium. The term originated in ancient Greece: in 105 | Athenian democracy, the public opinion of voters was influenced by 106 | political satire performed by comic poets in theaters.[1] The 107 | theatrical genre of Greek comedy can be described as a dramatic 108 | performance pitting two groups, ages, genders, or societies 109 | against each other in an amusing agon or conflict. Northrop Frye 110 | depicted these two opposing sides as a "Society of Youth". 111 |
112 |
113 | 114 | 115 |
116 | documentary 117 |
118 | A documentary film or documentary is a non-fictional 119 | motion-picture intended to "document reality, primarily for the 120 | purposes of instruction, education, or maintaining a historical 121 | record".[1] Bill Nichols has characterised the documentary in 122 | terms of "a filmmaking practice, a cinematic tradition, and mode 123 | of audience reception [that remains] a practice without clear 124 | boundaries".[2] Early documentary films, originally called 125 | "actuality films", lasted one minute or less. Over time, 126 | documentaries have evolved to become longer in length, and to 127 | include more categories; some examples being: educational, 128 | observational, and docufiction. Documentaries are very informative 129 | and are often used within schools, as a resource to teach various 130 | principles. 131 |
132 |
133 | 134 | 135 |
136 | sport 137 |
138 | Sport pertains to any form of competitive physical activity or 139 | game[1] that aims to use, maintain or improve physical ability and 140 | skills while providing enjoyment to participants and, in some 141 | cases, entertainment to spectators.[2] Sports can, through casual 142 | or organized participation, improve one's physical health. 143 | Hundreds of sports exist, from those between single contestants, 144 | through to those with hundreds of simultaneous participants, 145 | either in teams or competing as individuals. In certain sports 146 | such as racing, many contestants may compete, simultaneously or 147 | consecutively, with one winner; in others, the contest (a match) 148 | is between two sides, each attempting to exceed the other. Some 149 | sports allow. 150 |
151 |
152 | 153 | 154 |
155 | fantastic 156 |
157 | The fantastic requires the fulfillment of three conditions. First, 158 | the text must oblige the reader to consider the world of the 159 | characters as a world of living persons and to hesitate between a 160 | natural or supernatural explanation of the events described. 161 | Second, this hesitation may also be experienced by a character; 162 | thus the reader's role is so to speak entrusted to a character, 163 | and at the same time the hesitation is represented, it becomes one 164 | of the themes of the work—in the case of naive reading, the actual 165 | reader identifies himself with the character. Third, the reader 166 | must adopt a certain attitude with regard to the text: he will 167 | reject allegorical as well as "poetic" interpretations 168 |
169 |
170 |
171 |
172 |
173 | 174 | 175 |
176 |
177 |
Order the best place!
178 |
179 | 186 | 193 | right 194 | 195 |
196 |
197 |
198 | 199 | 200 |
201 |
202 |
203 |
204 |
205 |
206 | prev 207 |
208 | 03 209 | / 210 | 05 211 |
212 | next 213 |
214 |
215 |
216 | 217 | 223 | 224 | 225 | 231 | 232 | 233 | 239 | 240 | 241 | 247 | 248 | 249 |
250 | slider5 251 |
252 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 253 | Eligendi iure, nam fuga vero eum numquam autem! Pariatur laborum 254 | voluptas adipisci debitis, atque ut fugit aperiam minus porro 255 | labore consectetur placeat eius aliquam, dicta, maiores ea 256 | numquam esse cum distinctio laboriosam non hic. Possimus est 257 | ipsam unde, nulla voluptas, suscipit vitae eligendi velit 258 | laboriosam eveniet quae eaque? Perferendis at ullam accusantium 259 | numquam ratione, cum repellendus labore ea tempora. Deserunt, 260 | unde optio qui at vero nisi non ipsum cumque numquam minima 261 | minus tempora nesciunt aspernatur omnis consequuntur, itaque 262 | adipisci et explicabo! Sint repudiandae dolores, nobis 263 | consectetur quasi eos. Accusantium alias quisquam qui id 264 | eligendi nisi error. Quo perferendis sapiente provident dolores 265 | sequi, fugit dignissimos facilis eaque laudantium minima nisi 266 | enim maxime! A atque labore accusantium, dolore non deserunt 267 | sunt quos incidunt, hic iste quidem animi? Culpa repellat 268 | reprehenderit minus qui quam reiciendis, maiores velit totam 269 | earum iste, modi temporibus vitae hic et esse aspernatur 270 | perferendis ipsa porro ad consectetur laborum. Ratione 271 | perferendis minima ad nostrum earum quos vero ab, amet est 272 | incidunt. 273 |
274 |
275 |
276 |
277 |
278 |
279 | 280 | 281 | 287 | 288 | 289 |
290 |
291 |
292 |
293 |
Promotion for new customers!
294 |
295 | We value every client and invite you to become one of them on very 296 | favorable conditions. Anyone who orders food delivery for week, a 297 | discount of 20%!

298 | The promotion will end on May 20 at 00:00 299 |
300 |
301 |
302 |
Remaining until the end of the promotion:
303 |
304 |
305 | 99 306 | day 307 |
308 |
309 | 09 310 | hours 311 |
312 |
313 | 99 314 | minutes 315 |
316 |
317 | 09 318 | seconds 319 |
320 |
321 |
322 |
323 |
324 | 325 | 326 | 353 | 354 | 355 | 356 | 357 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', () => { 2 | const tabsParent = document.querySelector('.tabheader__items'), 3 | tabs = document.querySelectorAll('.tabheader__item'), 4 | tabsContent = document.querySelectorAll('.tabcontent'), 5 | loader = document.querySelector('.loader') 6 | 7 | // Loader 8 | setTimeout(() => { 9 | loader.style.opacity = '0' 10 | setTimeout(() => { 11 | loader.style.display = 'none' 12 | }, 500) 13 | }, 2000) 14 | 15 | // Tabs 16 | function hideTabContent() { 17 | tabsContent.forEach((item) => { 18 | item.classList.add('hide') 19 | item.classList.remove('show', 'fade') 20 | }) 21 | 22 | tabs.forEach((item) => { 23 | item.classList.remove('tabheader__item_active') 24 | }) 25 | } 26 | 27 | function showTabContent(i = 0) { 28 | tabsContent[i].classList.add('show', 'fade') 29 | tabsContent[i].classList.remove('hide') 30 | tabs[i].classList.add('tabheader__item_active') 31 | } 32 | 33 | hideTabContent() 34 | showTabContent() 35 | 36 | tabsParent.addEventListener('click', (event) => { 37 | const target = event.target 38 | if (target && target.classList.contains('tabheader__item')) { 39 | tabs.forEach((item, idx) => { 40 | if (target == item) { 41 | hideTabContent() 42 | showTabContent(idx) 43 | } 44 | }) 45 | } 46 | }) 47 | 48 | // Timer 49 | 50 | const deadline = '2022-08-11' 51 | 52 | function getTimeRemaining(endtime) { 53 | let days, hours, minutes, seconds 54 | const timer = Date.parse(endtime) - Date.parse(new Date()) 55 | 56 | if (timer <= 0) { 57 | days = 0 58 | hours = 0 59 | minutes = 0 60 | seconds = 0 61 | } else { 62 | days = Math.floor(timer / (1000 * 60 * 60 * 24)) 63 | hours = Math.floor((timer / (1000 * 60 * 60)) % 24) 64 | minutes = Math.floor((timer / 1000 / 60) % 60) 65 | seconds = Math.floor((timer / 1000) % 60) 66 | } 67 | 68 | return { timer, days, hours, minutes, seconds } 69 | } 70 | 71 | function getZero(num) { 72 | if (num >= 0 && num < 10) { 73 | return `0${num}` 74 | } else { 75 | return num 76 | } 77 | } 78 | 79 | function setClock(selector, endtime) { 80 | const timer = document.querySelector(selector), 81 | days = timer.querySelector('#days'), 82 | hours = timer.querySelector('#hours'), 83 | minutes = timer.querySelector('#minutes'), 84 | seconds = timer.querySelector('#seconds'), 85 | timeInterval = setInterval(updatClock, 1000) 86 | 87 | updatClock() 88 | 89 | function updatClock() { 90 | const t = getTimeRemaining(endtime) 91 | 92 | days.innerHTML = getZero(t.days) 93 | hours.innerHTML = getZero(t.hours) 94 | minutes.innerHTML = getZero(t.minutes) 95 | seconds.innerHTML = getZero(t.seconds) 96 | 97 | if (t.timer <= 0) { 98 | clearInterval(timeInterval) 99 | } 100 | } 101 | } 102 | 103 | setClock('.timer', deadline) 104 | 105 | // Modal 106 | const modalTrigger = document.querySelectorAll('[data-modal]'), 107 | modal = document.querySelector('.modal'), 108 | modalCloseBtn = document.querySelector('[data-close]') 109 | 110 | function closeModal() { 111 | modal.classList.add('hide') 112 | modal.classList.remove('show') 113 | document.body.style.overflow = '' 114 | } 115 | 116 | function openModal() { 117 | modal.classList.add('show') 118 | modal.classList.remove('hide') 119 | document.body.style.overflow = 'hidden' 120 | clearInterval(modalTimerId) 121 | } 122 | 123 | modalTrigger.forEach((item) => { 124 | item.addEventListener('click', openModal) 125 | }) 126 | 127 | modalCloseBtn.addEventListener('click', closeModal) 128 | 129 | modal.addEventListener('click', (e) => { 130 | if (e.target == modal) { 131 | closeModal() 132 | } 133 | }) 134 | 135 | document.addEventListener('keydown', (e) => { 136 | if (e.code === 'Escape' && modal.classList.contains('show')) { 137 | closeModal() 138 | } 139 | }) 140 | 141 | // const modalTimerId = setTimeout(openModal, 5000) 142 | 143 | function showModalByScroll() { 144 | if ( 145 | window.pageYOffset + document.documentElement.clientHeight >= 146 | document.documentElement.scrollHeight 147 | ) { 148 | openModal() 149 | window.removeEventListener('scroll', showModalByScroll) 150 | } 151 | } 152 | 153 | window.addEventListener('scroll', showModalByScroll) 154 | 155 | // Class 156 | class MenuCard { 157 | constructor(src, alt, title, descr, price, parentSelector, ...classes) { 158 | this.src = src 159 | this.alt = alt 160 | this.title = title 161 | this.descr = descr 162 | this.price = price 163 | this.classes = classes 164 | this.parent = document.querySelector(parentSelector) 165 | this.transfer = 11000 166 | this.chageToUZS() 167 | } 168 | 169 | chageToUZS() { 170 | this.price = this.price * this.transfer 171 | } 172 | 173 | render() { 174 | const element = document.createElement('div') 175 | 176 | if (this.classes.length === 0) { 177 | this.element = 'menu__item' 178 | element.classList.add(this.element) 179 | } else { 180 | this.classes.forEach((classname) => element.classList.add(classname)) 181 | } 182 | 183 | element.innerHTML = ` 184 | ${this.alt} 185 | 186 | 187 | 188 | 192 | ` 193 | 194 | this.parent.append(element) 195 | } 196 | } 197 | 198 | new MenuCard( 199 | 'img/tabs/1.png', 200 | 'usual', 201 | 'Plan "Usual"', 202 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.', 203 | 10, 204 | '.menu .container' 205 | ).render() 206 | 207 | new MenuCard( 208 | 'img/tabs/2.jpg', 209 | 'plan', 210 | 'Plan “Premium”', 211 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.', 212 | 20, 213 | '.menu .container', 214 | 'menu__item' 215 | ).render() 216 | 217 | new MenuCard( 218 | 'img/tabs/3.jpg', 219 | 'vip', 220 | 'Plan VIP', 221 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.', 222 | 30, 223 | '.menu .container', 224 | 'menu__item' 225 | ).render() 226 | }) 227 | --------------------------------------------------------------------------------