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

Personal Portfolio Website

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

Kane Williams

122 | 123 |

124 | Creative Web & App Developer 125 |

126 | 127 |
128 | kane williams 129 |
130 | 131 |

132 | Hi, I’m kane williams and I am creative web & app developer who dream making the world better place by 133 | creating captivating products. 134 |

135 | 136 | 137 | Download CV 138 | 139 | 140 | 141 | 142 |
143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 154 | 155 |
156 |
157 | 158 |
159 | 160 |
161 |

162 | Services That I Provide 163 |

164 | 165 |

Services

166 |
167 | 168 |

169 | Phasellus et lacus suscipit congue nisl the volutpat magna. donec miss the drana risus tincidunt convallis 170 | velit orci congue tortor eu dignissim ipsum suam non odio. Pellenta esuntion miss the imperdiet metus 171 | ornare. 172 |

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

    Website Design

    188 | 189 |

    190 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 191 |

    192 | 193 | 01 194 | 195 | 196 | 197 |
    198 |
    • 199 | 200 |
  • 201 |
    202 | 203 |
    204 | 205 |
    206 | 207 |

    SEO Marketing

    208 | 209 |

    210 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 211 |

    212 | 213 | 02 214 | 215 | 216 | 217 |
    218 |
    • 219 | 220 |
  • 221 |
    222 | 223 |
    224 | 225 |
    226 | 227 |

    eCommerce

    228 | 229 |

    230 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 231 |

    232 | 233 | 03 234 | 235 | 236 | 237 |
    238 |
    • 239 | 240 |
  • 241 |
    242 | 243 |
    244 | 245 |
    246 | 247 |

    Graphic Design

    248 | 249 |

    250 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 251 |

    252 | 253 | 04 254 | 255 | 256 | 257 |
    258 |
    • 259 | 260 |
  • 261 |
    262 | 263 |
    264 | 265 |
    266 | 267 |

    Digital Marketing

    268 | 269 |

    270 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 271 |

    272 | 273 | 05 274 | 275 | 276 | 277 |
    278 |
    • 279 | 280 |
  • 281 |
    282 | 283 |
    284 | 285 |
    286 | 287 |

    Social Media

    288 | 289 |

    290 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 291 |

    292 | 293 | 06 294 | 295 | 296 | 297 |
    298 |
    • 299 | 300 |
301 | 302 |
303 | 307 | 308 | 312 |
313 | 314 |
315 | 316 |
317 |
318 | 319 | 320 | 321 | 322 | 323 | 326 | 327 |
328 |
329 | 330 |

I Make The Future

331 | 332 |

I Develop & Create Digital Future.

333 | 334 |
335 | 336 |
337 |

338 | Pellentesque magna magna semper dapibus felis necatin aliuen risus. Pellentesque habitant morbi senectus 339 | dictum. 340 |

341 | 342 |

343 | Web design magna magna semper dapibus felis necatin aliuen risus. Pellentesque habitant morbi tristique 344 | senectus the neuse malesuada nullam ac lorem miss the duru. 345 |

346 | 347 | info@kwilliams.com 348 |
349 | 350 |
351 | 352 |
    353 | 354 |
  • 355 |
    356 |

    Design

    357 | 358 | 90% 359 |
    360 | 361 |
    362 |
    363 |
    364 |
    • 365 | 366 |
  • 367 |
    368 |

    Branding

    369 | 370 | 80% 371 |
    372 | 373 |
    374 |
    375 |
    376 |
    • 377 | 378 |
  • 379 |
    380 |

    Web Design

    381 | 382 | 95% 383 |
    384 | 385 |
    386 |
    387 |
    388 |
    • 389 | 390 |
  • 391 |
    392 |

    Social Media

    393 | 394 | 85% 395 |
    396 | 397 |
    398 |
    399 |
    400 |
    • 401 | 402 |
403 | 404 |
405 | 406 |
407 | 408 |
409 |
410 | 411 | 412 | 413 | 414 | 415 | 418 | 419 |
420 | 421 |
422 | 423 |
424 |

Our Works

425 | 426 |

Portfolio

427 |
428 | 429 |

430 | Phasellus et lacus suscipit congue nisl the volutpat magna. donec miss the drana risus tincidunt convallis 431 | velit orci congue tortor eu dignissim ipsum suam non odio. Pellenta esuntion miss the imperdiet metus 432 | ornare. 433 |

