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

InnoHub - Digital Marketing Agency Website

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

InnoHub Marketing Agency

100 | 101 |

We are available for marketing

102 | 103 |

104 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporthem incididunt ut labore et 105 | dolore magna 106 | aliqua. 107 |

108 | 109 | Get Started 110 | 111 |
112 | 113 |
114 | hero banner 115 |
116 | 117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 127 | 128 |
129 |
130 | 131 |

Services We Provided

132 | 133 |

134 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 135 | dolore magna. 136 |

137 | 138 |
    139 | 140 |
  • 141 |
    142 | 143 |
    144 | 145 |
    146 | 147 |

    148 | SEO Optimization 149 |

    150 | 151 |

    152 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 153 | aperiam, eaque 154 | ipsa quae. 155 |

    156 | 157 |
    158 |
    • 159 | 160 |
  • 161 |
    162 | 163 |
    164 | 165 |
    166 | 167 |

    168 | Digital Marketing 169 |

    170 | 171 |

    172 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 173 | aperiam, eaque 174 | ipsa quae. 175 |

    176 | 177 |
    178 |
    • 179 | 180 |
  • 181 |
    182 | 183 |
    184 | 185 |
    186 | 187 |

    188 | Market Research 189 |

    190 | 191 |

    192 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 193 | aperiam, eaque 194 | ipsa quae. 195 |

    196 | 197 |
    198 |
    • 199 | 200 |
  • 201 |
    202 | 203 |
    204 | 205 |
    206 | 207 |

    208 | Keyword Targeting 209 |

    210 | 211 |

    212 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 213 | aperiam, eaque 214 | ipsa quae. 215 |

    216 | 217 |
    218 |
    • 219 | 220 |
  • 221 |
    222 | 223 |
    224 | 225 |
    226 | 227 |

    228 | Email Marketing 229 |

    230 | 231 |

    232 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 233 | aperiam, eaque 234 | ipsa quae. 235 |

    236 | 237 |
    238 |
    • 239 | 240 |
  • 241 |
    242 | 243 |
    244 | 245 |
    246 | 247 |

    248 | Marketing & Reporting 249 |

    250 | 251 |

    252 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem 253 | aperiam, eaque 254 | ipsa quae. 255 |

    256 | 257 |
    258 |
    • 259 | 260 |
261 | 262 |
263 |
264 | 265 | 266 | 267 | 268 | 269 | 272 | 273 |
274 |
275 | 276 |

Our Recent Projects

277 | 278 |

279 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 280 | dolore magna 281 | aliqua. 282 |

283 | 284 | 425 | 426 |
427 |
428 | 429 | 430 | 431 | 432 | 433 | 436 | 437 |
438 |
439 | 440 |
441 | about banner 443 | 444 | 447 |
448 | 449 |
450 | 451 |

About Us

452 | 453 |

454 | Lorem ipsum dolor sit amet, con se ctetur adipiscing elit. In sagittis eg esta ante, sed viverra nunc 455 | tinci dunt nec 456 | elei fend et tiram. 457 |

458 | 459 |

Who We Are

460 | 461 |

462 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 463 | rem aperiam, 464 | eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 465 |

466 | 467 |

Our Success

468 | 469 |
    470 | 471 |
  • 472 | 473 | 474 |

    475 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 476 |

    477 |
    • 478 | 479 |
  • 480 | 481 | 482 |

    483 | It is a long established fact that a reader will be distracted by the readable content of a page when 484 | looking at its 485 | layout. 486 |

    487 |
    • 488 | 489 |
  • 490 | 491 | 492 |

    493 | Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of 494 | classical Latin 495 | literature. 496 |

    497 |
    • 498 | 499 |
500 | 501 |

Our Mission

502 | 503 |

504 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti 505 | atque corrupti 506 | quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. 507 |

508 | 509 |
510 | 511 |
512 |
513 | 514 | 515 | 516 | 517 | 518 | 521 | 522 |
523 |
524 | 525 |

So What is Next?

526 | 527 |

Are You Ready? Let's get to Work!

528 | 529 | Get Started 530 | 531 |
532 |
533 | 534 | 535 | 536 | 537 | 538 | 541 | 542 |
543 |
544 | 545 |

Latest Articles Updated Weekly

546 | 547 |

548 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 549 | dolore magna 550 | aliqua. 551 |

