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

Pixology - Digital Agency Website

13 | 14 | Pixology 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 | ![Pixology 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 **Pixology** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/pixology.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/pixology.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 | --sky-blue-crayola: hsl(188, 64%, 60%); 24 | --raisin-black_90: hsla(240, 8%, 12%, 0.9); 25 | --raisin-black-1: hsl(240, 8%, 17%); 26 | --raisin-black-2: hsl(240, 8%, 12%); 27 | --majorelle-blue: hsl(241, 77%, 63%); 28 | --blue-ryb_80: hsla(241, 88%, 60%, 0.8); 29 | --bittersweet: hsl(0, 100%, 69%); 30 | --eerie-black: hsl(0, 0%, 13%); 31 | --ghost-white: hsl(230, 60%, 98%); 32 | --light-gray: hsl(0, 0%, 80%); 33 | --slate-gray: hsl(225, 8%, 48%); 34 | --cool-gray: hsl(225, 11%, 59%); 35 | --gainsboro: hsl(217, 16%, 90%); 36 | --mustard: hsl(47, 100%, 69%); 37 | --white: hsl(0, 0%, 100%); 38 | --black: hsl(0, 0%, 0%); 39 | --onyx: hsl(240, 5%, 26%); 40 | --jet: hsl(0, 0%, 21%); 41 | 42 | /** 43 | * gradient 44 | */ 45 | 46 | --gradient: radial-gradient(ellipse at center, hsla(0, 0%, 0%, 0.25), transparent 80%); 47 | 48 | /** 49 | * typography 50 | */ 51 | 52 | --ff-dm-sans: 'DM Sans', sans-serif; 53 | 54 | --fs-1: 4rem; 55 | --fs-2: 3.5rem; 56 | --fs-3: 2.4rem; 57 | --fs-4: 2.2rem; 58 | --fs-5: 2rem; 59 | --fs-6: 1.8rem; 60 | --fs-7: 1.7rem; 61 | --fs-8: 1.5rem; 62 | --fs-9: 1.4rem; 63 | 64 | --fw-500: 500; 65 | --fw-700: 700; 66 | 67 | /** 68 | * spacing 69 | */ 70 | 71 | --section-padding: 100px; 72 | 73 | /** 74 | * shadow 75 | */ 76 | 77 | --shadow-1: 0px 2px 50px hsla(223, 40%, 76%, 0.3); 78 | --shadow-2: 0px -2px 12px hsl(252, 29%, 93%); 79 | --shadow-3: 0px 4px 4px hsla(231, 20%, 49%, 0.06); 80 | --shadow-4: 0px 15px 30px hsla(210, 30%, 32%, 0.05); 81 | --shadow-5: 0px 15px hsla(241, 62%, 34%, 0.04); 82 | 83 | /** 84 | * radius 85 | */ 86 | 87 | --radius-8: 8px; 88 | --radius-10: 10px; 89 | --radius-15: 15px; 90 | --radius-20: 20px; 91 | 92 | /** 93 | * transition 94 | */ 95 | 96 | --transition-1: 0.25s ease; 97 | --transition-2: 0.5s ease; 98 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 99 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 100 | 101 | } 102 | 103 | 104 | 105 | 106 | 107 | /*-----------------------------------*\ 108 | #RESET 109 | \*-----------------------------------*/ 110 | 111 | *, 112 | *::before, 113 | *::after { 114 | margin: 0; 115 | padding: 0; 116 | box-sizing: border-box; 117 | } 118 | 119 | li { list-style: none; } 120 | 121 | a, 122 | img, 123 | span, 124 | input, 125 | button, 126 | ion-icon { display: block; } 127 | 128 | a { 129 | color: inherit; 130 | text-decoration: none; 131 | } 132 | 133 | img { height: auto; } 134 | 135 | input, 136 | button { 137 | background: none; 138 | border: none; 139 | font: inherit; 140 | } 141 | 142 | input { width: 100%; } 143 | 144 | button { cursor: pointer; } 145 | 146 | ion-icon { pointer-events: none; } 147 | 148 | html { 149 | font-family: var(--ff-dm-sans); 150 | font-size: 10px; 151 | scroll-behavior: smooth; 152 | } 153 | 154 | body { 155 | background-color: var(--white); 156 | color: var(--slate-gray); 157 | font-size: 1.6rem; 158 | line-height: 1.75; 159 | } 160 | 161 | :focus-visible { outline-offset: 4px; } 162 | 163 | ::-webkit-scrollbar { width: 10px; } 164 | 165 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } 166 | 167 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } 168 | 169 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } 170 | 171 | 172 | 173 | 174 | 175 | /*-----------------------------------*\ 176 | #REUSED STYLE 177 | \*-----------------------------------*/ 178 | 179 | .container { padding-inline: 15px; } 180 | 181 | .section { padding-block: var(--section-padding); } 182 | 183 | .h1, 184 | .h2 { letter-spacing: -2px; } 185 | 186 | .h1 { 187 | color: var(--black); 188 | font-size: var(--fs-1); 189 | line-height: 1.1; 190 | } 191 | 192 | .h2, 193 | .h3 { color: var(--raisin-black-1); } 194 | 195 | .h2 { 196 | font-size: var(--fs-2); 197 | line-height: 1.2; 198 | } 199 | 200 | .h3 { 201 | font-size: var(--fs-3); 202 | line-height: 1.3; 203 | font-weight: var(--fw-500); 204 | } 205 | 206 | .has-before, 207 | .has-after { 208 | position: relative; 209 | z-index: 1; 210 | } 211 | 212 | .has-before::before, 213 | .has-after::after { 214 | content: ""; 215 | position: absolute; 216 | } 217 | 218 | :is(.h1, .h2) .has-before { display: inline-block; } 219 | 220 | :is(.h1, .h2) .has-before::before { 221 | bottom: 8px; 222 | left: 0; 223 | width: 100%; 224 | height: 6px; 225 | background-color: var(--mustard); 226 | z-index: -1; 227 | } 228 | 229 | .btn { 230 | max-width: max-content; 231 | font-weight: var(--fw-700); 232 | height: 55px; 233 | display: flex; 234 | align-items: center; 235 | padding-inline: 50px; 236 | border-radius: var(--radius-10); 237 | overflow: hidden; 238 | transition: var(--transition-2); 239 | } 240 | 241 | .btn::before, 242 | .btn::after { 243 | right: 0; 244 | width: 100%; 245 | height: 50%; 246 | transform: scaleX(0); 247 | background-color: var(--mustard); 248 | z-index: -1; 249 | transition: transform var(--transition-1); 250 | } 251 | 252 | .btn::before { 253 | top: 0; 254 | transform-origin: left; 255 | } 256 | 257 | .btn::after { 258 | top: 50%; 259 | transform-origin: right; 260 | } 261 | 262 | .btn:is(:hover, :focus)::before, 263 | .btn:is(:hover, :focus)::after { transform: scaleX(1); } 264 | 265 | .btn:is(:hover, :focus)::before { transform-origin: right; } 266 | 267 | .btn:is(:hover, :focus)::after { transform-origin: left; } 268 | 269 | .btn-primary { 270 | background-color: var(--majorelle-blue); 271 | color: var(--white); 272 | } 273 | 274 | .btn-primary:is(:hover, :focus) { color: var(--raisin-black-1); } 275 | 276 | .btn-secondary { 277 | background-color: var(--mustard); 278 | color: var(--raisin-black-1); 279 | gap: 15px; 280 | } 281 | 282 | .btn-secondary::before, 283 | .btn-secondary::after { background-color: var(--sky-blue-crayola); } 284 | 285 | .btn-secondary:is(:hover, :focus) { color: var(--white); } 286 | 287 | .social-list { display: flex; } 288 | 289 | .w-100 { width: 100%; } 290 | 291 | .section-subtitle { 292 | color: var(--cool-gray); 293 | font-size: var(--fs-6); 294 | font-weight: var(--fw-500); 295 | line-height: 1.2; 296 | } 297 | 298 | .section-subtitle::before { 299 | position: static; 300 | width: 12px; 301 | height: 12px; 302 | background-color: var(--mustard); 303 | display: inline-block; 304 | border-radius: 50%; 305 | margin-inline-end: 10px; 306 | } 307 | 308 | .text-center { text-align: center; } 309 | 310 | .section-title { margin-block: 30px 50px; } 311 | 312 | .grid-list { 313 | display: grid; 314 | gap: 30px; 315 | } 316 | 317 | .img-holder { 318 | aspect-ratio: var(--width) / var(--height); 319 | background-color: var(--light-gray); 320 | overflow: hidden; 321 | } 322 | 323 | .img-cover { 324 | width: 100%; 325 | height: 100%; 326 | object-fit: cover; 327 | } 328 | 329 | .has-bg-image { 330 | background-repeat: no-repeat; 331 | background-position: center; 332 | background-size: cover; 333 | } 334 | 335 | 336 | 337 | 338 | 339 | /*-----------------------------------*\ 340 | #HEADER 341 | \*-----------------------------------*/ 342 | 343 | .header .btn { display: none; } 344 | 345 | .header { 346 | position: fixed; 347 | top: 0; 348 | left: 0; 349 | width: 100%; 350 | padding-block: 25px; 351 | transition: padding var(--transition-1); 352 | z-index: 4; 353 | } 354 | 355 | .header.active { 356 | background-color: var(--white); 357 | padding-block: 15px; 358 | box-shadow: var(--shadow-1); 359 | } 360 | 361 | .header .container { 362 | display: flex; 363 | justify-content: space-between; 364 | align-items: center; 365 | } 366 | 367 | .logo { 368 | color: var(--raisin-black-1); 369 | font-size: 3.6rem; 370 | font-weight: var(--fw-700); 371 | } 372 | 373 | .nav-open-btn { 374 | background-color: var(--white); 375 | color: var(--eerie-black); 376 | font-size: 35px; 377 | padding: 10px; 378 | box-shadow: var(--shadow-2); 379 | border-radius: var(--radius-10); 380 | } 381 | 382 | .navbar { 383 | position: fixed; 384 | top: 0; 385 | right: 0; 386 | background-color: var(--raisin-black-2); 387 | color: var(--white); 388 | max-width: 300px; 389 | width: 100%; 390 | height: 100%; 391 | padding: 30px; 392 | z-index: 1; 393 | transform: translateX(100%); 394 | visibility: hidden; 395 | transition: 0.25s var(--cubic-in); 396 | } 397 | 398 | .navbar.active { 399 | transform: translateX(0); 400 | visibility: visible; 401 | transition: 0.5s var(--cubic-out); 402 | } 403 | 404 | .navbar .wrapper { 405 | display: flex; 406 | align-items: center; 407 | justify-content: space-between; 408 | margin-block-end: 60px; 409 | } 410 | 411 | .navbar .logo { color: var(--white); } 412 | 413 | .nav-close-btn { 414 | color: var(--white); 415 | font-size: 30px; 416 | transition: var(--transition-1); 417 | } 418 | 419 | .nav-close-btn:is(:hover, :focus) { color: var(--bittersweet); } 420 | 421 | .navbar-item:not(:last-child) { border-block-end: 1px solid var(--jet); } 422 | 423 | .navbar-link { 424 | font-size: var(--fs-9); 425 | font-weight: var(--fw-700); 426 | padding-block: 15px; 427 | text-transform: uppercase; 428 | transition: var(--transition-1); 429 | } 430 | 431 | .navbar-link:is(:hover, :focus) { color: var(--mustard); } 432 | 433 | .overlay { 434 | position: fixed; 435 | inset: 0; 436 | background-color: var(--raisin-black_90); 437 | transition: var(--transition-2); 438 | opacity: 0; 439 | pointer-events: none; 440 | } 441 | 442 | .overlay.active { 443 | opacity: 1; 444 | pointer-events: all; 445 | } 446 | 447 | 448 | 449 | 450 | 451 | 452 | /*-----------------------------------*\ 453 | #HERO 454 | \*-----------------------------------*/ 455 | 456 | .hero { padding-block-start: calc(var(--section-padding) + 60px); } 457 | 458 | .hero .container { 459 | display: grid; 460 | gap: 70px; 461 | } 462 | 463 | .hero-text { 464 | font-size: var(--fs-7); 465 | margin-block: 30px 35px; 466 | } 467 | 468 | .hero-content :is(.wrapper, .hero-btn) { 469 | display: flex; 470 | align-items: center; 471 | } 472 | 473 | .hero-content .wrapper { 474 | flex-wrap: wrap; 475 | gap: 30px; 476 | margin-block-end: 30px; 477 | } 478 | 479 | .hero-btn { 480 | gap: 15px; 481 | color: var(--raisin-black-1); 482 | transition: var(--transition-1); 483 | } 484 | 485 | .hero-btn:is(:hover, :focus) { color: var(--majorelle-blue); } 486 | 487 | .hero-btn ion-icon { font-size: 24px; } 488 | 489 | .hero-btn .span { 490 | font-size: var(--fs-6); 491 | font-weight: var(--fw-500); 492 | } 493 | 494 | .hero .social-link .span { display: none; } 495 | 496 | .hero .social-list { gap: 12px; } 497 | 498 | .hero .social-link { 499 | background-color: var(--white); 500 | color: var(--color); 501 | padding: 12px; 502 | box-shadow: var(--shadow-1); 503 | border-radius: var(--radius-8); 504 | transition: var(--transition-2); 505 | } 506 | 507 | .hero .social-link:is(:hover, :focus) { 508 | background-color: var(--color); 509 | color: var(--white); 510 | } 511 | 512 | 513 | 514 | 515 | 516 | /*-----------------------------------*\ 517 | #SERVICE 518 | \*-----------------------------------*/ 519 | 520 | .service { background-color: var(--ghost-white); } 521 | 522 | .service .section-title { margin-block: 30px 60px; } 523 | 524 | .service-card, 525 | .service .link-card { 526 | padding: 45px; 527 | border-radius: var(--radius-20); 528 | } 529 | 530 | .service-card { 531 | height: 100%; 532 | background-color: var(--white); 533 | padding-block-end: 40px; 534 | border-block-end: 3px solid transparent; 535 | box-shadow: var(--shadow-3); 536 | transition: var(--transition-1); 537 | } 538 | 539 | .service-card:is(:hover, :focus-within) { border-color: hsl(var(--color)); } 540 | 541 | .service-card .card-icon { 542 | max-width: max-content; 543 | padding: 15px; 544 | border-radius: var(--radius-8); 545 | background-color: hsla(var(--color), 0.15); 546 | margin-block-end: 25px; 547 | transition: var(--transition-2); 548 | } 549 | 550 | .service-card:is(:hover, :focus-within) .card-icon { transform: rotateY(0.5turn); } 551 | 552 | .service-card .card-title { transition: var(--transition-1); } 553 | 554 | .service-card .card-title:is(:hover, :focus-within) { color: hsl(var(--color)); } 555 | 556 | .service .link-card { 557 | background-color: hsla(var(--color), 0.15); 558 | text-align: center; 559 | } 560 | 561 | .service .link-card .span { 562 | color: var(--raisin-black-1); 563 | font-size: var(--fs-6); 564 | font-weight: var(--fw-500); 565 | margin-block-end: 20px; 566 | transition: var(--transition-1); 567 | } 568 | 569 | .service .link-card:is(:hover, :focus) .span { color: var(--majorelle-blue); } 570 | 571 | .service .link-card ion-icon { 572 | color: var(--majorelle-blue); 573 | font-size: 150px; 574 | transform: rotate(-45deg); 575 | margin: -25px auto; 576 | transition: var(--transition-1); 577 | } 578 | 579 | .service .link-card:is(:hover, :focus) ion-icon { color: hsl(var(--color)); } 580 | 581 | 582 | 583 | 584 | 585 | /*-----------------------------------*\ 586 | #FEATURE 587 | \*-----------------------------------*/ 588 | 589 | .feature .container, 590 | .feature-list { 591 | display: grid; 592 | gap: 60px; 593 | } 594 | 595 | .feature-card .card-icon { 596 | background-color: hsla(var(--color), 0.15); 597 | font-size: 24px; 598 | max-width: max-content; 599 | padding: 18px; 600 | border-radius: 50%; 601 | margin-block-end: 20px; 602 | transition: var(--transition-2); 603 | } 604 | 605 | .feature-card .card-icon ion-icon { 606 | color: hsl(var(--color)); 607 | transition: var(--transition-1); 608 | } 609 | 610 | .feature-card .card-text { 611 | color: var(--cool-gray); 612 | font-size: var(--fs-7); 613 | margin-block-start: 10px; 614 | } 615 | 616 | .feature-card:is(:hover, :focus) .card-icon { 617 | box-shadow: inset 0 0 0 30px hsla(var(--color), 0.9); 618 | } 619 | 620 | .feature-card:is(:hover, :focus) .card-icon ion-icon { color: var(--white); } 621 | 622 | 623 | 624 | 625 | 626 | /*-----------------------------------*\ 627 | #PROJECT 628 | \*-----------------------------------*/ 629 | 630 | .project { background-color: var(--ghost-white); } 631 | 632 | .project .section-title { margin-block: 20px 60px; } 633 | 634 | .filter-list { 635 | max-width: 90%; 636 | margin-inline: auto; 637 | display: flex; 638 | flex-wrap: wrap; 639 | justify-content: center; 640 | align-items: center; 641 | margin-block-end: 70px; 642 | } 643 | 644 | .filter-btn { 645 | color: var(--cool-gray); 646 | font-size: var(--fs-9); 647 | font-weight: var(--fw-500); 648 | padding: 11px 20px; 649 | border-radius: var(--radius-8); 650 | transition: var(--transition-1); 651 | } 652 | 653 | .filter-btn:is(:hover, :focus) { color: var(--raisin-black-1); } 654 | 655 | .filter-btn.active { 656 | background-color: var(--white); 657 | color: var(--raisin-black-1); 658 | box-shadow: var(--shadow-4); 659 | } 660 | 661 | .project-card { 662 | position: relative; 663 | border-radius: var(--radius-15); 664 | overflow: hidden; 665 | } 666 | 667 | .project-card .card-banner img { transition: var(--transition-2); } 668 | 669 | .project-card:is(:hover, :focus-within) .card-banner img { 670 | transform: scale(1.1); 671 | filter: brightness(0.8); 672 | } 673 | 674 | .project-card .card-content { 675 | position: absolute; 676 | top: 50%; 677 | left: 20px; 678 | right: 20px; 679 | background-color: var(--mustard); 680 | border-radius: var(--radius-10); 681 | padding: 30px 20px; 682 | text-align: center; 683 | opacity: 0; 684 | transform: translateY(calc(-50% + 20px)); 685 | transition: var(--transition-2); 686 | } 687 | 688 | .project-card .card-tag { 689 | color: var(--raisin-black-1); 690 | font-size: var(--fs-9); 691 | } 692 | 693 | .project-card:is(:hover, :focus-within) .card-content { 694 | opacity: 1; 695 | transform: translateY(-50%); 696 | } 697 | 698 | 699 | 700 | 701 | 702 | /*-----------------------------------*\ 703 | #NEWSLETTER 704 | \*-----------------------------------*/ 705 | 706 | .newsletter { color: var(--white); } 707 | 708 | .newsletter .container { 709 | display: grid; 710 | gap: 50px; 711 | } 712 | 713 | .newsletter-banner { max-width: max-content; } 714 | 715 | .newsletter .section-subtitle { color: var(--light-gray); } 716 | 717 | .newsletter .section-title { 718 | color: var(--white); 719 | margin-block: 20px 35px; 720 | } 721 | 722 | .email-field { 723 | background-color: var(--majorelle-blue); 724 | color: var(--white); 725 | font-size: var(--fs-9); 726 | min-height: 60px; 727 | padding-inline: 20px; 728 | border-radius: var(--radius-8); 729 | margin-block-end: 20px; 730 | box-shadow: var(--shadow-5); 731 | outline: 3px solid transparent; 732 | outline-offset: 0; 733 | transition: var(--transition-1); 734 | } 735 | 736 | .email-field:focus { outline-color: var(--white); } 737 | 738 | .email-field::placeholder { color: inherit; } 739 | 740 | 741 | 742 | 743 | 744 | /*-----------------------------------*\ 745 | #BLOG 746 | \*-----------------------------------*/ 747 | 748 | .blog { background-color: var(--ghost-white); } 749 | 750 | .blog .section-title { margin-block: 20px 70px; } 751 | 752 | .blog-list { 753 | display: grid; 754 | gap: 40px; 755 | } 756 | 757 | .blog-card .card-banner { 758 | border-radius: var(--radius-20); 759 | overflow: hidden; 760 | margin-block-end: 20px; 761 | } 762 | 763 | .blog-card.large .card-banner { margin-block-end: 40px; } 764 | 765 | .blog-card.large .card-title { 766 | font-size: var(--fs-2); 767 | line-height: 1.2; 768 | margin-block-end: 20px; 769 | } 770 | 771 | .blog-card .card-text { color: var(--cool-gray); } 772 | 773 | .blog-card .card-banner img { transition: var(--transition-2); } 774 | 775 | .blog-card:is(:hover, :focus-within) .card-banner img { transform: scale(1.1); } 776 | 777 | .blog-card .wrapper { 778 | display: flex; 779 | flex-wrap: wrap; 780 | align-items: center; 781 | gap: 30px; 782 | margin-block-end: 20px; 783 | } 784 | 785 | .blog-card .tag { 786 | color: var(--majorelle-blue); 787 | font-size: var(--fs-9); 788 | font-weight: var(--fw-700); 789 | text-transform: uppercase; 790 | transition: var(--transition-1); 791 | } 792 | 793 | .blog-card .tag:is(:hover, :focus) { color: var(--raisin-black-1); } 794 | 795 | .blog-card .publish-date { 796 | display: flex; 797 | align-items: center; 798 | gap: 10px; 799 | color: var(--cool-gray); 800 | font-weight: var(--fw-500); 801 | transition: var(--transition-1); 802 | } 803 | 804 | .blog-card .publish-date ion-icon { 805 | font-size: 18px; 806 | --ionicon-stroke-width: 40px; 807 | } 808 | 809 | .blog-card .publish-date:is(:hover, :focus) { color: var(--raisin-black-1); } 810 | 811 | .blog-card .card-title { 812 | color: var(--raisin-black-1); 813 | font-size: var(--fs-4); 814 | letter-spacing: -1px; 815 | transition: var(--transition-1); 816 | } 817 | 818 | .blog-card .card-title:is(:hover, :focus) { color: var(--majorelle-blue); } 819 | 820 | 821 | 822 | 823 | 824 | /*-----------------------------------*\ 825 | #FOOTER 826 | \*-----------------------------------*/ 827 | 828 | .footer { 829 | background-color: var(--raisin-black-1); 830 | color: var(--cool-gray); 831 | } 832 | 833 | .footer-top { 834 | padding-block-end: 60px; 835 | display: grid; 836 | gap: 50px; 837 | } 838 | 839 | .footer-list-title { 840 | color: var(--white); 841 | font-size: var(--fs-5); 842 | font-weight: var(--fw-500); 843 | margin-block-end: 20px; 844 | } 845 | 846 | .footer-text { margin-block-end: 30px; } 847 | 848 | .footer .social-list { gap: 12px; } 849 | 850 | .footer .social-link { 851 | background-color: var(--onyx); 852 | padding: 14px; 853 | border-radius: 50%; 854 | transition: var(--transition-1); 855 | } 856 | 857 | .footer .social-link:is(:hover, :focus) { 858 | background-color: var(--majorelle-blue); 859 | color: var(--white); 860 | } 861 | 862 | .footer-link { 863 | font-size: var(--fs-8); 864 | margin-block-start: 15px; 865 | transition: var(--transition-1); 866 | } 867 | 868 | .footer-link:is(:hover, :focus) { color: var(--mustard); } 869 | 870 | .insta-post { 871 | display: grid; 872 | grid-template-columns: repeat(3, 1fr); 873 | gap: 15px; 874 | } 875 | 876 | .insta-card { 877 | position: relative; 878 | border-radius: var(--radius-10); 879 | overflow: hidden; 880 | } 881 | 882 | .insta-card .card-content { 883 | position: absolute; 884 | inset: 0; 885 | display: grid; 886 | place-content: center; 887 | background-color: var(--blue-ryb_80); 888 | color: var(--white); 889 | font-size: 25px; 890 | opacity: 0; 891 | transition: var(--transition-1); 892 | } 893 | 894 | .insta-card:is(:hover, :focus-within) .card-content { opacity: 1; } 895 | 896 | .footer-bottom { 897 | color: var(--white); 898 | font-size: var(--fs-8); 899 | padding-block: 40px; 900 | border-block-start: 1px solid var(--onyx); 901 | } 902 | 903 | .copyright { margin-block-end: 15px; } 904 | 905 | .footer-bottom-list { 906 | display: flex; 907 | flex-wrap: wrap; 908 | gap: 5px 15px; 909 | } 910 | 911 | .footer-bottom-link { transition: var(--transition-1); } 912 | 913 | .footer-bottom-link:is(:hover, :focus) { color: var(--mustard); } 914 | 915 | 916 | 917 | 918 | 919 | /*-----------------------------------*\ 920 | #BACK TO TOP 921 | \*-----------------------------------*/ 922 | 923 | .back-top-btn { 924 | position: fixed; 925 | bottom: 20px; 926 | right: 30px; 927 | background-color: var(--majorelle-blue); 928 | color: var(--white); 929 | font-size: 18px; 930 | padding: 16px; 931 | border-radius: var(--radius-8); 932 | z-index: 4; 933 | visibility: hidden; 934 | opacity: 0; 935 | transition: var(--transition-1); 936 | } 937 | 938 | .back-top-btn.active { 939 | visibility: visible; 940 | opacity: 1; 941 | transform: translateY(-10px); 942 | } 943 | 944 | .back-top-btn::after { 945 | bottom: -12px; 946 | right: 0; 947 | width: 100%; 948 | height: 10px; 949 | background-image: var(--gradient); 950 | } 951 | 952 | 953 | 954 | 955 | 956 | /*-----------------------------------*\ 957 | #MEDIA QUERIES 958 | \*-----------------------------------*/ 959 | 960 | /** 961 | * responsive for large than 575px screen 962 | */ 963 | 964 | @media (min-width: 575px) { 965 | 966 | /** 967 | * REUSED STYLE 968 | */ 969 | 970 | .container { 971 | max-width: 540px; 972 | width: 100%; 973 | margin-inline: auto; 974 | } 975 | 976 | 977 | 978 | /** 979 | * HEADER 980 | */ 981 | 982 | .header .container { max-width: unset; } 983 | 984 | 985 | 986 | 987 | /** 988 | * PROJECT 989 | */ 990 | 991 | .project-card .card-content { 992 | max-width: max-content; 993 | width: calc(100% - 40px); 994 | left: 50%; 995 | right: auto; 996 | padding: 50px 80px; 997 | transform: translate(-50%, calc(-50% + 20px)); 998 | } 999 | 1000 | .project-card:is(:hover, :focus-within) .card-content { transform: translate(-50%, -50%); } 1001 | 1002 | .project-card .card-title { margin-block-end: 10px; } 1003 | 1004 | } 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | /** 1011 | * responsive for large than 768px screen 1012 | */ 1013 | 1014 | @media (min-width: 768px) { 1015 | 1016 | /** 1017 | * CUSTOM PROPERTY 1018 | */ 1019 | 1020 | :root { 1021 | 1022 | /** 1023 | * typography 1024 | */ 1025 | 1026 | --fs-1: 5.5rem; 1027 | --fs-2: 3.8rem; 1028 | --fs-7: 1.8rem; 1029 | 1030 | /** 1031 | * spacing 1032 | */ 1033 | 1034 | --section-padding: 120px; 1035 | 1036 | } 1037 | 1038 | 1039 | 1040 | /** 1041 | * REUSED STYLE 1042 | */ 1043 | 1044 | .container { max-width: 720px; } 1045 | 1046 | .btn { height: 60px; } 1047 | 1048 | .grid-list { grid-template-columns: 1fr 1fr; } 1049 | 1050 | 1051 | 1052 | /** 1053 | * HERO 1054 | */ 1055 | 1056 | .hero .container { gap: 120px; } 1057 | 1058 | .hero .wrapper { 1059 | gap: 50px; 1060 | margin-block-end: 60px; 1061 | } 1062 | 1063 | .hero .social-link .span { 1064 | display: block; 1065 | font-size: var(--fs-9); 1066 | color: var(--raisin-black-1); 1067 | font-weight: var(--fw-700); 1068 | text-transform: uppercase; 1069 | letter-spacing: 1px; 1070 | transition: var(--transition-2); 1071 | } 1072 | 1073 | .hero .social-link { 1074 | display: flex; 1075 | align-items: center; 1076 | gap: 15px; 1077 | background: none; 1078 | box-shadow: none; 1079 | } 1080 | 1081 | .hero .social-link:is(:hover, :focus) { 1082 | background: unset; 1083 | color: var(--color); 1084 | } 1085 | 1086 | .hero .social-link:is(:hover, :focus) .span { color: var(--color); } 1087 | 1088 | 1089 | 1090 | /** 1091 | * FEATURE 1092 | */ 1093 | 1094 | .feature-banner { max-width: max-content; } 1095 | 1096 | .feature-list { gap: 30px; } 1097 | 1098 | .feature-card { 1099 | display: flex; 1100 | justify-content: flex-start; 1101 | align-items: flex-start; 1102 | gap: 25px; 1103 | } 1104 | 1105 | .feature-card .card-icon { margin-block-end: 0; } 1106 | 1107 | .feature-card .card-text { max-width: 32ch; } 1108 | 1109 | 1110 | 1111 | /** 1112 | * PROJECT 1113 | */ 1114 | 1115 | .project .grid-list > li:first-child { grid-column: 1 / 3; } 1116 | 1117 | 1118 | 1119 | /** 1120 | * NEWSLETTER 1121 | */ 1122 | 1123 | .newsletter-form { position: relative; } 1124 | 1125 | .email-field { margin-block-end: 0; } 1126 | 1127 | .newsletter-form .btn-secondary { 1128 | position: absolute; 1129 | top: 5px; 1130 | right: 5px; 1131 | bottom: 5px; 1132 | height: auto; 1133 | padding-inline: 25px; 1134 | } 1135 | 1136 | 1137 | 1138 | /** 1139 | * BLOG 1140 | */ 1141 | 1142 | .blog-card:not(.large) { 1143 | display: flex; 1144 | align-items: center; 1145 | gap: 40px; 1146 | } 1147 | 1148 | .blog-card:not(.large) .card-banner { 1149 | margin-block-end: 0; 1150 | flex-shrink: 0; 1151 | } 1152 | 1153 | .blog-card .card-title { --fs-4: 2.6rem; } 1154 | 1155 | 1156 | 1157 | /** 1158 | * FOOTER 1159 | */ 1160 | 1161 | .footer-top { grid-template-columns: 1fr 1fr; } 1162 | 1163 | .copyright { text-align: center; } 1164 | 1165 | .footer-bottom-list { justify-content: center; } 1166 | 1167 | } 1168 | 1169 | 1170 | 1171 | 1172 | 1173 | /** 1174 | * responsive for large than 992px screen 1175 | */ 1176 | 1177 | @media (min-width: 992px) { 1178 | 1179 | /** 1180 | * REUSED STYLE 1181 | */ 1182 | 1183 | .container { max-width: 960px; } 1184 | 1185 | .btn { height: 70px; } 1186 | 1187 | .grid-list { grid-template-columns: repeat(3, 1fr); } 1188 | 1189 | 1190 | 1191 | /** 1192 | * HEADER 1193 | */ 1194 | 1195 | .header { padding-block-start: 47px; } 1196 | 1197 | .nav-open-btn, 1198 | .overlay, 1199 | .navbar .wrapper { display: none; } 1200 | 1201 | .navbar, 1202 | .navbar.active { all: unset; } 1203 | 1204 | .navbar-item:not(:last-child) { border: none; } 1205 | 1206 | .navbar-list { 1207 | display: flex; 1208 | gap: 30px; 1209 | } 1210 | 1211 | .navbar-link { 1212 | position: relative; 1213 | color: var(--cool-gray); 1214 | text-transform: capitalize; 1215 | font-size: unset; 1216 | font-weight: var(--fw-500); 1217 | } 1218 | 1219 | .navbar-link:is(:hover, :focus) { color: var(--raisin-black-1); } 1220 | 1221 | .navbar-link::before { 1222 | content: ""; 1223 | position: absolute; 1224 | bottom: 5px; 1225 | left: 0; 1226 | width: 0; 1227 | height: 4px; 1228 | border-radius: 5px; 1229 | background-color: var(--majorelle-blue); 1230 | transition: var(--transition-1); 1231 | } 1232 | 1233 | .navbar-link:is(:hover, :focus)::before { width: 100%; } 1234 | 1235 | .header .btn { display: inline-flex; } 1236 | 1237 | .header .btn::before, 1238 | .header .btn::after { background-color: var(--raisin-black-1); } 1239 | 1240 | .header .btn:is(:hover, :focus) { color: var(--white); } 1241 | 1242 | 1243 | 1244 | /** 1245 | * HERO 1246 | */ 1247 | 1248 | .hero { 1249 | background-image: linear-gradient(to right, var(--white) 79%, var(--mustard) 79%); 1250 | overflow: hidden; 1251 | } 1252 | 1253 | .hero .container { 1254 | grid-template-columns: 1fr 1fr; 1255 | gap: 40px; 1256 | } 1257 | 1258 | .hero .wrapper { flex-wrap: nowrap; } 1259 | 1260 | .hero .btn, 1261 | .hero-btn .span { flex-shrink: 0; } 1262 | 1263 | .hero-banner { margin-inline-end: -140px; } 1264 | 1265 | 1266 | 1267 | /** 1268 | * FEATURE 1269 | */ 1270 | 1271 | .feature .container { 1272 | grid-template-columns: 1fr 1fr; 1273 | gap: 30px; 1274 | } 1275 | 1276 | 1277 | 1278 | /** 1279 | * PROJECT 1280 | */ 1281 | 1282 | .filter-btn { 1283 | --fs-9: 1.8rem; 1284 | padding: 20px 25px; 1285 | } 1286 | 1287 | 1288 | 1289 | /** 1290 | * NEWSLETTER 1291 | */ 1292 | 1293 | .newsletter .container { 1294 | grid-template-columns: 1fr 0.8fr; 1295 | align-items: center; 1296 | } 1297 | 1298 | .newsletter-banner { 1299 | order: 1; 1300 | margin-inline-start: auto; 1301 | } 1302 | 1303 | .email-field { 1304 | min-height: 80px; 1305 | padding-inline: 40px; 1306 | } 1307 | 1308 | .newsletter-form .btn-secondary { 1309 | top: 10px; 1310 | right: 10px; 1311 | bottom: 10px; 1312 | } 1313 | 1314 | 1315 | 1316 | /** 1317 | * BLOG 1318 | */ 1319 | 1320 | .blog-list { 1321 | grid-template-columns: 1fr 1fr; 1322 | gap: 40px 70px; 1323 | } 1324 | 1325 | .blog-list > li:first-child { grid-row: 1 / 4; } 1326 | 1327 | .blog-card:not(.large) .wrapper { 1328 | gap: 10px; 1329 | flex-wrap: nowrap; 1330 | margin-block-end: 10px; 1331 | } 1332 | 1333 | .blog-card:not(.large) .publish-date { 1334 | flex-shrink: 0; 1335 | font-size: var(--fs-9); 1336 | gap: 5px; 1337 | } 1338 | 1339 | .blog-card .card-title { --fs-4: 1.8rem; } 1340 | 1341 | 1342 | 1343 | /** 1344 | * FOOTER 1345 | */ 1346 | 1347 | .footer-top { 1348 | grid-template-columns: 1fr 0.5fr 0.5fr 0.9fr; 1349 | padding-block: 120px; 1350 | } 1351 | 1352 | .footer-bottom { 1353 | display: flex; 1354 | justify-content: space-between; 1355 | align-items: center; 1356 | } 1357 | 1358 | .copyright { margin-block-end: 0; } 1359 | 1360 | } 1361 | 1362 | 1363 | 1364 | 1365 | 1366 | /** 1367 | * responsive for large than 1200px screen 1368 | */ 1369 | 1370 | @media (min-width: 1200px) { 1371 | 1372 | /** 1373 | * CUSTOM PROPERTY 1374 | */ 1375 | 1376 | :root { 1377 | 1378 | /** 1379 | * typography 1380 | */ 1381 | 1382 | --fs-1: 5.5rem; 1383 | --fs-2: 4.5rem; 1384 | 1385 | } 1386 | 1387 | 1388 | 1389 | /** 1390 | * REUSED STYLE 1391 | */ 1392 | 1393 | .container { max-width: 1140px; } 1394 | 1395 | .section-title.text-center { 1396 | max-width: 20ch; 1397 | margin-inline: auto; 1398 | } 1399 | 1400 | 1401 | 1402 | /** 1403 | * HEADER 1404 | */ 1405 | 1406 | .header .container { padding-inline: 30px; } 1407 | 1408 | .navbar-list { gap: 50px; } 1409 | 1410 | 1411 | 1412 | /** 1413 | * HERO 1414 | */ 1415 | 1416 | .hero-content { 1417 | display: flex; 1418 | flex-direction: column; 1419 | margin-block-start: 50px; 1420 | } 1421 | 1422 | .hero-text { margin-block: 40px 45px; } 1423 | 1424 | .hero .wrapper { margin-block-end: auto; } 1425 | 1426 | .hero-banner { 1427 | margin-inline-end: -250px; 1428 | min-width: max-content; 1429 | } 1430 | 1431 | 1432 | 1433 | /** 1434 | * SERVICE 1435 | */ 1436 | 1437 | .service .grid-list { grid-template-columns: repeat(4, 1fr); } 1438 | 1439 | .service-card .h3 { --fs-3: 2rem; } 1440 | 1441 | 1442 | 1443 | /** 1444 | * PROJECT 1445 | */ 1446 | 1447 | .filter-btn { padding-inline: 40px; } 1448 | 1449 | 1450 | 1451 | /** 1452 | * BLOG 1453 | */ 1454 | 1455 | .blog-list { column-gap: 35px; } 1456 | 1457 | .blog-card.large { 1458 | padding-inline-end: 35px; 1459 | border-inline-end: 1px solid var(--gainsboro); 1460 | } 1461 | 1462 | .blog-card:not(.large) .publish-date { --fs-9: 1.6rem; } 1463 | 1464 | .blog-card:not(.large) .wrapper { 1465 | gap: 25px; 1466 | margin-block-end: 20px; 1467 | } 1468 | 1469 | .blog-card .card-title { --fs-4: 2.4rem; } 1470 | 1471 | } -------------------------------------------------------------------------------- /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/blog-3.png -------------------------------------------------------------------------------- /assets/images/blog-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/blog-4.png -------------------------------------------------------------------------------- /assets/images/feature-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/feature-banner.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/insta-post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-1.jpg -------------------------------------------------------------------------------- /assets/images/insta-post-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-2.jpg -------------------------------------------------------------------------------- /assets/images/insta-post-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-3.jpg -------------------------------------------------------------------------------- /assets/images/insta-post-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-4.jpg -------------------------------------------------------------------------------- /assets/images/insta-post-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-5.jpg -------------------------------------------------------------------------------- /assets/images/insta-post-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/insta-post-6.jpg -------------------------------------------------------------------------------- /assets/images/newsletter-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/newsletter-banner.png -------------------------------------------------------------------------------- /assets/images/newsletter-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/newsletter-bg.jpg -------------------------------------------------------------------------------- /assets/images/project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/project-1.jpg -------------------------------------------------------------------------------- /assets/images/project-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/project-2.jpg -------------------------------------------------------------------------------- /assets/images/project-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/project-3.jpg -------------------------------------------------------------------------------- /assets/images/project-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/project-4.jpg -------------------------------------------------------------------------------- /assets/images/project-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/project-5.jpg -------------------------------------------------------------------------------- /assets/images/service-icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-1.png -------------------------------------------------------------------------------- /assets/images/service-icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-2.png -------------------------------------------------------------------------------- /assets/images/service-icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-3.png -------------------------------------------------------------------------------- /assets/images/service-icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-4.png -------------------------------------------------------------------------------- /assets/images/service-icon-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-5.png -------------------------------------------------------------------------------- /assets/images/service-icon-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-6.png -------------------------------------------------------------------------------- /assets/images/service-icon-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/assets/images/service-icon-7.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add Event on elements 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 navTogglers = document.querySelectorAll("[data-nav-toggler]"); 27 | const navbarLinks = document.querySelectorAll("[data-nav-link]"); 28 | const overlay = document.querySelector("[data-overlay]"); 29 | 30 | const toggleNavbar = function () { 31 | navbar.classList.toggle("active"); 32 | overlay.classList.toggle("active"); 33 | } 34 | 35 | addEventOnElem(navTogglers, "click", toggleNavbar); 36 | 37 | const closeNavbar = function () { 38 | navbar.classList.remove("active"); 39 | overlay.classList.remove("active"); 40 | } 41 | 42 | addEventOnElem(navbarLinks, "click", closeNavbar); 43 | 44 | 45 | 46 | /** 47 | * header & back top btn show when scroll down to 100px 48 | */ 49 | 50 | const header = document.querySelector("[data-header]"); 51 | const backTopBtn = document.querySelector("[data-back-top-btn]"); 52 | 53 | const headerActive = function () { 54 | if (window.scrollY > 80) { 55 | header.classList.add("active"); 56 | backTopBtn.classList.add("active"); 57 | } else { 58 | header.classList.remove("active"); 59 | backTopBtn.classList.remove("active"); 60 | } 61 | } 62 | 63 | addEventOnElem(window, "scroll", headerActive); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pixology - Building Digital Product 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 39 | 40 |
41 |
42 | 43 | 44 | 45 | 80 | 81 | 84 | 85 | Let’s Talk 👋 86 | 87 |
88 | 89 |
90 |
91 | 92 | 93 | 94 | 95 | 96 |
97 |
98 | 99 | 102 | 103 |
104 |
105 | 106 |
107 | 108 |

