├── LICENSE ├── README.md ├── assets ├── css │ └── style.css ├── font │ ├── font.css │ └── recoleta │ │ ├── Recoleta-Medium.woff2 │ │ └── Recoleta-Regular.woff2 ├── images │ ├── Thumbs.db │ ├── about-banner.jpg │ ├── awward-1.jpg │ ├── awward-2.jpg │ ├── awward-3.jpg │ ├── client.png │ ├── contact-icon-1.png │ ├── contact-icon-2.png │ ├── contact-icon-3.png │ ├── exhibition-1.jpg │ ├── exhibition-2.jpg │ ├── exhibition-3.jpg │ ├── exhibition-4.jpg │ ├── exhibition-5.jpg │ ├── exhibition-6.jpg │ ├── hero-banner.jpg │ ├── hero-shape-1.png │ ├── hero-shape-2.png │ ├── interview-1.jpg │ ├── interview-2.jpg │ ├── interview-3.jpg │ ├── logo.svg │ ├── project-1.jpg │ ├── project-2.jpg │ ├── project-3.jpg │ ├── project-4.jpg │ ├── project-5.jpg │ ├── service-icon-1.svg │ ├── service-icon-2.svg │ ├── service-icon-3.svg │ ├── service-icon-4.svg │ └── skill-banner.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/drew-hays-personal-portfolio) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/drew-hays-personal-portfolio?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/drew-hays-personal-portfolio?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/lzledoZLFBQ?style=social)](https://youtu.be/lzledoZLFBQ) 8 | 9 |
10 |
11 | 12 |

Drew hays - Personal Portfolio Website

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

Get Your Product Identity From Me.

153 | 154 |
155 | 156 | Download CV 157 | 158 | 159 | 160 | 161 |

162 | From device to cloud to edge Innovate from anywhere with secure 163 |

164 |
165 | 166 |
167 | 168 | shape 169 | 170 | shape 171 | 172 |
173 |
174 | 175 | 176 | 177 | 178 | 179 | 182 | 183 |
184 |
185 | 186 | 261 | 262 |
263 |
264 | 265 | 266 | 267 | 268 | 269 | 272 | 273 |
274 |
275 | 276 |
277 | 278 |
    279 | 280 |
  • 281 | 282 |
    • 283 | 284 |
  • 285 | 286 |
    • 287 | 288 |
  • 289 | 290 |
    • 291 | 292 |
  • 293 | 294 |
    • 295 | 296 |
  • 297 | 298 |
    • 299 | 300 |
301 | 302 |
303 |
304 | 305 |
306 | about banner 308 |
309 | 310 |
311 | 312 |

313 | A very small stage in a vast cosmic. 314 |

315 | 316 |

317 | A very small stage in a vast cosmic arena great turbuslent clouds encyclo-paedia galactica star 318 | stuff harvesting star light the carbon in our apple pies realm of the galaxies 319 |

320 | 321 |
    322 | 323 |
  • 324 |

    Name

    325 | 326 | Drew Hays 327 |
    • 328 | 329 |
  • 330 |

    Phone Number

    331 | 332 | 123. 456. 789. 01 333 |
    • 334 | 335 |
  • 336 |

    Email Address

    337 | 338 | info@drew.com 339 |
    • 340 | 341 |
  • 342 |

    Social Network

    343 | 344 | 352 |
    • 353 | 354 |
355 | 356 |
357 | 358 |
359 |
360 | 361 |
362 |
363 | 364 |
365 | 366 |

367 | We help to create visual strategies. 368 |

369 | 370 |

371 | A very small stage in a vast cosmic arena great turbuslent clouds encyclo-paedia galactica star 372 | stuff harvesting star light 373 |

374 | 375 |
    376 | 377 |
  • 378 |
    379 | Website Development 380 | 381 | 95% 382 |
    383 | 384 |
    385 |
    386 |
    387 |
    • 388 | 389 |
  • 390 |
    391 | Design UI & UX 392 | 393 | 85% 394 |
    395 | 396 |
    397 |
    398 |
    399 |
    • 400 | 401 |
402 | 403 |
404 | 405 |
406 | skill banner 408 |
409 | 410 |
411 |
412 | 413 |
414 |
415 | 416 |
417 | interview 1 419 | 420 | 421 |
422 | 423 |
424 | interview 2 426 | 427 | 428 |
429 | 430 |
431 | interview 3 433 | 434 | 435 |
436 | 437 |
438 |
439 | 440 |
441 | 442 |

443 | We’re a team of creatives who are excited about unique ideas and help IT-tech companies to make identity 444 | by crafting UI/UX. 445 |

446 | 447 |
    448 | 449 |
  • 450 |
    451 |
    452 | certificate 454 |
    455 |
    456 |
    • 457 | 458 |
  • 459 |
    460 |
    461 | certificate 463 |
    464 |
    465 |
    • 466 | 467 |
  • 468 |
    469 |
    470 | certificate 472 |
    473 |
    474 |
    • 475 | 476 |
477 | 478 |
479 | 480 |
481 |
    482 | 483 |
  • 484 |
    485 | 486 |
    487 | image 489 |
    490 | 491 |
    492 | 493 |
    494 | 495 |
    496 |
    • 497 | 498 |
  • 499 |
    500 | 501 |
    502 | video 504 |
    505 | 506 |
    507 | 508 |
    509 | 510 |
    511 |
    • 512 | 513 |
  • 514 |
    515 | 516 |
    517 | music 519 |
    520 | 521 |
    522 | 523 |
    524 | 525 |
    526 |
    • 527 | 528 |
  • 529 |
    530 | 531 |
    532 | image 534 |
    535 | 536 |
    537 | 538 |
    539 | 540 |
    541 |
    • 542 | 543 |
  • 544 |
    545 | 546 |
    547 | image 549 |
    550 | 551 |
    552 | 553 |
    554 | 555 |
    556 |
    • 557 | 558 |
  • 559 |
    560 | 561 |
    562 | image 564 |
    565 | 566 |
    567 | 568 |
    569 | 570 |
    571 |
    • 572 | 573 |
574 |
575 | 576 |
577 | 578 |
579 |
580 | 581 | 582 | 583 | 584 | 585 | 588 | 589 |
590 |
591 | 592 |

593 | Let's Work Together On Your Next Project! 594 |

595 | 596 | 597 | Hire Me Now 598 | 599 | 600 | 601 | 602 |
603 |
604 | 605 | 606 | 607 | 608 | 609 | 612 | 613 |
614 | 615 | 743 | 744 |
745 | 746 | 747 | 748 | 749 | 750 | 753 | 754 |
755 |
756 | 757 |
758 | 759 |
760 | “ The average national hourly rate for house cleaning services is $25 to $90 per individual, or $50 761 | to $90 per hour. The size and condition of your home will strongly impact the price of these. ” 762 |
763 | 764 |
765 |
766 | Alexis browni JR. 768 |
769 | 770 |
771 |

Alexis browni JR.

772 | 773 |

Founder of alxis co.

774 |
775 |
776 | 777 |
778 | 779 |
780 |
781 | 782 | 783 | 784 | 785 | 786 | 789 | 790 |
791 |
792 | 793 |

Get In Touch

794 | 795 |
796 | 797 |
798 | 799 | 800 | 801 | 803 | 804 | 805 | 806 | 807 | 808 | 813 | 814 |
815 | 816 | 820 | 821 |
    822 | 823 |
  • 824 | 825 |
    826 | contact icon 828 |
    829 | 830 |
    831 | 869. 368. 456. 56 832 | 833 | 789 (569) 126 35 834 |
    835 | 836 |
    • 837 | 838 |
  • 839 | 840 |
    841 | contact icon 843 |
    844 | 845 |
    846 |
    847 | 30- 24 Newtown Rd, Queens, 848 | NY 11103, USA 849 |
    850 |
    851 | 852 |
    • 853 | 854 |
  • 855 | 856 |
    857 | contact icon 859 |
    860 | 861 |
    862 | info@drew.com 863 | 864 | jobs@drew.com 865 |
    866 | 867 |
    • 868 | 869 |
870 | 871 |
872 | 873 |
874 |
875 | 876 |
877 |
878 | 879 | 880 | 881 | 882 | 883 | 886 | 887 | 902 | 903 | 904 | 905 | 906 | 907 | 910 | 911 |
912 |
913 | 914 | 915 | 916 | 917 | 918 | 921 | 922 | 923 | 926 | 927 | 928 | 929 | 930 | 931 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Drew Hays - Get your product identity from me. 2 | 3 | This is a personal portfolio html template made by codewithsadee 4 | 5 | 6 | 7 | #---------- HEADER ----------# 8 | 9 | alt = logo 10 | 11 | alt = logo 12 | 13 | aria-label = close menu 14 | 15 | 16 | Home 17 | Services 18 | About 19 | Project 20 | Review 21 | Contact 22 | 23 | Get A Quote 24 | 25 | 26 | 27 | aria-label = open menu 28 | 29 | 30 | 31 | #---------- HERO ----------# 32 | 33 | alt = Drew Hays 34 | 35 | Drew Hays 36 | 37 | Get Your Product Identity From Me. 38 | 39 | Download CV 40 | 41 | 42 | From device to cloud to edge Innovate from anywhere with secure 43 | 44 | 45 | 46 | #---------- SERVICE ----------# 47 | 48 | alt = service icon 49 | 50 | Web 51 | Development 52 | 53 | Digital 54 | Marketing 55 | 56 | Graphics 57 | Design 58 | 59 | Mobile 60 | Application 61 | 62 | 63 | 64 | #---------- ABOUT ----------# 65 | 66 | About Me 67 | Skillset 68 | Interview 69 | Awwards 70 | Exhibition 71 | 72 | ABOUT TAB 73 | ---------- 74 | alt = about banner 75 | 76 | A very small stage in a vast cosmic. 77 | 78 | A very small stage in a vast cosmic arena great turbuslent clouds encyclo-paedia galactica star stuff harvesting star light the carbon in our apple pies realm of the galaxies 79 | 80 | Name 81 | Drew Hays 82 | 83 | Phone Number 84 | 123. 456. 789. 01 85 | 86 | Email Address 87 | info@drew.com 88 | 89 | Social Network 90 | 91 | title = Facebook 92 | Fb. 93 | 94 | title = Behance 95 | Be. 96 | 97 | title = Linkedin 98 | Ln. 99 | 100 | title = Dribbble 101 | Dr. 102 | 103 | SKILLSET TAB 104 | --------- 105 | We help to create visual strategies. 106 | 107 | A very small stage in a vast cosmic arena great turbuslent clouds encyclo-paedia galactica star stuff harvesting star light 108 | 109 | Website Development 110 | 95% 111 | 112 | Design UI & UX 113 | 85% 114 | 115 | alt = skill banner 116 | 117 | INTERVIEW TAB 118 | ------------- 119 | alt = interview 1 120 | 121 | play 122 | 123 | AWARD TAB 124 | ---------- 125 | We’re a team of creatives who are excited about unique ideas and help IT-tech companies to make identity by crafting UI/UX. 126 | 127 | alt = certificate 128 | 129 | EXHIBITION TAB 130 | -------------- 131 | 132 | alt = image 133 | 134 | 135 | alt = video 136 | 137 | 138 | alt = music 139 | 140 | 141 | 142 | 143 | #---------- CTA ----------# 144 | 145 | Let's Work Together On Your Next Project! 146 | 147 | Hire Me Now 148 | 149 | 150 | 151 | 152 | 153 | #---------- PROJECTS ----------# 154 | 155 | alt = Project poster: Creative & experienced digital design studio 156 | 157 | Project Details 158 | 159 | 160 | 161 | Web, Product 162 | 163 | Creative & experienced digital design studio 164 | 165 | 166 | Front End Development & Maintenance 167 | 168 | Flutter Framework & Warframe Design 169 | 170 | Full Web Development Project With JavaScript 171 | 172 | Cloud Migration & AWS Services 173 | 174 | 175 | 176 | #---------- TESTIMONIALS ----------# 177 | 178 | The average national hourly rate for house cleaning services is $25 to $90 per individual, or $50 to $90 per hour. The size and condition of your home will strongly impact the price of these. 179 | 180 | Alexis browni JR. 181 | 182 | Founder of alxis co. 183 | 184 | 185 | 186 | #---------- CONTACT ----------# 187 | 188 | Get In Touch 189 | 190 | placeholder = Full name 191 | placeholder = Email address 192 | placeholder = Phone 193 | placeholder = Enter massges 194 | 195 | Get A Quote 196 | 197 | 198 | 199 | map src = https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d898.4329239267093!2d-73.91493787358391!3d40.76299026683699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1671529019371!5m2!1sen!2sbd 200 | 201 | alt = contact icon 202 | 203 | 869. 368. 456. 56 204 | 789 (569) 126 35 205 | 206 | 30- 24 Newtown Rd, Queens, 207 | NY 11103, USA 208 | 209 | info@drew.com 210 | jobs@drew.com 211 | 212 | 213 | 214 | #---------- FOOTER ----------# 215 | 216 | Copyright & Design By @codewithsadee - 2022 217 | 218 | Back To Top 219 | 220 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/drew-hays-personal-portfolio/08891b714934e2520200998f76f06bb59d7c1316/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 | ### Background color 25 | 26 | ``` css 27 | --bg-white: hsla(0, 0%, 100%, 1); 28 | --bg-light-gray: hsla(240, 1%, 83%, 1); 29 | --bg-jet: hsla(0, 0%, 18%, 1); 30 | --bg-eerie-black: hsla(0, 0%, 13%, 1); 31 | --bg-rich-black-fogra-29: hsla(229, 23%, 9%, 1); 32 | --bg-smoky-black: hsla(0, 0%, 6%, 1); 33 | --bg-black: hsla(0, 0%, 0%, 1); 34 | ``` 35 | 36 | ### Gradient color 37 | 38 | ``` css 39 | --gradient-1: linear-gradient(to top, var(--bg-black) 0%, transparent 40%); 40 | --gradient-2: radial-gradient(circle at 75% 100%, hsla(79, 100%, 70%, 0.3) 0%, transparent 100%); 41 | ``` 42 | 43 | ### Text color 44 | 45 | ``` css 46 | --text-white: hsla(0, 0%, 100%, 1); 47 | --text-light-gray: hsla(240, 1%, 83%, 1); 48 | --text-rich-black-fogra-29: hsla(216, 42%, 12%, 1); 49 | --text-smoky-black: hsla(0, 0%, 6%, 1); 50 | --text-black: hsla(0, 0%, 0%, 1); 51 | ``` 52 | 53 | ### Border color 54 | 55 | ``` css 56 | --border-white: hsla(0, 0%, 100%, 1); 57 | --border-light-gray: hsla(240, 1%, 83%, 1); 58 | --border-gainsboro: hsla(220, 13%, 91%, 1); 59 | --border-eerie-black: hsla(0, 0%, 13%, 1); 60 | --border-smoky-black: hsla(0, 0%, 6%, 1); 61 | ``` 62 | 63 | ## Typography 64 | 65 | ``` css 66 | --fontFamily-recoleta: 'Recoleta'; 67 | --fontFamily-roboto: 'Roboto', sans-serif; 68 | 69 | --fontSize-1: 4.6rem; 70 | --fontSize-2: 4.5rem; 71 | --fontSize-3: 4rem; 72 | --fontSize-4: 3rem; 73 | --fontSize-5: 2.4rem; 74 | --fontSize-6: 1.8rem; 75 | --fontSize-7: 2rem; 76 | --fontSize-8: 1.6rem; 77 | --fontSize-9: 1.5rem; 78 | --fontSize-10: 1.4rem; 79 | 80 | --weight-regular: 400; 81 | --weight-medium: 500; 82 | ``` 83 | 84 | ## Spacing 85 | 86 | ``` css 87 | --section-spacing: 70px; 88 | ``` 89 | 90 | ## Border Radius 91 | 92 | ``` css 93 | --radius-pill: 500px; 94 | --radius-circle: 50%; 95 | ``` 96 | 97 | ## Transition 98 | 99 | ``` css 100 | --transition-1: 0.25s ease; 101 | --transition-2: 0.5s ease; 102 | --transition-3: 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s; 103 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28); 104 | --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); 105 | ``` 106 | --------------------------------------------------------------------------------