├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── cta-banner.png │ ├── hero-banner.png │ ├── hero-bg.png │ ├── hero-shape-1.svg │ ├── hero-shape-2.svg │ ├── instructuion-1.png │ ├── instructuion-2.png │ ├── instructuion-3.png │ ├── logo-footer.svg │ ├── logo.svg │ ├── newsletter-banenr.png │ ├── partner-1.jpg │ ├── partner-2.jpg │ ├── rest-1.jpg │ ├── rest-2.jpg │ ├── rest-3.jpg │ ├── testi-avatar.jpg │ ├── testi-shape.svg │ └── testimonial-banner.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/fasteat) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/fasteat?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/fasteat?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/P_yKqjx35J4?style=social)](https://youtu.be/P_yKqjx35J4) 8 | 9 |
10 |
11 | 12 |

Fasteat - Food delivery Website

13 | 14 | Fasteat is a fully responsive food delivery website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Fasteat Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Fasteat** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/fasteat.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/fasteat.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --sonic-silver: hsl(0, 0%, 47%); 24 | --eerie-black: hsl(210, 11%, 15%); 25 | --light-gray: hsl(0, 0%, 83%); 26 | --davys-gray: hsl(0, 0%, 30%); 27 | --marigold: hsl(39, 96%, 48%); 28 | --platinum: hsl(0, 0%, 90%); 29 | --white: hsl(0, 0%, 100%); 30 | --black: hsl(0, 0%, 0%); 31 | --jet: hsl(0, 0%, 21%); 32 | 33 | /** 34 | * typography 35 | */ 36 | 37 | --ff-poppins: "Poppins", sans-serif; 38 | 39 | --fs-1: 7rem; 40 | --fs-2: 4.2rem; 41 | --fs-3: 3.8rem; 42 | --fs-4: 3.6rem; 43 | --fs-5: 3.4rem; 44 | --fs-6: 3.2rem; 45 | --fs-7: 3rem; 46 | --fs-8: 2.4rem; 47 | --fs-9: 2rem; 48 | --fs-10: 1.8rem; 49 | --fs-11: 1.4rem; 50 | --fs-12: 1.2rem; 51 | 52 | --fw-500: 500; 53 | --fw-700: 700; 54 | 55 | /** 56 | * spacing 57 | */ 58 | 59 | --section-padding: 100px; 60 | 61 | /** 62 | * border radius 63 | */ 64 | 65 | --radius-circle: 50%; 66 | --radius-20: 20px; 67 | --radius-15: 15px; 68 | --radius-10: 10px; 69 | 70 | /** 71 | * box shadow 72 | */ 73 | 74 | --shadow-1: 0 0 30px 4px hsla(0, 0%, 0%, 0.05); 75 | --shadow-2: -1px 15px 26px -4px hsla(0, 5%, 61%, 0.15); 76 | 77 | /** 78 | * transition 79 | */ 80 | 81 | --transition-1: 0.25s ease; 82 | --transition-2: 0.5s ease; 83 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 84 | 85 | } 86 | 87 | 88 | 89 | 90 | 91 | /*-----------------------------------*\ 92 | #RESET 93 | \*-----------------------------------*/ 94 | 95 | *, 96 | *::before, 97 | *::after { 98 | margin: 0; 99 | padding: 0; 100 | box-sizing: border-box; 101 | } 102 | 103 | li { list-style: none; } 104 | 105 | a, 106 | img, 107 | span, 108 | input, 109 | button, 110 | ion-icon { display: block; } 111 | 112 | a { 113 | color: inherit; 114 | text-decoration: none; 115 | } 116 | 117 | img { height: auto; } 118 | 119 | input, 120 | button { 121 | background: none; 122 | border: none; 123 | font: inherit; 124 | } 125 | 126 | input { width: 100%; } 127 | 128 | button { cursor: pointer; } 129 | 130 | ion-icon { pointer-events: none; } 131 | 132 | address { font-style: normal; } 133 | 134 | html { 135 | font-family: var(--ff-poppins); 136 | font-size: 10px; 137 | scroll-behavior: smooth; 138 | } 139 | 140 | body { 141 | background-color: var(--white); 142 | color: var(--sonic-silver); 143 | font-size: 1.6rem; 144 | line-height: 1.6; 145 | overflow: hidden; 146 | } 147 | 148 | body.loaded { 149 | overflow-x: hidden; 150 | overflow-y: visible; 151 | } 152 | 153 | body.active { overflow: hidden; } 154 | 155 | :focus-visible { outline-offset: 4px; } 156 | 157 | ::-webkit-scrollbar { width: 10px; } 158 | 159 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } 160 | 161 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } 162 | 163 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } 164 | 165 | 166 | 167 | 168 | 169 | /*-----------------------------------*\ 170 | #REUSED STYLE 171 | \*-----------------------------------*/ 172 | 173 | .container { padding-inline: 15px; } 174 | 175 | .section { padding-block: var(--section-padding); } 176 | 177 | .h1, 178 | .h2, 179 | .h3, 180 | .h4, 181 | .h5 { 182 | color: var(--jet); 183 | font-weight: var(--fw-700); 184 | line-height: 1.2; 185 | } 186 | 187 | .h1, 188 | .h2 { font-size: var(--fs-2); } 189 | 190 | .h3 { font-size: var(--fs-5); } 191 | 192 | .h4 { font-size: var(--fs-6); } 193 | 194 | .h5 { font-size: var(--fs-8); } 195 | 196 | .has-bg-image { 197 | background-repeat: no-repeat; 198 | background-size: cover; 199 | background-position: center; 200 | } 201 | 202 | .has-before, 203 | .has-after { 204 | position: relative; 205 | z-index: 1; 206 | } 207 | 208 | .has-before::before, 209 | .has-after::after { 210 | position: absolute; 211 | content: ""; 212 | } 213 | 214 | .btn { 215 | padding: 13px 25px; 216 | display: flex; 217 | align-items: center; 218 | gap: 5px; 219 | max-width: max-content; 220 | background-color: var(--marigold); 221 | color: var(--white); 222 | text-transform: uppercase; 223 | border-radius: var(--radius-10); 224 | border: 2px solid var(--marigold); 225 | transition: var(--transition-1); 226 | overflow: hidden; 227 | } 228 | 229 | .btn::after { 230 | inset: -35px -20px; 231 | transform: skewY(25deg) translateY(-130px); 232 | transition: var(--transition-1); 233 | z-index: -1; 234 | } 235 | 236 | .btn:is(:hover, :focus-visible)::after { transform: skewY(25deg) translateY(0); } 237 | 238 | .btn-primary::after { background-color: var(--white); } 239 | 240 | .btn-primary:is(:hover, :focus-visible) { color: var(--marigold); } 241 | 242 | .btn-secondary { 243 | background-color: var(--white); 244 | color: var(--marigold); 245 | } 246 | 247 | .btn-secondary::after { background-color: var(--marigold); } 248 | 249 | .btn-secondary:is(:hover, :focus-visible) { color: var(--white); } 250 | 251 | .w-100 { width: 100%; } 252 | 253 | .section-title { margin-block-end: 20px; } 254 | 255 | .grid-list { 256 | display: grid; 257 | gap: 60px; 258 | } 259 | 260 | .rating-wrapper { 261 | display: flex; 262 | gap: 2px; 263 | } 264 | 265 | .rating-wrapper ion-icon { 266 | color: var(--marigold); 267 | font-size: 2rem; 268 | } 269 | 270 | .img-holder { 271 | aspect-ratio: var(--width) / var(--height); 272 | background-color: var(--light-gray); 273 | overflow: hidden; 274 | } 275 | 276 | .img-cover { 277 | width: 100%; 278 | height: 100%; 279 | object-fit: cover; 280 | } 281 | 282 | [data-reveal] { 283 | opacity: 0; 284 | transform: translateY(20px); 285 | transition: var(--transition-2); 286 | } 287 | 288 | [data-reveal="left"] { transform: translateX(-20px); } 289 | 290 | [data-reveal="right"] { transform: translateX(20px); } 291 | 292 | [data-reveal].revealed { 293 | opacity: 1; 294 | transform: translate(0); 295 | } 296 | 297 | 298 | 299 | 300 | 301 | /*-----------------------------------*\ 302 | #LOADING 303 | \*-----------------------------------*/ 304 | 305 | .loading-container { 306 | position: fixed; 307 | top: 0; 308 | left: 0; 309 | width: 100%; 310 | height: 100vh; 311 | background-color: var(--white); 312 | display: grid; 313 | place-items: center; 314 | transition: var(--transition-1); 315 | z-index: 6; 316 | } 317 | 318 | .loading-container.loaded { 319 | opacity: 0; 320 | visibility: hidden; 321 | } 322 | 323 | .loading-circle { 324 | width: 50px; 325 | height: 50px; 326 | border: 5px solid var(--platinum); 327 | border-block-start-color: var(--marigold); 328 | border-radius: var(--radius-circle); 329 | animation: loading 0.5s linear infinite; 330 | } 331 | 332 | @keyframes loading { 333 | 0% { transform: rotate(0); } 334 | 100% { transform: rotate(1turn); } 335 | } 336 | 337 | .loading-container.loaded .loading-circle { 338 | animation-iteration-count: 1; 339 | } 340 | 341 | 342 | 343 | 344 | 345 | /*-----------------------------------*\ 346 | #HEADER 347 | \*-----------------------------------*/ 348 | 349 | .overlay, 350 | .header .btn { display: none; } 351 | 352 | .header { 353 | position: absolute; 354 | top: 0; 355 | left: 0; 356 | width: 100%; 357 | padding-block: 20px; 358 | z-index: 4; 359 | } 360 | 361 | .header.active { 362 | position: fixed; 363 | background-color: var(--white); 364 | box-shadow: var(--shadow-2); 365 | animation: slideIn 0.5s ease forwards; 366 | } 367 | 368 | @keyframes slideIn { 369 | 0% { transform: translateY(-100%); } 370 | 100% { transform: translateY(0); } 371 | } 372 | 373 | .header .container { 374 | display: flex; 375 | justify-content: space-between; 376 | align-items: center; 377 | gap: 15px; 378 | } 379 | 380 | .header-action { margin-inline-start: auto; } 381 | 382 | .cart-btn, 383 | .nav-open-btn { 384 | padding: 12px; 385 | color: var(--marigold); 386 | } 387 | 388 | .cart-btn { font-size: 1.8rem; } 389 | 390 | .nav-open-btn { font-size: 2.2rem; } 391 | 392 | .navbar { 393 | position: fixed; 394 | top: 0; 395 | left: -100%; 396 | width: 100%; 397 | height: 100vh; 398 | background-color: var(--white); 399 | padding: 50px 40px; 400 | visibility: hidden; 401 | transition: 0.35s var(--cubic-out); 402 | z-index: 2; 403 | } 404 | 405 | .navbar.active { 406 | transform: translateX(100%); 407 | visibility: visible; 408 | transition-duration: 0.5s; 409 | } 410 | 411 | .nav-close-btn { 412 | position: absolute; 413 | top: 20px; 414 | right: 20px; 415 | color: var(--davys-gray); 416 | font-size: 2.8rem; 417 | border: 2px solid var(--light-gray); 418 | border-radius: var(--radius-circle); 419 | padding: 2px; 420 | } 421 | 422 | .nav-close-btn ion-icon { --ionicon-stroke-width: 35px; } 423 | 424 | .navbar .logo { margin-block-end: 30px; } 425 | 426 | .navbar-item { border-block-end: 1px solid var(--light-gray); } 427 | 428 | .navbar-link { 429 | color: var(--eerie-black); 430 | padding-block: 12px; 431 | } 432 | 433 | .navbar-link:is(:hover, :focus-visible) { color: var(--jet); } 434 | 435 | 436 | 437 | 438 | 439 | /*-----------------------------------*\ 440 | #HERO 441 | \*-----------------------------------*/ 442 | 443 | .hero { padding-block-start: calc(var(--section-padding) + 5px); } 444 | 445 | .hero .container { 446 | display: grid; 447 | gap: 80px; 448 | } 449 | 450 | .hero-text { margin-block: 8px 40px; } 451 | 452 | .hero .shape { display: none; } 453 | 454 | 455 | 456 | 457 | 458 | /*-----------------------------------*\ 459 | #INSTRUCTION 460 | \*-----------------------------------*/ 461 | 462 | .instruction { 463 | padding-block-start: 0; 464 | text-align: center; 465 | } 466 | 467 | .instruction .section-text { margin-block-end: 60px; } 468 | 469 | .instruction .card-title { margin-block: 25px; } 470 | 471 | .instruction .card-title .span { 472 | display: inline-block; 473 | color: var(--light-gray); 474 | font-size: var(--fs-4); 475 | line-height: 1; 476 | } 477 | 478 | 479 | 480 | 481 | 482 | /*-----------------------------------*\ 483 | #TOP RESTAURANT 484 | \*-----------------------------------*/ 485 | 486 | .restaurant-card { padding: 20px; } 487 | 488 | .restaurant-card .card-icon { 489 | width: 100px; 490 | border-radius: var(--radius-15); 491 | overflow: hidden; 492 | margin-block-end: 20px; 493 | } 494 | 495 | .restaurant-card .rating-wrapper { margin-block-start: 5px; } 496 | 497 | .restaurant-card .card-meta-wrapper { 498 | display: flex; 499 | flex-wrap: wrap; 500 | gap: 5px; 501 | } 502 | 503 | .restaurant-card .card-meta { 504 | color: var(--marigold); 505 | font-size: var(--fs-11); 506 | border: 1px solid; 507 | padding: 5px 15px; 508 | border-radius: var(--radius-10); 509 | margin-block: 15px 20px; 510 | transition: var(--transition-1); 511 | } 512 | 513 | .restaurant-card .card-meta:is(:hover, :focus-visible) { 514 | background-color: var(--marigold); 515 | color: var(--white); 516 | } 517 | 518 | .top-restaurant .btn { 519 | margin-inline: auto; 520 | margin-block-start: 40px; 521 | } 522 | 523 | 524 | 525 | 526 | 527 | /*-----------------------------------*\ 528 | #CTA 529 | \*-----------------------------------*/ 530 | 531 | .cta .container { 532 | display: grid; 533 | gap: 60px; 534 | } 535 | 536 | .cta .section-text { margin-block: 20px 30px; } 537 | 538 | 539 | 540 | 541 | 542 | /*-----------------------------------*\ 543 | #STATS 544 | \*-----------------------------------*/ 545 | 546 | .stats .section-title { margin-block-end: 0; } 547 | 548 | .stats-item { 549 | background-color: var(--white); 550 | padding: 40px; 551 | box-shadow: var(--shadow-1); 552 | border-radius: var(--radius-10); 553 | text-align: center; 554 | } 555 | 556 | .stats-item .span { 557 | color: var(--marigold); 558 | font-size: var(--fs-1); 559 | font-weight: var(--fw-700); 560 | line-height: 1; 561 | } 562 | 563 | 564 | 565 | 566 | 567 | /*-----------------------------------*\ 568 | #TESTIMONIALS 569 | \*-----------------------------------*/ 570 | 571 | .testi .container { 572 | display: grid; 573 | gap: 80px; 574 | } 575 | 576 | .testi-text { 577 | font-size: var(--fs-10); 578 | margin-block: 25px 20px; 579 | } 580 | 581 | .testi .wrapper { 582 | display: flex; 583 | align-items: center; 584 | gap: 20px; 585 | } 586 | 587 | .testi .author-title { 588 | color: var(--jet); 589 | font-size: var(--fs-10); 590 | font-weight: var(--fw-500); 591 | margin-block-end: 5px; 592 | } 593 | 594 | 595 | 596 | 597 | 598 | /*-----------------------------------*\ 599 | #PARTNERSHIP 600 | \*-----------------------------------*/ 601 | 602 | .partnership { 603 | background-color: var(--jet); 604 | overflow-x: hidden; 605 | } 606 | 607 | .partnership .section-title { 608 | text-align: center; 609 | color: var(--white); 610 | margin-block-end: 50px; 611 | } 612 | 613 | .partnership-card { position: relative; } 614 | 615 | .partnership-card .card-banner { 616 | outline: 7px solid var(--marigold); 617 | border-radius: var(--radius-20); 618 | margin: 7px; 619 | } 620 | 621 | .partnership-card .card-title { 622 | color: var(--white); 623 | margin-block-end: 10px; 624 | } 625 | 626 | .partnership-card .card-content { 627 | position: absolute; 628 | bottom: -20px; 629 | left: 20px; 630 | } 631 | 632 | 633 | 634 | 635 | 636 | /*-----------------------------------*\ 637 | #NEWSLETTER 638 | \*-----------------------------------*/ 639 | 640 | .newsletter .container { 641 | display: grid; 642 | gap: 40px; 643 | } 644 | 645 | .newsletter .section-title { margin-block-end: 30px; } 646 | 647 | .newsletter .input-field { 648 | background-color: var(--white); 649 | padding: 15px 30px; 650 | border-radius: var(--radius-10); 651 | box-shadow: var(--shadow-2); 652 | margin-block-end: 20px; 653 | outline: none; 654 | } 655 | 656 | .newsletter .input-field:focus { box-shadow: inset 0 0 0 2px var(--marigold); } 657 | 658 | .newsletter .btn ion-icon { --ionicon-stroke-width: 50px; } 659 | 660 | 661 | 662 | 663 | 664 | /*-----------------------------------*\ 665 | #FOOTER 666 | \*-----------------------------------*/ 667 | 668 | .footer { 669 | background-color: var(--jet); 670 | color: var(--light-gray); 671 | } 672 | 673 | .footer .section-title { 674 | color: var(--white); 675 | margin-block-start: 35px; 676 | } 677 | 678 | .footer-list-title { 679 | color: var(--sonic-silver); 680 | margin-block-end: 25px; 681 | } 682 | 683 | .footer-link, 684 | .address { 685 | display: flex; 686 | align-items: center; 687 | gap: 10px; 688 | transition: var(--transition-1); 689 | padding-block: 10px; 690 | } 691 | 692 | .footer-link ion-icon { font-size: 1.8rem; } 693 | 694 | .address { border-block-end: 1px solid var(--sonic-silver); } 695 | 696 | .footer-link:is(:hover, :focus-visible) { color: var(--marigold); } 697 | 698 | .address ion-icon { flex-shrink: 0; } 699 | 700 | .social-list { 701 | display: flex; 702 | gap: 20px; 703 | padding-block-start: 40px; 704 | } 705 | 706 | .social-link { 707 | font-size: 2rem; 708 | border: 1px solid; 709 | padding: 10px; 710 | border-radius: var(--radius-circle); 711 | transition: var(--transition-1); 712 | } 713 | 714 | .social-link:is(:hover, :focus-visible) { 715 | background-color: var(--marigold); 716 | border-color: var(--marigold); 717 | } 718 | 719 | .footer-top { 720 | padding-block-end: 40px; 721 | border-block-end: 1px solid var(--sonic-silver); 722 | } 723 | 724 | .footer-bottom { 725 | padding-block: 25px; 726 | text-align: center; 727 | } 728 | 729 | .copyright { 730 | color: var(--sonic-silver); 731 | font-size: var(--fs-11); 732 | } 733 | 734 | 735 | 736 | 737 | 738 | /*-----------------------------------*\ 739 | #MEDIA QUERIES 740 | \*-----------------------------------*/ 741 | 742 | /** 743 | * responsive for large than 575px screen 744 | */ 745 | 746 | @media (min-width: 575px) { 747 | 748 | /** 749 | * CUSTOM PROPERTY 750 | */ 751 | 752 | :root { 753 | 754 | /** 755 | * typography 756 | */ 757 | 758 | --fs-6: 4.2rem; 759 | 760 | } 761 | 762 | 763 | 764 | /** 765 | * REUSED STYLE 766 | */ 767 | 768 | .container { 769 | max-width: 550px; 770 | width: 100%; 771 | margin-inline: auto; 772 | } 773 | 774 | .h1 { --fs-2: 6rem; } 775 | 776 | .h2 { --fs-2: 4.8rem; } 777 | 778 | 779 | 780 | /** 781 | * HERO 782 | */ 783 | 784 | .hero-banner { position: relative; } 785 | 786 | .hero .shape { 787 | display: block; 788 | position: absolute; 789 | box-shadow: var(--shadow-2); 790 | border-radius: var(--radius-20); 791 | } 792 | 793 | .hero .shape-1 { 794 | left: 0; 795 | bottom: 60px; 796 | } 797 | 798 | .hero .shape-2 { 799 | top: 60px; 800 | right: -10px; 801 | } 802 | 803 | 804 | 805 | /** 806 | * INSTRUCTION 807 | */ 808 | 809 | .instruction-card .card-banner { 810 | max-width: max-content; 811 | margin-inline: auto; 812 | } 813 | 814 | 815 | 816 | /** 817 | * STATS 818 | */ 819 | 820 | .stats-item { 821 | display: flex; 822 | justify-content: center; 823 | align-items: center; 824 | gap: 20px; 825 | } 826 | 827 | 828 | 829 | /** 830 | * PARTNERSHIP 831 | */ 832 | 833 | .partnership-card .card-content { left: 40px; } 834 | 835 | .partnership-card .card-title { --fs-8: 3.5rem; } 836 | 837 | } 838 | 839 | 840 | 841 | 842 | 843 | /** 844 | * responsive for large than 768px screen 845 | */ 846 | 847 | @media (min-width: 768px) { 848 | 849 | /** 850 | * REUSED STYLE 851 | */ 852 | 853 | .container { max-width: 720px; } 854 | 855 | .grid-list { grid-template-columns: 1fr 1fr; } 856 | 857 | 858 | 859 | /** 860 | * HEADER 861 | */ 862 | 863 | .navbar { 864 | max-width: 428px; 865 | left: -430px; 866 | } 867 | 868 | .overlay { 869 | display: block; 870 | position: fixed; 871 | top: 0; 872 | left: 0; 873 | width: 100%; 874 | height: 100vh; 875 | background-color: var(--black); 876 | z-index: 1; 877 | opacity: 0; 878 | transition: var(--transition-1); 879 | visibility: hidden; 880 | } 881 | 882 | .overlay.active { 883 | visibility: visible; 884 | opacity: 0.7; 885 | } 886 | 887 | 888 | 889 | /** 890 | * TOP RESTAURANT, STATS 891 | */ 892 | 893 | :is(.top-restaurant, .stats) .grid-list { align-items: center; } 894 | 895 | } 896 | 897 | 898 | 899 | 900 | 901 | /** 902 | * responsive for large than 992px screen 903 | */ 904 | 905 | @media (min-width: 992px) { 906 | 907 | /** 908 | * REUSED STYLE 909 | */ 910 | 911 | .container { max-width: 960px; } 912 | 913 | 914 | 915 | /** 916 | * HERO 917 | */ 918 | 919 | .hero .container { 920 | grid-template-columns: 1fr 1fr; 921 | align-items: center; 922 | gap: 30px; 923 | } 924 | 925 | .hero .shape-1 { bottom: 30px; } 926 | 927 | .hero .shape-2 { 928 | top: 80px; 929 | right: -40px; 930 | } 931 | 932 | 933 | 934 | /** 935 | * INSTRUCTION 936 | */ 937 | 938 | .instruction .section-text { 939 | max-width: 60ch; 940 | margin-inline: auto; 941 | } 942 | 943 | .instruction .grid-list { 944 | grid-template-columns: repeat(3, 1fr); 945 | gap: 24px; 946 | } 947 | 948 | 949 | 950 | /** 951 | * CTA, TESTIMONIALS, NEWSLETTER 952 | */ 953 | 954 | :is(.cta, .testi, .newsletter) .container { 955 | grid-template-columns: 1fr 1fr; 956 | align-items: center; 957 | } 958 | 959 | 960 | 961 | /** 962 | * FOOTER 963 | */ 964 | 965 | .footer-top { grid-template-columns: 1fr 0.5fr 1fr; } 966 | 967 | } 968 | 969 | 970 | 971 | 972 | 973 | /** 974 | * responsive for large than 1200px screen 975 | */ 976 | 977 | @media (min-width: 1200px) { 978 | 979 | /** 980 | * CUSTOM PROPERTY 981 | */ 982 | 983 | :root { 984 | 985 | /** 986 | * typography 987 | */ 988 | 989 | --fs-6: 4.8rem; 990 | 991 | } 992 | 993 | 994 | 995 | /** 996 | * REUSED STYLE 997 | */ 998 | 999 | .container { max-width: 1140px; } 1000 | 1001 | 1002 | 1003 | /** 1004 | * HEADER 1005 | */ 1006 | 1007 | .navbar, 1008 | .navbar.active { 1009 | all: unset; 1010 | display: block; 1011 | } 1012 | 1013 | .nav-open-btn, 1014 | .nav-close-btn, 1015 | .navbar .logo, 1016 | .overlay { display: none; } 1017 | 1018 | .navbar-item { border-block-end: none; } 1019 | 1020 | .navbar-list { 1021 | display: flex; 1022 | gap: 40px; 1023 | } 1024 | 1025 | .header .container { gap: 60px; } 1026 | 1027 | .navbar-link { transition: var(--transition-1); } 1028 | 1029 | .navbar-link:is(:hover, :focus-visible) { color: var(--marigold); } 1030 | 1031 | .header .btn-primary { display: block; } 1032 | 1033 | .header-action { 1034 | display: flex; 1035 | align-items: center; 1036 | gap: 15px; 1037 | } 1038 | 1039 | .cart-btn { 1040 | background-color: var(--white); 1041 | border-radius: var(--radius-10); 1042 | } 1043 | 1044 | 1045 | 1046 | /** 1047 | * STATS 1048 | */ 1049 | 1050 | .stats .grid-list { 1051 | grid-template-columns: repeat(4, 1fr); 1052 | gap: 20px; 1053 | } 1054 | 1055 | .stats-item .span { --fs-1: 4.8rem; } 1056 | 1057 | } -------------------------------------------------------------------------------- /assets/images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/Thumbs.db -------------------------------------------------------------------------------- /assets/images/cta-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/cta-banner.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/hero-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/hero-bg.png -------------------------------------------------------------------------------- /assets/images/hero-shape-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/images/hero-shape-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/images/instructuion-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/instructuion-1.png -------------------------------------------------------------------------------- /assets/images/instructuion-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/instructuion-2.png -------------------------------------------------------------------------------- /assets/images/instructuion-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/instructuion-3.png -------------------------------------------------------------------------------- /assets/images/logo-footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/newsletter-banenr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/newsletter-banenr.png -------------------------------------------------------------------------------- /assets/images/partner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/partner-1.jpg -------------------------------------------------------------------------------- /assets/images/partner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/partner-2.jpg -------------------------------------------------------------------------------- /assets/images/rest-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/rest-1.jpg -------------------------------------------------------------------------------- /assets/images/rest-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/rest-2.jpg -------------------------------------------------------------------------------- /assets/images/rest-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/rest-3.jpg -------------------------------------------------------------------------------- /assets/images/testi-avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/testi-avatar.jpg -------------------------------------------------------------------------------- /assets/images/testi-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /assets/images/testimonial-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/assets/images/testimonial-banner.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add event on multiple elements 7 | */ 8 | 9 | const addEventOnElements = function (elem, type, callback) { 10 | for (let i = 0, len = elem.length; i < len; i++) { 11 | elem[i].addEventListener(type, callback); 12 | } 13 | } 14 | 15 | 16 | 17 | /** 18 | * LOADING 19 | */ 20 | 21 | const loadingElement = document.querySelector("[data-loading-container]"); 22 | 23 | window.addEventListener("load", function () { 24 | loadingElement.classList.add("loaded"); 25 | document.body.classList.add("loaded"); 26 | }); 27 | 28 | 29 | 30 | /** 31 | * MOBILE NAVBAR TOGGLE 32 | */ 33 | 34 | const navbar = document.querySelector("[data-navbar]"); 35 | const navTogglers = document.querySelectorAll("[data-nav-toggler]"); 36 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 37 | const overlay = document.querySelector("[data-overlay]"); 38 | 39 | const toggleNavbar = function () { 40 | navbar.classList.toggle("active"); 41 | overlay.classList.toggle("active"); 42 | document.body.classList.toggle("active"); 43 | } 44 | 45 | addEventOnElements(navTogglers, "click", toggleNavbar); 46 | 47 | const closeNavbar = function () { 48 | navbar.classList.remove("active"); 49 | overlay.classList.remove("active"); 50 | document.body.classList.remove("active"); 51 | } 52 | 53 | addEventOnElements(navbarLinks, "click", closeNavbar); 54 | 55 | 56 | 57 | /** 58 | * HEADER 59 | */ 60 | 61 | // header will be active after scroll 200px of window 62 | 63 | const header = document.querySelector("[data-header]"); 64 | 65 | const headerActive = function () { 66 | window.scrollY > 200 ? header.classList.add("active") 67 | : header.classList.remove("active"); 68 | } 69 | 70 | window.addEventListener("scroll", headerActive); 71 | 72 | 73 | 74 | /** 75 | * SCROLL REVEAL 76 | */ 77 | 78 | const revealElements = document.querySelectorAll("[data-reveal]"); 79 | 80 | const scrollReveal = function () { 81 | for (let i = 0, len = revealElements.length; i < len; i++) { 82 | if (revealElements[i].getBoundingClientRect().top < window.innerHeight / 1.2) { 83 | revealElements[i].classList.add("revealed"); 84 | } 85 | } 86 | } 87 | 88 | window.addEventListener("scroll", scrollReveal); 89 | window.addEventListener("load", scrollReveal); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | Fasteat - The Best Restaurants In Your Home 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | 41 | 44 | 45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | 56 | 57 |
58 |
59 | 60 | 63 | 64 | 93 | 94 |
95 | 98 | 99 | Order Now 100 |
101 | 102 | 105 | 106 |
107 | 108 |
109 |
110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 | 118 | 121 | 122 |
124 |
125 | 126 |
127 |