109 | Building Digital Product, Brand and Experience 110 |

111 | 112 |

113 | At Pixology we specialize in designing, building, shipping and scaling beautiful, usable products with 114 | blazing-fast 115 | efficiency 116 |

117 | 118 |
119 | How It Works 120 | 121 | 126 |
127 | 128 | 155 | 156 |
157 | 158 |
159 | hero banner 160 |
161 | 162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 172 | 173 |
174 |
175 | 176 |

Our Services

177 | 178 |

Managing you business with our best 179 | service

180 | 181 | 297 | 298 |
299 |
300 | 301 | 302 | 303 | 304 | 305 | 308 | 309 |
310 |
311 | 312 |
313 | feature banner 315 |
316 | 317 |
318 | 319 |

Why Choose us

320 | 321 |

322 | Specialist in aviding clients of financial challenges 323 |

324 | 325 |
    326 | 327 |
  • 328 |
    329 | 330 |
    331 | 332 |
    333 | 334 |
    335 |

    Fast working process

    336 | 337 |

    338 | At Pixology we specialize in designing, building, shipping and scaling beautifu. 339 |

    340 |
    341 | 342 |
    343 |
    • 344 | 345 |
  • 346 |
    347 | 348 |
    349 | 350 |
    351 | 352 |
    353 |

    Didicated team

    354 | 355 |

    356 | At Pixology we specialize in designing, building, shipping and scaling beautifu. 357 |

    358 |
    359 | 360 |
    361 |
    • 362 | 363 |
  • 364 |
    365 | 366 |
    367 | 368 |
    369 | 370 |
    371 |

    24/7 hours support

    372 | 373 |

    374 | At Pixology we specialize in designing, building, shipping and scaling beautifu. 375 |

    376 |
    377 | 378 |
    379 |
    • 380 | 381 |
