├── index.html └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kyle 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | width: 100vw; 10 | height: 100vh; 11 | margin: 0; 12 | background-color: hsl(200, 50%, 12%); 13 | } 14 | 15 | .head { 16 | background: hsl(19, 76%, 88%); 17 | width: 300px; 18 | height: 340px; 19 | border-radius: 70% 70% 100% 100%; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .eyes, .brows { 26 | position: absolute; 27 | width: 195px; 28 | display: flex; 29 | justify-content: space-between; 30 | } 31 | 32 | .eye { 33 | background-color: white; 34 | height: 40px; 35 | width: 65px; 36 | border-radius: 100%; 37 | border-top: 3px solid hsl(19, 46%, 68%); 38 | border-bottom: 3px solid hsl(19, 46%, 68%); 39 | display: flex; 40 | justify-content: center; 41 | align-items: center; 42 | overflow: hidden; 43 | position: relative; 44 | } 45 | 46 | .eye::before { 47 | content: ''; 48 | position: absolute; 49 | width: 41px; 50 | height: 41px; 51 | background-color: hsl(78, 10%, 42%); 52 | border-radius: 100%; 53 | margin-left: 10px; 54 | margin-bottom: 5px; 55 | } 56 | 57 | .eye::after { 58 | content: ''; 59 | position: absolute; 60 | width: 15px; 61 | height: 15px; 62 | background-color: #333; 63 | border-radius: 100%; 64 | margin-left: 15px; 65 | margin-bottom: 7px; 66 | } 67 | 68 | .brow { 69 | width: 65px; 70 | height: 32px; 71 | border-top: 10px solid hsl(27, 33%, 28%); 72 | border-radius: 100%; 73 | margin-bottom: 35px; 74 | } 75 | 76 | .nose { 77 | position: absolute; 78 | border: 4px solid hsl(19, 46%, 68%); 79 | width: 40px; 80 | height: 30px; 81 | border-radius: 0 0 100% 100%; 82 | border-top: none; 83 | margin-top: 100px; 84 | } 85 | 86 | .mouth { 87 | position: absolute; 88 | width: 100px; 89 | height: 40px; 90 | background: white; 91 | margin-top: 225px; 92 | border-radius: 20% 20% 100% 100%; 93 | border: 4px solid hsl(19, 46%, 68%); 94 | border-right-width: 1px; 95 | border-left-width: 1px; 96 | border-top-width: 2px; 97 | } 98 | 99 | .ears { 100 | z-index: -1; 101 | position: absolute; 102 | width: 340px; 103 | display: flex; 104 | justify-content: space-between; 105 | } 106 | 107 | .ear { 108 | width: 25px; 109 | height: 70px; 110 | border: 2px solid hsl(19, 46%, 68%); 111 | background: hsl(19, 76%, 85%); 112 | border-radius: 0 100% 100% 0; 113 | } 114 | 115 | .ear:first-child { 116 | border-radius: 100% 0 0 100%; 117 | } 118 | 119 | .hair { 120 | position: absolute; 121 | width: 300px; 122 | height: 125px; 123 | background-color: hsl(27, 33%, 28%); 124 | margin-bottom: 300px; 125 | border-radius: 50% 100% 0 0; 126 | } 127 | 128 | .hair::before, 129 | .hair::after { 130 | content: ''; 131 | position: absolute; 132 | background-color: hsl(27, 33%, 28%); 133 | height: 100px; 134 | width: 10px; 135 | transform: translateY(100%); 136 | } 137 | 138 | .hair::after { 139 | right: 0; 140 | } 141 | 142 | .hair-corner { 143 | position: absolute; 144 | width: 100%; 145 | } 146 | 147 | .hair-corner::before, 148 | .hair-corner::after { 149 | content: ''; 150 | position: absolute; 151 | width: 14px; 152 | height: 20px; 153 | transform: rotate(45deg); 154 | background-color: hsl(27, 33%, 28%); 155 | top: 115px; 156 | left: 5px; 157 | } 158 | 159 | .hair-corner::after { 160 | left: initial; 161 | right: 5px; 162 | transform: rotate(-45deg); 163 | } --------------------------------------------------------------------------------