434 | 435 |
436 | 437 |
438 | 439 |
    440 | 441 |
  • 442 |
    443 | 444 | portfolio 446 | 447 |
    448 |

    Lab. 001

    449 | 450 |

    Website Design

    451 |
    452 | 453 | 454 | 455 |
    456 |
    • 457 | 458 |
  • 459 |
    460 | 461 | portfolio 463 | 464 |
    465 |

    Aer Agency

    466 | 467 |

    Website / Development

    468 |
    469 | 470 | 471 | 472 |
    473 |
    • 474 | 475 |
  • 476 |
    477 | 478 | portfolio 480 | 481 |
    482 |

    Joker Card

    483 | 484 |

    UX Design / Web App

    485 |
    486 | 487 | 488 | 489 |
    490 |
    • 491 | 492 |
  • 493 |
    494 | 495 | portfolio 497 | 498 |
    499 |

    Peaky Blinders

    500 | 501 |

    Website / UX Design

    502 |
    503 | 504 | 505 | 506 |
    507 |
    • 508 | 509 |
  • 510 |
    511 | 512 | portfolio 514 | 515 |
    516 |

    Design Zoom

    517 | 518 |

    Branding / Design

    519 |
    520 | 521 | 522 | 523 |
    524 |
    • 525 | 526 |
  • 527 |
    528 | 529 | portfolio 531 | 532 |
    533 |

    Out Zone

    534 | 535 |

    UX Design / Web App

    536 |
    537 | 538 | 539 | 540 |
    541 |
    • 542 | 543 |
544 | 545 |
546 | 550 | 551 | 555 |
556 | 557 |
558 | 559 |
560 | 561 | 562 | 563 | 564 | 565 | 568 | 569 |
570 |
571 | 572 |

Recent Articles

573 | 574 |

Latest News

575 | 576 |
    577 | 578 |
  • 579 |
    580 | 581 |
    582 | Get Started With Tiktok Ads. 584 |
    585 | 586 |
    587 | 588 | 592 | 593 |
    594 |

    Get Started With Tiktok Ads.

    595 | 596 |

    597 | Phasellus et lacus suscipit congue nis in the miss mine one miss the drana risus in tincidunt 598 | ornare. 599 |

    600 | 601 | 602 | Read more 603 | 604 | 605 | 606 |
    607 | 608 |
    609 | 610 |
    611 |
    • 612 | 613 |
  • 614 |
    615 | 616 |
    617 | UX in Ecommerce – 5 things to avoid. 619 |
    620 | 621 |
    622 | 623 | 627 | 628 |
    629 |

    UX in Ecommerce – 5 things to avoid.

    630 | 631 |

    632 | Phasellus et lacus suscipit congue nis in the miss mine one miss the drana risus in tincidunt 633 | ornare. 634 |

    635 | 636 | 637 | Read more 638 | 639 | 640 | 641 |
    642 | 643 |
    644 | 645 |
    646 |
    • 647 | 648 |
