<div class="container">
<div class="ears"></div>
<div class="beard"></div>
<div class="mouth"></div>
<div class="hat"></div>
<div class="hair"></div>
<div class="santa">
<div class="moustache"></div>
</div>
</div>
body {
background-color: #060034;
}
.container {
height: 42.87em;
width: 37.5em;
/* border: 1px solid #fff; */
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.santa {
background-color: #edbb93;
height: 6.25em;
width: 18.75em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 17.5em;
}
.ears {
position: absolute;
height: 4.37em;
width: 23.75em;
background-color: #e59076;
transform: translateX(-50%);
left: 50%;
top: 18.75em;
border-radius: 3.12em;
}
.santa:before {
content: "";
position: absolute;
height: 1.56em;
width: 1.56em;
background-color: #0c2137;
border-radius: 50%;
top: 2.5em;
left: 5em;
box-shadow: 6.25em 0 #0c2137;
}
.moustache {
position: absolute;
background-color: #e3e1ed;
height: 4.37em;
width: 11.25em;
left: -2.21em;
top: 5em;
border-radius: 3.12em 0;
}
.moustache:before {
position: absolute;
content: "";
background-color: #e3e1ed;
height: 4.37em;
width: 11.25em;
left: 11.25em;
border-radius: 0 3.12em;
}
.beard {
background-color: #bfc2e0;
height: 15.62em;
width: 6.25em;
border-radius: 6.87em;
position: absolute;
top: 21.25em;
left: 25em;
box-shadow: -18.75em 0 #bfc2e0;
}
.beard:before {
content: "";
position: absolute;
background-color: #d4d2e8;
height: 17.5em;
width: 6.87em;
border-radius: 6.78em;
top: 1.87em;
right: 5em;
box-shadow: -8.75em 0 #d4d2e8;
}
.beard:after {
content: "";
position: absolute;
background-color: #e3e1ed;
height: 20.62em;
width: 6.25em;
border-radius: 6.87em;
top: 3.12em;
right: 9.68em;
}
.mouth {
position: absolute;
background: linear-gradient(#ffffff 1.87em, #0c2137 1.87em);
height: 5.62em;
width: 4.37em;
top: 23.75em;
left: 16.25em;
border-radius: 0 0 4.37em 4.37em;
overflow: hidden;
}
.mouth:before {
content: "";
position: absolute;
background-color: #ea385f;
height: 2.81em;
width: 3.43em;
left: -0.62em;
top: 3.43em;
border-radius: 0.62em;
}
.hair {
background-color: #c3c1df;
height: 5em;
width: 23.12em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 15em;
border-radius: 5em;
}
.hair:before {
position: absolute;
content: "";
background-color: #d2d3e6;
height: 6.25em;
width: 25.62em;
left: -1.25em;
bottom: 2.5em;
border-radius: 1.25em;
}
.hair:after {
position: absolute;
content: "";
background-color: #ea385f;
height: 10em;
width: 23.75em;
bottom: 8.75em;
border-radius: 16.25em 0 0 0;
}
.hat {
position: absolute;
background-color: #c82a50;
height: 6.25em;
width: 3.12em;
left: 30.81em;
top: 1.25em;
border-radius: 0 2.5em 0 0;
}
.hat:before {
position: absolute;
content: "";
background-color: #e1e0ec;
height: 11.25em;
width: 11.25em;
top: 4.37em;
left: -2.87em;
border-radius: 50%;
}
@media screen and (max-width: 800px) {
.container {
font-size: 0.75em;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.