The Best Restaurants In Your Home

128 | 129 |

130 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. 131 |

132 | 133 | Order Now 134 |
135 | 136 |
137 | 138 | hero banner 139 | 140 | shape 141 | 142 | shape 143 | 144 |
145 | 146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 156 | 157 |
158 |
159 | 160 |

How It Works

161 | 162 |

163 | Magna sit amet purus gravida quis blandit turpis cursus. Venenatis tellus in 164 | metus vulputate eu scelerisque felis. 165 |

166 | 167 |
    168 | 169 |
  • 170 |
    171 | 172 |
    173 | Select Restaurant 175 |
    176 | 177 |
    178 | 179 |

    180 | 01 181 | Select Restaurant 182 |

    183 | 184 |

    185 | Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis 186 | varius quam quisque id diam vel. 187 |

    188 | 189 |
    190 | 191 |
    192 |
    • 193 | 194 |
  • 195 |
    196 | 197 |
    198 | Select menu 200 |
    201 | 202 |
    203 | 204 |

    205 | 02 206 | Select menu 207 |

    208 | 209 |

    210 | Eu mi bibendum neque egestas congue quisque. Nulla facilisi morbi tempus iaculis urna id volutpat 211 | lacus. Odio ut sem nulla pharetra diam sit amet. 212 |

    213 | 214 |
    215 | 216 |
    217 |
    • 218 | 219 |
  • 220 |
    221 | 222 |
    223 | Wait for delivery 225 |
    226 | 227 |
    228 | 229 |

    230 | 03 231 | Wait for delivery 232 |

    233 | 234 |

    235 | Nunc lobortis mattis aliquam faucibus. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A 236 | scelerisque purus semper eget. Tincidunt arcu non. 237 |

    238 | 239 |
    240 | 241 |
    242 |
    • 243 | 244 |