649 | 650 |
651 |
652 | 653 |
654 |
655 | 656 | 657 | 658 | 659 | 660 | 663 | 664 | 721 | 722 | 723 | 724 | 725 | 726 | 729 | 730 | 731 | 734 | 735 | 736 | 737 | 738 | 739 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Kane Williams - Web & App Developer 2 | 3 | This is a personal portfolio html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | alt = Pfolio home 10 | 11 | aria-label = Toggle menu 12 | 13 | Home 14 | Resume 15 | Services 16 | Portfolio 17 | Blog 18 | Contact 19 | 20 | 21 | 22 | #---------- HERO ----------# 23 | 24 | Kane Williams 25 | Creative Web & App Developer 26 | 27 | alt = kane williams 28 | 29 | Hi, I’m kane williams and I am creative web & app developer who dream making the world better place by creating captivating products. 30 | 31 | Download CV 32 | 33 | 34 | 35 | 36 | #---------- SERVICE ----------# 37 | 38 | Services That I Provide 39 | 40 | Services 41 | 42 | Phasellus et lacus suscipit congue nisl the volutpat magna. donec miss the drana risus tincidunt convallis velit orci congue tortor eu dignissim ipsum suam non odio. Pellenta esuntion miss the imperdiet metus ornare. 43 | 44 | 45 | Website Design 46 | 47 | Website ravida surna eveti semen the conse tusio anivite dianne one nivam acestion vue artin dictum. 48 | 49 | 01 50 | 51 | aria-label = More about my website design service 52 | 53 | 54 | SEO Marketing 55 | 02 56 | 57 | 58 | eCommerce 59 | 03 60 | 61 | 62 | Graphic Design 63 | 04 64 | 65 | 66 | Digital Marketing 67 | 05 68 | 69 | 70 | Social Media 71 | 06 72 | 73 | aria-label = Slide to previous item 74 | aria-label = Slide to next item 75 | 76 | 77 | 78 | #---------- SKILLS ----------# 79 | 80 | I Make The Future 81 | 82 | I Develop & Create Digital Future. 83 | 84 | Pellentesque magna magna semper dapibus felis necatin aliuen risus. Pellentesque habitant morbi senectus dictum. 85 | 86 | Web design magna magna semper dapibus felis necatin aliuen risus. Pellentesque habitant morbi tristique senectus the neuse malesuada nullam ac lorem miss the duru. 87 | 88 | info@kwilliams.com 89 | 90 | Design 91 | 90% 92 | 93 | Branding 94 | 80% 95 | 96 | Web Design 97 | 95% 98 | 99 | Social Media 100 | 85% 101 | 102 | 103 | 104 | #---------- PORTFOLIO ----------# 105 | 106 | Our Works 107 | 108 | Portfolio 109 | 110 | Phasellus et lacus suscipit congue nisl the volutpat magna. donec miss the drana risus tincidunt convallis velit orci congue tortor eu dignissim ipsum suam non odio. Pellenta esuntion miss the imperdiet metus ornare. 111 | 112 | alt = portfolio 113 | 114 | Lab. 001 115 | Website Design 116 | 117 | Aer Agency 118 | Website / Development 119 | 120 | Joker Card 121 | UX Design / Web App 122 | 123 | Peaky Blinders 124 | Website / UX Design 125 | 126 | Design Zoom 127 | Branding / Design 128 | 129 | Out Zone 130 | UX Design / Web App 131 | 132 | 133 | 134 | #---------- BLOG ----------# 135 | 136 | Recent Articles 137 | 138 | Latest News 139 | 140 | alt = Get Started With Tiktok Ads. 141 | 142 | 24 143 | June 2022 144 | 145 | Get Started With Tiktok Ads. 146 | 147 | Phasellus et lacus suscipit congue nis in the miss mine one miss the drana risus in tincidunt ornare. 148 | 149 | Read more 150 | 151 | 152 | 153 | alt = UX in Ecommerce – 5 things to avoid. 154 | 155 | 27 156 | June 2022 157 | 158 | UX in Ecommerce – 5 things to avoid. 159 | 160 | 161 | 162 | #---------- FOOTER ----------# 163 | 164 | Get in touch 165 | info@kwilliams.com 166 | 167 | Locations 168 | San Francisco — California 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/pfolio/671175d5a2226975443c7214887c9651b4281c79/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 | --raisin-black: hsla(231, 10%, 14%, 1); 26 | --roman-silver: hsla(229, 10%, 57%, 1); 27 | --eerie-black: hsla(228, 9%, 10%, 1); 28 | --black: hsla(0, 0%, 0%, 1); 29 | --white: hsla(0, 0%, 100%, 1); 30 | --white_a10: hsla(0, 0%, 100%, 0.1); 31 | --white_a5: hsla(0, 0%, 100%, 0.05); 32 | ``` 33 | 34 | ## Typography 35 | 36 | ``` css 37 | --ff-syne: 'Syne', sans-serif; 38 | 39 | --fs-1: 4.8rem; 40 | --fs-2: 4.5rem; 41 | --fs-3: 4rem; 42 | --fs-4: 2.4rem; 43 | --fs-5: 2rem; 44 | --fs-6: 1.8rem; 45 | --fs-7: 1.4rem; 46 | --fs-8: 1.2rem; 47 | 48 | --fw-800: 800; 49 | --fw-700: 700; 50 | ``` 51 | 52 | ## Spacing 53 | 54 | ``` css 55 | --section-padding: 100px; 56 | ``` 57 | 58 | ## Border Radius 59 | 60 | ``` css 61 | --radius-pill: 100px; 62 | --radius-circle: 50%; 63 | --blob-radius: 52% 48% 59% 41% / 53% 40% 60% 47%; 64 | ``` 65 | 66 | ## Transition 67 | 68 | ``` css 69 | --transition-1: 0.25s ease; 70 | --transition-2: 0.5s ease; 71 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 72 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 73 | --cubic-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 74 | --cubic-ease-out: 700ms cubic-bezier(0.17, 0.67, 0, 1.01); 75 | ``` 76 | --------------------------------------------------------------------------------