├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
20 |
34 |
43 |
44 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background-color: #BDBDBD;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | width: 100vw;
13 | }
14 |
15 | .emoji {
16 | --emoji-size: 200px;
17 | margin: 1rem;
18 | width: var(--emoji-size);
19 | height: var(--emoji-size);
20 | }
21 |
22 | .head {
23 | border-radius: 50%;
24 | height: 100%;
25 | width: 100%;
26 | background-color: #FFC83D;
27 | overflow: hidden;
28 | position: relative;
29 | z-index: -1;
30 | }
31 |
32 | .eyes {
33 | position: absolute;
34 | top: calc(var(--emoji-size) * .25);
35 | left: calc(var(--emoji-size) * .5);
36 | }
37 |
38 | .eye {
39 | position: absolute;
40 | width: calc(var(--emoji-size) * .075);
41 | height: calc(var(--emoji-size) * .15);
42 | background-color: black;
43 | border-radius: 50%;
44 | }
45 |
46 | .eye-left {
47 | left: calc(var(--emoji-size) * -.2);
48 | }
49 |
50 | .eye-right {
51 | right: calc(var(--emoji-size) * -.2);
52 | }
53 |
54 | .mouth {
55 | position: absolute;
56 | bottom: calc(var(--emoji-size) * .15);
57 | left: calc(var(--emoji-size) * .5);
58 | transform: translateX(-50%);
59 | background-color: black;
60 | }
61 |
62 | .smile {
63 | --mouth-height: calc(var(--emoji-size) * .3);
64 | width: calc(var(--emoji-size) * .6);
65 | height: var(--mouth-height);
66 | border-radius: 5% 5% var(--mouth-height) var(--mouth-height);
67 | }
68 |
69 | .open-mouth {
70 | width: calc(var(--emoji-size) * .25);
71 | height: calc(var(--emoji-size) * .3);
72 | border-radius: 50%;
73 | }
74 |
75 | .face-mask {
76 | left: calc(var(--emoji-size) * .2);
77 | transform: none;
78 | width: calc(var(--emoji-size) * .6);
79 | height: calc(var(--emoji-size) * .35);
80 | border-radius: 10%;
81 | background-color: white;
82 | border: calc(var(--emoji-size) * .02) solid #999;
83 | }
84 |
85 | .strap {
86 | position: absolute;
87 | background-color: white;
88 | border: calc(var(--emoji-size) * .02) solid #999;
89 | width: calc(var(--emoji-size) * .5);
90 | height: calc(var(--emoji-size) * .1);
91 | z-index: -2;
92 | }
93 |
94 | .strap-top-left {
95 | transform: rotate(20deg);
96 | top: calc(var(--emoji-size) * -.05);
97 | left: calc(var(--emoji-size) * -.4);
98 | }
99 |
100 | .strap-top-right {
101 | transform: rotate(-20deg);
102 | top: calc(var(--emoji-size) * -.05);
103 | right: calc(var(--emoji-size) * -.4);
104 | }
105 |
106 | .strap-bottom-left {
107 | transform: rotate(-30deg);
108 | bottom: calc(var(--emoji-size) * -.06);
109 | left: calc(var(--emoji-size) * -.4);
110 | }
111 |
112 | .strap-bottom-right {
113 | transform: rotate(30deg);
114 | bottom: calc(var(--emoji-size) * -.06);
115 | right: calc(var(--emoji-size) * -.4);
116 | }
--------------------------------------------------------------------------------