245 | 246 |
247 |
248 | 249 | 250 | 251 | 252 | 253 | 256 | 257 |
258 |
259 | 260 |
    261 | 262 |
  • 263 |

    264 | 12 Best Restaurants in Your City 265 |

    266 | 267 |

    268 | Magna sit amet purus gravida quis blandit turpis cursus. Venenatis tellus in metus vulputate. 269 |

    270 |
    • 271 | 272 |
  • 273 |
    274 | 275 |
    276 | Kennington Lane Cafe 278 |
    279 | 280 |

    Kennington Lane Cafe

    281 | 282 |
    283 | 284 | 285 | 286 | 287 | 288 |
    289 | 290 |
    291 | american 292 | steakhouse 293 |
    294 | 295 |

    296 | Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis 297 | varius quam quisque id diam vel. 298 |

    299 | 300 |
    301 |
    • 302 | 303 |
  • 304 |
    305 | 306 |
    307 | The Wilmington 309 |
    310 | 311 |

    The Wilmington

    312 | 313 |
    314 | 315 | 316 | 317 | 318 | 319 |
    320 | 321 |
    322 | american 323 | steakhouse 324 |
    325 | 326 |

    327 | Vulputate enim nulla aliquet porttitor lacus luctus. Suscipit adipiscing bibendum est ultricies 328 | integer. Sed adipiscing diam donec adipiscing tristique. 329 |

    330 | 331 |
    332 |
    • 333 | 334 |
  • 335 |
    336 | 337 |
    338 | Kings Arms 340 |
    341 | 342 |

    Kings Arms

    343 | 344 |
    345 | 346 | 347 | 348 | 349 | 350 |
    351 | 352 |
    353 | american 354 | healthy 355 |
    356 | 357 |

    358 | Tortor at risus viverra adipiscing at in tellus. Cras semper auctor neque vitae tempus. Dui accumsan 359 | sit amet nulla facilisi. Sed adipiscing diam donec adipiscing tristique. 360 |

    361 | 362 |
    363 |
    • 364 | 365 |