552 | 553 | 661 | 662 |
663 |
664 | 665 | 666 | 667 | 668 | 669 | 672 | 673 |
674 |
675 | 676 |

Let's Contact With Us

677 | 678 |

679 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 680 | dolore magna 681 | aliqua. 682 |

683 | 684 |
685 | 686 |
687 | 688 | 689 | 691 |
692 | 693 |
694 | 695 | 696 | 697 |
698 | 699 | 701 | 702 |
703 | 704 | 705 | 709 |
710 | 711 | 712 | 713 |
714 | 715 |
    716 | 717 |
  • 718 |
    719 | 720 |
    721 | 722 |
    723 | 724 |
    725 | 726 |

    Mail Here

    727 | 728 | hello@luaz.com 729 | info@luaz.com 730 | 731 |
    732 | 733 |
    734 |
    • 735 | 736 |
  • 737 |
    738 | 739 |
    740 | 741 |
    742 | 743 |
    744 | 745 |

    Visit Here

    746 | 747 |
    748 | 27 Division St, New York,
    749 | NY 10002, USA 750 |
    751 | 752 |
    753 | 754 |
    755 |
    • 756 | 757 |
  • 758 |
    759 | 760 |
    761 | 762 |
    763 | 764 |
    765 | 766 |

    Call Here

    767 | 768 | +123 456 7890 769 | +241 452 4526 770 | 771 |
    772 | 773 |
    774 |
    • 775 | 776 |
