├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-banner.png │ ├── hero-banner.png │ ├── hero-pattern.svg │ ├── service-1.png │ ├── service-2.png │ ├── service-3.png │ └── service-4.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/hoolix) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/hoolix?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/hoolix?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/5J01tEPlF3A?style=social)](https://youtu.be/5J01tEPlF3A) 8 | 9 |
10 |
11 | 12 |

Hoolix - Digital Agency Website

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

Wellcome to Our Agency

115 | 116 |

Smart Ideas for your Brand are Here

117 | 118 |

119 | Donec tincidunt lacinia diam, eu volutpat est sollicitudin at. Vestibulum ut mi tristi que, vulputate ante 120 | quis, tempus 121 | enim. Proin quis euismod purus. Suspen disse efficitur 122 | aliquam enim sed consequat vulputate ante quis. 123 |

124 | 125 |
126 | Discover More 127 | 128 | 135 |
136 | 137 |
138 | 139 |
140 | hero banner 141 |
142 | 143 |
144 |
145 | 146 | 147 | 148 | 149 | 150 | 153 | 154 |
155 |
156 | 157 |
158 | about banner 160 |
161 | 162 |
163 | 164 |

We create some things, Design for your success future.

165 | 166 |

167 | Lorem Ipsum is simply dumm of free available in market the way printing and typesetting industry has been 168 | the industrys 169 | standard dummy text ever. 170 |

171 | 172 |
    173 | 174 |
  • 175 | Price of additional materials or parts (if needed) 176 |
    • 177 | 178 |
  • 179 | Transportation cost for carrying new materials/parts 180 |
    • 181 | 182 |
  • 183 | You will get 100% money back offer. 184 |
    • 185 | 186 |
187 | 188 |
189 | Know More 190 | 191 | 198 |
199 | 200 |
201 | 202 |
203 |
204 | 205 | 206 | 207 | 208 | 209 | 212 | 213 |
214 |
215 | 216 |

-What We Offer-

217 | 218 |

Our Creative Services

219 | 220 |

221 | Get the most of reduction in your team’s operating costs for the whole product which creates amazing UI/UX 222 | experiences. 223 |

224 | 225 |
    226 | 227 |
  • 228 |
    229 | 230 |
    231 | UI/UX Creative Design 233 |
    234 | 235 |
    236 | 237 |

    UI/UX Creative Design

    238 | 239 |

    240 | Lorem ipsum dolor sit amet, consectetur adi piscing semper turpis. Nullam eget luctlie gula and 241 | adipiscing elit. 242 |

    243 | 244 | 245 | Read More 246 | 247 | 248 | 249 | 250 |
    251 | 252 |
    253 |
    • 254 | 255 |
  • 256 |
    257 | 258 |
    259 | App Development 261 |
    262 | 263 |
    264 | 265 |

    App Development

    266 | 267 |

    268 | Lorem ipsum dolor sit amet, consectetur adi piscing semper turpis. Nullam eget luctlie gula and 269 | adipiscing elit. 270 |

    271 | 272 | 273 | Read More 274 | 275 | 276 | 277 | 278 |
    279 | 280 |
    281 |
    • 282 | 283 |
  • 284 |
    285 | 286 |
    287 | Professional Content Writer 289 |
    290 | 291 |
    292 | 293 |

    Professional Content Writer

    294 | 295 |

    296 | Lorem ipsum dolor sit amet, consectetur adi piscing semper turpis. Nullam eget luctlie gula and 297 | adipiscing elit. 298 |

    299 | 300 | 301 | Read More 302 | 303 | 304 | 305 | 306 |
    307 | 308 |
    309 |
    • 310 | 311 |
  • 312 |
    313 | 314 |
    315 | Graphic Design 317 |
    318 | 319 |
    320 | 321 |

    Graphic Design

    322 | 323 |

    324 | Lorem ipsum dolor sit amet, consectetur adi piscing semper turpis. Nullam eget luctlie gula and 325 | adipiscing elit. 326 |

    327 | 328 | 329 | Read More 330 | 331 | 332 | 333 | 334 |
    335 | 336 |
    337 |
    • 338 | 339 |
340 | 341 | Get Started 342 | 343 |
344 |
345 | 346 | 347 | 348 | 349 | 350 | 353 | 354 |
355 |
356 | 357 |

-Why Choose Us-

358 | 359 |

Reasons to Choose Us

360 | 361 |

362 | Get the most of reduction in your team’s operating costs for the whole product which creates amazing UI/UX 363 | experiences. 364 |

365 | 366 |
    367 | 368 |
  • 369 |
    370 | 371 | 01 372 | 373 |

    Free Icon Plugin

    374 | 375 |

    376 | Nullam ullamcorper condimentum urna eu accumsan. 377 |

    378 | 379 |
    380 |
    • 381 | 382 |
  • 383 |
    384 | 385 | 02 386 | 387 |

    Free 6 Month Support

    388 | 389 |

    390 | Nullam ullamcorper condimentum urna eu accumsan. 391 |

    392 | 393 |
    394 |
    • 395 | 396 |
  • 397 |
    398 | 399 | 03 400 | 401 |

    Customer Strategy

    402 | 403 |

    404 | Nullam ullamcorper condimentum urna eu accumsan. 405 |

    406 | 407 |
    408 |
    • 409 | 410 |
  • 411 |
    412 | 413 | 04 414 | 415 |

    Best Premimum Image

    416 | 417 |

    418 | Nullam ullamcorper condimentum urna eu accumsan. 419 |

    420 | 421 |
    422 |
    • 423 | 424 |
  • 425 |
    426 | 427 | 05 428 | 429 |

    Most Advanced Features

    430 | 431 |

    432 | Nullam ullamcorper condimentum urna eu accumsan. 433 |

    434 | 435 |
    436 |
    • 437 | 438 |
  • 439 |
    440 | 441 | 06 442 | 443 |

    Very Reasonable Price

    444 | 445 |

    446 | Nullam ullamcorper condimentum urna eu accumsan. 447 |

    448 | 449 |
    450 |
    • 451 | 452 |
453 | 454 |
455 |
456 | 457 | 458 | 459 | 460 | 461 | 464 | 465 |
466 |
467 | 468 |
469 |

Discover Frequently Asked Questions?

470 | 471 | Work Together 472 |
473 | 474 |
    475 | 476 |
  • 477 |
    478 | 479 | 489 | 490 |
    491 |

    492 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae 493 | posuere semper, libero ex 494 | hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit 495 | amet condimentum 496 | erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in 497 | luctus. Nullam 498 | tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. 499 | Sed varius, diam 500 | vitae posuere semper. 501 |

    502 |
    503 | 504 |
    505 |
    • 506 | 507 |
  • 508 |
    509 | 510 | 520 | 521 |
    522 |

    523 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae 524 | posuere semper, libero ex 525 | hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit 526 | amet condimentum 527 | erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in 528 | luctus. Nullam 529 | tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. 530 | Sed varius, diam 531 | vitae posuere semper. 532 |

    533 |
    534 | 535 |
    536 |
    • 537 | 538 |
  • 539 |
    540 | 541 | 551 | 552 |
    553 |

    554 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae 555 | posuere semper, libero ex 556 | hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit 557 | amet condimentum 558 | erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in 559 | luctus. Nullam 560 | tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. 561 | Sed varius, diam 562 | vitae posuere semper. 563 |

    564 |
    565 | 566 |
    567 |
    • 568 | 569 |
  • 570 |
    571 | 572 | 582 | 583 |
    584 |

    585 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae 586 | posuere semper, libero ex 587 | hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit 588 | amet condimentum 589 | erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in 590 | luctus. Nullam 591 | tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. 592 | Sed varius, diam 593 | vitae posuere semper. 594 |

    595 |
    596 | 597 |
    598 |
    • 599 | 600 |
  • 601 |
    602 | 603 | 613 | 614 |
    615 |

    616 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae 617 | posuere semper, libero ex 618 | hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit 619 | amet condimentum 620 | erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in 621 | luctus. Nullam 622 | tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. 623 | Sed varius, diam 624 | vitae posuere semper. 625 |

    626 |
    627 | 628 |
    629 |
    • 630 | 631 |
632 | 633 |
634 |
635 | 636 |
637 |
638 | 639 | 640 | 641 | 642 | 643 | 646 | 647 | 818 | 819 | 820 | 821 | 822 | 823 | 826 | 827 | 828 | 831 | 832 | 833 | 834 | 835 | 836 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Hoolix - Smart Ideas for your Brand are Here 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | Hoolix 8 | 9 | aria-label = close menu 10 | 11 | 12 | 13 | Home 14 | About 15 | Services 16 | Features 17 | Blog 18 | Contact Us 19 | 20 | aria-label = open menu 21 | 22 | 23 | 24 | Lets talk 25 | 26 | 27 | 28 | #---------- HERO ----------# 29 | 30 | Wellcome to Our Agency 31 | 32 | Smart Ideas for your Brand are Here 33 | 34 | Donec tincidunt lacinia diam, eu volutpat est sollicitudin at. Vestibulum ut mi tristi que, vulputate ante quis, tempus enim. Proin quis euismod purus. Suspen disse efficitur 35 | aliquam enim sed consequat vulputate ante quis. 36 | 37 | Discover More 38 | 39 | 40 | How it works 41 | 42 | alt = hero banner 43 | 44 | 45 | 46 | #---------- ABOUT ----------# 47 | 48 | alt = about banner 49 | 50 | We create some things, Design for your success future. 51 | 52 | Lorem Ipsum is simply dumm of free available in market the way printing and typesetting industry has been the industrys standard dummy text ever. 53 | 54 | Price of additional materials or parts (if needed) 55 | 56 | Transportation cost for carrying new materials/parts 57 | 58 | You will get 100% money back offer. 59 | 60 | Know More 61 | 62 | 63 | 10+ Years Experience 64 | 65 | 66 | 67 | #---------- SERVICE ----------# 68 | 69 | -What We Offer- 70 | 71 | Our Creative Services 72 | 73 | Get the most of reduction in your team’s operating costs for the whole product which creates amazing UI/UX experiences. 74 | 75 | alt = UI/UX Creative Design 76 | 77 | UI/UX Creative Design 78 | 79 | Lorem ipsum dolor sit amet, consectetur adi piscing semper turpis. Nullam eget luctlie gula and adipiscing elit. 80 | 81 | Read More 82 | 83 | 84 | 85 | alt = App Development 86 | App Development 87 | 88 | 89 | alt = Professional Content Writer 90 | Professional Content Writer 91 | 92 | 93 | alt = Graphic Design 94 | Graphic Design 95 | 96 | Get Started 97 | 98 | 99 | 100 | #---------- FEATURES ----------# 101 | 102 | -Why Choose Us- 103 | 104 | Reasons to Choose Us 105 | 106 | Get the most of reduction in your team’s operating costs for the whole product which creates amazing UI/UX experiences. 107 | 108 | 01 109 | Free Icon Plugin 110 | Nullam ullamcorper condimentum urna eu accumsan. 111 | 112 | 02 113 | Free 6 Month Support 114 | 115 | 03 116 | Customer Strategy 117 | 118 | 04 119 | Best Premimum Image 120 | 121 | 05 122 | Most Advanced Features 123 | 124 | 06 125 | Very Reasonable Price 126 | 127 | 128 | 129 | #---------- FAQ ----------# 130 | 131 | Discover Frequently Asked Questions? 132 | 133 | Work Together 134 | 135 | 01. Curious about how to build your own UX strategy? Here are five simple steps. 136 | 137 | 138 | 139 | 140 | Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, libero ex hendrerit nunc, ac sagittis eros metus ut diam. Donec a nibh in libero maximus vehicula. Etiam sit amet condimentum erat. Pellentesque ultrices sagittis turpis, quis tempus ante viverra et.Morbi aliquam quis quam in luctus. Nullam tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper, tincidunt pulvinar imperdiet. Sed varius, diam vitae posuere semper. 141 | 142 | 02. Where Could a Career in UX Take You? Agency vs. In-House vs. Freelance? 143 | 144 | 03. What Is a Problem Statement in UX? (And How To Write One? 145 | 146 | 04. There are several techniques UX designers employ to arrive at a succinct? 147 | 148 | 05. What are the obstacles users are facing? What are they trying to do? 149 | 150 | 151 | #---------- FOOTER ----------# 152 | 153 | Hoolix 154 | 155 | Lorem ipsum dolor sit amet consecte tur adipisicing elit, sed do eiusmod tempor incididunt ut labore. 156 | 157 | placeholder = Enter your email 158 | 159 | 160 | 161 | Our Services 162 | 163 | Strategy & Research 164 | Web Development 165 | Web Solution 166 | Digital Merketing 167 | App Design 168 | App Development 169 | 170 | Company 171 | 172 | About Company 173 | Our Services 174 | Our Portfolio 175 | Our Blog 176 | Latest News 177 | Contact Us 178 | 179 | Contact Us 180 | 181 | 182 | 4517 Washington Ave. Manchester, Kentucky 39495 183 | 184 | 185 | +7894631546876 186 | 187 | 188 | info@hoolix.com 189 | 190 | 191 | 192 | 193 | 194 | 195 | © 2022 Hoolix | All Rights Reserved by codewithsadee 196 | 197 | Privacy Policy 198 | Terms of Use -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/hoolix/609ef2ab9f6ab8578250c5603af48eec7b2cb528/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-1: hsl(215, 31%, 14%); 28 | --rich-black-fogra-29-2: hsl(230, 14%, 8%); 29 | --rich-black-fogra-39: hsl(158, 29%, 5%); 30 | --granite-gray: hsl(0, 0%, 40%); 31 | --go-green_50: hsla(145, 63%, 42%, 0.5); 32 | --go-green_8: hsla(145, 63%, 42%, 0.08); 33 | --go-green_5: hsla(145, 63%, 42%, 0.05); 34 | --light-gray: hsl(0, 0%, 80%); 35 | --mint-cream: hsl(160, 100%, 98%); 36 | --cultured: hsl(0, 0%, 93%); 37 | --go-green: hsl(145, 63%, 42%); 38 | --white: hsl(0, 0%, 100%); 39 | --jet: hsl(0, 0%, 18%); 40 | ``` 41 | 42 | ## Gradient color 43 | 44 | ``` css 45 | --gradient: linear-gradient(to right, transparent 50%, var(--white_30) 100%); 46 | ``` 47 | 48 | ## Typography 49 | 50 | ``` css 51 | --ff-poppins: 'Poppins', sans-serif; 52 | --ff-cuprum: 'Cuprum', sans-serif; 53 | 54 | --fs-1: 4.5rem; 55 | --fs-2: 3.6rem; 56 | --fs-3: 3.5rem; 57 | --fs-4: 3.2rem; 58 | --fs-5: 2.5rem; 59 | --fs-6: 2.4rem; 60 | --fs-7: 2.2rem; 61 | --fs-8: 2rem; 62 | --fs-9: 1.8rem; 63 | --fs-10: 1.5rem; 64 | --fs-11: 1.4rem; 65 | --fs-12: 1.3rem; 66 | 67 | --fw-600: 600; 68 | --fw-500: 500; 69 | ``` 70 | 71 | ## Spacing 72 | 73 | ``` css 74 | --section-padding: 80px; 75 | ``` 76 | 77 | ## Shadow 78 | 79 | ``` css 80 | --shadow-1: 3px 4px 30px hsla(0, 0%, 53%, 0.1); 81 | --shadow-2: 5px 3px 40px hsla(191, 100%, 17%, 0.1); 82 | ``` 83 | 84 | ## Border Radius 85 | 86 | ``` css 87 | --radius-5: 5px; 88 | ``` 89 | 90 | ## Transition 91 | 92 | ``` css 93 | --transition-1: 0.25s ease; 94 | --transition-2: 0.5s ease; 95 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 96 | ``` 97 | --------------------------------------------------------------------------------