366 | 367 | 368 | See All 369 | 370 | 371 | 372 | 373 |
374 |
375 | 376 | 377 | 378 | 379 | 380 | 383 | 384 |
386 |
387 | 388 |
389 | cta banner 391 |
392 | 393 |
394 | 395 |

396 | Food from your favorite restaurants to your table 397 |

398 | 399 |

400 | Pretium lectus quam id leo in vitae turpis massa sed. Lorem donec massa sapien faucibus et molestie. Vitae 401 | elementum curabitur vitae nunc. 402 |

403 | 404 | Order Now 405 | 406 |
407 | 408 |
409 |
410 | 411 | 412 | 413 | 414 | 415 | 418 | 419 |
420 |
421 | 422 |
    423 | 424 |
  • 425 |

    Service shows good taste.

    426 |
    • 427 | 428 |
  • 429 | 976 430 | 431 |

    432 | Satisfied
    433 | Customer 434 |

    435 |
    • 436 | 437 |
  • 438 | 12 439 | 440 |

    441 | Best
    442 | Restaurants 443 |

    444 |
    • 445 | 446 |
  • 447 | 1K+ 448 | 449 |

    450 | Food
    451 | Delivered 452 |

    453 |
    • 454 | 455 |
456 | 457 |
458 |
459 | 460 | 461 | 462 | 463 | 464 | 467 | 468 |
469 |
470 | 471 |
472 | 473 |