777 | 778 |
779 |
780 | 781 |
782 |
783 | 784 | 785 | 786 | 787 | 788 | 791 | 792 | 801 | 802 | 803 | 804 | 805 | 806 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 821 | 822 | 823 | 826 | 827 | 828 | 829 | 830 | 831 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | InnoHub - We're available for marketing 2 | 3 | #---------- HEADER ----------# 4 | 5 | InnoHub 6 | 7 | Home 8 | Services 9 | Project 10 | About Us 11 | Blog 12 | Contact Us 13 | 14 | Get Started 15 | 16 | aria-label = Toggle menu 17 | 18 | 19 | 20 | 21 | 22 | #---------- HERO ----------# 23 | 24 | InnoHub Marketing Agency 25 | 26 | We are available for marketing 27 | 28 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temporthem incididunt ut labore et dolore magna aliqua. 29 | 30 | Get Started 31 | 32 | alt = hero banner 33 | 34 | 35 | 36 | #---------- SERVICE ----------# 37 | 38 | Services We Provided 39 | 40 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. 41 | 42 | 43 | 44 | SEO Optimization 45 | 46 | Sed ut perspiciatis unde omnis iste natus error sit tatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae. 47 | 48 | 49 | Digital Marketing 50 | 51 | 52 | Market Research 53 | 54 | 55 | Keyword Targeting 56 | 57 | 58 | Email Marketing 59 | 60 | 61 | Marketing & Reporting 62 | 63 | 64 | 65 | #---------- PROJECT ----------# 66 | 67 | Our Recent Projects 68 | 69 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 70 | 71 | alt = Designing a better cinema experience 72 | 73 | SEO Optimization 74 | 75 | Designing a better cinema experience 76 | 77 | View Details 78 | 79 | 80 | alt = Building design process within teams 81 | Digital Marketing 82 | 83 | alt = How intercom brings play into their design process 84 | Keyword Targeting 85 | 86 | alt = Stuck with to-do list, I created a new app for 87 | Email Marketing 88 | 89 | alt = Examples of different types of sprints 90 | Marketing & Reporting 91 | 92 | alt = Redesigning the New York times app 93 | Development 94 | 95 | 96 | 97 | #---------- ABOUT ----------# 98 | 99 | alt = about banner 100 | 101 | aria-label = Play video 102 | 103 | 104 | 105 | About Us 106 | 107 | Lorem ipsum dolor sit amet, con se ctetur adipiscing elit. In sagittis eg esta ante, sed viverra nunc tinci dunt nec elei fend et tiram. 108 | 109 | Who We Are 110 | 111 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 112 | 113 | Our Success 114 | 115 | 116 | 117 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 118 | 119 | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 120 | 121 | Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature. 122 | 123 | Our Mission 124 | 125 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. 126 | 127 | 128 | 129 | #---------- CTA ----------# 130 | 131 | So What is Next? 132 | 133 | Are You Ready? Let's get to Work! 134 | 135 | Get Started 136 | 137 | 138 | 139 | #---------- BLOG ----------# 140 | 141 | Latest Articles Updated Weekly 142 | 143 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 144 | 145 | alt = How to Become a Successful Entry Level UX Designer 146 | 147 | June 16, 2022 148 | 149 | How to Become a Successful Entry Level UX Designer 150 | 151 | alt = 2022 Local SEO Success: The Year of Everywhere 152 | 153 | alt = The Guide to Running a Client Discovery Process 154 | 155 | alt = 3 Ways to Get Client Approval for Scope Changes 156 | 157 | alt = Top 21 Must-Read Blogs For Creative Agencies 158 | 159 | 160 | 161 | #---------- CONTACT ----------# 162 | 163 | Let's Contact With Us 164 | 165 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 166 | 167 | aria-label = name 168 | placeholder = Your name* 169 | 170 | aria-label = email 171 | placeholder = Email address* 172 | 173 | aria-label = subject 174 | placeholder = Subject 175 | 176 | aria-label = phone 177 | placeholder = Phone number 178 | 179 | aria-label = message 180 | placeholder = Your message...* 181 | 182 | Accept Terms of Services and Privacy Policy 183 | 184 | Send Message 185 | 186 | 187 | 188 | Mail Here 189 | hello@luaz.com 190 | info@luaz.com 191 | 192 | 193 | 194 | Visit Here 195 | 27 Division St, New York, 196 | NY 10002, USA 197 | 198 | 199 | 200 | Call Here 201 | +123 456 7890 202 | +241 452 4526 203 | 204 | 205 | 206 | #---------- FOOTER ----------# 207 | 208 | © 2022 All Rights Reserved by codewithsadee 209 | 210 | 211 | 212 | #---------- BACK TO TOP ----------# 213 | 214 | aria-label = back to top 215 | 216 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/innohub/9b27b6679bc561a49b4ba3d34735550f6b4f340d/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 | --safety-orange: hsl(25, 100%, 50%); 28 | --lavender-gray: hsl(230, 19%, 81%); 29 | --persian-rose: hsl(328, 100%, 59%); 30 | --red-crayola: hsl(341, 100%, 49%); 31 | --eerie-black: hsl(240, 6%, 10%); 32 | --light-gray: hsl(0, 0%, 80%); 33 | --cultured-2: hsl(210, 60%, 98%); 34 | --platinum: hsl(0, 0%, 90%); 35 | --gray-web: hsl(220, 5%, 49%); 36 | --cultured: hsl(0, 0%, 93%); 37 | --black_10: hsla(0, 0%, 0%, 0.1); 38 | --black_5: hsla(0, 0%, 0%, 0.05); 39 | --white-1: hsl(0, 0%, 100%); 40 | --white-2: hsl(0, 14%, 98%); 41 | --black: hsl(0, 0%, 0%); 42 | ``` 43 | 44 | ## Gradient color 45 | 46 | ``` css 47 | --gradient: linear-gradient(to left top, var(--persian-rose), var(--safety-orange)); 48 | ``` 49 | 50 | ## Typography 51 | 52 | ``` css 53 | --ff-roboto: 'Roboto', sans-serif; 54 | --ff-league-spartan: 'League Spartan', sans-serif; 55 | 56 | --fs-1: 3.5rem; 57 | --fs-2: 3rem; 58 | --fs-3: 2.1rem; 59 | --fs-4: 1.7rem; 60 | --fs-5: 1.4rem; 61 | --fs-6: 1.3rem; 62 | 63 | --fw-700: 700; 64 | --fw-500: 500; 65 | ``` 66 | 67 | ## Spacing 68 | 69 | ``` css 70 | --section-padding: 60px; 71 | ``` 72 | 73 | ## Shadow 74 | 75 | ``` css 76 | --shadow-1: 0 6px 24px var(--black_5); 77 | --shadow-2: 0 2px 28px var(--black_10); 78 | ``` 79 | 80 | ## Border Radius 81 | 82 | ``` css 83 | --radius-2: 2px; 84 | --radius-5: 5px; 85 | --radius-8: 8px; 86 | ``` 87 | 88 | ## Transition 89 | 90 | ``` css 91 | --transition-1: 0.25s ease; 92 | --transition-2: 0.5s ease; 93 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 94 | ``` 95 | --------------------------------------------------------------------------------