382 | 383 |
384 | 385 |
386 |
387 | 388 | 389 | 390 | 391 | 392 | 395 | 396 |
397 |
398 | 399 |

Projects

400 | 401 |

402 | Pixology complete project 403 |

404 | 405 |
    406 | 407 |
  • 408 | 409 |
    • 410 | 411 |
  • 412 | 413 |
    • 414 | 415 |
  • 416 | 417 |
    • 418 | 419 |
  • 420 | 421 |
    • 422 | 423 |
  • 424 | 425 |
    • 426 | 427 |
428 | 429 |
    430 | 431 |
  • 432 |
    433 | 434 |
    435 | Book art design 437 |
    438 | 439 |
    440 |

    441 | Book art design 442 |

    443 | 444 | Branding 445 |
    446 | 447 |
    448 |
    • 449 | 450 |
  • 451 |
    452 | 453 |
    454 | Graphic Design 456 |
    457 | 458 |
    459 |

    460 | Graphic Design 461 |

    462 | 463 | Design 464 |
    465 | 466 |
    467 |
    • 468 | 469 |
  • 470 |
    471 | 472 |
    473 | 3d Digital Art 475 |
    476 | 477 |
    478 |

    479 | 3d Digital Art 480 |

    481 | 482 | Design 483 |
    484 | 485 |
    486 |
    • 487 | 488 |
  • 489 |
    490 | 491 |
    492 | Web Design 494 |
    495 | 496 |
    497 |

    498 | Web Design 499 |

    500 | 501 | Design 502 |
    503 | 504 |
    505 |
    • 506 | 507 |
  • 508 |
    509 | 510 |
    511 | Mobile App Design 513 |
    514 | 515 |
    516 |

    517 | Mobile App Design 518 |

    519 | 520 | Design 521 |
    522 | 523 |
    524 |
    • 525 | 526 |