What customers say about us

474 | 475 |
476 | "Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mauris a diam maecenas sed enim. Egestas 477 | diam in arcu cursus euismod quis. Quam quisque id diam vel". 478 |
479 | 480 |
481 | Thomas Adamson 483 | 484 |
485 |

Thomas Adamson

486 | 487 |
488 | 489 | 490 | 491 | 492 | 493 |
494 |
495 |
496 | 497 |
498 | 499 |
500 | testimonial banner 502 |
503 | 504 |
505 |
506 | 507 | 508 | 509 | 510 | 511 | 514 | 515 |
516 |
517 | 518 |

Want to Join Partnership?

519 | 520 | 565 | 566 |
567 |
568 | 569 | 570 | 571 | 572 | 573 | 576 | 577 | 604 | 605 |
606 |
607 | 608 | 609 | 610 | 611 | 612 | 615 | 616 | 744 | 745 | 746 | 747 | 748 | 749 | 752 | 753 | 754 | 757 | 758 | 759 | 760 | 761 | 762 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Fasteat - The Best Restaurants In Your Home 2 | This is a food html template made by codewithsadee 3 | 4 | 5 | 6 | #---------- HEADER ----------# 7 | 8 | alt = Fasteat home 9 | 10 | aria-label = close menu 11 | 12 | 13 | Home 14 | About Us 15 | Restaurants 16 | Contacts 17 | 18 | aria-label = cart 19 | 20 | 21 | Order Now 22 | 23 | aria-label = open menu 24 | 25 | 26 | 27 | 28 | #---------- HERO ----------# 29 | 30 | The Best Restaurants In Your Home 31 | 32 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. 33 | 34 | Order Now 35 | 36 | alt = hero banner 37 | alt = shape 38 | 39 | 40 | 41 | #---------- INSTRUCTION ----------# 42 | 43 | How It Works 44 | 45 | Magna sit amet purus gravida quis blandit turpis cursus. Venenatis tellus in 46 | metus vulputate eu scelerisque felis. 47 | 48 | alt = Select Restaurant 49 | 01 50 | Select Restaurant 51 | 52 | Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel. 53 | 54 | alt = Select menu 55 | 02 56 | Select menu 57 | 58 | Eu mi bibendum neque egestas congue quisque. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Odio ut sem nulla pharetra diam sit amet. 59 | 60 | alt = Wait for delivery 61 | 03 62 | Wait for delivery 63 | 64 | Nunc lobortis mattis aliquam faucibus. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A scelerisque purus semper eget. Tincidunt arcu non. 65 | 66 | 67 | 68 | #---------- TOP RESTAURANT ----------# 69 | 70 | 12 Best Restaurants in Your City 71 | 72 | Magna sit amet purus gravida quis blandit turpis cursus. Venenatis tellus in metus vulputate. 73 | 74 | alt = Kennington Lane Cafe 75 | Kennington Lane Cafe 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | american 84 | steakhouse 85 | 86 | Non enim praesent elementum facilisis leo vel fringilla. Lectus proin nibh nisl condimentum id. Quis varius quam quisque id diam vel. 87 | 88 | alt = The Wilmington 89 | The Wilmington 90 | 91 | Vulputate enim nulla aliquet porttitor lacus luctus. Suscipit adipiscing bibendum est ultricies integer. Sed adipiscing diam donec adipiscing tristique. 92 | 93 | alt = Kings Arms 94 | Kings Arms 95 | 96 | healthy 97 | 98 | Tortor at risus viverra adipiscing at in tellus. Cras semper auctor neque vitae tempus. Dui accumsan sit amet nulla facilisi. Sed adipiscing diam donec adipiscing tristique. 99 | 100 | See All 101 | 102 | 103 | 104 | 105 | #---------- CTA ----------# 106 | 107 | alt = cta banner 108 | 109 | Food from your favorite restaurants to your table 110 | 111 | Pretium lectus quam id leo in vitae turpis massa sed. Lorem donec massa sapien faucibus et molestie. Vitae elementum curabitur vitae nunc. 112 | 113 | Order Now 114 | 115 | 116 | 117 | #---------- STATS ----------# 118 | 119 | Service shows good taste. 120 | 121 | 976 122 | Satisfied 123 | Customer 124 | 125 | 12 126 | Best 127 | Restaurants 128 | 129 | 1K+ 130 | Food 131 | Delivered 132 | 133 | 134 | 135 | #---------- TESTIMONIALS ----------# 136 | 137 | What customers say about us 138 | 139 | "Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mauris a diam maecenas sed enim. Egestas diam in arcu cursus euismod quis. Quam quisque id diam vel". 140 | 141 | alt = Thomas Adamson 142 | 143 | 144 | 145 | 146 | 147 | 148 | alt = testimonial banner 149 | 150 | 151 | 152 | #---------- PARTNERSHIP ----------# 153 | 154 | Want to Join Partnership? 155 | 156 | alt = Join Courier 157 | Join Courier 158 | 159 | Learn More 160 | 161 | 162 | Join Merchant 163 | 164 | 165 | 166 | #---------- NEWSLETTER ----------# 167 | 168 | alt = Illustration 169 | 170 | Get the menu of your favorite restaurants every day 171 | 172 | placeholder = Enter email address 173 | 174 | 175 | Subscribe 176 | 177 | 178 | 179 | #---------- FOOTER ----------# 180 | 181 | alt = fasteat home 182 | 183 | The Best Restaurants in Your Home 184 | 185 | Vitae congue mauris rhoncus aenean. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Tempus egestas sed sed risus pretium quam. 186 | 187 | Menu 188 | 189 | Home 190 | 191 | 192 | About Us 193 | Restaurants 194 | Contacts 195 | 196 | Contacts 197 | 198 | 199 | 1717 Harrison St, San Francisco, CA 94103, United States 200 | 201 | 202 | quickeat@mail.net 203 | 204 | 205 | +1 234 456 78 90 206 | 207 | 208 | 209 | 210 | 211 | Copyright 2022 codewithsadee. All rights reserved. -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/fasteat/18ce532a3e6219c01a0b33dc8766ae10e2893d60/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 11 | ``` 12 | 13 | Ionicon 14 | 15 | ``` html 16 | 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --sonic-silver: hsl(0, 0%, 47%); 26 | --eerie-black: hsl(210, 11%, 15%); 27 | --light-gray: hsl(0, 0%, 83%); 28 | --davys-gray: hsl(0, 0%, 30%); 29 | --marigold: hsl(39, 96%, 48%); 30 | --platinum: hsl(0, 0%, 90%); 31 | --white: hsl(0, 0%, 100%); 32 | --black: hsl(0, 0%, 0%); 33 | --jet: hsl(0, 0%, 21%); 34 | ``` 35 | 36 | ## Typography 37 | 38 | ``` css 39 | --ff-poppins: "Poppins", sans-serif; 40 | 41 | --fs-1: 7rem; 42 | --fs-2: 4.2rem; 43 | --fs-3: 3.8rem; 44 | --fs-4: 3.6rem; 45 | --fs-5: 3.4rem; 46 | --fs-6: 3.2rem; 47 | --fs-7: 3rem; 48 | --fs-8: 2.4rem; 49 | --fs-9: 2rem; 50 | --fs-10: 1.8rem; 51 | --fs-11: 1.4rem; 52 | --fs-12: 1.2rem; 53 | 54 | --fw-500: 500; 55 | --fw-700: 700; 56 | ``` 57 | 58 | ## Spacing 59 | 60 | ``` css 61 | --section-padding: 100px; 62 | ``` 63 | 64 | ## Border Radius 65 | 66 | ``` css 67 | --radius-circle: 50%; 68 | --radius-20: 20px; 69 | --radius-15: 15px; 70 | --radius-10: 10px; 71 | ``` 72 | 73 | ## Box Shadow 74 | 75 | ``` css 76 | --shadow-1: 0 0 30px 4px hsla(0, 0%, 0%, 0.05); 77 | --shadow-2: -1px 15px 26px -4px hsla(0, 5%, 61%, 0.15); 78 | ``` 79 | 80 | ## Transition 81 | 82 | ``` css 83 | --transition-1: 0.25s ease; 84 | --transition-2: 0.5s ease; 85 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 86 | ``` 87 | --------------------------------------------------------------------------------