├── LICENSE ├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── Thumbs.db │ ├── about-1.jpg │ ├── about-2.jpg │ ├── about-3.jpg │ ├── blog-1.jpg │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── blog-4.jpg │ ├── collection-1.jpg │ ├── collection-2.jpg │ ├── collection-3.jpg │ ├── feature-banner.jpg │ ├── feature-icon-1.svg │ ├── feature-icon-2.svg │ ├── feature-icon-3.svg │ ├── gallery-1.jpg │ ├── gallery-2.jpg │ ├── gallery-3.jpg │ ├── gallery-4.jpg │ ├── hero-banner-1.jpg │ ├── hero-banner-2.jpg │ ├── hero-shape.png │ ├── play.svg │ └── quote.svg └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images ├── Thumbs.db └── desktop.png └── style-guide.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Sadee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/crafti) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/crafti?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/crafti?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/IcJFLGOY0DU?style=social)](https://youtu.be/IcJFLGOY0DU) 8 | 9 |
10 |
11 | 12 |

Crafti - Agency Website

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

107 | We Make Top Quality 108 | Handmade Products 109 |

110 | 111 |

112 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, 113 | pulvinar dapibus leo. 114 |

115 | 116 | 117 | View Collection 118 | 119 | 120 | 121 | 122 |
123 | 124 |
125 |
126 | view of assortment of decor for interior shop 128 |
129 | 130 |
131 | ceramic craft ware 133 |
134 | 135 | laves 136 |
137 | 138 |
139 |
140 | 141 | 142 | 143 | 144 | 145 | 148 | 149 |
150 |
151 | 152 |
153 |
154 | craftman in workshop 156 |
157 | 158 |

Make Handicrafts Since 1992

159 |
160 | 161 |
162 | interior view of a leather shop selling belts brac 164 |
165 | 166 |
167 | 168 |

Innovative Design is Our Passion

169 | 170 |

171 | Curabitur interdum malesuada lectus ut pharetra. Sed tellus ante, aliquet a sem id, ultricies varius 172 | dolor. Nam volutpat hendrerit massa. Crasposuere ornare elementum. 173 |

174 | 175 | 176 | Read More 177 | 178 | 179 | 180 | 181 |
182 | concentrated artisans in workshop 184 |
185 | 186 |
187 | 188 |
189 |
190 | 191 | 192 | 193 | 194 | 195 | 198 | 199 |
200 |
201 | 202 |

203 | Unique Handicrafts Collection 204 |

205 | 206 |

207 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie ligula dignissim. 208 |

209 | 210 |
    211 | 212 |
  • 213 |
    214 | 215 |
    216 | Pottery & Ceramics 218 |
    219 | 220 |
    221 | 222 |

    Pottery & Ceramics

    223 | 224 |

    225 | Cras fermentum augue ac purus pharetra man aliquam fringilla ornare quam. 226 |

    227 | 228 | 229 | View Gallery 230 | 231 | 232 | 233 | 234 |
    235 | 236 |
    237 |
    • 238 | 239 |
  • 240 |
    241 | 242 |
    243 | Leather Craft 245 |
    246 | 247 |
    248 | 249 |

    Leather Craft

    250 | 251 |

    252 | Cras fermentum augue ac purus pharetra man aliquam fringilla ornare quam. 253 |

    254 | 255 | 256 | View Gallery 257 | 258 | 259 | 260 | 261 |
    262 | 263 |
    264 |
    • 265 | 266 |
  • 267 |
    268 | 269 |
    270 | Home Decoration 272 |
    273 | 274 |
    275 | 276 |

    Home Decoration

    277 | 278 |

    279 | Cras fermentum augue ac purus pharetra man aliquam fringilla ornare quam. 280 |

    281 | 282 | 283 | View Gallery 284 | 285 | 286 | 287 | 288 |
    289 | 290 |
    291 |
    • 292 | 293 |
294 | 295 |
296 |
297 | 298 | 299 | 300 | 301 | 302 | 305 | 306 |
307 | 308 |
310 | 313 |
314 | 315 |
316 |
317 | 318 |

319 | Passionate About Elegance and Beauty Design 320 |

321 | 322 |

323 | Curabitur porttitor nulla vitae purus eleifend feugiat. Quisque faucibus sapien, ut porttitor lorem. 324 |

325 | 326 |
    327 | 328 |
  • 329 |
    330 | 331 |
    332 | review icon 334 |
    335 | 336 |
    337 |

    100% Guarantee

    338 | 339 |

    340 | Vestibulum in eros at lectus commodo 341 |

    342 |
    343 | 344 |
    345 |
    • 346 | 347 |
  • 348 |
    349 | 350 |
    351 | badge icon 353 |
    354 | 355 |
    356 |

    Professional Staffs

    357 | 358 |

    359 | Vestibulum in eros at lectus commodo 360 |

    361 |
    362 | 363 |
    364 |
    • 365 | 366 |
  • 367 |
    368 | 369 |
    370 | money bag icon 372 |
    373 | 374 |
    375 |

    Affordable Price

    376 | 377 |

    378 | Vestibulum in eros at lectus commodo 379 |

    380 |
    381 | 382 |
    383 |
    • 384 | 385 |
386 | 387 |

388 | Nunc cursus ante libero, et convallis eros tristique nec. Fusce consequat lectus dui, nec laoreet purus 389 | venenatis id. 390 |

391 | 392 |
393 |
394 | 395 |
396 | 397 | 398 | 399 | 400 | 401 | 404 | 405 |
406 |
407 | 408 |
409 | 410 |

411 | Etiam ultricies eros ut malesuada condimentum. Cras in nisl sit amet dui molestie tristique ut vitae 412 | libero nec laoreet purus. 413 |

414 | 415 |

Edward Fransisco

416 | 417 |

Founder Crafti

418 | 419 | quote 420 | 421 |
422 | 423 |
424 |
425 | 426 | 427 | 428 | 429 | 430 | 433 | 434 |
435 | 436 | 507 | 508 |
509 | 510 | 511 | 512 | 513 | 514 | 517 | 518 |
519 |
520 | 521 |

Blog & News

522 | 523 |

524 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie ligula dignissim. 525 |

526 | 527 | 702 | 703 | 704 | Read More 705 | 706 | 707 | 708 | 709 |
710 |
711 | 712 |
713 |
714 | 715 | 716 | 717 | 718 | 719 | 722 | 723 | 844 | 845 | 846 | 847 | 848 | 849 | 852 | 853 | 854 | 857 | 858 | 859 | 860 | 861 | 862 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Crafti - We Make Top Quality Handmade Products 2 | 3 | This is a Handmade Products html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | Crafti 10 | 11 | aria-label = close menu 12 | 13 | 14 | Home 15 | About Us 16 | Blog 17 | Contact Us 18 | 19 | aria-label = open menu 20 | 21 | 22 | 23 | 24 | #---------- HERO ----------# 25 | 26 | We Make Top Quality Handmade Products 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. 29 | 30 | View Collection 31 | 32 | 33 | alt = view of assortment of decor for interior shop 34 | 35 | alt = ceramic craft ware 36 | 37 | alt = laves 38 | 39 | 40 | 41 | #---------- ABOUT ----------# 42 | 43 | alt = craftman in workshop 44 | 45 | Make Handicrafts Since 1992 46 | 47 | alt = interior view of a leather shop selling belts brac 48 | 49 | Innovative Design is Our Passion 50 | 51 | Curabitur interdum malesuada lectus ut pharetra. Sed tellus ante, aliquet a sem id, ultricies varius dolor. Nam volutpat hendrerit massa. Crasposuere ornare elementum. 52 | 53 | Read More 54 | 55 | 56 | alt = concentrated artisans in workshop 57 | 58 | 59 | 60 | #---------- COLLECTION ----------# 61 | 62 | Unique Handicrafts Collection 63 | 64 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie ligula dignissim. 65 | 66 | alt = Pottery & Ceramics 67 | 68 | Pottery & Ceramics 69 | 70 | Cras fermentum augue ac purus pharetra man aliquam fringilla ornare quam. 71 | 72 | View Gallery 73 | 74 | 75 | Leather Craft 76 | 77 | Home Decoration 78 | 79 | 80 | 81 | #---------- FEATURES ----------# 82 | 83 | aria-label = play video: man making handmade belt 84 | 85 | alt = play icon 86 | 87 | Passionate About Elegance and Beauty Design 88 | 89 | Curabitur porttitor nulla vitae purus eleifend feugiat. Quisque faucibus sapien, ut porttitor lorem. 90 | 91 | alt = review icon 92 | 93 | 100% Guarantee 94 | Vestibulum in eros at lectus commodo 95 | 96 | alt = badge icon 97 | 98 | Professional Staffs 99 | 100 | alt = money bag icon 101 | 102 | Affordable Price 103 | 104 | Nunc cursus ante libero, et convallis eros tristique nec. Fusce consequat lectus dui, nec laoreet purus venenatis id. 105 | 106 | 107 | 108 | #---------- TESTIMONIALS ----------# 109 | 110 | Etiam ultricies eros ut malesuada condimentum. Cras in nisl sit amet dui molestie tristique ut vitae libero nec laoreet purus. 111 | 112 | Edward Fransisco 113 | 114 | Founder Crafti 115 | 116 | alt = quote 117 | 118 | 119 | 120 | #---------- GALLERY ----------# 121 | 122 | Vases & Plant Pots 123 | 124 | View Gallery 125 | 126 | 127 | Clay Craft 128 | 129 | Sculpturing 130 | 131 | Accesories 132 | 133 | 134 | 135 | #---------- BLOG ----------# 136 | 137 | Blog & News 138 | 139 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie ligula dignissim. 140 | 141 | alt = The Detail Process Of Decorating The Clay Vase At Pottery Studio 142 | 143 | The Detail Process Of Decorating The Clay Vase At Pottery Studio 144 | 145 | 146 | admin 147 | 148 | 149 | October 12, 2022 150 | 151 | 152 | Tips & Trick 153 | 154 | Skills And Techniques To Make A Genuine Leather Wallet 155 | 156 | 5 Latest And Trending Handmade Crafts For Adults And Kids 157 | 158 | Homemade Business That Now Makes Hundreds Of Millions 159 | 160 | Read More 161 | 162 | 163 | 164 | 165 | 166 | #---------- FOOTER ----------# 167 | 168 | Crafti 169 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non porttitor augue, in convallis risus. Sed efficitur nulla quis luctus pulvinar. Cras nec pulvinar condimentum lacus. 170 | 171 | 172 | 173 | 174 | 175 | 176 | Explore Us 177 | About Us 178 | Collection 179 | Features 180 | Blog & News 181 | 182 | Support 183 | Account 184 | Feedback 185 | Support Center 186 | Our Stores 187 | 188 | Get in Touch 189 | 190 | Question or feedback? 191 | We’d love to hear from you 192 | 193 | Contact Us 194 | 195 | 196 | Copyright 2022 codewithsadee. All Right Reserved -------------------------------------------------------------------------------- /readme-images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/crafti/11c0b6e5b37274883283b7c067c627a54b8ceb6c/readme-images/Thumbs.db -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/crafti/11c0b6e5b37274883283b7c067c627a54b8ceb6c/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 | 12 | ``` 13 | 14 | Ionicon 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | --- 22 | 23 | ## Colors 24 | 25 | ``` css 26 | --cultured: hsla(0, 0%, 97%, 1); 27 | --french-bistre: hsla(31, 17%, 44%, 1); 28 | --jet: hsla(0, 0%, 20%, 1); 29 | --bistre: hsla(35, 100%, 9%, 1); 30 | --bistre_a75: hsla(35, 100%, 9%, 0.75); 31 | --camel: hsla(30, 30%, 58%, 1); 32 | --umber: hsla(31, 17%, 36%, 1); 33 | --golden-brown_a60: hsla(35, 70%, 38%, 0.6); 34 | --granite-gray: hsla(0, 0%, 38%, 1); 35 | --white: hsla(0, 0%, 100%, 1); 36 | --black: hsla(0, 0%, 0%, 1); 37 | ``` 38 | 39 | ## Typography 40 | 41 | ``` css 42 | --ff-rosario: 'Rosario', sans-serif; 43 | --ff-poppins: 'Poppins', sans-serif; 44 | 45 | --fs-1: 5rem; 46 | --fs-2: 4.2rem; 47 | --fs-3: 3rem; 48 | --fs-4: 2.6rem; 49 | --fs-5: 1.8rem; 50 | 51 | --fw-600: 600; 52 | --fw-700: 700; 53 | ``` 54 | 55 | ## Spacing 56 | 57 | ``` css 58 | --section-padding: 12rem; 59 | ``` 60 | 61 | ## Shadow 62 | 63 | ``` css 64 | --shadow-1: 0px 0px 30px 0px hsla(0, 0%, 0%, 0.2); 65 | ``` 66 | 67 | ## Border Radius 68 | 69 | ``` css 70 | --radius-circle: 50%; 71 | --radius-20: 20px; 72 | --radius-16: 16px; 73 | --radius-6: 6px; 74 | --radius-4: 4px; 75 | --btn-radius: 32px 6px; 76 | ``` 77 | 78 | ## Transition 79 | 80 | ``` css 81 | --transition-1: 0.25s ease; 82 | --transition-2: 0.5s ease; 83 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 84 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 85 | ``` 86 | --------------------------------------------------------------------------------