├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── about-banner.png │ ├── about-img.png │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── cta-bg.jpg │ ├── feature-abs-1.png │ ├── feature-abs-2.png │ ├── feature-abs-3.png │ ├── feature-banner.jpg │ ├── feature-icon-1.png │ ├── feature-icon-2.png │ ├── gallery-1.jpg │ ├── gallery-2.jpg │ ├── gallery-3.jpg │ ├── gallery-4.jpg │ ├── gallery-5.jpg │ ├── hero-banner.jpg │ ├── logo.svg │ ├── menu-1.jpg │ ├── menu-2.jpg │ ├── menu-3.jpg │ ├── menu-4.jpg │ ├── menu-5.jpg │ ├── menu-6.jpg │ ├── menu-bg-logo.png │ ├── menu-bg.jpg │ ├── service-1.jpg │ ├── service-2.jpg │ └── service-3.jpg └── 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/keofi) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/keofi?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/keofi?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/xrBDp8mUmog?style=social)](https://youtu.be/xrBDp8mUmog) 8 | 9 |
10 |
11 | 12 |

Keofi - Coffee Website

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

54 | 55 | Opening Hours : 08:00 Am - 09:00 Pm 56 |

57 | 58 | 85 | 86 |

87 | 88 | Location : 55 Main Street, New York 89 |

90 | 91 |
92 |
93 | 94 |
95 |
96 | 97 | 100 | 101 | 130 | 131 | 135 | 136 |
137 |
138 | 139 |
140 | 141 | 142 | 143 | 144 | 145 |
146 |
147 | 148 | 151 | 152 |
154 |
155 | 156 |

Welcome to the keofi

157 | 158 |

Great Coffee Good Vibes

159 | 160 |
161 | 162 | Explore more 163 | 164 | 165 | 166 | 167 | 168 | Get delivery 169 | 170 | 171 | 172 |
173 | 174 |
175 |
176 | 177 | 178 | 179 | 180 | 181 | 184 | 185 |
186 |
187 | 188 |
189 | 190 |

About Us

191 | 192 |

Organic & Fresh Coffee Provider Center

193 | 194 |

195 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque laudantium, totam rem 196 | aperiam eaque ipsa quae abillo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 197 | Nemo enim ipsluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores 198 | eos qui ratione 199 |

200 | 201 |
202 |
203 | john doe 205 |
206 | 207 |

208 | Quis autem vel eum iure reprehenderit in ealuptate velit esse molestiae 209 |

210 |
211 | 212 |
213 | 214 |
215 | about banner 217 |
218 | 219 |
220 |
221 | 222 | 223 | 224 | 225 | 226 | 229 | 230 |
231 |
232 | 233 | 287 | 288 |
289 |
290 | 291 | 292 | 293 | 294 | 295 | 298 | 299 | 453 | 454 | 455 | 456 | 457 | 458 | 461 | 462 |
463 |
464 | 465 |
466 | feature banner 468 |
469 | 470 |
471 | 472 |

Why Choose Us

473 | 474 |

New London Coffee Founded For 475 | Extraordinary Test 476 |

477 | 478 |

479 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque laudantium, totam rem 480 | aperiam eaque ipsa quae abillo inventore veritatis 481 |

482 | 483 |
    484 | 485 |
  • 486 |
    487 | 488 |
    489 | feature icon 491 |
    492 | 493 |
    494 |

    Natural Coffee Beans

    495 | 496 |

    497 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque 498 |

    499 |
    500 | 501 |
    502 |
    • 503 | 504 |
  • 505 |
    506 | 507 |
    508 | feature icon 510 |
    511 | 512 |
    513 |

    100% ISO Certification

    514 | 515 |

    516 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque 517 |

    518 |
    519 | 520 |
    521 |
    • 522 | 523 |
524 | 525 | 526 | Explore More 527 | 528 | 529 | 530 | 531 |
532 | 533 | 535 | 536 | 538 | 539 | 541 | 542 |
543 |
544 | 545 | 546 | 547 | 548 | 549 | 552 | 553 |
554 |
555 | 556 |

Get Every Single Update

557 | 558 |

559 | Read Some Latest Blog & News 560 |

561 | 562 | 664 | 665 | 666 | View All 667 | 668 | 669 | 670 | 671 |
672 |
673 | 674 | 675 | 676 | 677 | 678 | 681 | 682 |
684 |
685 | 686 |
687 |

Need A Table On Coffee House

688 | 689 |

Booking Table For Your & Family Members 690 |

691 |
692 | 693 | 694 | Booking Table 695 | 696 | 697 | 698 | 699 |
700 |
701 | 702 |
703 |
704 | 705 | 706 | 707 | 708 | 709 | 712 | 713 | 860 | 861 | 862 | 863 | 864 | 865 | 868 | 869 | 870 | 873 | 874 | 875 | 876 | 877 | 878 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Keofi - Great coffee good vibes 2 | 3 | This is a coffee shop html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | 10 | Opening Hours : 11 | 08:00 Am - 09:00 Pm 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Location : 20 | 55 Main Street, New York 21 | 22 | alt = keofi home 23 | 24 | Home 25 | About 26 | Menu 27 | Blog 28 | Contacts 29 | 30 | Book A Table 31 | 32 | aria-label = open menu 33 | 34 | 35 | 36 | #---------- HERO ----------# 37 | 38 | Welcome to the keofi 39 | 40 | Great Coffee Good Vibes 41 | 42 | Explore more 43 | 44 | 45 | Get delivery 46 | 47 | 48 | 49 | #---------- ABOUT ----------# 50 | 51 | About Us 52 | 53 | Organic & Fresh Coffee Provider Center 54 | 55 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae abillo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores eos qui ratione 56 | 57 | alt = john doe 58 | Quis autem vel eum iure reprehenderit in ealuptate velit esse molestiae 59 | 60 | alt = about banner 61 | 62 | 63 | 64 | #---------- SERVICE ----------# 65 | 66 | alt = Restaurant Menu 67 | 68 | 69 | Restaurant Menu 70 | 71 | alt = Coffee Menu 72 | 73 | 74 | Coffee Menu 75 | 76 | alt = Food Services 77 | 78 | 79 | Food Services 80 | 81 | 82 | 83 | #---------- MENU ----------# 84 | 85 | Choose Best Coffee 86 | 87 | Kaffen Popular Coffee Menu 88 | 89 | Americano Coffee 90 | 2/3 espresso, 1/3 streamed milk 91 | $4.9 92 | 93 | Espresso Coffee 94 | 95 | Barista Pouring Syrup 96 | $3.5 97 | 98 | Cold - Coffee 99 | $6.0 100 | 101 | Cappuccino Arabica 102 | $2.8 103 | 104 | Milk Cream Coffee 105 | $7.5 106 | 107 | 108 | 109 | #---------- FEATURE ----------# 110 | 111 | alt = feature banner 112 | 113 | Why Choose Us 114 | 115 | New London Coffee Founded For Extraordinary Test 116 | 117 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque laudantium, totam rem aperiam eaque ipsa quae abillo inventore veritatis 118 | 119 | alt = feature icon 120 | 121 | Natural Coffee Beans 122 | 123 | Sed ut perspiciatis unde omnis iste natus error voluptate accusantium doloremque 124 | 125 | 100% ISO Certification 126 | 127 | Explore More 128 | 129 | 130 | 131 | 132 | #---------- BLOG ----------# 133 | 134 | Get Every Single Update 135 | 136 | Read Some Latest Blog & News 137 | 138 | SWR React Hooks With Next Increm Ental Static Regeneration 139 | 140 | 141 | 25 Sep 2022 142 | 143 | 144 | Comments (7) 145 | 146 | Decisions For Building Flexible Components DevTools Browser 147 | 148 | SWR React Hooks With Next Increm Ental Static Regeneration 149 | 150 | View All 151 | 152 | 153 | 154 | 155 | #---------- CTA ----------# 156 | 157 | Need A Table On Coffee House 158 | 159 | Booking Table For Your & Family Members 160 | 161 | Booking Table 162 | 163 | 164 | 165 | 166 | #---------- FOOTER ----------# 167 | 168 | 169 | alt = Keofi home 170 | 171 | Working Hours 172 | 173 | Sunday - Thursday 174 | 08:00 am - 09:00pm 175 | 176 | Only Friday 177 | 03:00 pm - 09:00pm 178 | 179 | Saturday Close 180 | 181 | Contact Us 182 | 183 | 184 | Location : 185 | 55 Main Street, New York 186 | 187 | 188 | Email Address : 189 | keofi@gmail.com 190 | 191 | 192 | Phone Number : 193 | +012 (345) 678 99 194 | 195 | Gallery 196 | 197 | alt = Gallery 198 | 199 | Copyright © 2022 codewithsadee. All Rights Reserved. -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/keofi/d701f9e54fff73e46d097bafe82b6ee573206ccf/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 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --rich-black-fogra-29_a85: hsla(207, 24%, 7%, 0.85); 28 | --rich-black-fogra-29_a75: hsla(207, 24%, 7%, 0.75); 29 | --rich-black-fogra-29: hsl(207, 24%, 7%); 30 | --rich-black-fogra-39: hsl(210, 25%, 5%); 31 | --dark-orange: hsl(32, 100%, 50%); 32 | --light-gray: hsl(206, 8%, 82%); 33 | --white_a10: hsla(0, 0%, 100%, 0.1); 34 | --white_a60: hsla(0, 0%, 100%, 0.6); 35 | --camel: hsl(27, 34%, 58%); 36 | --white: hsl(0, 0%, 100%); 37 | ``` 38 | 39 | ## Gradient color 40 | 41 | ``` css 42 | --gradient: linear-gradient( 43 | to top, 44 | hsla(210, 25%, 5%, 0.95) 0, 45 | hsla(210, 24%, 7%, 0.45) 70%, 46 | hsla(207, 24%, 7%, 0) 100% 47 | ); 48 | ``` 49 | 50 | ## Typography 51 | 52 | ``` css 53 | --ff-oswald: 'Oswald', sans-serif; 54 | --ff-roboto: 'Roboto', sans-serif; 55 | --ff-merienda: 'Merienda', cursive; 56 | 57 | --fs-1: 5rem; 58 | --fs-2: 3.2rem; 59 | --fs-3: 2.4rem; 60 | --fs-4: 2.2rem; 61 | --fs-5: 1.4rem; 62 | --fs-6: 1.3rem; 63 | 64 | --fw-400: 400; 65 | --fw-500: 500; 66 | --fw-600: 600; 67 | ``` 68 | 69 | ## Spacing 70 | 71 | ``` css 72 | --section-padding: 70px; 73 | ``` 74 | 75 | ## Border Radius 76 | 77 | ``` css 78 | --radius-circle: 50%; 79 | --radius-5: 5px; 80 | ``` 81 | 82 | ## Transition 83 | 84 | ``` css 85 | --transition-1: 0.25s ease; 86 | --transition-2: 0.5s ease; 87 | --transition-3: 0.75s ease; 88 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 89 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 90 | ``` 91 | --------------------------------------------------------------------------------