527 | 528 |
529 |
530 | 531 | 532 | 533 | 534 | 535 | 538 | 539 | 568 | 569 | 570 | 571 | 572 | 573 | 576 | 577 |
578 |
579 | 580 |

Blog Post

581 | 582 |

583 | Popular blog post 584 |

585 | 586 | 711 | 712 |
713 |
714 | 715 |
716 |
717 | 718 | 719 | 720 | 721 | 722 | 725 | 726 | 957 | 958 | 959 | 960 | 961 | 962 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 977 | 978 | 979 | 982 | 983 | 984 | 985 | 986 | 987 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Pixology - Building Digital Product 2 | 3 | 4 | 5 | #---------- HEADER ----------# 6 | 7 | Pixology 8 | 9 | aria-label="close menu" 10 | 11 | 12 | 13 | Home 14 | Services 15 | Features 16 | Portfolio 17 | Blog 18 | 19 | aria-label="open menu" 20 | 21 | 22 | 23 | Let’s Talk 👋 24 | 25 | 26 | 27 | #---------- HERO ----------# 28 | 29 | Building Digital Product, Brand and Experience 30 | 31 | At Pixology we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency 32 | 33 | How It Works 34 | 35 | aria-label="pixology promo" 36 | 37 | Behind the scenes 38 | 39 | --color: hsl(241, 77%, 63%) 40 | 41 | Facebook 42 | 43 | --color: hsl(0, 100%, 50%) 44 | 45 | Youtube 46 | 47 | --color: hsl(203, 89%, 53%) 48 | 49 | Twitter 50 | 51 | alt = hero banner 52 | 53 | 54 | 55 | #---------- SERVICE ----------# 56 | 57 | Our Services 58 | 59 | Managing you business with our best service 60 | 61 | --color: 174, 77%, 50% 62 | 63 | alt = service icon 64 | Product Management 65 | 66 | --color: 267, 76%, 57% 67 | Web & Mobile Development 68 | 69 | --color: 17, 100%, 68% 70 | Fast Customer Support 71 | 72 | --color: 343, 98%, 60% 73 | Human Resources 74 | 75 | --color: 210, 100%, 53% 76 | Design and Vreatives 77 | 78 | --color: 157, 89%, 44% 79 | Meketing and Communication 80 | 81 | --color: 52, 98%, 50% 82 | Business Development 83 | 84 | --color: 203, 97%, 75% 85 | 04 More Service 86 | 87 | 88 | 89 | 90 | 91 | #---------- FEATURE ----------# 92 | 93 | alt = feature banner 94 | 95 | Why Choose us 96 | 97 | Specialist in aviding clients of financial challenges 98 | 99 | --color: 174, 77%, 50% 100 | 101 | 102 | Fast working process 103 | 104 | At Pixology we specialize in designing, building, shipping and scaling beautifu. 105 | 106 | --color: 241, 77%, 63%; 107 | 108 | 109 | Didicated team 110 | 111 | --color: 343, 98%, 60%; 112 | 113 | 114 | 24/7 hours support 115 | 116 | 117 | 118 | #---------- PROJECT ----------# 119 | 120 | Projects 121 | 122 | Pixology complete project 123 | 124 | Website 125 | Landing Page 126 | iOS App 127 | Landing Page 128 | Branding Design 129 | 130 | alt = Book art design 131 | 132 | Book art design 133 | Branding 134 | 135 | alt = Graphic Design 136 | 137 | Graphic Design 138 | Design 139 | 140 | alt = 3d Digital Art 141 | 142 | 3d Digital Art 143 | 144 | alt = Web Design 145 | 146 | Web Design 147 | 148 | alt = Mobile App Design 149 | 150 | Mobile App Design 151 | 152 | 153 | 154 | #---------- NEWSLETTER ----------# 155 | 156 | alt = newsletter banner 157 | 158 | Get every update 159 | 160 | Subscribe newslater get latest updates and deals 161 | 162 | placeholder = Enter your mail 163 | 164 | Subscribe 165 | 166 | 167 | 168 | 169 | 170 | #---------- BLOG ----------# 171 | 172 | Blog Post 173 | 174 | Popular blog post 175 | 176 | alt = Godaddy user flow solution... 177 | 178 | Development 179 | 180 | 181 | July 22, 2022 182 | 183 | Godaddy user flow solution... 184 | 185 | At Pixology we specialize in designing, building, shipping and scaling beautifu. At Pixology we specialize in designing, building, shipping and scaling beautiful. 186 | 187 | alt = Godaddy user flow solution for every individual 188 | 189 | July 21, 2020 190 | 191 | Godaddy user flow solution for every individual 192 | 193 | Business solution for every individual 194 | 195 | How to gain pro experience ar figma update version 196 | 197 | 198 | 199 | #---------- FOOTER ----------# 200 | 201 | About Pixology 202 | 203 | A new way to make the payments easy, reliable and 100% secure. claritatem itamconse quat. Exerci tationulla 204 | 205 | 206 | 207 | 208 | 209 | 210 | Usefull Links 211 | 212 | Contact us 213 | How it Works 214 | Create 215 | Explore 216 | Terms & Services 217 | 218 | Community 219 | 220 | Help Center 221 | Partners 222 | Suggestions 223 | Blog 224 | Newsletters 225 | 226 | Instagram post 227 | 228 | alt = instagram post 229 | 230 | 231 | 232 | © 2022 Pixology. All Rights Reserved by codewithsadee 233 | 234 | Terms and conditions 235 | Privacy policy 236 | Login / Signup 237 | 238 | 239 | 240 | #---------- BACK TO TOP ----------# 241 | 242 | aria-label="back to top" 243 | 244 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pixology/8fa11d8bc63f3013f21a236c60b77c9a5fb7c231/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 11 | ``` 12 | 13 | Ionicon 14 | 15 | ``` html 16 | 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## Colors 23 | 24 | ``` css 25 | --sky-blue-crayola: hsl(188, 64%, 60%); 26 | --raisin-black_90: hsla(240, 8%, 12%, 0.9); 27 | --raisin-black-1: hsl(240, 8%, 17%); 28 | --raisin-black-2: hsl(240, 8%, 12%); 29 | --majorelle-blue: hsl(241, 77%, 63%); 30 | --blue-ryb_80: hsla(241, 88%, 60%, 0.8); 31 | --bittersweet: hsl(0, 100%, 69%); 32 | --eerie-black: hsl(0, 0%, 13%); 33 | --ghost-white: hsl(230, 60%, 98%); 34 | --light-gray: hsl(0, 0%, 80%); 35 | --slate-gray: hsl(225, 8%, 48%); 36 | --cool-gray: hsl(225, 11%, 59%); 37 | --gainsboro: hsl(217, 16%, 90%); 38 | --mustard: hsl(47, 100%, 69%); 39 | --white: hsl(0, 0%, 100%); 40 | --black: hsl(0, 0%, 0%); 41 | --onyx: hsl(240, 5%, 26%); 42 | --jet: hsl(0, 0%, 21%); 43 | ``` 44 | 45 | ## Gradient color 46 | 47 | ``` css 48 | --gradient: radial-gradient(ellipse at center, hsla(0, 0%, 0%, 0.25), transparent 80%); 49 | ``` 50 | 51 | ## Typography 52 | 53 | ``` css 54 | --ff-dm-sans: 'DM Sans', sans-serif; 55 | 56 | --fs-1: 4rem; 57 | --fs-2: 3.5rem; 58 | --fs-3: 2.4rem; 59 | --fs-4: 2.2rem; 60 | --fs-5: 2rem; 61 | --fs-6: 1.8rem; 62 | --fs-7: 1.7rem; 63 | --fs-8: 1.5rem; 64 | --fs-9: 1.4rem; 65 | 66 | --fw-500: 500; 67 | --fw-700: 700; 68 | ``` 69 | 70 | ## Spacing 71 | 72 | ``` css 73 | --section-padding: 100px; 74 | ``` 75 | 76 | ## Shadow 77 | 78 | ``` css 79 | --shadow-1: 0px 2px 50px hsla(223, 40%, 76%, 0.3); 80 | --shadow-2: 0px -2px 12px hsl(252, 29%, 93%); 81 | --shadow-3: 0px 4px 4px hsla(231, 20%, 49%, 0.06); 82 | --shadow-4: 0px 15px 30px hsla(210, 30%, 32%, 0.05); 83 | --shadow-5: 0px 15px hsla(241, 62%, 34%, 0.04); 84 | ``` 85 | 86 | ## Border Radius 87 | 88 | ``` css 89 | --radius-8: 8px; 90 | --radius-10: 10px; 91 | --radius-15: 15px; 92 | --radius-20: 20px; 93 | ``` 94 | 95 | ## Transition 96 | 97 | ``` css 98 | --transition-1: 0.25s ease; 99 | --transition-2: 0.5s ease; 100 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 101 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 102 | ``` 103 | --------------------------------------------------------------------------------