-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 3e1b5c4
Showing
8 changed files
with
299 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| /* GLOBAL */ | ||
| @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap'); | ||
| :root{ | ||
| --bg-main-color: #2F2723; | ||
| --light-yellow: #EFC764; | ||
| --light-orange: #E68E7B; | ||
| --light-blue: #97D4D9; | ||
| --light-green: #B3DFD3; | ||
| --light-pink: #FEAFBE; | ||
| font: 16px; | ||
| font-family: 'Josefin Sans', sans-serif; | ||
| color: #fff; | ||
| text-align: center; | ||
| --transition: .2s; | ||
| } | ||
|
|
||
| *{ | ||
| margin: 0px; | ||
| padding: 0px; | ||
| } | ||
| html{ | ||
| width: 100vw; | ||
| min-height: 100vh; | ||
| overflow: hidden; | ||
|
|
||
| } | ||
|
|
||
| body{ | ||
| position: relative; | ||
| width: 100vw; | ||
| min-height: 100vh; | ||
| background-color: var(--bg-main-color); | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .mg-bottom-10{ | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .no-margin{ | ||
| margin: 0px !important; | ||
| } | ||
|
|
||
| /* BALL 1 */ | ||
| .ball-1{ | ||
| position: absolute; | ||
| height: 70%; | ||
| aspect-ratio: 1; | ||
| background: linear-gradient(135deg, var(--light-yellow), var(--light-orange)); | ||
| border-radius: 100%; | ||
| top: -18%; | ||
| left: 10%; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| /* BALL 2 */ | ||
| .ball-2{ | ||
| position: absolute; | ||
| height: 40%; | ||
| aspect-ratio: 1; | ||
| background: linear-gradient(135deg, var(--light-blue), var(--light-green)); | ||
| border-radius: 100%; | ||
| bottom: 10%; | ||
| right: 20%; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| /* SCREEN */ | ||
| .screen{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100vw; | ||
| min-height: 100vh; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* CARD */ | ||
| .card{ | ||
| width: 400px; | ||
| height: max-content; | ||
| padding: 44px 22px; | ||
| background-color: rgba(255, 255, 255, .1); | ||
| border: 1px solid rgba(255, 255, 255, .4); | ||
| border-radius: 20px; | ||
| backdrop-filter: blur(20px); | ||
| box-shadow: 5px 5px 20px rgba(0, 0, 0, .2); | ||
| } | ||
|
|
||
| /* CARD HEADER */ | ||
| .card-header{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .profile-photo{ | ||
| width: 40%; | ||
| border-radius: 100%; | ||
| border: 1px solid rgba(255, 255, 255, .4); | ||
|
|
||
| } | ||
|
|
||
| .person-name{ | ||
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| /* CARD BODY */ | ||
| .data-body{ | ||
| display: flex; | ||
| justify-content: center; | ||
| height: 1.2rem; | ||
| padding: 15px 0px; | ||
| margin-bottom: 15px; | ||
| background-color: rgba(255, 255, 255, .1); | ||
| border: 1px solid rgba(255, 255, 255, .4); | ||
| border-radius: 35px; | ||
| text-decoration: none; | ||
| clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%); | ||
| transition: ease-out var(--transition); | ||
| } | ||
| .data-body:hover{ | ||
| border: 1px solid var(--light-pink); | ||
| transition: ease-in var(--transition); | ||
| } | ||
|
|
||
| .data-body:hover .name-icon{ | ||
| color: var(--light-pink); | ||
| transition: ease-in var(--transition); | ||
| } | ||
|
|
||
| .data-body:hover .data-content{ | ||
| top: calc(-100% - 1.2rem); | ||
| transition: ease-in var(--transition); | ||
| } | ||
|
|
||
| .data-body:hover path{ | ||
| fill: var(--light-pink); | ||
| } | ||
|
|
||
| .data-content{ | ||
| position: relative; | ||
| top: 0%; | ||
| transition: ease-out var(--transition); | ||
| } | ||
|
|
||
| .name-icon{ | ||
| font-size: 1.2rem; | ||
| color: #fff; | ||
| margin-bottom: 1.2rem; | ||
| } | ||
|
|
||
| .svg-icon{ | ||
| height: 1.2rem; | ||
| position: relative; | ||
| } | ||
|
|
||
| .svg-icon path{ | ||
| fill: #fff; | ||
| } | ||
|
|
||
| @media only screen and (max-width: 1000px){ | ||
|
|
||
| .ball-1{ | ||
| left: -20%; | ||
| } | ||
| .ball-2{ | ||
| right: -10%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 600px){ | ||
|
|
||
| .ball-1{ | ||
| left: -90%; | ||
| } | ||
| .ball-2{ | ||
| right: -50%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 600px){ | ||
|
|
||
| .card{ | ||
| width: 100wv; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="./dress_code.css"> | ||
| <title>Mateus Santos</title> | ||
| </head> | ||
| <body> | ||
| <div class="screen"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <img src="./src/picture/me.jpg" alt="Picture of Mateus" class="profile-photo mg-bottom-10"> | ||
| <span class="person-name mg-bottom-10">Mateus Santos</span> | ||
| <span class="person-desc">Desenvolvedor back-end e designer gráfico nas horas vagas</span> | ||
| </div> | ||
| <div class="card-body"> | ||
| <a href="" class="data-body"> | ||
| <div class="data-content"> | ||
| <p class="name-icon">Email</p> | ||
| <svg class="svg-icon" viewBox="0 0 905 679" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M835.115 0H69.6725C31.3049 0 0 31.3049 0 69.6725V608.728C0 647.095 31.3049 678.4 69.6725 678.4H835.115C873.483 678.4 904.788 647.095 904.788 608.728V69.6725C904.788 31.3049 873.483 0 835.115 0ZM824.999 51.5386L457.166 366.115L89.3335 51.5386H824.999ZM853.249 608.728C853.249 618.653 845.041 626.861 835.115 626.861H69.6725C59.7465 626.861 51.5385 618.653 51.5385 608.728V87.0429L440.368 419.562C440.559 419.753 440.941 419.944 441.132 420.135C441.323 420.325 441.704 420.516 441.895 420.707C442.468 421.089 442.85 421.471 443.422 421.662C443.613 421.853 443.804 421.853 443.995 422.043C444.759 422.425 445.522 422.807 446.286 423.189C446.477 423.189 446.667 423.38 446.858 423.38C447.431 423.571 448.004 423.952 448.767 424.143C448.958 424.143 449.34 424.334 449.531 424.334C450.103 424.525 450.676 424.716 451.249 424.716C451.439 424.716 451.821 424.907 452.012 424.907C452.585 425.098 453.348 425.098 453.921 425.288C454.112 425.288 454.303 425.288 454.494 425.288C455.257 425.288 456.212 425.479 456.975 425.479C457.739 425.479 458.693 425.479 459.457 425.288C459.647 425.288 459.838 425.288 460.029 425.288C460.602 425.288 461.365 425.098 461.938 424.907C462.129 424.907 462.511 424.716 462.702 424.716C463.274 424.525 463.847 424.334 464.42 424.334C464.61 424.334 464.992 424.143 465.183 424.143C465.756 423.952 466.328 423.761 467.092 423.38C467.283 423.38 467.474 423.189 467.665 423.189C468.428 422.807 469.192 422.425 469.955 422.043C470.146 421.853 470.337 421.853 470.528 421.662C471.1 421.28 471.482 421.089 472.055 420.707C472.246 420.516 472.628 420.325 472.818 420.135C473.009 419.944 473.391 419.753 473.582 419.562L853.249 95.2509V608.728Z" fill="black"/> | ||
| </svg> | ||
| </div> | ||
| </a> | ||
| <a href="" class="data-body"> | ||
| <div class="data-content"> | ||
| <p class="name-icon">GitHub</p> | ||
| <svg class="svg-icon" viewBox="0 0 634 619" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M317.003 0.330566C141.95 0.330566 0 142.254 0 317.333C0 457.393 90.8309 576.219 216.786 618.136C232.629 621.07 238.445 611.259 238.445 602.886C238.445 595.327 238.151 570.356 238.014 543.867C149.824 563.043 131.215 506.465 131.215 506.465C116.795 469.824 96.0173 460.081 96.0173 460.081C67.2557 440.406 98.1854 440.81 98.1854 440.81C130.018 443.047 146.779 473.477 146.779 473.477C175.053 521.94 220.938 507.93 239.028 499.83C241.873 479.341 250.088 465.357 259.154 457.44C188.743 449.425 114.726 422.243 114.726 300.776C114.726 266.167 127.11 237.888 147.388 215.688C144.097 207.704 133.246 175.462 150.459 131.797C150.459 131.797 177.079 123.277 237.657 164.291C262.944 157.268 290.063 153.745 317.003 153.624C343.943 153.745 371.082 157.268 396.416 164.291C456.921 123.277 483.504 131.797 483.504 131.797C500.759 175.462 489.903 207.704 486.612 215.688C506.938 237.888 519.237 266.167 519.237 300.776C519.237 422.532 445.078 449.341 374.489 457.189C385.859 467.026 395.991 486.318 395.991 515.893C395.991 558.308 395.623 592.445 395.623 602.886C395.623 611.322 401.329 621.207 417.398 618.094C543.285 576.13 634 457.346 634 317.333C634 142.254 492.071 0.330566 317.003 0.330566ZM118.728 451.907C118.03 453.482 115.552 453.955 113.295 452.873C110.995 451.839 109.704 449.692 110.449 448.112C111.132 446.49 113.615 446.039 115.909 447.125C118.213 448.159 119.526 450.327 118.728 451.907ZM134.321 465.821C132.809 467.223 129.854 466.572 127.848 464.356C125.775 462.146 125.386 459.191 126.919 457.768C128.478 456.367 131.344 457.023 133.423 459.233C135.497 461.469 135.901 464.404 134.321 465.821ZM145.018 483.623C143.076 484.972 139.9 483.707 137.937 480.888C135.994 478.069 135.994 474.688 137.979 473.334C139.947 471.979 143.076 473.197 145.065 475.995C147.002 478.861 147.002 482.242 145.018 483.623ZM163.11 504.24C161.372 506.156 157.671 505.641 154.963 503.027C152.191 500.471 151.419 496.843 153.162 494.927C154.921 493.006 158.643 493.547 161.372 496.14C164.123 498.691 164.963 502.345 163.11 504.24ZM186.491 511.2C185.725 513.683 182.161 514.811 178.57 513.756C174.985 512.67 172.638 509.761 173.363 507.252C174.108 504.753 177.688 503.578 181.305 504.706C184.885 505.788 187.237 508.675 186.491 511.2ZM213.101 514.152C213.19 516.766 210.145 518.934 206.376 518.981C202.586 519.065 199.52 516.95 199.478 514.378C199.478 511.737 202.455 509.59 206.245 509.527C210.014 509.454 213.101 511.554 213.101 514.152ZM239.241 513.15C239.693 515.701 237.073 518.321 233.33 519.019C229.651 519.691 226.244 518.116 225.776 515.586C225.32 512.971 227.986 510.352 231.661 509.675C235.409 509.024 238.764 510.557 239.241 513.15Z" fill="#161614"/> | ||
| </svg> | ||
|
|
||
| </div> | ||
| </a> | ||
| <a href="" class="data-body"> | ||
| <div class="data-content"> | ||
| <p class="name-icon">LinkdIn</p> | ||
| <svg class="svg-icon" viewBox="0 0 673 674" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <g filter="url(#filter0_d_29_10)"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M619.805 0.64856H53.0497C25.9907 0.64856 4 22.1154 4 48.5984V617.681C4 644.162 25.9907 665.667 53.0497 665.667H619.805C646.919 665.667 669 644.162 669 617.681V48.5984C669 22.1154 646.919 0.64856 619.805 0.64856ZM151.926 91.333C183.478 91.333 209.093 116.958 209.093 148.528C209.093 180.107 183.478 205.732 151.926 205.732C120.248 205.732 94.7039 180.107 94.7039 148.528C94.7039 116.958 120.248 91.333 151.926 91.333ZM102.533 249.091H201.265V566.447H102.533V249.091ZM357.688 249.958H263.141V567.314H361.655V410.35C361.655 368.949 369.487 328.837 420.809 328.837C471.427 328.837 472.06 376.183 472.06 412.984V567.314H570.683V393.266C570.683 307.794 552.228 242.083 452.361 242.083C404.373 242.083 372.191 268.394 359.039 293.343H357.688V249.958Z" fill="black"/> | ||
| </g> | ||
| <defs> | ||
| <filter id="filter0_d_29_10" x="0" y="0.648438" width="673" height="673.018" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> | ||
| <feFlood flood-opacity="0" result="BackgroundImageFix"/> | ||
| <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> | ||
| <feOffset dy="4"/> | ||
| <feGaussianBlur stdDeviation="2"/> | ||
| <feComposite in2="hardAlpha" operator="out"/> | ||
| <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> | ||
| <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_29_10"/> | ||
| <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_29_10" result="shape"/> | ||
| </filter> | ||
| </defs> | ||
| </svg> | ||
|
|
||
| </div> | ||
| </a> | ||
| <a href="" class="data-body"> | ||
| <div class="data-content"> | ||
| <p class="name-icon">Instagram</p> | ||
| <svg class="svg-icon" viewBox="0 0 672 672" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M335.895 0.00012207C244.671 0.00012207 233.232 0.38678 197.405 2.02148C161.653 3.6521 137.236 9.33075 115.87 17.6334C93.7823 26.2174 75.0505 37.7028 56.3765 56.3762C37.7031 75.0495 26.2177 93.7828 17.6339 115.871C9.33073 137.236 3.6526 161.653 2.02084 197.405C0.386459 233.232 0 244.671 0 335.895C0 427.117 0.386459 438.556 2.02084 474.383C3.6526 510.135 9.33073 534.552 17.6339 555.917C26.2177 578.005 37.7031 596.738 56.3765 615.412C75.0505 634.085 93.7823 645.571 115.87 654.155C137.236 662.457 161.653 668.136 197.405 669.767C233.232 671.401 244.671 671.788 335.895 671.788C427.117 671.788 438.556 671.401 474.383 669.767C510.135 668.136 534.552 662.457 555.917 654.155C578.005 645.571 596.737 634.085 615.412 615.412C634.085 596.738 645.571 578.005 654.155 555.917C662.457 534.552 668.136 510.135 669.767 474.383C671.401 438.556 671.788 427.117 671.788 335.895C671.788 244.671 671.401 233.232 669.767 197.405C668.136 161.653 662.457 137.236 654.155 115.871C645.571 93.7828 634.085 75.0495 615.412 56.3762C596.737 37.7028 578.005 26.2174 555.917 17.6334C534.552 9.33075 510.135 3.6521 474.383 2.02148C438.556 0.38678 427.117 0.00012207 335.895 0.00012207ZM335.895 60.5215C425.581 60.5215 436.205 60.8641 471.624 62.4801C504.373 63.9734 522.159 69.4455 533.995 74.0455C549.673 80.1388 560.863 87.4175 572.616 99.1708C584.371 110.925 591.649 122.115 597.743 137.793C602.343 149.629 607.815 167.415 609.308 200.164C610.924 235.583 611.267 246.207 611.267 335.895C611.267 425.581 610.924 436.205 609.308 471.624C607.815 504.373 602.343 522.159 597.743 533.995C591.649 549.674 584.371 560.863 572.616 572.616C560.863 584.371 549.673 591.65 533.995 597.743C522.159 602.343 504.373 607.815 471.624 609.308C436.211 610.924 425.588 611.267 335.895 611.267C246.2 611.267 235.579 610.924 200.164 609.308C167.415 607.815 149.629 602.343 137.793 597.743C122.115 591.65 110.925 584.371 99.1719 572.616C87.4183 560.863 80.1385 549.674 74.0453 533.995C69.4453 522.159 63.974 504.373 62.4797 471.624C60.8636 436.205 60.5213 425.581 60.5213 335.895C60.5213 246.207 60.8636 235.583 62.4797 200.164C63.974 167.415 69.4453 149.629 74.0453 137.793C80.1385 122.115 87.4177 110.925 99.1713 99.1721C110.925 87.4174 122.115 80.1388 137.793 74.0455C149.629 69.4455 167.415 63.9734 200.164 62.4801C235.583 60.8641 246.207 60.5215 335.895 60.5215ZM335.895 447.859C274.057 447.859 223.929 397.731 223.929 335.895C223.929 274.057 274.057 223.93 335.895 223.93C397.731 223.93 447.859 274.057 447.859 335.895C447.859 397.731 397.731 447.859 335.895 447.859ZM335.895 163.408C240.632 163.408 163.408 240.632 163.408 335.895C163.408 431.156 240.632 508.38 335.895 508.38C431.156 508.38 508.38 431.156 508.38 335.895C508.38 240.632 431.156 163.408 335.895 163.408ZM515.195 196.9C537.456 196.9 555.503 178.855 555.503 156.594C555.503 134.332 537.456 116.285 515.195 116.285C492.935 116.285 474.888 134.332 474.888 156.594C474.888 178.855 492.935 196.9 515.195 196.9Z" fill="#100F0D"/> | ||
| </svg> | ||
|
|
||
| </div> | ||
| </a> | ||
| <a href="" class="data-body no-margin"> | ||
| <div class="data-content"> | ||
| <p class="name-icon">Twitter</p> | ||
| <svg class="svg-icon" viewBox="0 0 808 657" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M807.667 78.0376C777.953 91.2187 746.013 100.123 712.499 104.129C746.704 83.6226 772.981 51.1503 785.355 12.455C753.335 31.4473 717.874 45.2341 680.128 52.6647C649.905 20.459 606.84 0.340016 559.18 0.340016C467.671 0.340016 393.476 74.5282 393.476 166.037C393.476 179.024 394.941 191.672 397.767 203.799C260.053 196.89 137.953 130.92 56.2289 30.6679C41.9639 55.1402 33.7927 83.6064 33.7927 113.975C33.7927 171.464 63.0452 222.182 107.51 251.896C80.3471 251.036 54.7953 243.581 32.4565 231.171C32.4407 231.862 32.4407 232.552 32.4407 233.255C32.4407 313.538 89.5593 380.507 165.36 395.734C151.458 399.52 136.819 401.547 121.707 401.547C111.029 401.547 100.649 400.506 90.5297 398.573C111.616 464.401 172.811 512.313 245.321 513.644C188.611 558.091 117.164 584.581 39.5283 584.581C26.1529 584.581 12.9621 583.794 0 582.264C73.3305 629.278 160.431 656.715 254.006 656.715C558.792 656.715 725.466 404.223 725.466 185.251C725.466 178.067 725.301 170.923 724.982 163.816C757.361 140.45 785.452 111.269 807.667 78.0376Z" fill="black"/> | ||
| </svg> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="ball-1"></div> | ||
| <div class="ball-2"></div> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.