├── css └── style.css ├── images ├── about.png ├── home.png ├── portfolio1.jpg ├── portfolio2.jpg ├── portfolio3.jpg ├── portfolio4.jpg ├── portfolio5.jpg ├── portfolio6.jpg ├── testimonial1.jpg ├── testimonial2.jpg └── testimonial3.jpg ├── index.html └── js └── script.js /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | border: none; 9 | outline: none; 10 | scroll-behavior: smooth; 11 | font-family: 'Poppins', sans-serif; 12 | } 13 | 14 | :root { 15 | --bg-color: #fdfdfd; 16 | --text-color: #333; 17 | --main-color: #754ef9; 18 | --white-color: #fdfdfd; 19 | --shadow-color: rgba(0, 0, 0, .2); 20 | } 21 | 22 | *::selection { 23 | background: var(--main-color); 24 | color: var(--bg-color); 25 | } 26 | 27 | .dark-mode { 28 | --bg-color: #0b061f; 29 | --text-color: #fdfdfd; 30 | --shadow-color: rgba(0, 0, 0, .7); 31 | } 32 | 33 | html { 34 | font-size: 62.5%; 35 | overflow-x: hidden; 36 | } 37 | 38 | body { 39 | background: var(--bg-color); 40 | color: var(--text-color); 41 | } 42 | 43 | .header { 44 | position: fixed; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | padding: 2rem 7%; 49 | background: transparent; 50 | display: flex; 51 | align-items: center; 52 | z-index: 100; 53 | transition: .5s; 54 | } 55 | 56 | .header.sticky { 57 | background: var(--bg-color); 58 | box-shadow: 0 .1rem 1rem var(--shadow-color); 59 | } 60 | 61 | .logo { 62 | font-size: 2.5rem; 63 | color: var(--main-color); 64 | font-weight: 600; 65 | margin-right: auto; 66 | } 67 | 68 | .navbar a { 69 | position: relative; 70 | font-size: 1.7rem; 71 | color: var(--white-color); 72 | font-weight: 500; 73 | margin-right: 3.5rem; 74 | } 75 | 76 | .header.sticky .navbar a { 77 | color: var(--text-color); 78 | } 79 | 80 | .header.sticky .navbar a.active { 81 | color: var(--main-color); 82 | } 83 | 84 | .navbar a.active::before { 85 | content: ''; 86 | position: absolute; 87 | left: 0; 88 | bottom: -6px; 89 | width: 100%; 90 | height: .2rem; 91 | background: var(--white-color); 92 | } 93 | 94 | .header.sticky .navbar a::before { 95 | background: var(--main-color); 96 | opacity: .7; 97 | } 98 | 99 | #darkMode-icon { 100 | font-size: 2.4rem; 101 | color: var(--white-color); 102 | cursor: pointer; 103 | } 104 | 105 | .header.sticky #darkMode-icon { 106 | color: var(--text-color); 107 | opacity: .9; 108 | } 109 | 110 | #menu-icon { 111 | font-size: 3.6rem; 112 | color: var(--text-color); 113 | display: none; 114 | } 115 | 116 | section { 117 | min-height: 100vh; 118 | padding: 10rem 7% 2rem; 119 | } 120 | 121 | .home { 122 | display: flex; 123 | align-items: center; 124 | } 125 | 126 | .home .home-content { 127 | max-width: 44rem; 128 | } 129 | 130 | .home-content h3 { 131 | font-size: 3.2rem; 132 | font-weight: 700; 133 | line-height: .3; 134 | } 135 | 136 | .home-content h1 { 137 | font-size: 5.6rem; 138 | font-weight: 700; 139 | margin-bottom: .3rem; 140 | } 141 | 142 | .home-content p { 143 | font-size: 1.6rem; 144 | } 145 | 146 | .home-content .social-media a { 147 | display: inline-flex; 148 | justify-content: center; 149 | align-items: center; 150 | width: 4rem; 151 | height: 4rem; 152 | background: transparent; 153 | border: .2rem solid var(--main-color); 154 | border-radius: 50%; 155 | box-shadow: 0 .2rem .5rem var(--shadow-color); 156 | font-size: 2rem; 157 | color: var(--main-color); 158 | margin: 2.5rem 1.5rem 3rem 0; 159 | transition: .5s ease; 160 | } 161 | 162 | .home-content .social-media a:hover { 163 | background: var(--main-color); 164 | color: var(--white-color); 165 | } 166 | 167 | .btn { 168 | display: inline-block; 169 | padding: 1.2rem 2.8rem; 170 | background: var(--main-color); 171 | border-radius: .6rem; 172 | box-shadow: 0 .2rem .5rem var(--shadow-color); 173 | font-size: 1.6rem; 174 | color: var(--white-color); 175 | letter-spacing: .1rem; 176 | font-weight: 600; 177 | border: .2rem solid transparent; 178 | transition: .5s ease; 179 | } 180 | 181 | .btn:hover { 182 | background: transparent; 183 | color: var(--main-color); 184 | border-color: var(--main-color); 185 | } 186 | 187 | .home .profession-container { 188 | position: absolute; 189 | top: 50%; 190 | right: 0; 191 | transform: translateY(-50%); 192 | width: 100vw; 193 | height: 100vh; 194 | overflow: hidden; 195 | pointer-events: none; 196 | } 197 | 198 | .home .profession-container .profession-box { 199 | position: absolute; 200 | top: 0; 201 | right: 0; 202 | width: 768px; 203 | height: 100vh; 204 | display: flex; 205 | justify-content: center; 206 | align-items: center; 207 | animation: professionRotate 13s ease-out infinite; 208 | } 209 | 210 | @keyframes professionRotate { 211 | 212 | 0%, 213 | 20% { 214 | transform: rotate(0deg); 215 | } 216 | 217 | 25%, 218 | 45% { 219 | transform: rotate(-90deg); 220 | } 221 | 222 | 50%, 223 | 70% { 224 | transform: rotate(-180deg); 225 | } 226 | 227 | 75%, 228 | 95% { 229 | transform: rotate(-270deg); 230 | } 231 | 232 | 100% { 233 | transform: rotate(-360deg); 234 | } 235 | } 236 | 237 | .home .profession-box .profession { 238 | position: absolute; 239 | left: 0; 240 | display: flex; 241 | align-items: center; 242 | flex-direction: column; 243 | color: var(--main-color); 244 | transform: rotate(calc(360deg / 4 * var(--i))); 245 | transform-origin: 384px; 246 | background: var(--bg-color); 247 | padding: 13px 0; 248 | } 249 | 250 | .home .profession-box .profession:nth-child(1) i { 251 | margin-right: 15px; 252 | } 253 | 254 | .home .profession-box .profession:nth-child(2), 255 | .home .profession-box .profession:nth-child(4) { 256 | padding-bottom: 20px; 257 | } 258 | 259 | .home .profession i { 260 | font-size: 3.8rem; 261 | } 262 | 263 | .home .profession h3 { 264 | font-size: 3.2rem; 265 | line-height: 1; 266 | font-weight: 600; 267 | } 268 | 269 | .home .profession-box .circle { 270 | width: 560px; 271 | height: 560px; 272 | border: 3px solid var(--main-color); 273 | border-radius: 50%; 274 | z-index: -1; 275 | } 276 | 277 | .home .profession-container .overlay { 278 | position: absolute; 279 | top: 0; 280 | right: 0; 281 | width: 0; 282 | height: 0; 283 | border-top: 50vh solid var(--main-color); 284 | border-right: 384px solid var(--main-color); 285 | border-bottom: 50vh solid var(--main-color); 286 | border-left: 384px solid transparent; 287 | } 288 | 289 | .home-img img { 290 | position: absolute; 291 | bottom: 0; 292 | right: 40px; 293 | pointer-events: none; 294 | max-width: 480px; 295 | max-height: 100vh; 296 | } 297 | 298 | span { 299 | color: var(--main-color); 300 | } 301 | 302 | .about { 303 | display: flex; 304 | justify-content: center; 305 | align-items: center; 306 | gap: 4rem; 307 | } 308 | 309 | .about-img img { 310 | width: 40vw; 311 | } 312 | 313 | .heading { 314 | font-size: 4.5rem; 315 | text-align: center; 316 | } 317 | 318 | .about-content h2 { 319 | text-align: left; 320 | line-height: 1.2; 321 | } 322 | 323 | .about-content h3 { 324 | font-size: 2rem; 325 | } 326 | 327 | .about-content p { 328 | font-size: 1.6rem; 329 | margin: 2rem 0 3rem; 330 | } 331 | 332 | .services { 333 | min-height: auto; 334 | padding-bottom: 10rem; 335 | } 336 | 337 | .services h2 { 338 | margin-bottom: 5rem; 339 | } 340 | 341 | .services .services-container { 342 | display: flex; 343 | justify-content: center; 344 | align-items: center; 345 | flex-wrap: wrap; 346 | gap: 2rem; 347 | } 348 | 349 | .services-container .services-box { 350 | flex: 1 1 30rem; 351 | background: var(--bg-color); 352 | padding: 3rem 2rem 4rem; 353 | border-radius: 2rem; 354 | box-shadow: 0 .1rem .5rem var(--shadow-color); 355 | text-align: center; 356 | border-top: .6rem solid var(--main-color); 357 | border-bottom: .6rem solid var(--main-color); 358 | transition: .5s ease; 359 | } 360 | 361 | .services-container .services-box:hover { 362 | box-shadow: 0 .1rem 2rem var(--shadow-color); 363 | transform: scale(1.02); 364 | } 365 | 366 | .services-box i { 367 | font-size: 7rem; 368 | color: var(--main-color); 369 | } 370 | 371 | .services-box h3 { 372 | font-size: 2.6rem; 373 | transition: .5s ease; 374 | } 375 | 376 | .services-box:hover h3 { 377 | color: var(--main-color); 378 | } 379 | 380 | .services-box p { 381 | font-size: 1.6rem; 382 | margin: 1rem 0 3rem; 383 | } 384 | 385 | .portfolio { 386 | min-height: auto; 387 | padding-bottom: 10rem; 388 | } 389 | 390 | .portfolio h2 { 391 | margin-bottom: 4rem; 392 | } 393 | 394 | .portfolio .portfolio-container { 395 | display: grid; 396 | grid-template-columns: repeat(3, 1fr); 397 | align-items: center; 398 | gap: 2.5rem; 399 | } 400 | 401 | .portfolio-container .portfolio-box { 402 | position: relative; 403 | display: flex; 404 | border-radius: 2rem; 405 | box-shadow: 0 0 1rem rgba(0, 0, 0, .1); 406 | overflow: hidden; 407 | } 408 | 409 | .portfolio-box img { 410 | width: 100%; 411 | transition: .5s ease; 412 | } 413 | 414 | .portfolio-box:hover img { 415 | transform: scale(1.1); 416 | } 417 | 418 | .portfolio-box .portfolio-layer { 419 | position: absolute; 420 | bottom: 0; 421 | left: 0; 422 | width: 100%; 423 | height: 100%; 424 | background: linear-gradient(rgba(0, 0, 0, .1), var(--main-color)); 425 | color: var(--white-color); 426 | display: flex; 427 | justify-content: center; 428 | align-items: center; 429 | flex-direction: column; 430 | text-align: center; 431 | padding: 0 4rem; 432 | opacity: 0; 433 | transition: .5s ease; 434 | } 435 | 436 | .portfolio-box:hover .portfolio-layer { 437 | opacity: 1; 438 | } 439 | 440 | .portfolio-layer h4 { 441 | font-size: 3rem; 442 | } 443 | 444 | .portfolio-layer p { 445 | font-size: 1.6rem; 446 | margin: .3rem 0 1rem; 447 | } 448 | 449 | .portfolio-layer a { 450 | display: inline-flex; 451 | justify-content: center; 452 | align-items: center; 453 | width: 5rem; 454 | height: 5rem; 455 | background: var(--white-color); 456 | border-radius: 50%; 457 | } 458 | 459 | .portfolio-layer a i { 460 | font-size: 2rem; 461 | color: #333; 462 | } 463 | 464 | .testimonial-container { 465 | display: flex; 466 | align-items: center; 467 | flex-direction: column; 468 | width: 100%; 469 | padding: 5rem 1rem; 470 | } 471 | 472 | .testimonial-container .testimonial-wrapper { 473 | position: relative; 474 | max-width: 90rem; 475 | width: 100%; 476 | padding: 5rem; 477 | } 478 | 479 | .testimonial-wrapper .testimonial-box { 480 | padding: 1rem; 481 | border-radius: 2rem; 482 | overflow: hidden; 483 | } 484 | 485 | .testimonial-content .testimonial-slide { 486 | display: flex; 487 | align-items: center; 488 | flex-direction: column; 489 | background: var(--bg-color); 490 | border-radius: 2rem; 491 | box-shadow: 0 .1rem .5rem var(--shadow-color); 492 | padding: 3rem 5rem; 493 | border-top: .8rem solid var(--main-color); 494 | border-bottom: .8rem solid var(--main-color); 495 | } 496 | 497 | .testimonial-slide img { 498 | width: 14rem; 499 | height: 14rem; 500 | object-fit: cover; 501 | border-radius: 50%; 502 | border: .5rem solid var(--bg-color); 503 | outline: .5rem solid var(--main-color); 504 | } 505 | 506 | .testimonial-slide h3 { 507 | font-size: 2.5rem; 508 | margin: 2rem 0; 509 | } 510 | 511 | .testimonial-slide p { 512 | font-size: 1.4rem; 513 | text-align: center; 514 | } 515 | 516 | .testimonial-box .swiper-button-next, 517 | .testimonial-box .swiper-button-prev { 518 | color: var(--main-color); 519 | } 520 | 521 | .testimonial-box .swiper-button-next { 522 | right: 0; 523 | } 524 | 525 | .testimonial-box .swiper-button-prev { 526 | left: 0; 527 | } 528 | 529 | .testimonial-box .swiper-pagination-bullet { 530 | background: rgba(0, 0, 0, .8); 531 | } 532 | 533 | .testimonial-box .swiper-pagination-bullet-active { 534 | background: var(--main-color); 535 | } 536 | 537 | .contact { 538 | min-height: auto; 539 | padding-bottom: 7rem; 540 | } 541 | 542 | .contact h2 { 543 | margin-bottom: 3rem; 544 | } 545 | 546 | .contact form { 547 | max-width: 70rem; 548 | margin: 1rem auto; 549 | text-align: center; 550 | margin-bottom: 3rem; 551 | } 552 | 553 | .contact form .input-box { 554 | display: flex; 555 | justify-content: space-between; 556 | flex-wrap: wrap; 557 | } 558 | 559 | .contact form .input-box input, 560 | .contact form textarea { 561 | width: 100%; 562 | padding: 1.5rem; 563 | font-size: 1.6rem; 564 | color: var(--text-color); 565 | background: var(--bg-color); 566 | border-radius: .8rem; 567 | margin: .7rem 0; 568 | box-shadow: 0 .1rem .5rem var(--shadow-color); 569 | } 570 | 571 | .contact form .input-box input { 572 | width: 49%; 573 | } 574 | 575 | .contact form textarea { 576 | resize: none; 577 | } 578 | 579 | .contact form .btn { 580 | margin-top: 2rem; 581 | cursor: pointer; 582 | } 583 | 584 | .footer { 585 | display: flex; 586 | justify-content: space-between; 587 | align-items: center; 588 | flex-wrap: wrap; 589 | padding: 2rem 7%; 590 | background: var(--main-color); 591 | } 592 | 593 | .footer-text p { 594 | font-size: 1.6rem; 595 | color: var(--white-color); 596 | } 597 | 598 | .footer-iconTop a { 599 | display: inline-flex; 600 | justify-content: center; 601 | align-items: center; 602 | padding: .8rem; 603 | background: var(--white-color); 604 | border-radius: .8rem; 605 | border: .2rem solid var(--main-color); 606 | outline: .2rem solid transparent; 607 | transition: .5s ease; 608 | } 609 | 610 | .footer-iconTop a:hover { 611 | outline-color: var(--white-color); 612 | } 613 | 614 | .footer-iconTop a i { 615 | font-size: 2.4rem; 616 | color: #333; 617 | } 618 | 619 | 620 | /* BREAKPOINTS */ 621 | @media (max-width: 1200px) { 622 | html { 623 | font-size: 55%; 624 | } 625 | 626 | .home .profession-container .profession-box { 627 | right: -10%; 628 | } 629 | 630 | .home .profession-container .overlay { 631 | right: -6%; 632 | } 633 | 634 | .home-img img { 635 | right: 0; 636 | } 637 | } 638 | 639 | @media (max-width: 1100px) { 640 | .home .profession-container .profession-box { 641 | right: -15%; 642 | } 643 | 644 | .home-img img { 645 | max-width: 420px; 646 | } 647 | } 648 | 649 | @media (max-width: 1024px) { 650 | .header { 651 | padding: 2rem 3%; 652 | } 653 | 654 | section { 655 | padding: 10rem 3% 2rem; 656 | } 657 | 658 | .home .profession-container .profession-box { 659 | right: -20%; 660 | } 661 | 662 | .home .profession-container .overlay { 663 | right: -12%; 664 | } 665 | 666 | .home-img img { 667 | max-width: 400px; 668 | } 669 | } 670 | 671 | @media (max-width: 991px) { 672 | 673 | .navbar a:nth-child(1) { 674 | color: var(--main-color); 675 | } 676 | 677 | .navbar a.active::before { 678 | background: var(--main-color); 679 | opacity: .7; 680 | } 681 | 682 | .home .home-content { 683 | max-width: 50rem; 684 | } 685 | 686 | .home .profession-container .profession-box { 687 | right: -35%; 688 | } 689 | 690 | .home .profession-container .overlay { 691 | right: -30%; 692 | } 693 | 694 | .home-img img { 695 | display: none; 696 | } 697 | 698 | .footer { 699 | padding: 2rem 3%; 700 | } 701 | } 702 | 703 | @media (max-width: 896px) { 704 | .navbar a:nth-child(2) { 705 | color: var(--main-color); 706 | } 707 | 708 | .home .profession-container .profession-box { 709 | right: -50%; 710 | } 711 | 712 | .home .profession-container .overlay { 713 | right: -43%; 714 | } 715 | } 716 | 717 | @media (max-width: 879px) { 718 | .portfolio .portfolio-container { 719 | grid-template-columns: repeat(2, 1fr); 720 | } 721 | } 722 | 723 | @media (max-width: 780px) { 724 | .navbar a:nth-child(2) { 725 | color: var(--white-color); 726 | } 727 | } 728 | 729 | @media (max-width: 768px) { 730 | #menu-icon { 731 | display: block; 732 | } 733 | 734 | #darkMode-icon { 735 | position: absolute; 736 | right: 7rem; 737 | font-size: 2.6rem; 738 | color: var(--text-color); 739 | margin-bottom: .1rem; 740 | } 741 | 742 | .navbar { 743 | position: absolute; 744 | top: 100%; 745 | left: 0; 746 | width: 100%; 747 | padding: 1rem 3%; 748 | background: var(--bg-color); 749 | border-top: .1rem solid rgba(0, 0, 0, .2); 750 | box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1); 751 | display: none; 752 | } 753 | 754 | .navbar.active { 755 | display: block; 756 | } 757 | 758 | .navbar a { 759 | display: block; 760 | font-size: 2rem; 761 | margin: 3rem 0; 762 | color: var(--text-color); 763 | } 764 | 765 | .navbar a:nth-child(1), 766 | .navbar a:nth-child(2) { 767 | color: var(--text-color); 768 | } 769 | 770 | .navbar a.active { 771 | color: var(--main-color); 772 | } 773 | 774 | .navbar a::before { 775 | display: none; 776 | } 777 | 778 | .home { 779 | padding: 0 3% 23rem; 780 | justify-content: center; 781 | text-align: center; 782 | } 783 | 784 | .home-content h3 { 785 | font-size: 2.6rem; 786 | } 787 | 788 | .home-content h1 { 789 | font-size: 5rem; 790 | } 791 | 792 | .home-content .social-media a { 793 | margin: 2.5rem .75rem 3rem; 794 | } 795 | 796 | .home .profession-container { 797 | left: 0; 798 | width: 100%; 799 | height: 100%; 800 | } 801 | 802 | .home .profession-container .profession-box { 803 | position: fixed; 804 | top: 450px; 805 | left: 0; 806 | width: 100%; 807 | } 808 | 809 | .home .profession-box .profession { 810 | padding: 0 13px; 811 | left: auto; 812 | transform-origin: 0; 813 | } 814 | 815 | .home .profession-box .profession:nth-child(1) { 816 | transform: rotate(-90deg) translate(-120px, -210px); 817 | } 818 | 819 | .home .profession-box .profession:nth-child(1) i { 820 | margin-right: 0; 821 | } 822 | 823 | .home .profession-box .profession:nth-child(2) { 824 | transform: rotate(0deg) translate(0, -325px); 825 | } 826 | 827 | .home .profession-box .profession:nth-child(3) { 828 | transform: rotate(90deg) translate(-115px, -450px); 829 | } 830 | 831 | .home .profession-box .profession:nth-child(4) { 832 | transform: rotate(180deg) translate(-220px, -325px); 833 | } 834 | 835 | .home .profession-box .circle { 836 | position: fixed; 837 | width: 670px; 838 | height: 670px; 839 | z-index: -1; 840 | } 841 | 842 | .home .profession-container .overlay { 843 | position: fixed; 844 | top: 70rem; 845 | left: 50%; 846 | right: 0; 847 | transform: rotate(90deg) translate(-50%, 50%) scaleY(3); 848 | border-width: 23.9rem; 849 | } 850 | 851 | .about { 852 | flex-direction: column-reverse; 853 | text-align: center; 854 | } 855 | 856 | .about-content h2 { 857 | text-align: center; 858 | } 859 | 860 | .about-img img { 861 | width: 70vw; 862 | margin-top: -2rem; 863 | } 864 | 865 | .testimonial-container .testimonial-wrapper { 866 | padding: 5rem 0; 867 | } 868 | 869 | .testimonial-content .testimonial-slide { 870 | padding: 3rem 2rem; 871 | } 872 | 873 | .testimonial-box .swiper-button-next, 874 | .testimonial-box .swiper-button-prev { 875 | display: none; 876 | } 877 | } 878 | 879 | @media (max-width: 580px) { 880 | .portfolio .portfolio-container { 881 | grid-template-columns: 1fr; 882 | } 883 | } 884 | 885 | @media (max-width: 450px) { 886 | html { 887 | font-size: 50%; 888 | } 889 | 890 | #darkMode-icon { 891 | right: 6rem; 892 | } 893 | 894 | .home .profession-box .profession:nth-child(1) { 895 | transform: rotate(-90deg) translate(-110px, -220px); 896 | } 897 | 898 | .home .profession-box .profession:nth-child(2) { 899 | transform: rotate(0deg) translate(5px, -325px); 900 | } 901 | 902 | .home .profession-box .profession:nth-child(3) { 903 | transform: rotate(90deg) translate(-105px, -440px); 904 | } 905 | 906 | .home .profession-box .profession:nth-child(4) { 907 | transform: rotate(180deg) translate(-210px, -325px); 908 | } 909 | 910 | .home .profession-container .overlay { 911 | top: 80rem; 912 | } 913 | 914 | .contact form .input-box input { 915 | width: 100%; 916 | } 917 | 918 | .footer { 919 | flex-direction: column-reverse; 920 | } 921 | 922 | .footer p { 923 | text-align: center; 924 | margin-top: 2rem; 925 | } 926 | } 927 | 928 | @media (max-width: 365px) { 929 | .about-img img { 930 | width: 90vw; 931 | } 932 | } 933 | 934 | @media (max-width: 315px) { 935 | .home-content h1 { 936 | font-size: 4.5rem; 937 | } 938 | } 939 | img { 940 | border-radius: 20px; 941 | } -------------------------------------------------------------------------------- /images/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/about.png -------------------------------------------------------------------------------- /images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/home.png -------------------------------------------------------------------------------- /images/portfolio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio1.jpg -------------------------------------------------------------------------------- /images/portfolio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio2.jpg -------------------------------------------------------------------------------- /images/portfolio3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio3.jpg -------------------------------------------------------------------------------- /images/portfolio4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio4.jpg -------------------------------------------------------------------------------- /images/portfolio5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio5.jpg -------------------------------------------------------------------------------- /images/portfolio6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/portfolio6.jpg -------------------------------------------------------------------------------- /images/testimonial1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/testimonial1.jpg -------------------------------------------------------------------------------- /images/testimonial2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/testimonial2.jpg -------------------------------------------------------------------------------- /images/testimonial3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingstella/cool-responsive-portfolio/54cdbc61ba1d662f68dd9c89301d68bd1b242869/images/testimonial3.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cool Responsive Portfolio Website Design 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 33 | 34 |
35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 |

Hello, I am

43 |

Coding Stella

44 |

45 | I'm a web developer who loves to create beautiful and functional websites 46 | for people who want to make a difference in the world. 47 |

48 |

Currently I'm a student of The Jump Digital School, where I'm learning how to 49 | create beautiful and functional websites using HTML, CSS, JavaScript, and WordPress.

50 | 51 | 57 | 58 | Download CV 59 |
60 | 61 |
62 |
63 |
64 | 65 |

Web Developer

66 |
67 |
68 | 69 |

Photographer

70 |
71 |
72 | 73 |

Web Designer

74 |
75 |
76 | 77 |

Videographer

78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 | 88 |
89 |
90 | 91 | 92 |
93 |
94 | 95 |
96 | 97 |
98 |

About Me

99 |

100 | Hi there, welcome to my website! I'm Cristian, 101 | a passionate web developer who enjoys learning new technologies 102 | and solving problems with code! 103 |

104 |

105 | This website is my personal blog where I write about web development 106 | topics that interest me and inspire me. 107 |

108 |

109 | Thank you for visiting my website and getting to know me better. I hope you 110 | enjoyed reading my blog posts and 111 | found 112 | them useful and informative. If you want to read more of my posts, subscribe 113 | to my newsletter where I send 114 | weekly 115 | updates on web development trends and tips. If you have any feedback or 116 | suggestions, please let me know. I'd love to hear from you. 117 |

118 | Read More 119 |
120 |
121 | 122 | 123 |
124 |

My Services

125 | 126 |
127 |
128 | 129 |

Web Development

130 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi itaque similique, architecto 131 | eaque ut quas delectus pariatur nesciunt in eligendi mollitia dicta.

132 | Read More 133 |
134 |
135 | 136 |

Graphic Design

137 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi itaque similique, architecto 138 | eaque ut quas delectus pariatur nesciunt in eligendi mollitia dicta.

139 | Read More 140 |
141 |
142 | 143 |

Digital Marketing

144 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi itaque similique, architecto 145 | eaque ut quas delectus pariatur nesciunt in eligendi mollitia dicta.

146 | Read More 147 |
148 |
149 |
150 | 151 | 152 |
153 |

Latest Project

154 | 155 |
156 |
157 | 158 | 159 |
160 |

Web Design

161 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

162 | 163 |
164 |
165 |
166 | 167 | 168 |
169 |

Web Design

170 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

171 | 172 |
173 |
174 |
175 | 176 | 177 |
178 |

Web Design

179 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

180 | 181 |
182 |
183 |
184 | 185 | 186 |
187 |

Web Design

188 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

189 | 190 |
191 |
192 |
193 | 194 | 195 |
196 |

Web Design

197 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

198 | 199 |
200 |
201 |
202 | 203 | 204 |
205 |

Web Design

206 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, ipsam est.

207 | 208 |
209 |
210 |
211 |
212 | 213 | 214 |
215 |

Valuable Testimonial

216 | 217 |
218 |
219 |
220 |
221 | 222 |

Jackson Levi

223 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem dignissimos aliquid 224 | iure delectus corrupti impedit, beatae aperiam ad iusto nostrum possimus cum pariatur harum 225 | assumenda suscipit a, qui, tempora maxime nulla facere quo ipsum tempore. Atque libero 226 | provident ad aut officia pariatur voluptate quaerat delectus nesciunt, sequi eligendi 227 | aperiam fugit unde nihil, iste similique illum. Dignissimos enim officia consequuntur 228 | dolores.

229 |
230 |
231 | 232 |

Flora Ocean

233 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem dignissimos aliquid 234 | iure delectus corrupti impedit, beatae aperiam ad iusto nostrum possimus cum pariatur harum 235 | assumenda suscipit a, qui, tempora maxime nulla facere quo ipsum tempore. Atque libero 236 | provident ad aut officia pariatur voluptate quaerat delectus nesciunt, sequi eligendi 237 | aperiam fugit unde nihil, iste similique illum. Dignissimos enim officia consequuntur 238 | dolores.

239 |
240 |
241 | 242 |

Julian Grayson

243 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem dignissimos aliquid 244 | iure delectus corrupti impedit, beatae aperiam ad iusto nostrum possimus cum pariatur harum 245 | assumenda suscipit a, qui, tempora maxime nulla facere quo ipsum tempore. Atque libero 246 | provident ad aut officia pariatur voluptate quaerat delectus nesciunt, sequi eligendi 247 | aperiam fugit unde nihil, iste similique illum. Dignissimos enim officia consequuntur 248 | dolores.

249 |
250 |
251 | 252 |
253 |
254 |
255 |
256 |
257 |
258 | 259 | 260 |
261 |

Contact Me!

262 | 263 |
264 |
265 | 266 | 267 |
268 |
269 | 270 | 271 |
272 | 273 | 274 |
275 |
276 | 277 | 278 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | /*========== menu icon navbar ==========*/ 2 | let menuIcon = document.querySelector('#menu-icon'); 3 | let navbar = document.querySelector('.navbar'); 4 | 5 | menuIcon.onclick = () => { 6 | menuIcon.classList.toggle('bx-x'); 7 | navbar.classList.toggle('active'); 8 | }; 9 | 10 | 11 | /*========== scroll sections active link ==========*/ 12 | let sections = document.querySelectorAll('section'); 13 | let navLinks = document.querySelectorAll('header nav a'); 14 | 15 | window.onscroll = () => { 16 | sections.forEach(sec => { 17 | let top = window.scrollY; 18 | let offset = sec.offsetTop - 150; 19 | let height = sec.offsetHeight; 20 | let id = sec.getAttribute('id'); 21 | 22 | if(top >= offset && top < offset + height) { 23 | navLinks.forEach(links => { 24 | links.classList.remove('active'); 25 | document.querySelector('header nav a[href*=' + id + ']').classList.add('active'); 26 | }); 27 | }; 28 | }); 29 | 30 | 31 | /*========== sticky navbar ==========*/ 32 | let header = document.querySelector('.header'); 33 | 34 | header.classList.toggle('sticky', window.scrollY > 100); 35 | 36 | 37 | /*========== remove menu icon navbar when click navbar link (scroll) ==========*/ 38 | menuIcon.classList.remove('bx-x'); 39 | navbar.classList.remove('active'); 40 | 41 | }; 42 | 43 | 44 | /*========== swiper ==========*/ 45 | var swiper = new Swiper(".mySwiper", { 46 | slidesPerView: 1, 47 | spaceBetween: 50, 48 | loop: true, 49 | grabCursor: true, 50 | pagination: { 51 | el: ".swiper-pagination", 52 | clickable: true, 53 | }, 54 | navigation: { 55 | nextEl: ".swiper-button-next", 56 | prevEl: ".swiper-button-prev", 57 | }, 58 | }); 59 | 60 | 61 | /*========== dark light mode ==========*/ 62 | let darkModeIcon = document.querySelector('#darkMode-icon'); 63 | 64 | darkModeIcon.onclick = () => { 65 | darkModeIcon.classList.toggle('bx-sun'); 66 | document.body.classList.toggle('dark-mode'); 67 | }; 68 | 69 | 70 | /*========== scroll reveal ==========*/ 71 | ScrollReveal({ 72 | // reset: true, 73 | distance: '80px', 74 | duration: 2000, 75 | delay: 200 76 | }); 77 | 78 | ScrollReveal().reveal('.home-content, .heading', { origin: 'top' }); 79 | ScrollReveal().reveal('.home-img img, .services-container, .portfolio-box, .testimonial-wrapper, .contact form', { origin: 'bottom' }); 80 | ScrollReveal().reveal('.home-content h1, .about-img img', { origin: 'left' }); 81 | ScrollReveal().reveal('.home-content h3, .home-content p, .about-content', { origin: 'right' }); --------------------------------------------------------------------------------