├── .gitignore └── animation-1 ├── index.html ├── logo.svg └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /animation-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animation 1 8 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /animation-1/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /animation-1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: linear-gradient(#0d0d0d, #212121); 4 | font-family: "Euclid Circular A", "Poppins"; 5 | color: #d6dfed; 6 | } 7 | 8 | html, 9 | body { 10 | height: 100%; 11 | } 12 | 13 | .background { 14 | position: absolute; 15 | z-index: -1; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | bottom: 0; 20 | } 21 | 22 | ul { 23 | display: flex; 24 | list-style: none; 25 | padding: 0; 26 | margin: 0; 27 | } 28 | 29 | .socials { 30 | gap: 20px; 31 | } 32 | 33 | .socials a { 34 | font-size: 24px; 35 | } 36 | 37 | .links { 38 | gap: 10px; 39 | } 40 | 41 | .legal { 42 | font-size: 12px; 43 | margin: 0; 44 | } 45 | 46 | svg { 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | width: 100%; 51 | height: 100%; 52 | transform: scaleY(3) scaleX(2.25); 53 | transform-origin: bottom; 54 | box-sizing: border-box; 55 | display: block; 56 | pointer-events: none; 57 | } 58 | 59 | footer { 60 | position: fixed; 61 | left: 0; 62 | bottom: 12px; 63 | display: flex; 64 | width: 100%; 65 | height: 370px; 66 | } 67 | 68 | section { 69 | display: flex; 70 | flex-direction: column; 71 | justify-content: flex-end; 72 | gap: 30px; 73 | padding-bottom: 80px; 74 | padding-left: 60px; 75 | width: 100%; 76 | } 77 | 78 | @media (width > 420px) { 79 | section { 80 | align-items: center; 81 | padding-left: 0; 82 | gap: 20px; 83 | } 84 | 85 | .links { 86 | gap: 20px; 87 | } 88 | } 89 | --------------------------------------------------------------------------------