@use postcss-each;
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');
@import url('https://csschristmascalendar.com/assets/freeserif/font.css');
body {
background: url(https://i.imgur.com/FnJbmo1.jpg) no-repeat top center #8ac1d6;
background-size: cover;
font-family: 'Mountains of Christmas', cursive;
display: flex;
flex-direction: column;
}
/* calendar layout */
.calendar-grid {
display: grid;
width: 94%;
max-width: 900px;
margin: 3% auto 2rem auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 1rem;
transform: translate3d(0px, 0px, 0px);
grid-template-areas: 'title title title'
'day22 day3 day8'
'day9 day18 day11'
'day2 day24 day13'
'day12 day10 day4'
'day20 day1 day7'
'day5 day14 day17'
'day16 day23 day6'
'day15 day21 day19'
}
/* media query */
@media only screen and (min-width: 576px) {
.calendar-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: 'title title title day5 day17 day15'
'title title title day11 day20 day16'
'title title title day1 day18 day12'
'day6 day22 day14 day24 day24 day4 '
'day10 day21 day2 day24 day24 day8'
'day3 day9 day7 day13 day23 day19';
}
}
/* title */
.calendar-grid .title {
grid-area: title;
display: flex;
align-items: center;
justify-content: center;
}
.calendar-grid .title h1 {
font-size: 2rem;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: row;
}
@media only screen and (min-width: 576px) {
.calendar-grid .title h1 {
font-size: 5rem;
flex-direction: column;
}
}
.calendar-grid .title-1 {
color: #9c163f;
display: block;
transform: rotate(-10deg);
margin-right: 1rem;
}
.calendar-grid .title-2 {
color: #413486;
display: block;
transform: rotate(5deg);
margin-right: 1rem;
}
.calendar-grid .title-3 {
display: block;
transform: rotate(-5deg);
}
/* opening/closing doors */
.calendar-grid .day {
transform: translate3d(0px, 0px, 0px);
position: relative;
}
.calendar-grid input {
display: none;
}
.calendar-grid label {
perspective: 1000px;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
min-height: 100%;
width: 100%;
height: calc(85vw / 3);
position: relative;
}
@media only screen and (min-width: 576px) {
.calendar-grid label {
height: 136px;
}
}
.calendar-grid .door {
width: 100%;
transform-style: preserve-3d;
transition: all 300ms;
border: 2px dashed rgba(0, 0, 0, 0.2);
border-radius: 0.6rem;
transform-origin: 0% 50%;
}
.calendar-grid .door div {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
border-radius: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
color: #10303c;
font-size: 3em;
font-weight: bold;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}
.calendar-grid .door .back {
background: linear-gradient(
to right,
#384044,
#2e454f
);
transform: rotateY(-180deg);
}
.calendar-grid label:hover .door {
border-color: #10303c;
}
.calendar-grid :checked + .door {
transform: rotateY(-180deg);
border-color: #10303c;
border-style: solid;
}
.calendar-grid .title-container {
opacity: 0;
transform: translateY(-1rem);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1000;
bottom: -3.7rem;
left: -10rem;
right: -10rem;
transition: all 400ms ease-in-out;
}
.calendar-grid :checked ~ .title-container {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.calendar-grid .title-container a {
position: relative;
display: inline-block;
border-radius: 0.25rem;
padding: 0.5rem 1rem;
background-color: #1d3557;
color: #f1faee;
font-size: 1.2rem;
white-space: nowrap;
text-decoration: none;
}
.calendar-grid .title-container a::before {
content: '';
display: block;
border-radius: 0.75rem;
background: repeating-linear-gradient(-45deg,
#f1faee 0,
#f1faee 0.5rem,
#e63946 0.5rem,
#e63946 1rem
);
background-size: 1.44rem 1.44rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
position: absolute;
z-index: -1;
top: -0.5rem;
right: -0.5rem;
bottom: -0.5rem;
left: -0.5rem;
animation: calendar-item-link 0.6s infinite linear;
animation-play-state: paused;
}
.calendar-grid .title-container a:hover::before {
animation-play-state: running;
}
@keyframes calendar-item-link {
0% { background-position: 0 0; }
100% { background-position: 1.44rem 0; }
}
.calendar-grid .inside {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0.6rem;
overflow: hidden;
opacity: 0;
transition: opacity 300ms ease-in-out;
}
.calendar-grid .inside-empty {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: #2f4f8c;
color: #ffffff;
}
.calendar-grid :checked ~ .inside {
opacity: 1;
}
footer {
margin-bottom: 1rem;
margin-left: auto;
margin-right: 1rem;
opacity: 0.5;
transition: opacity 400ms ease-in-out;
}
footer:hover {
opacity: 1;
}
footer div {
display: flex;
align-items: center;
background-color: #161e2b;
border-radius: 0.4rem;
overflow: hidden;
}
footer .footer-info {
width: 2.8rem;
text-align: center;
font-family: 'Times New Roman', serif;
font-weight: bold;
font-style: italic;
font-size: 2.6rem;
color: #ffffff;
}
footer div div {
position: relative;
margin-right: -15.3rem;
display: inline-block;
border-radius: 0.4rem;
padding: 0.6rem 0.8rem 0.6rem 0.2rem;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 0.8rem;
color: #80a7e7;
line-height: 1.6rem;
transition: all 500ms ease-in-out;
}
@media only screen and (min-width: 576px) {
footer div div {
font-size: 1rem;
margin-right: -18.5rem;
}
}
footer:hover div div {
margin-right: 0px;
}
footer a {
margin-left: 0.2rem;
color: #ffffff;
}
/* Calendar day positions and z-indexes */
.calendar-grid .day-1 { grid-area: day1; z-index: 11; }
.calendar-grid .day-2 { grid-area: day2; z-index: 16; }
.calendar-grid .day-3 { grid-area: day3; z-index: 23; }
.calendar-grid .day-4 { grid-area: day4; z-index: 15; }
.calendar-grid .day-5 { grid-area: day5; z-index: 7; }
.calendar-grid .day-6 { grid-area: day6; z-index: 6; }
.calendar-grid .day-7 { grid-area: day7; z-index: 12; }
.calendar-grid .day-8 { grid-area: day8; z-index: 24; }
.calendar-grid .day-9 { grid-area: day9; z-index: 19; }
.calendar-grid .day-10 { grid-area: day10; z-index: 14; }
.calendar-grid .day-11 { grid-area: day11; z-index: 21; }
.calendar-grid .day-12 { grid-area: day12; z-index: 13; }
.calendar-grid .day-13 { grid-area: day13; z-index: 18; }
.calendar-grid .day-14 { grid-area: day14; z-index: 8; }
.calendar-grid .day-15 { grid-area: day15; z-index: 1; }
.calendar-grid .day-16 { grid-area: day16; z-index: 4; }
.calendar-grid .day-17 { grid-area: day17; z-index: 9; }
.calendar-grid .day-18 { grid-area: day18; z-index: 20; }
.calendar-grid .day-19 { grid-area: day19; z-index: 3; }
.calendar-grid .day-20 { grid-area: day20; z-index: 10; }
.calendar-grid .day-21 { grid-area: day21; z-index: 2; }
.calendar-grid .day-22 { grid-area: day22; z-index: 22; }
.calendar-grid .day-23 { grid-area: day23; z-index: 5; }
.calendar-grid .day-24 { grid-area: day24; z-index: 17; }
@media only screen and (min-width: 576px) {
.calendar-grid .day-1 { z-index: 16; }
.calendar-grid .day-2 { z-index: 9; }
.calendar-grid .day-3 { z-index: 1; }
.calendar-grid .day-4 { z-index: 15; }
.calendar-grid .day-5 { z-index: 22; }
.calendar-grid .day-6 { z-index: 11; }
.calendar-grid .day-7 { z-index: 3; }
.calendar-grid .day-8 { z-index: 10; }
.calendar-grid .day-9 { z-index: 2; }
.calendar-grid .day-10 { z-index: 7; }
.calendar-grid .day-11 { z-index: 19; }
.calendar-grid .day-12 { z-index: 18; }
.calendar-grid .day-13 { z-index: 4; }
.calendar-grid .day-14 { z-index: 13; }
.calendar-grid .day-15 { z-index: 24; }
.calendar-grid .day-16 { z-index: 21; }
.calendar-grid .day-17 { z-index: 23; }
.calendar-grid .day-18 { z-index: 17; }
.calendar-grid .day-19 { z-index: 6; }
.calendar-grid .day-20 { z-index: 20; }
.calendar-grid .day-21 { z-index: 8; }
.calendar-grid .day-22 { z-index: 12; }
.calendar-grid .day-23 { z-index: 5; }
.calendar-grid .day-24 { z-index: 14; }
}
@media only screen and (max-width: 575px) {
.calendar-grid .day-2 .title-container,
.calendar-grid .day-5 .title-container,
.calendar-grid .day-9 .title-container,
.calendar-grid .day-12 .title-container,
.calendar-grid .day-15 .title-container,
.calendar-grid .day-16 .title-container,
.calendar-grid .day-20 .title-container,
.calendar-grid .day-22 .title-container {
left: 0;
right: auto;
}
.calendar-grid .day-4 .title-container,
.calendar-grid .day-6 .title-container,
.calendar-grid .day-7 .title-container,
.calendar-grid .day-8 .title-container,
.calendar-grid .day-11 .title-container,
.calendar-grid .day-13 .title-container,
.calendar-grid .day-17 .title-container,
.calendar-grid .day-19 .title-container {
left: auto;
right: 0;
}
}
/**
* CALENDAR DAYS
*/
/**
* Day 1 - Gingerbread man
* https://codepen.io/johnnyfekete/pen/ZEpGerj
*/
.gingerbread-man-container {
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
75deg,
transparent,
transparent 20px,
#9E1628 10px,
#9E1628 40px
),
linear-gradient(
to bottom,
#B11E31,
#C23446
);
}
.gingerbread-man-container::after {
content: '';
display: block;
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0) 50%);
}
.gingerbread-man {
--ginger-color: #c5753d;
--dark-ginger-color: #974919;
--white-color: #f0e5d9;
--green-color: #50af52;
--red-color: #b22922;
transform: scale(0.46) translateY(-6.5rem);
position: relative;
}
@media only screen and (min-width: 576px) {
.gingerbread-man {
transform: scale(0.56) translateY(-3.7rem);
}
}
.gingerbread-man .head {
width: 5rem;
height: 5rem;
position: relative;
}
.gingerbread-man .head::after {
content: '';
display: block;
position: absolute;
width: 5rem;
height: 5rem;
background-color: var(--ginger-color);
border-radius: 2.2rem;
transform: rotate(-15deg);
}
.gingerbread-man .eye {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background-color: var(--white-color);
box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 2;
}
.gingerbread-man .eye.eye--left {
left: 22%;
top: 45%;
}
.gingerbread-man .eye.eye--right {
right: 25%;
top: 40%;
}
.gingerbread-man .eyebrow {
position: absolute;
z-index: 2;
height: 0.3rem;
border-radius: 0.3rem;
background-color: var(--green-color);
box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.5), inset -1px 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.gingerbread-man .eyebrow.eyebrow--left {
top: 1.6rem;
left: 0.8rem;
transform: rotate(-35deg);
width: 0.9rem;
height: 0.25rem;
}
.gingerbread-man .eyebrow.eyebrow--right {
top: 1.35rem;
right: 1.32rem;
transform: rotate(10deg);
width: 0.9rem;
height: 0.3rem;
}
.gingerbread-man .mouth {
position: absolute;
z-index: 2;
width: 3rem;
height: 3rem;
top: 1.7rem;
left: 1rem;
transform-origin: center center;
transform: rotate(-150deg);
}
.gingerbread-man .mouth div {
box-sizing: border-box;
position: absolute;
}
.gingerbread-man .mouth__lower-lip {
width: 1.5rem;
height: 1.5rem;
overflow: hidden;
}
.gingerbread-man .mouth__lower-lip::after {
content: '';
display: block;
width: 3rem;
height: 3rem;
border: 3px solid var(--red-color);
border-radius: 50%;
}
.gingerbread-man .mouth__left-lip {
width: 0.75rem;
height: 1.5rem;
overflow: hidden;
left: 1.5rem;
top: 0rem;
}
.gingerbread-man .mouth__left-lip::after {
content: '';
display: block;
width: 0.75rem;
height: 0.75rem;
margin-left: -0.5rem;
border: 3px solid var(--red-color);
border-radius: 50%;
}
.gingerbread-man .mouth__right-lip {
width: 1rem;
height: 0.5rem;
overflow: hidden;
left: 0rem;
top: 1.5rem;
}
.gingerbread-man .mouth__right-lip::after {
content: '';
display: block;
width: 0.5rem;
height: 0.5rem;
margin-top: -0.4rem;
border: 3px solid var(--red-color);
border-radius: 50%;
}
.gingerbread-man .mouth__upper-lip {
width: 0.8rem;
height: 0.7rem;
overflow: hidden;
left: 0.7rem;
top: 0.8rem;
}
.gingerbread-man .mouth__upper-lip::after {
content: '';
display: block;
width: 1.8rem;
height: 1.0rem;
margin-top: 0.1rem;
border: 3px solid var(--red-color);
border-radius: 50%;
}
.gingerbread-man .body {
position: relative;
width: 5rem;
height: 8rem;
}
.gingerbread-man .arm {
width: 5rem;
height: 2.2rem;
background-color: var(--ginger-color);
background: linear-gradient(to right, var(--dark-ginger-color) 0%, var(--ginger-color) 50%);
border-radius: 1rem;
position: absolute;
}
.gingerbread-man .arm::after {
content: '\00a0\00a0\00a0\00a0\00a0';
width: 2.2rem;
height: 1rem;
overflow: hidden;
display: block;
font-size: 2rem;
line-height: 0;
text-decoration: underline white wavy;
transform: rotate(90deg) translateX(0.6rem) translateY(-0.5rem);
transform-origin: center center;
}
.gingerbread-man .arm.arm--left {
transform: rotate(-35deg) translateX(-1.5rem) translateY(-0.8rem);
}
.gingerbread-man .arm.arm--right {
transform: rotate(-145deg) translateX(-1.5rem) translateY(1rem);
}
.gingerbread-man .leg {
width: 2.2rem;
height: 8rem;
background-color: var(--ginger-color);
background: linear-gradient(to top, var(--dark-ginger-color) 0%, var(--ginger-color) 40%);
border-radius: 1rem;
position: absolute;
}
.gingerbread-man .leg::after {
content: '\00a0\00a0\00a0\00a0\00a0';
width: 2.2rem;
height: 1rem;
overflow: hidden;
display: block;
font-size: 2rem;
line-height: 0;
text-decoration: underline white wavy;
position: absolute;
bottom: 1.2rem;
}
.gingerbread-man .leg.leg--left {
transform: rotate(10deg) translateX(0.5rem) translateY(0rem);
}
.gingerbread-man .leg.leg--right {
transform: rotate(-10deg) translateX(2.4rem) translateY(0.4rem);
}
.gingerbread-man .belt::after {
content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
width: 4.1rem;
height: 2rem;
overflow: hidden;
display: block;
font-size: 1.8rem;
line-height: 0;
text-decoration: underline white wavy;
position: absolute;
top: 3.3rem;
left: 0.5rem;
z-index: 3;
transform: rotate(4deg);
}
.gingerbread-man .button {
position: absolute;
width: 1.2rem;
height: 1.1rem;
border-radius: 50%;
background-color: var(--white-color);
}
.gingerbread-man .button::after {
content: '';
display: block;
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
background: var(--green-color);
box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset -3px 3px 5px 0 rgba(255, 255, 255, 0.2);
margin-left: 0.15rem;
}
.gingerbread-man .button.button--top {
left: 2rem;
top: 0.3rem;
}
.gingerbread-man .button.button--bottom {
left: 2.1rem;
top: 2.1rem;
transform: rotate(145deg)
}
/**
* Day 2 - Snowflake
* https://codepen.io/johnnyfekete/pen/ExgVmaJ
*/
.snowflake-container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, red 0, #002255 100%);
}
.snowflake-resize {
transform: scale(0.3);
}
@media only screen and (min-width: 576px) {
.snowflake-resize {
transform: scale(0.35);
}
}
.snowflake {
--snowflake-color: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center center;
animation: rotation 20s infinite linear;
}
.snowflake div {
position: absolute;
background-color: var(--snowflake-color);
width: 1rem;
border-radius: 0.5rem;
}
.snowflake .side {
bottom: -0.5rem;
left: -0.5rem;
height: 10rem;
transform-origin: 0.5rem 9.5rem;
}
.snowflake .side-l-1 {
bottom: 2.5rem;
left: 0rem;
height: 5rem;
transform-origin: 0.5rem 4.5rem;
transform: rotate(-60deg);
}
.snowflake .side-r-1 {
bottom: 2.5rem;
left: 0rem;
height: 5rem;
transform-origin: 0.5rem 4.5rem;
transform: rotate(60deg);
}
.snowflake .side-l-2 {
bottom: 6.5rem;
left: 0rem;
width: 0.8rem;
height: 3rem;
transform-origin: 0.4rem 2.5rem;
transform: rotate(-45deg);
}
.snowflake .side-r-2 {
bottom: 6.5rem;
left: 0.2rem;
width: 0.8rem;
height: 3rem;
border-radius: 0.5rem;
transform-origin: 0.4rem 2.5rem;
transform: rotate(45deg);
}
.snowflake .side-2 { transform: rotate(60deg); }
.snowflake .side-3 { transform: rotate(120deg); }
.snowflake .side-4 { transform: rotate(180deg); }
.snowflake .side-5 { transform: rotate(240deg); }
.snowflake .side-6 { transform: rotate(300deg); }
@keyframes snowflake-rotation-large {
from {
transform: rotate(0deg) scale(0.35);
}
to {
transform: rotate(359deg) scale(0.35);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/**
* Day 3 - Stocking
* https://codepen.io/johnnyfekete/pen/BaLjoaV
*/
.stocking-container {
--stocking-background: #b2b09b;
--stocking-red: #a93f55;
--stocking-heel: #f2545b;
--stocking-blue: rgba(25, 50, 60, 0.4);
--stocking-wool: #f3f7f0;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, var(--stocking-background) 0, rgb(25, 50, 60) 200%);
}
.stocking {
position: absolute;
transform: rotate(20deg) scale(0.3) translateY(-1rem);
}
@media only screen and (min-width: 576px) {
.stocking {
transform: rotate(20deg) scale(0.35) translateY(-1rem);
}
}
.stocking .stocking-hanger {
width: 0.3rem;
height: 1.5rem;
border-radius: 0.5rem;
background-color: var(--stocking-heel);
transform-origin: bottom center;
transform: rotate(-20deg);
}
.stocking .stocking-wool {
position: relative;
z-index: 3;
width: 6.4rem;
height: 4rem;
margin-left: -0.2rem;
background-color: var(--stocking-wool);
}
.stocking .stocking-wool::after {
content: '';
position: absolute;
display: block;
width: 7.4rem;
height: 5rem;
top: -0.5rem;
left: -0.5rem;
background-image:
radial-gradient(var(--stocking-wool) 50%, rgba(255, 255, 255, 0) 70%);
background-position: 0 0;
background-size: 0.925rem 1rem;
}
.stocking .stocking-leg {
position: relative;
width: 6rem;
height: 10rem;
border-radius: 0 0 0 2rem;
background: repeating-linear-gradient(
20deg,
transparent,
transparent 10px,
var(--stocking-blue) 5px,
var(--stocking-blue) 20px
),
repeating-linear-gradient(
110deg,
transparent,
transparent 10px,
var(--stocking-blue) 5px,
var(--stocking-blue) 20px
);
background-color: var(--stocking-red);
overflow: hidden;
}
.stocking .stocking-foot {
position: absolute;
width: 5rem;
height: 10rem;
border-radius: 2rem;
background: repeating-linear-gradient(
20deg,
transparent,
transparent 10px,
var(--stocking-blue) 5px,
var(--stocking-blue) 20px
),
repeating-linear-gradient(
110deg,
transparent,
transparent 10px,
var(--stocking-blue) 5px,
var(--stocking-blue) 20px
);
background-color: var(--stocking-red);
transform-origin: top left;
transform: rotate(-70deg) translateY(-0.6rem);
overflow: hidden;
}
.stocking .stocking-heel {
position: relative;
z-index: 2;
width: 6rem;
height: 6rem;
border-radius: 4rem;
background-color: var(--stocking-heel);
}
.stocking .stocking-leg .stocking-heel {
position: absolute;
bottom: -3rem;
margin-left: -3rem;
}
.stocking .stocking-foot .stocking-heel {
margin-left: -3rem;
margin-top: -2rem;
}
/**
* Day 4 - Animated 3D gift box
* https://codepen.io/johnnyfekete/pen/NWRxmwG
*/
.gift-box-day {
background: linear-gradient(200deg, #1d3557 33%, #457b9d 33%, #457b9d 66%, #a8dadc 66% );
display: flex;
align-items: center;
justify-content: center;
}
.gift-box-container {
width: 200px;
height: 200px;
perspective: 400px;
transform: translateY(-40px) scale(0.3);
}
@media only screen and (min-width: 576px) {
.gift-box-container {
transform: translateY(-20px) scale(0.4);
}
}
.gift-box {
--gift-box-color: #e63946;
--gift-box-edge-color: #590b11;
--wrap-color: #f1faee;
--wrap-ribbon-color: #c0e4e6;
--wrap-top-color: #d8efef;
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
animation: rotation-3d 20s infinite linear;
}
.gift-box .gift-box__side,
.gift-box .gift-box__end {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid var(--gift-box-edge-color);
}
.gift-box .gift-box-lid__side {
position: absolute;
width: 220px;
height: 50px;
border: 2px solid var(--gift-box-edge-color);
}
.gift-box .gift-box-lid__end {
position: absolute;
width: 220px;
height: 220px;
border: 2px solid var(--gift-box-edge-color);
}
.gift-box .gift-box__side,
.gift-box .gift-box-lid__side {
background: linear-gradient(to right,
var(--gift-box-color) 40%,
var(--wrap-color) 40%,
var(--wrap-color) 60%,
var(--gift-box-color) 60%
);
}
.gift-box .gift-box__end,
.gift-box .gift-box-lid__end {
background: linear-gradient(to right,
transparent 40%,
var(--wrap-top-color) 40%,
var(--wrap-top-color) 60%,
transparent 60%
),
linear-gradient(to bottom,
var(--gift-box-color) 40%,
var(--wrap-color) 40%,
var(--wrap-color) 60%,
var(--gift-box-color) 60%
);
}
.gift-box .gift-box__side--front { transform: rotateY(0deg) translateZ(100px); }
.gift-box .gift-box__side--back { transform: rotateY(180deg) translateZ(100px); }
.gift-box .gift-box__side--left { transform: rotateY(-90deg) translateZ(100px); }
.gift-box .gift-box__side--right { transform: rotateY(90deg) translateZ(100px); }
.gift-box .gift-box__side--top { transform: rotateX(90deg) translateZ(100px); }
.gift-box .gift-box__side--bottom { transform: rotateX(-90deg) translateZ(100px); }
.gift-box .gift-box-lid__side--front { transform: rotateY(0deg) translateZ(110px) translateX(-10px) translateY(-10px); }
.gift-box .gift-box-lid__side--back { transform: rotateY(180deg) translateZ(110px) translateX(10px) translateY(-10px); }
.gift-box .gift-box-lid__side--left { transform: rotateY(-90deg) translateZ(120px) translateY(-10px); }
.gift-box .gift-box-lid__side--right { transform: rotateY(90deg) translateZ(100px) translateY(-10px); }
.gift-box .gift-box-lid__side--top { transform: rotateX(90deg) translateZ(120px) translateX(-10px) translateY(0); }
.gift-box .ribbon-l {
position: absolute;
width: 70px;
height: 70px;
border: 2px solid var(--wrap-ribbon-color);
border-radius: 50% 50% 0 50%;
transform-style: preserve-3d;
transform-origin: 50% 50%;
transform: rotateX(75deg)
rotateY(90deg)
/* use a CSS variable for the translate, defined in CSS */
translateZ(calc(80px - var(--gift-box-position)))
translateX(-85px)
translateY(-75px)
skewY(30deg);
}
.gift-box .ribbon-r {
position: absolute;
width: 70px;
height: 70px;
border: 2px solid var(--wrap-ribbon-color);
border-radius: 50% 50% 0 50%;
transform-style: preserve-3d;
transform-origin: 50% 50%;
transform: rotateX(-5deg)
rotateY(90deg)
/* use a CSS variable for the translate, defined in CSS */
translateZ(calc(80px - var(--gift-box-position)))
translateX(-30px)
translateY(-110px)
skewY(30deg);
}
.ribbon-l-end {
position: absolute;
width: 40px;
height: 110px;
background:
linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%),
linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
border: 2px solid var(--gift-box-edge-color);
border-top: none;
border-bottom: none;
transform: rotateX(-70deg) translateX(80px) translateY(-80px) translateZ(-60px);
}
.ribbon-r-end {
position: absolute;
width: 40px;
height: 110px;
background:
linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%),
linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
border: 2px solid var(--gift-box-edge-color);
border-top: none;
border-bottom: none;
transform: rotateX(80deg) translateX(80px) translateY(-80px) translateZ(60px);
}
@keyframes rotation-3d {
from {
transform: translateZ(-100px) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg)
}
to {
transform: translateZ(-100px) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg)
}
}
/**
* Day 5 - Sledge in the snow
* https://codepen.io/johnnyfekete/pen/wvzGoRr
*/
.sledge-container {
background: linear-gradient(-20deg, #f8f9fa 60%, #3d405b 60%);
display: flex;
align-items: center;
justify-content: center;
}
.sledge {
--sledge-runner: #6c757d;
--sledge-wood-light: #9c6644;
--sledge-wood-dark: #7f5539;
--sledge-edge: #2d1e14;
width: 20rem;
height: 10rem;
position: relative;
transform: rotate(-16deg) scale(0.25) translateX(-7rem) translateY(-5rem);
}
@media only screen and (min-width: 576px) {
.sledge {
transform: rotate(-16deg) scale(0.3) translateX(-7rem);
}
}
.sledge .sledge-runner__front {
width: 4rem;
height: 4rem;
overflow: hidden;
position: absolute;
top: 6rem;
}
.sledge .sledge-runner__front::after {
content: '';
display: block;
margin-top: -4rem;
width: 8rem;
height: 8rem;
background: radial-gradient(closest-side, transparent 75%, var(--sledge-runner) 27%, var(--sledge-runner) 99%, transparent 100%);
}
.sledge .sledge-runner__front--top {
transform-origin: top right;
transform: rotate(30deg);
}
.sledge .sledge-runner {
position: absolute;
width: 16rem;
height: 1rem;
background-color: var(--sledge-runner);
top: 9rem;
left: 4rem;
}
.sledge .sledge-runner__left-leg {
position: absolute;
width: 3rem;
height: 1rem;
background-color: var(--sledge-runner);
transform: rotate(120deg);
bottom: 1.2rem;
left: 1rem;
}
.sledge .sledge-runner__right-leg {
position: absolute;
width: 3rem;
height: 1rem;
background-color: var(--sledge-runner);
transform: rotate(60deg);
bottom: 1.2rem;
left: 8rem;
}
.sledge .sledge-runner__back {
position: absolute;
transform: scaleY(0.8) scaleX(0.95) translateX(3rem) translateY(-2rem);
}
.sledge .sledge-seat {
position: absolute;
z-index: 2;
top: 1.5rem;
left: 5rem;
}
.sledge .sledge-top {
transform: skewX(-40deg);
}
.sledge .sledge-top__piece {
box-sizing: border-box;
width: 15rem;
height: 0.8rem;
background: linear-gradient(to bottom, var(--sledge-wood-light) 0%, var(--sledge-wood-dark) 100%);
border: 1.5px solid var(--sledge-edge);
}
.sledge .sledge-back {
position: absolute;
right: 0;
top: 0;
transform: skewY(-50deg) rotate(90deg) scaleX(1.8) scaleY(0.85) translateX(0.6rem) translateY(-0.4rem);
}
.sledge .sledge-back__piece {
box-sizing: border-box;
width: 0.8rem;
height: 0.8rem;
background: linear-gradient(to bottom, var(--sledge-wood-light) 0%, var(--sledge-wood-dark) 100%);
border: 1.5px solid var(--sledge-edge);
}
.sledge .sledge-side {
position: absolute;
left: -2rem;
margin-top: -0.05rem;
box-sizing: border-box;
width: 14.95rem;
height: 1.45rem;
background-color: var(--sledge-wood-dark);
border: 1.5px solid var(--sledge-edge);
}
/**
* Day 6 - Santa
* https://codepen.io/johnnyfekete/pen/oNzxMPW
*/
.santa-container {
display: flex;
background:
repeating-linear-gradient(45deg, transparent, transparent 1rem, rgba(154, 140, 152, 0.3) 1rem, rgba(154, 140, 152, 0.3) 2rem),
repeating-linear-gradient(-45deg, transparent, transparent 1rem, rgba(154, 140, 152, 0.3) 1rem, rgba(154, 140, 152, 0.3) 2rem),
linear-gradient(to bottom, #f2e9e4, #f2e9e4);
align-items: center;
justify-content: center;
}
.santa {
--santa-face: #f9dcc4;
--santa-beard: #ffffff;
--santa-moustache: #e0e0e0;
--santa-nose: #ffb5a7;
--santa-hat: #e63946;
--santa-border: #03071e;
width: 14rem;
height: 16rem;
position: relative;
filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.3));
transform: scale(0.33) translateY(-13rem) translateX(-3rem);
}
@media only screen and (min-width: 576px) {
.santa {
transform: scale(0.4) translateY(-8rem) translateX(-2rem);
}
}
.santa .santa-head {
position: absolute;
top: 4rem;
left: 1rem;
width: 12rem;
height: 12rem;
filter: drop-shadow(2px 2px 0 var(--santa-border))
drop-shadow(-2px 2px 0 var(--santa-border))
drop-shadow(2px -2px 0 var(--santa-border))
drop-shadow(-2px -2px 0 var(--santa-border));
}
.santa .santa-beard {
position: absolute;
left: 5rem;
width: 2rem;
height: 12rem;
background-color: var(--santa-beard);
border-radius: 1rem;
transform-origin: center center;
height: 12rem;
}
.santa .santa-beard:nth-child(2) { transform: rotate(15deg); }
.santa .santa-beard:nth-child(3) { transform: rotate(30deg); }
.santa .santa-beard:nth-child(4) { transform: rotate(45deg); }
.santa .santa-beard:nth-child(5) { transform: rotate(60deg); }
.santa .santa-beard:nth-child(6) { transform: rotate(75deg); }
.santa .santa-beard:nth-child(7) { transform: rotate(90deg); }
.santa .santa-beard:nth-child(8) { transform: rotate(105deg); }
.santa .santa-beard:nth-child(9) { transform: rotate(120deg); }
.santa .santa-beard:nth-child(10) { transform: rotate(135deg); }
.santa .santa-beard:nth-child(11) { transform: rotate(150deg); }
.santa .santa-beard:nth-child(12) { transform: rotate(165deg); }
.santa .santa-face {
position: absolute;
left: 2rem;
top: 3rem;
width: 8rem;
height: 3rem;
overflow: hidden;
}
.santa .santa-face::before {
display: block;
content: '';
position: relative;
box-sizing: border-box;
z-index: 1;
top: -2rem;
width: 8rem;
height: 8rem;
background-color: var(--santa-face);
border-radius: 50%;
border: 2px solid var(--santa-border);
}
.santa .santa-moustache {
position: absolute;
z-index: 3;
top: 5rem;
width: 2rem;
height: 2rem;
background-color: var(--santa-moustache);
border-radius: 50%;
border: 2px solid var(--santa-border);
}
.santa .santa-moustache::after {
display: block;
content: '';
position: absolute;
left: -2rem;
width: 3rem;
height: 2rem;
background: radial-gradient(farthest-side, transparent 33.3%, var(--santa-border) 33.3%, var(--santa-border) 37%, var(--santa-moustache) 38%);
background-position: -3rem -2rem;
background-size: 300% 200%;
border-radius: 0 100% 0 100%;
border-bottom: 2px solid var(--santa-border);
}
.santa .santa-moustache--left {
left: 4rem;
transform: rotate(-10deg) translateX(-0.4rem) translateY(-0.2rem);
}
.santa .santa-moustache--right {
left: 6rem;
transform: scaleX(-1) rotate(-10deg) translateX(-0.1rem) translateY(-0.2rem);
}
.santa .santa-nose {
position: absolute;
z-index: 3;
left: calc(50% - 0.9rem);
top: 4.5rem;
width: 1.8rem;
height: 1.4rem;
border-radius: 50%;
border: 2px solid var(--santa-border);
box-sizing: border-box;
background-color: var(--santa-nose);
}
.santa .santa-eye {
position: absolute;
z-index: 4;
top: 3.2rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: var(--santa-border);
}
.santa .santa-eye::before {
position: absolute;
display: block;
content: '';
top: 0.8rem;
left: 0.3rem;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background-color: var(--santa-beard);
}
.santa .santa-eye::after {
position: absolute;
display: block;
content: '';
top: 0.2rem;
left: 0.5rem;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background-color: var(--santa-beard);
}
.santa .santa-eye--left {
left: 4rem;
}
.santa .santa-eye--right {
left: 6.4rem;
}
.santa .santa-hat {
position: absolute;
top: -2rem;
left: -1rem;
width: 12rem;
height: 6rem;
}
.santa .santa-hat-background {
position: absolute;
width: 12rem;
height: 6rem;
border-radius: 6rem 6rem 0 0;
background: radial-gradient(circle at 20% 100%, transparent 14%, var(--santa-hat) 14%);
filter: drop-shadow(1px 1px 0 var(--santa-border))
drop-shadow(-1px 1px 0 var(--santa-border))
drop-shadow(1px -1px 0 var(--santa-border))
drop-shadow(-1px -1px 0 var(--santa-border));
}
.santa .santa-hat-front {
position: absolute;
top: 5.8rem;
left: 3rem;
width: 10rem;
height: 3rem;
filter: drop-shadow(1px 1px 0 var(--santa-border))
drop-shadow(-1px 1px 0 var(--santa-border))
drop-shadow(1px -1px 0 var(--santa-border))
drop-shadow(-1px -1px 0 var(--santa-border));
}
.santa .santa-hat-front-bg {
position: absolute;
width: 0.666rem;
height: 3rem;
border-radius: 0.333rem 0.333rem 0 0;
background: var(--santa-moustache);
}
.santa .santa-hat-front-bg:nth-child(1) { left: 0.666rem; }
.santa .santa-hat-front-bg:nth-child(2) { left: 1.333rem; }
.santa .santa-hat-front-bg:nth-child(3) { left: 2rem; }
.santa .santa-hat-front-bg:nth-child(4) { left: 2.666rem; }
.santa .santa-hat-front-bg:nth-child(5) { left: 3.333rem; }
.santa .santa-hat-front-bg:nth-child(6) { left: 4rem; }
.santa .santa-hat-front-bg:nth-child(7) { left: 4.666rem; }
.santa .santa-hat-front-bg:nth-child(8) { left: 5.333rem; }
.santa .santa-hat-front-bg:nth-child(9) { left: 6rem; }
.santa .santa-hat-front-bg:nth-child(10) { left: 6.666rem; }
.santa .santa-hat-front-bg:nth-child(11) { left: 7.333rem; }
.santa .santa-hat-front-bg:nth-child(12) { left: 8rem; }
.santa .santa-hat-front-bg:nth-child(13) { left: 8.666rem; }
.santa .santa-hat-front-bg:nth-child(14) { left: 9.333rem; }
.santa .santa-hat-front-side {
position: absolute;
left: -0.333rem;
width: 10.666rem;
height: 1rem;
border-radius: 0.5rem;
background: var(--santa-moustache);
}
.santa .santa-hat-front-side:nth-child(1) { top: 0.333rem; }
.santa .santa-hat-front-side:nth-child(2) { top: 0.999rem; }
.santa .santa-hat-front-side:nth-child(3) { top: 1.555rem; }
.santa .santa-hat-front-side:nth-child(4) { top: 2.111rem; }
.santa .santa-hat-pompom {
position: absolute;
top: 5.2rem;
width: 2rem;
height: 2rem;
filter: drop-shadow(1px 1px 0 var(--santa-border))
drop-shadow(-1px 1px 0 var(--santa-border))
drop-shadow(1px -1px 0 var(--santa-border))
drop-shadow(-1px -1px 0 var(--santa-border));
}
.santa .santa-hat-pompom-bg {
position: absolute;
width: 0.5rem;
height: 2rem;
background-color: var(--santa-beard);
border-radius: 0.25rem;
transform-origin: center center;
}
.santa .santa-hat-pompom-bg:nth-child(2) {
transform: rotate(30deg);
}
.santa .santa-hat-pompom-bg:nth-child(3) {
transform: rotate(60deg);
}
.santa .santa-hat-pompom-bg:nth-child(4) {
transform: rotate(90deg);
}
.santa .santa-hat-pompom-bg:nth-child(5) {
transform: rotate(120deg);
}
.santa .santa-hat-pompom-bg:nth-child(6) {
transform: rotate(150deg);
}
/**
* Day 7 - candle with a flame
* https://codepen.io/johnnyfekete/pen/ExgyPrb
*/
.candle-container {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background: #000000;
}
.candle {
--candle-light: #e8eddf;
--candle-dark: #e8c2ca;
--candle-top: #d1b3c4;
--candle-bottom: #b76935;
--candle-string: #343434;
--candle-flame: #ff9900;
position: relative;
width: 6rem;
height: 12rem;
transform: scale(0.35) translateY(-6rem);
}
@media only screen and (min-width: 576px) {
.candle {
transform: scale(0.45) translateY(-2rem);
}
}
.candle .candle__body {
width: 3rem;
height: 8rem;
position: absolute;
z-index: 2;
left: 1.5rem;
bottom: 2rem;
background: linear-gradient(to right, var(--candle-light) 0, var(--candle-dark) 100%);
}
.candle .candle__body::before {
display: block;
content: '';
position: absolute;
top: -1rem;
width: 3rem;
height: 2rem;
border-radius: 50%;
background: radial-gradient(circle at 50% 0, var(--candle-light) 0, var(--candle-top) 100%);
}
.candle .candle__body::after {
display: block;
content: '';
position: absolute;
bottom: -1rem;
width: 3rem;
height: 2rem;
border-radius: 50%;
background: linear-gradient(to right, var(--candle-light) 0, var(--candle-dark) 100%);
}
.candle .candle__wax-1 {
position: absolute;
z-index: 3;
top: 3.5rem;
left: 3rem;
transform: scaleY(2);
}
.candle .candle__wax-2 {
position: absolute;
z-index: 1;
top: 3rem;
left: 4rem;
transform: scaleY(2.5);
}
.candle .candle__wax-3 {
position: absolute;
z-index: 3;
top: 2.8rem;
left: 1rem;
transform: scaleX(0.5);
}
.candle .candle__wax-1::after,
.candle .candle__wax-2::after,
.candle .candle__wax-3::after {
content: '';
display: block;
width: 1rem;
height: 1rem;
background-color: var(--candle-top);
border-radius: 0 0.5rem 0.5rem 0.5rem;
transform: rotate(45deg);
}
.candle .candle__bottom {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 6rem;
height: 3rem;
background-color: var(--candle-bottom);
border-radius: 50%;
}
.candle-string {
width: 0.2rem;
height: 0.8rem;
background-color: var(--candle-string);
position: absolute;
border-radius: 1rem;
transform: rotate(5deg);
top: 1.2rem;
left: 3rem;
z-index: 5;
}
.candle .candle__light {
position: absolute;
z-index: 4;
top: -2rem;
left: 1rem;
width: 4rem;
height: 4rem;
margin-top: 120px;
transform: translate(-66px, -250px) scale(0.33);
mix-blend-mode: screen;
}
.candle .candle__flame {
position: relative;
width: 500px;
height: 500px;
background: var(--candle-flame);
filter: blur(20px) contrast(10);
mix-blend-mode: screen;
border: 250px solid #000;
border-bottom-color: transparent;
border-radius: 40%;
box-sizing: border-box;
transform: scale(0.4, 1);
}
.candle .candle__flame-burn {
position: absolute;
top: 500px;
left: 50px;
width: 100px;
height: 100px;
background: black;
border-radius: 100%;
filter: blur(1em);
}
@each $val, $i in 8px, 4px, 5px, 4px, 8px, 4px, 5px, 7px, 3px, 7px, 9px, 3px, 6px, 9px, 10px, 8px, 5px, 7px, 1px, 1px, 2px, 2px, 7px, 10px, 4px, 4px, 1px, 4px, 9px, 5px, 8px, 1px, 4px, 7px, 7px, 3px, 8px, 8px, 2px, 10px, 10px, 6px, 4px, 1px, 5px, 9px, 4px, 10px, 10px, 1px, 7px, 8px, 3px, 7px, 7px, 2px, 7px, 2px, 6px, 8px, 1px, 3px, 10px, 10px, 2px, 7px, 1px, 6px, 6px, 4px, 7px, 7px, 4px, 3px, 1px, 10px, 4px, 10px, 8px, 7px {
.candle .candle__flame-burn.burn-a:nth-child($(i)) {
height: $(val);
}
}
@each $val, $i in 30px, 7px, 34px, 31px, 18px, 44px, 33px, 41px, 7px, 40px, 38px, 21px, 24px, 13px, 3px, 26px, 22px, 10px, 11px, 45px, 29px, 46px, 1px, 37px, 24px, 36px, 39px, 23px, 16px, 23px, 13px, 19px, 21px, 29px, 4px, 37px, 9px, 5px, 2px, 29px, 41px, 34px, 37px, 12px, 19px, 9px, 38px, 44px, 11px, 25px, 41px, 34px, 20px, 29px, 47px, 10px, 3px, 48px, 10px, 45px, 8px, 49px, 32px, 45px, 17px, 23px, 12px, 38px, 9px, 26px, 11px, 45px, 30px, 15px, 7px, 23px, 25px, 23px, 31px, 20px {
.candle .candle__flame-burn:nth-child($(i)) {
height: $(val);
}
}
@each $val, $i in -49px, -22px, -188px, -238px, 29px, -88px, -137px, -43px, -244px, -150px, 78px, 130px, 155px, -36px, 230px, 74px, 31px, -237px, 154px, -236px, -168px, -69px, 70px, 187px, -78px, -231px, -20px, -8px, -234px, -196px, 69px, 210px, -45px, 113px, -240px, -156px, 22px, 192px, -148px, 7px, 92px, -107px, 83px, 19px, 14px, 46px, -145px, 54px, -209px, 221px, -107px, -101px, 10px, -215px, 39px, -3px, 21px, -216px, 132px, 61px, 17px, -129px, -231px, 78px, 219px, 195px, -15px, -85px, 60px, -8px, -146px, 128px, 18px, 33px, -193px, 74px, 210px, -211px, 247px, -113px {
.candle .candle__flame-burn:nth-child($(i)) {
margin-left: $(val);
}
}
@each $val, $i in 2832, 2158, 2133, 2873, 1394, 2969, 2225, 1025, 2588, 1603, 2294, 2400, 2217, 1316, 1142, 1103, 1268, 1009, 2948, 2103, 1769, 1220, 1355, 2268, 2120, 1346, 2650, 2655, 2663, 1849, 2888, 1755, 1138, 1567, 1600, 1467, 2686, 2380, 1005, 1610, 1134, 1161, 1790, 1219, 1693, 2412, 1140, 2604, 2307, 1627, 2490, 2122, 1612, 1326, 1416, 2002, 2241, 2068, 1079, 1493, 1822, 1317, 1644, 2634, 1527, 1393, 2391, 2513, 1142, 1095, 1684, 1095, 1282, 1567, 1855, 2786, 1138, 2428, 1436, 1011 {
.candle .candle__flame-burn:nth-child($(i)) {
animation: burning $(val)ms -3000ms infinite linear;
}
}
@keyframes burning {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-600px);
}
}
/**
* Day 8 - candycane
* https://codepen.io/johnnyfekete/pen/KKgMLym
*/
.candycane-container {
--candycane-background: #1a535c;
--candycane-red: #ff0054;
--candycane-white: #ffffff;
background-color: var(--candycane-background);
margin: 0;
height: 100vh;
align-items: center;
justify-content: center;
}
.candycane {
display: block;
position: relative;
width: 6rem;
height: 12rem;
background: repeating-linear-gradient(40deg, var(--candycane-white), var(--candycane-white) 1rem, var(--candycane-red) 1.1rem, var(--candycane-red) 2rem, var(--candycane-white) 2.1rem);
border-radius: 3rem 3rem 0 0;
transform: scale(0.35) translateY(-7rem) translateX(0rem);
}
@media only screen and (min-width: 576px) {
.candycane {
transform: scale(0.5) translateY(-3rem) translateX(2rem);
}
}
.candycane::before {
content: '';
position: absolute;
top: 2rem;
left: 2rem;
width: 2rem;
height: 3rem;
background-color: var(--candycane-background);
border-radius: 1rem 1rem 0 0;
}
.candycane::after {
content: '';
position: absolute;
top: 5rem;
left: 0;
width: 4rem;
height: 7rem;
background-color: var(--candycane-background);
}
.candycane .candycane__end {
position: absolute;
width: 2rem;
height: 1rem;
background: yellow;
overflow: hidden;
background: radial-gradient(circle at 50% 0%, transparent 69%, var(--candycane-background) 70%);
background-size: 100% 100%;
}
.candycane .candycane__end--top {
left: 0;
top: 4rem;
}
.candycane .candycane__end--bottom {
left: 4rem;
top: 11rem;
}
/**
* Day 9 - hot chocolate with marshmallows
* https://codepen.io/johnnyfekete/pen/VwKKMKE
*/
.hot-chocolate-container {
background-color: #aa78a6;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.hot-chocolate {
--mug-dark: #727d71;
--mug-light: #abc4ab;
--mug-coffee: #6c584c;
--marshmallow: #d7fdf0;
--pink-marshmallow: #ffe4e2;
perspective: 400px;
transform: translateX(3rem) translateY(2rem);
}
@media only screen and (min-width: 576px) {
.hot-chocolate {
transform: scale(0.4);
}
}
.hot-chocolate .mug {
width: 10rem;
height: 10rem;
transform: rotateX(-30deg);
filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.1));
}
.hot-chocolate .mug__contents {
width: 10rem;
height: 10rem;
background-color: var(--mug-dark);
position: relative;
}
.hot-chocolate .mug__contents::before {
content: '';
display: block;
width: 10rem;
height: 3rem;
position: absolute;
top: 8.5rem;
background-color: var(--mug-dark);
border-radius: 50%;
}
.hot-chocolate .mug__contents::after {
content: '';
display: block;
width: 10rem;
height: 3rem;
position: absolute;
z-index: 3;
top: -1.5rem;
background-color: var(--mug-coffee);
border-radius: 50%;
box-sizing: border-box;
border: 0.25rem solid var(--mug-light);
}
.hot-chocolate .mug__grip {
position: absolute;
z-index: -1;
right: -2rem;
width: 4rem;
height: 6rem;
border: 0.75rem solid var(--mug-light);
border-bottom-width: 1rem;
border-radius: 2rem 1rem / 4rem 2rem;
}
.hot-chocolate .mug__background {
position: absolute;
width: 10rem;
height: 4rem;
background-color: var(--mug-light);
display: flex;
}
.hot-chocolate .mug__background-curve {
background-color: var(--mug-light);
width: calc(10rem / 7);
height: calc(10rem / 7);
border-radius: 50%;
margin-top: calc(4rem - 10rem / 14);
}
.hot-chocolate .mug__background-curve:nth-child(1),
.hot-chocolate .mug__background-curve:nth-child(3),
.hot-chocolate .mug__background-curve:nth-child(5),
.hot-chocolate .mug__background-curve:nth-child(7) {
background-color: var(--mug-dark);
}
.hot-chocolate .mug__shine {
width: 10rem;
height: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 33%,
rgba(255, 255, 255, 0) 100%
)
}
.hot-chocolate .mug__shine--bottom {
position: absolute;
z-index: 2;
top: 10rem;
width: 10rem;
height: 1.5rem;
overflow: hidden;
}
.hot-chocolate .mug__shine--bottom::before {
content: '';
display: block;
width: 10rem;
height: 3rem;
position: absolute;
top: -1.5rem;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.3) 33%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 50%;
}
.hot-chocolate .marshmallow {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 2.4rem;
height: 1.6rem;
border-radius: 0.8rem / 1.2rem;
background: radial-gradient(
circle at 0 0,
var(--marshmallow) 0%,
#ffffff 100%
);
box-shadow: 2px 2px 0 2px rgba(0, 0, 0, 0.3);
}
.hot-chocolate .marshmallow:nth-child(odd) {
background: radial-gradient(
circle at 0 0,
var(--pink-marshmallow) 0%,
#ffffff 100%
);
}
.hot-chocolate .marshmallow:nth-child(4) {
transform: scale(0.7) translateX(10.5rem) translateY(-1.8rem) rotate(24deg);
}
.hot-chocolate .marshmallow:nth-child(9) {
transform: scale(0.6) translateX(9.5rem) translateY(-1rem) rotate(-5deg);
}
.hot-chocolate .marshmallow:nth-child(8) {
transform: scale(0.65) translateX(6.0rem) translateY(-0.5rem) rotate(20deg);
}
.hot-chocolate .marshmallow:nth-child(7) {
transform: scale(0.7) translateX(7.5rem) translateY(-2.6rem) rotate(-30deg);
}
.hot-chocolate .marshmallow:nth-child(6) {
transform: scale(0.5) translateX(4.5rem) translateY(-3.5rem) rotate(-8deg);
}
.hot-chocolate .marshmallow:nth-child(5) {
transform: scale(0.5) translateX(7rem) translateY(-3.5rem) rotate(55deg);
}
.hot-chocolate .marshmallow:nth-child(3) {
transform: scale(0.6) translateX(1.7rem) translateY(-1rem) rotate(10deg);
}
.hot-chocolate .marshmallow:nth-child(1) {
transform: scale(0.6) translateX(4rem) translateY(-1rem) rotate(-35deg);
}
.hot-chocolate .marshmallow:nth-child(2) {
transform: scale(0.65) translateX(0.5rem) translateY(-2.5rem) rotate(-25deg);
}
/**
* Day 10 - snowman made of letters and characters
* https://codepen.io/johnnyfekete/pen/OJRbWJM
*/
.snowman-container {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, #ffcdb2 40%, #f08080 100%);
margin: 0;
}
.snowman {
--snowman: #ffffff;
--snowman-button: #03071e;
--snowman-nose: #f72585;
--snowman-arm: #6d597a;
font-family: 'Verdana', sans-serif;
width: 10rem;
height: 21rem;
position: relative;
transform: scale(0.32) translateX(-2rem) translateY(-23rem);
}
@media only screen and (min-width: 576px) {
.snowman {
transform: scale(0.38) translateX(-1rem) translateY(-16.3rem);
}
}
.snowman .snowman__leg {
color: var(--snowman);
font-size: 12rem;
position: absolute;
bottom: -1rem;
left: 0.8rem;
line-height: 11rem;
transform: rotate(75deg);
text-shadow: 1px -1px 2px rgba(0, 0, 0, 0.2);
}
.snowman .snowman__stomach {
color: var(--snowman);
font-size: 8rem;
position: absolute;
bottom: 7.4rem;
left: 1.5rem;
line-height: 7rem;
transform: rotate(-85deg);
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.snowman .snowman__head {
color: var(--snowman);
font-size: 6rem;
position: absolute;
bottom: 11.7rem;
left: 2.5rem;
transform: rotate(-95deg);
text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2);
}
.snowman .snowman__button {
color: var(--snowman-button);
font-weight: 900;
position: absolute;
}
.snowman .snowman__button-1 {
font-size: 1.2rem;
bottom: 4.3rem;
left: 4.5rem;
transform: rotate(-60deg);
text-shadow: -2px 1px 4px;
}
.snowman .snowman__button-2 {
font-size: 1.2rem;
bottom: 6.6rem;
left: 4.6rem;
transform: rotate(120deg);
text-shadow: -2px -2px 4px;
}
.snowman .snowman__button-3 {
font-size: 1.1rem;
bottom: 9rem;
left: 4.6rem;
transform: rotate(120deg);
text-shadow: 1px -2px 4px;
}
.snowman .snowman__button-4 {
font-size: 1rem;
bottom: 11rem;
left: 4.5rem;
transform: rotate(120deg);
text-shadow: 1px -2px 4px;
}
.snowman .snowman__nose {
position: absolute;
color: var(--snowman-nose);
left: 4rem;
bottom: 13.3rem;
font-size: 1.6rem;
transform: rotate(20deg) scaleX(1) scaleY(2);
text-shadow: 1px 1px 2px;
}
.snowman .snowman__left-eye {
position: absolute;
left: 3.6rem;
bottom: 15.2rem;
font-weight: 900;
color: var(--snowman-button);
font-size: 0.8rem;
text-shadow: 1px 1px 2px;
}
.snowman .snowman__right-eye {
position: absolute;
left: 5.4rem;
bottom: 15.3rem;
font-weight: 900;
color: var(--snowman-button);
font-size: 0.8rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
transform: rotate(20deg);
}
.snowman .snowman__left-arm {
position: absolute;
font-size: 3rem;
bottom: 8.5rem;
left: -0.7rem;
color: var(--snowman-arm);
transform: rotate(-120deg) scaleY(2);
}
.snowman .snowman__right-arm {
position: absolute;
font-size: 3rem;
bottom: 8rem;
left: 8.5rem;
color: var(--snowman-arm);
transform: rotate(120deg) scaleY(2);
}
.snowman .snowman__hat {
position: absolute;
font-weight: 900;
color: var(--snowman-button);
bottom: 16.6rem;
left: 2.4rem;
width: 5rem;
height: 4rem;
transform: rotate(10deg);
}
.snowman .snowman__hat--base {
position: absolute;
font-size: 3.5rem;
left: 1.5rem;
}
.snowman .snowman__hat--left {
position: absolute;
font-size: 2.4rem;
top: 1.5rem;
transform: rotate(-90deg);
}
.snowman .snowman__hat--right {
position: absolute;
font-size: 2.4rem;
left: 4.9rem;
top: 1.5rem;
transform: rotate(90deg);
}
/**
* Day 11 - flickering Christmas lights
* https://codepen.io/johnnyfekete/pen/NWRdKjQ
*/
.christmas-lights-container {
display: flex;
align-items: flex-start;
justify-content: center;
background-color: #2b2d42;
height: 100%;
margin: 0;
position: relative;
}
.christmas-lights {
--christmas-lights-size: 90rem;
--christmas-lights-chord: #6b705c;
--christmas-lights-holder: #ced4da;
--christmas-lights-bulb-1: #f94144;
--christmas-lights-bulb-2: #90be6d;
--christmas-lights-bulb-3: #f9c74f;
--christmas-lights-bulb-4: #43aa8b;
--christmas-lights-bulb-5: #58b4d1;
height: 6rem;
transform: scale(0.1);
}
@media only screen and (min-width: 576px) {
.christmas-lights {
transform: scale(0.13) translateY(2rem);
}
}
.christmas-lights .chord {
width: var(--christmas-lights-size);
height: 100%;
overflow: hidden;
position: relative;
}
.christmas-lights .chord::before {
content: '';
position: absolute;
display: block;
width: calc(var(--christmas-lights-size) * 3);
height: calc(var(--christmas-lights-size) * 3);
left: calc(var(--christmas-lights-size) * -1);
bottom: 0;
border-bottom: 2px solid var(--christmas-lights-chord);
border-radius: 50%;
}
.christmas-lights .bulb {
position: absolute;
z-index: 1;
width: 4rem;
height: 8rem;
background-color: red;
border-radius: 50% 50% 50% 50% / 30% 30% 60% 60%;
margin-top: 1rem;
left: calc(50% - 2rem);
}
.christmas-lights .bulb::before {
content: '';
display: block;
position: absolute;
z-index: -10;
width: 1.5rem;
height: 1.1rem;
background-color: var(--christmas-lights-holder);
border-radius: 0.25rem 0.25rem 0.25rem;
top: -0.9rem;
left: 1.25rem;
}
.christmas-lights .bulb::after {
content: '';
display: block;
position: absolute;
z-index: 1;
width: 1rem;
height: 1.8rem;
background-color: white;
border-radius: 50%;
top: 0.5rem;
left: 0.5rem;
transform: rotate(30deg);
opacity: 0.5;
}
.christmas-lights .bulb .light {
position: absolute;
top: -0.2rem;
left: -3rem;
z-index: -2;
width: 10rem;
height: 10rem;
background-color: white;
border-radius: 50%;
opacity: 0.2;
animation: bulb-flicker-animation 1s infinite;
}
.christmas-lights .bulb.bulb-1 {
transform: rotate(12deg);
background-color: var(--christmas-lights-bulb-1);
margin-left: -24rem;
margin-top: -1.2rem;
}
.christmas-lights .bulb.bulb-1 .light {
animation-delay: 0.2s;
}
.christmas-lights .bulb.bulb-2 {
transform: rotate(6deg);
background-color: var(--christmas-lights-bulb-2);
margin-left: -12rem;
margin-top: 0.35rem;
}
.christmas-lights .bulb.bulb-2 .light {
animation-delay: 0.6s;
}
.christmas-lights .bulb.bulb-3 {
background-color: var(--christmas-lights-bulb-3);
}
.christmas-lights .bulb.bulb-4 {
transform: rotate(-6deg);
background-color: var(--christmas-lights-bulb-4);
margin-left: 12rem;
margin-top: 0.35rem;
animation: broken-bulb-animation 1s infinite;
animation-delay: 0.3s;
}
.christmas-lights .bulb.bulb-4 .light {
animation: broken-bulb-flicker-animation 1s infinite;
animation-delay: 0.3s;
}
.christmas-lights .bulb.bulb-5 {
transform: rotate(-12deg);
background-color: var(--christmas-lights-bulb-5);
margin-left: 24rem;
margin-top: -1.2rem;
}
.christmas-lights .bulb.bulb-5 .light {
animation-delay: 0.2s;
}
@keyframes bulb-flicker-animation {
0% { opacity: 0.1; }
20% { opacity: 0.09; }
30% { opacity: 0.1; }
40% { opacity: 0.08; }
50% { opacity: 0.1; }
60% { opacity: 0.11; }
70% { opacity: 0.11; }
80% { opacity: 0.09; }
90% { opacity: 0.12; }
100% { opacity: 0.1; }
}
@keyframes broken-bulb-animation {
0% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0.4; }
40% { opacity: 0.7; }
50% { opacity: 0.4; }
60% { opacity: 1; }
}
@keyframes broken-bulb-flicker-animation {
0% { opacity: 0.1; }
20% { opacity: 0.09; }
30% { opacity: 0; }
40% { opacity: 0.02; }
50% { opacity: 0.0; }
60% { opacity: 0.11; }
70% { opacity: 0.11; }
80% { opacity: 0.09; }
90% { opacity: 0.12; }
100% { opacity: 0.1; }
}
/**
* Day 12 - polar bear
* https://codepen.io/johnnyfekete/pen/qBaRZXV
*/
.polar-bear-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
background-color: #64b6ac;
}
.polar-bear {
--polar-bear: #ffffff;
--polar-bear-highlight: #bfcde0;
--polar-bear-face: #1e2019;
--polar-bear-scarf: #ce4257;
--polar-bear-scarf-end: #bd3146;
--polar-bear-scarf-dark: #720026;
width: 20rem;
height: 20rem;
position: relative;
transform: scale(0.27) translateX(-7rem);
}
@media only screen and (min-width: 576px) {
.polar-bear {
transform: scale(0.35) translateX(-6rem);
}
}
.polar-bear .polar-bear__body {
position: absolute;
top: 6rem;
left: 3rem;
width: 14rem;
height: 14rem;
background-color: var(--polar-bear);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.polar-bear .polar-bear__foot {
position: absolute;
background-color: var(--polar-bear);
bottom: 0;
width: 3.8rem;
height: 4.6rem;
border-top: 0.3rem solid var(--polar-bear-highlight);
border-radius: 50%;
}
.polar-bear .polar-bear__print {
position: absolute;
bottom: 1rem;
left: 0.8rem;
width: 2.2rem;
height: 1.8rem;
background-color: var(--polar-bear-highlight);
border-radius: 50% 50% 50% 50% / 60% 60% 50% 50%;
}
.polar-bear .polar-bear__fingers {
position: absolute;
bottom: 3.2rem;
left: 1.45rem;
width: 0.7rem;
height: 0.9rem;
background-color: var(--polar-bear-highlight);
border-radius: 50%;
}
.polar-bear .polar-bear__fingers::before {
content: '';
display: block;
position: absolute;
left: -0.9rem;
top: 0.4rem;
width: 0.6rem;
height: 0.8rem;
background-color: var(--polar-bear-highlight);
border-radius: 50%;
transform: rotate(-20deg);
}
.polar-bear .polar-bear__fingers::after {
content: '';
display: block;
position: absolute;
left: 1rem;
top: 0.4rem;
width: 0.6rem;
height: 0.8rem;
background-color: var(--polar-bear-highlight);
border-radius: 50%;
transform: rotate(20deg);
}
.polar-bear .polar-bear__foot.polar-bear__foot--left {
transform: rotate(-10deg);
}
.polar-bear .polar-bear__foot.polar-bear__foot--right {
left: 10rem;
transform: rotate(10deg);
}
.polar-bear__arm--left {
position: absolute;
width: 3rem;
height: 4rem;
background-color: var(--polar-bear);
top: 4.5rem;
left: -0.2rem;
box-sizing: border-box;
border-bottom: 0.3rem solid var(--polar-bear-highlight);
border-radius: 0 0 50% 50% / 0 0 100% 30%;
transform: rotate(30deg);
}
.polar-bear__arm--right {
position: absolute;
width: 3rem;
height: 4rem;
background-color: var(--polar-bear);
top: 4.5rem;
right: -0.2rem;
box-sizing: border-box;
border-bottom: 0.3rem solid var(--polar-bear-highlight);
border-radius: 0 0 50% 50% / 0 0 30% 100%;
transform: rotate(-30deg);
}
.polar-bear .polar-bear__head {
position: absolute;
z-index: 2;
width: 10rem;
height: 10rem;
left: 5rem;
}
.polar-bear .polar-bear__face {
position: absolute;
width: 10rem;
height: 10rem;
background-color: var(--polar-bear);
border-radius: 50%;
}
.polar-bear .polar-bear__ear {
position: absolute;
z-index: -1;
width: 4rem;
height: 4rem;
background-color: var(--polar-bear);
border-radius: 50%;
}
.polar-bear .polar-bear__ear::after {
content: '';
display: block;
position: absolute;
z-index: 1;
left: 0.8rem;
top: 0.8rem;
width: 2.4rem;
height: 2.4rem;
background-color: var(--polar-bear-highlight);
border-radius: 50%;
}
.polar-bear .polar-bear__ear--left {
left: -1.2rem;
}
.polar-bear .polar-bear__ear--right {
left: 7.2rem;
}
.polar-bear .polar-bear__eye {
position: absolute;
width: 2rem;
height: 2rem;
box-sizing: border-box;
border-radius: 50%;
border: 0.5rem solid var(--polar-bear-face);
transform: scaleY(0.9);
}
.polar-bear .polar-bear__eye::after {
position: absolute;
content: '';
display: block;
bottom: -0.5rem;
left: -0.5rem;
width: 2.2rem;
height: 1rem;
background: radial-gradient(circle at 0.25rem 0.03rem, var(--polar-bear-face) 0.25rem, transparent 0.25rem), radial-gradient(circle at 1.75rem 0.03rem, var(--polar-bear-face) 0.25rem, var(--polar-bear) 0.25rem);
}
.polar-bear .polar-bear__eye.polar-bear__eye--left {
top: 4rem;
left: 1.7rem;
}
.polar-bear .polar-bear__eye.polar-bear__eye--right {
top: 4rem;
right: 1.7rem;
}
.polar-bear .polar-bear__lip {
position: absolute;
width: 2rem;
height: 2rem;
box-sizing: border-box;
border-radius: 50%;
border: 0.5rem solid var(--polar-bear-face);
transform: scaleY(0.9);
}
.polar-bear .polar-bear__lip::after {
position: absolute;
content: '';
display: block;
top: -0.5rem;
left: -0.5rem;
width: 2.2rem;
height: 1rem;
background: radial-gradient(circle at 0.25rem 0.97rem, var(--polar-bear-face) 0.25rem, transparent 0.25rem), radial-gradient(circle at 1.75rem 0.97rem, var(--polar-bear-face) 0.25rem, var(--polar-bear) 0.25rem);
}
.polar-bear .polar-bear__lip.polar-bear__lip--left {
top: 6rem;
left: 3.25rem;
}
.polar-bear .polar-bear__lip.polar-bear__lip--right {
top: 6rem;
right: 3.25rem;
}
.polar-bear .polar-bear__nose {
position: absolute;
width: 1.8rem;
height: 1.2rem;
background-color: var(--polar-bear-face);
border-radius: 50%;
top: 5.5rem;
left: 4.1rem;
}
.polar-bear .polar-bear__nose::after {
position: absolute;
content: '';
display: block;
top: 0.5rem;
left: 0.65rem;
width: 0.5rem;
height: 1.2rem;
background-color: var(--polar-bear-face);
}
.polar-bear__scarf {
position: absolute;
top: 4rem;
left: -0.5rem;
width: 11rem;
height: 8rem;
border-radius: 50%;
}
.polar-bear__scarf::after {
content: '';
display: block;
position: absolute;
width: 9.8rem;
height: 6rem;
background-color: var(--polar-bear);
border-radius: 50%;
left: 0.6rem;
top: -1rem;
}
.polar-bear__scarf-line {
position: absolute;
top: 4rem;
left: -0.5rem;
width: 11rem;
height: 8rem;
border-radius: 50%;
background-color: var(--polar-bear-scarf);
overflow: hidden;
}
.polar-bear .polar-bear__scarf-line::after {
content: '';
display: block;
position: absolute;
width: 14rem;
height: 8rem;
border-radius: 50%;
top: -1rem;
left: 1rem;
border: 0.4rem solid var(--polar-bear-scarf-dark);
}
.polar-bear__scarf-end--left {
position: absolute;
z-index: -1;
top: 11rem;
left: 1.5rem;
background-color: var(--polar-bear-scarf-end);
width: 3rem;
height: 3rem;
border-radius: 0 0 0.5rem 0.5rem;
transform: rotate(20deg);
}
.polar-bear__scarf-end--right {
position: absolute;
z-index: -1;
top: 11rem;
left: 5.5rem;
background-color: var(--polar-bear-scarf-end);
width: 3rem;
height: 2.2rem;
border-radius: 0 0 0.5rem 0.5rem;
transform: rotate(-20deg);
}
/**
* Day 13 - elf hat
* https://codepen.io/johnnyfekete/pen/JjREvyo
*/
.elf-hat-container {
--elf-hat-background: #333533;
--elf-hat-red: #bf0603;
--elf-hat-red-shadow: #8d0801;
--elf-hat-gold: #fec601;
--elf-hat-green: #7cb518;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
background: var(--elf-hat-background);
}
.elf-hat {
width: 12rem;
height: 10rem;
position: relative;
transform: scale(0.42) translateX(-2.9rem);
}
@media only screen and (min-width: 576px) {
.elf-hat {
transform: scale(0.6) translateX(-1.5rem);
}
}
.elf-hat .elf-hat__main {
width: 9rem;
height: 10rem;
overflow: hidden;
position: absolute;
left: 1.5rem;
}
.elf-hat .elf-hat__main::before {
content: '';
display: block;
width: 12rem;
height: 20rem;
background: var(--elf-hat-red);
border-radius: 50% 50% 50% 50% / 80% 20% 50% 0;
}
.elf-hat .elf-hat__main::after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0.7rem;
left: 8rem;
width: 4rem;
height: 12rem;
background-color: var(--elf-hat-background);
border-radius: 50% 50% 20% 50% / 10% 10% 50% 0%;
transform: rotate(-20deg);
}
.elf-hat .elf-hat__main-shadow {
position: absolute;
top: 2.4rem;
left: 6.2rem;
z-index: 3;
width: 2rem;
height: 0.6rem;
background: var(--elf-hat-red-shadow);
border-radius: 0.4rem;
transform: rotate(-10deg);
}
.elf-hat .elf-hat__side {
position: absolute;
z-index: 4;
top: 6.5rem;
left: 0;
}
.elf-hat .elf-hat__side::after {
content: '';
display: block;
width: 9rem;
height: 1rem;
background-color: var(--elf-hat-green);
position: absolute;
top: 3rem;
left: 1.5rem;
border-radius: 0 0 50% 50%;
}
.elf-hat .elf-hat__side__left {
position: absolute;
width: 4rem;
height: 3.5rem;
overflow: hidden;
}
.elf-hat .elf-hat__side__left::before {
position: absolute;
content: '';
display: block;
width: 8rem;
height: 8rem;
margin-left: -4rem;
border-radius: 50%;
background-color: var(--elf-hat-green);
}
.elf-hat .elf-hat__side__left::after {
position: absolute;
z-index: 2;
content: '';
display: block;
width: 3rem;
height: 6rem;
margin-left: -1.5rem;
border-radius: 50% 50% 0 0;
background-color: var(--elf-hat-background);
}
.elf-hat .elf-hat__side__right {
position: absolute;
width: 4rem;
height: 3.5rem;
left: 8rem;
overflow: hidden;
}
.elf-hat .elf-hat__side__right::before {
position: absolute;
content: '';
display: block;
width: 8rem;
height: 8rem;
border-radius: 50%;
background-color: var(--elf-hat-green);
}
.elf-hat .elf-hat__side__right::after {
position: absolute;
z-index: 2;
content: '';
display: block;
width: 3rem;
height: 6rem;
margin-left: 2.5rem;
border-radius: 50% 50% 0 0;
background-color: var(--elf-hat-background);
}
.elf-hat .elf-hat__side__spikes {
position: absolute;
width: 8rem;
height: 4.5rem;
top: -1rem;
left: 2rem;
overflow: hidden;
}
.elf-hat .elf-hat__side__spikes::before,
.elf-hat .elf-hat__side__spikes::after {
content: '';
display: block;
position: absolute;
top: 1.5rem;
width: 5rem;
height: 5rem;
background-color: var(--elf-hat-green);
transform: scaleX(0.7) rotate(45deg);
}
.elf-hat .elf-hat__side__spikes::after {
left: 3rem;
top: 2rem;
}
.elf-hat .elf-hat__gold {
position: absolute;
z-index: 5;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background-color: var(--elf-hat-gold);
}
.elf-hat .elf-hat__gold.elf-hat__gold--main {
left: 10rem;
}
.elf-hat .elf-hat__gold.elf-hat__gold--left {
left: -0.3rem;
top: 5.8rem;
}
.elf-hat .elf-hat__gold.elf-hat__gold--left-center {
left: 3.75rem;
top: 5.1rem;
}
.elf-hat .elf-hat__gold.elf-hat__gold--right-center {
left: 6.75rem;
top: 5.6em;
}
.elf-hat .elf-hat__gold.elf-hat__gold--right {
left: 10.7rem;
top: 5.8rem;
}
/**
* Day 14 - Christmas tree branch with ornaments
* https://codepen.io/johnnyfekete/pen/qBarZVj
*/
.ornaments-container {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 100%,
#6930c3 0%,
#56cfe1 40%,
#72efdd 70%,
#80ffdb 100%
);
height: 100%;
margin: 0;
}
.ornaments {
--ornaments-branch: #9d6b53;
--ornaments-branch-light: #cd9777;
--ornament-1: #f83b17;
--ornament-1-light: #fb8f7a;
--ornament-2: #02c39a;
--ornament-2-light: #50fdd8;
--ornament-3: #c77dff;
--ornament-3-light: #e0aaff;
position: relative;
width: 40rem;
height: 24rem;
transform: scale(0.15) translateX(-16rem);
}
@media only screen and (min-width: 576px) {
.ornaments {
transform: scale(0.2) translateX(-15rem);
}
}
.ornaments .branch {
position: absolute;
width: 20rem;
height: 0.3rem;
top: 4rem;
border-radius: 0 50% 50% 0;
background-color: var(--ornaments-branch);
}
.ornaments .branch.branch-1 {
transform: rotate(-10deg);
top: 7rem;
}
.branch.branch-2 {
transform: rotate(-6deg);
top: 11rem;
left: 12rem;
}
.ornaments .branch::before {
content: '';
display: block;
border-radius: 50%;
position: absolute;
top: -0.15rem;
left: -0.1rem;
width: 0.8rem;
height: 0.6rem;
background-color: var(--ornaments-branch);
}
.ornaments .spikes-upper {
position: absolute;
top: -4rem;
left: 4rem;
width: 17rem;
height: 4rem;
background: repeating-linear-gradient(to right, #006600, #006600 0.2rem, transparent 0.2rem, transparent 0.7rem);
transform: skewX(-45deg);
}
.ornaments .spikes-lower {
position: absolute;
top: 0.3rem;
left: 4rem;
width: 17rem;
height: 4rem;
background: repeating-linear-gradient(to right, #006600, #006600 0.2rem, transparent 0.2rem, transparent 0.7rem);
transform: skewX(45deg);
}
.ornaments .spikes-end {
position: absolute;
top: -3rem;
left: 20.6rem;
width: 6.3rem;
height: 6.3rem;
overflow: hidden;
transform: rotate(135deg);
border-radius: 30% 10% 0 10%;
}
.ornaments .spikes-end::after {
position: absolute;
top: -0.8rem;
left: -0.8rem;
content: '';
display: block;
width: 14rem;
height: 14rem;
background: repeating-conic-gradient(from 0deg, #006600 0deg 2deg, transparent 2deg 9deg);
}
.ornaments .ornament {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 8rem;
height: 8rem;
border-radius: 50%;
font-size: 4rem;
}
.ornaments .ornament::before {
position: absolute;
content: '';
display: block;
width: 3rem;
height: 2rem;
top: 1.75rem;
left: 0.5rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-60deg);
}
.ornaments .ornament::after {
position: absolute;
content: '';
display: block;
width: 6rem;
height: 6rem;
top: 0.4rem;
left: 0.5rem;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 100%);
transform: rotate(-20deg);
}
.ornament-1 {
top: 12.7rem;
left: 5rem;
background: radial-gradient(circle at 75% 75%, var(--ornament-1), 40%, var(--ornament-1-light) 80%);
}
.ornament-2 {
top: 16.8rem;
left: 15rem;
background: radial-gradient(circle at 75% 75%, var(--ornament-2), 40%, var(--ornament-2-light) 80%);
}
.ornament-3 {
top: 15.8rem;
left: 25rem;
background: radial-gradient(circle at 75% 75%, var(--ornament-3), 40%, var(--ornament-3-light) 80%);
}
.ornaments .hanger {
position: absolute;
width: 2rem;
height: 1rem;
background-image: linear-gradient( to right, white, lightgrey, white );
border-radius: 0.25rem 0.25rem 50% 50% / 0.25rem 0.25rem 10% 10%;
top: -0.75rem;
}
.ornaments .hanger::before {
position: absolute;
content: '';
display: block;
border-left: 0.1rem solid black;
height: 3rem;
top: -3rem;
left: 1rem;
}
.ornaments .hanger::after {
position: absolute;
content: '';
display: block;
border-left: 0.1rem solid black;
border-top: 0.1rem solid black;
border-right: 0.1rem solid black;
width: 0.6rem;
height: 2rem;
top: -5rem;
left: 1rem;
border-radius: 50% 50% 50% 0
}
/**
* Day 15 - North Pole sign
* https://codepen.io/johnnyfekete/pen/MWjmwBY
*/
.north-pole-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
background-color: #66cafb;
}
.north-pole {
--north-pole-white: #ffffff;
--north-pole-white-shadow: #eaf1f7;
--north-pole-pole: #c70000;
--north-pole-text: #103250;
position: relative;
width: 13rem;
height: 20rem;
transform: scale(0.3) translateX(-3rem);
}
@media only screen and (min-width: 576px) {
.north-pole {
transform: scale(0.35) translateX(-2rem);
}
}
.north-pole .ground {
position: absolute;
z-index: 1;
bottom: 0;
left: 2rem;
width: 9rem;
height: 2rem;
background-color: var(--north-pole-white);
border-radius: 50% 50% 20% 20% / 50% 50% 40% 40%;
overflow: hidden;
}
.north-pole .ground::before {
content: '';
display: block;
position: absolute;
width: 5rem;
height: 5rem;
background-color: var(--north-pole-white-shadow);
border-radius: 1.5rem;
transform: rotate(-20deg) skewX(50deg);
top: 0.3rem;
left: 1rem;
}
.north-pole .ground::after {
content: '';
display: block;
position: absolute;
width: 5rem;
height: 5rem;
background-color: var(--north-pole-white-shadow);
border-radius: 1.5rem;
transform: rotate(-20deg) skewX(30deg);
top: 0.6rem;
left: 4rem;
}
.north-pole .pole {
position: absolute;
z-index: 0;
top: 2rem;
left: 5.75rem;
bottom: 1rem;
width: 1.5rem;
background: repeating-linear-gradient(-25deg,
var(--north-pole-pole),
var(--north-pole-pole) 1.2rem,
var(--north-pole-white) 1.2rem,
var(--north-pole-white) 2.4rem
);
}
.north-pole .pole::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to right,
rgba(0, 0, 0, 0.2) 0,
rgba(0, 0, 0, 0) 20%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.3) 100%
);
}
.north-pole .pole::after {
content: '';
display: block;
position: absolute;
left: 0.7rem;
right: 0.3rem;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.3);
}
.north-pole .top {
position: absolute;
z-index: 5;
top: 0;
left: 5.25rem;
width: 2.5rem;
height: 2.5rem;
background-color: var(--north-pole-pole);
border-radius: 50%;
}
.north-pole .top::before {
content: '';
display: block;
position: absolute;
top: 2rem;
border-bottom: 0.75rem solid var(--north-pole-pole);
border-left: 0.5rem solid transparent;
border-right: 0.5rem solid transparent;
height: 0;
width: 1.5rem;
}
.north-pole .top::after {
content: '';
display: block;
position: absolute;
top: 0.4rem;
right: 0.3rem;
width: 1.3rem;
height: 1.3rem;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.north-pole .sign {
position: absolute;
box-sizing: border-box;
top: 3.5rem;
width: 13rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--north-pole-white);
border-radius: 0.5rem;
border: 0.35rem solid var(--north-pole-pole);
font-family: 'Amatic SC', cursive;
font-size: 3rem;
color: var(--north-pole-text);
}
.north-pole .icicle {
position: absolute;
top: 4.65rem;
width: 1rem;
height: 2.5rem;
overflow: hidden;
transform-origin: top center;
}
.north-pole .icicle::after {
content: '';
display: block;
position: absolute;
top: -3.5rem;
left: -2rem;
width: 5rem;
height: 5rem;
border-radius: 1rem;
background-color: var(--north-pole-white);
transform: scaleX(0.2) rotate(45deg);
}
.north-pole .icicle-1 {
left: 1rem;
transform: scaleY(1.2);
}
.north-pole .icicle-2 {
left: 2.5rem;
transform: scaleX(0.8);
}
.north-pole .icicle-3 {
left: 3.5rem;
transform: scaleX(0.4) scaleY(0.7);
}
.north-pole .icicle-4 {
left: 9rem;
transform: scaleX(0.7) scaleY(0.8);
}
.north-pole .icicle-5 {
left: 11rem;
transform: scaleX(0.7) scaleY(1.1);
}
.north-pole .ice-left {
position: absolute;
width: 5.5rem;
height: 0.5rem;
top: 4.65rem;
left: -0.15rem;
overflow: hidden;
}
.north-pole .ice-left::after {
content: '';
display: block;
position: absolute;
width: 5.5rem;
height: 2rem;
top: -1.5rem;
left: -0.25rem;
border-radius: 50%;
background-color: var(--north-pole-white);
}
.north-pole .ice-right {
position: absolute;
z-index: -1;
width: 3rem;
height: 0.7rem;
overflow: hidden;
top: 4.65rem;
right: -0.2rem;
}
.north-pole .ice-right::after {
content: '';
display: block;
position: absolute;
z-index: -1;
width: 3rem;
height: 2rem;
top: -1.35rem;
right: 0.5rem;
border-radius: 50%;
background-color: var(--north-pole-white);
}
.north-pole .snow {
position: absolute;
z-index: 1;
top: -1rem;
left: -0.7rem;
width: 5.7rem;
height: 1.5rem;
background-color: var(--north-pole-white);
border-radius: 50% 50% 20% 20% / 50% 50% 40% 40%;
overflow: hidden;
transform: rotate(-5deg);
}
.north-pole .snow::before {
content: '';
display: block;
position: absolute;
width: 5rem;
height: 5rem;
background-color: var(--north-pole-white-shadow);
border-radius: 1.5rem;
transform: rotate(-20deg) skewX(50deg);
top: 0.3rem;
left: 1rem;
}
.north-pole .snow::after {
content: '';
display: block;
position: absolute;
width: 5rem;
height: 5rem;
background-color: var(--north-pole-white-shadow);
border-radius: 1.5rem;
transform: rotate(-20deg) skewX(30deg);
top: 0.2rem;
left: 2rem;
}
/**
* Day 16 - ice skate
* https://codepen.io/johnnyfekete/pen/MWjoPBR
*/
.skate-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: #ffe66d;
}
.skate {
--skate-blade: #d8e2dc;
--skate-gray: #c5d4cb;
--skate: #00509d;
--skate-dark: #003f88;
--skate-brown: #c17c74;
--skate-brown-dark: #b15b51;
position: relative;
z-index: 2;
width: 16rem;
height: 16rem;
transform: scale(0.3) translateX(-4.5rem);
}
@media only screen and (min-width: 576px) {
.skate {
transform: scale(0.4) translateX(-3rem);
}
}
.skate .skate-blade {
position: absolute;
bottom: 0;
left: 0;
width: 14rem;
height: 1.5rem;
background-color: var(--skate-blade);
border-radius: 1rem;
}
.skate .skate-blade::before {
content: '';
display: block;
position: absolute;
top: -1.5rem;
left: 13rem;
width: 3rem;
height: 3rem;
background: radial-gradient(circle at 0 0,
transparent 1.5rem,
var(--skate-blade) 1.5rem,
var(--skate-blade) 3rem,
transparent 3rem)
}
.skate .skate-blade::after {
content: '';
display: block;
position: absolute;
top: -2.25rem;
left: 14.5rem;
width: 1.5rem;
height: 1.5rem;
background-color: var(--skate-blade);
border-radius: 1rem;
}
.skate .skate-blade-holder-left {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -1.5rem;
left: 1rem;
width: 3rem;
height: 3rem;
background: radial-gradient(circle at 0 0,
transparent 1.5rem,
var(--skate-gray) 1.5rem,
var(--skate-gray) 3rem,
transparent 3rem)
}
.skate .skate-blade-holder-left::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -1rem;
left: 1.5rem;
width: 1.5rem;
height: 1rem;
background-color: var(--skate-gray);
}
.skate .skate-blade-holder-right {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -1.5rem;
left: 10rem;
width: 3rem;
height: 3rem;
background: radial-gradient(circle at 3rem 0,
transparent 1.5rem,
var(--skate-gray) 1.5rem,
var(--skate-gray) 3rem,
transparent 3rem)
}
.skate .skate-blade-holder-right::before {
content: '';
display: block;
position: absolute;
z-index: -1;
top: -1rem;
left: 0rem;
width: 1.5rem;
height: 1rem;
background-color: var(--skate-gray);
}
.skate .skate-boot-bottom {
position: absolute;
top: 10.75rem;
left: 1.5rem;
height: 1.5rem;
width: 13rem;
border-radius: 0 0 0.75rem 0.75rem;
background-color: var(--skate-brown-dark);
}
.skate .skate-boot-bottom::after {
content: '';
display: block;
position: absolute;
left: 2rem;
height: 1.5rem;
width: 11rem;
border-radius: 0 0 0.75rem 0.75rem;
background-color: var(--skate-brown);
}
.skate .skate-boot-back {
position: absolute;
top: 2rem;
left: 1.5rem;
height: 8.75rem;
width: 4rem;
border-radius: 0.75rem 0.75rem 0 0;
background-color: var(--skate-dark);
}
.skate .skate-boot-main {
position: absolute;
top: 2rem;
left: 3.5rem;
height: 8.75rem;
width: 2.5rem;
border-radius: 0.75rem 0.75rem 0 0;
background-color: var(--skate);
}
.skate .skate-boot-main::after {
content: '';
display: block;
position: absolute;
z-index: 3;
top: 2.5rem;
left: 2.5rem;
width: 5rem;
height: 5rem;
background: radial-gradient(circle at 5rem 0,
transparent 5rem,
var(--skate) 5rem)
}
.skate .skate-boot-main-bottom {
position: absolute;
top: 8.5rem;
left: 12rem;
height: 2.25rem;
width: 2.5rem;
border-radius: 0 1.5rem 0 0;
background-color: var(--skate);
}
.skate .skate-boot-main-bottom::before {
content: '';
display: block;
position: absolute;
top: 1rem;
left: -7rem;
height: 1.25rem;
width: 7rem;
background-color: var(--skate);
}
.skate .skate-boot-main-bottom::after {
content: '';
display: block;
position: absolute;
z-index: 3;
left: -1rem;
height: 1rem;
width: 1rem;
background-color: var(--skate);
background: radial-gradient(circle at 0 0,
transparent 1rem,
var(--skate) 1rem);
}
.skate .skate-boot-front {
display: block;
position: absolute;
top: 3.5rem;
left: 3rem;
height: 7rem;
width: 9rem;
background: radial-gradient(circle at 9rem 0,
transparent 5rem,
var(--skate-dark) 5rem);
transform-origin: right center;
transform: scaleX(0.8);
}
.skate .skate-boot-front::before {
content: '';
display: block;
position: absolute;
top: -3.5rem;
left: -0rem;
height: 3.5rem;
width: 4rem;
background-color: var(--skate-dark);
border-radius: 3rem 0.75rem 0 0;
}
.skate .skate-tie {
position: absolute;
z-index: 5;
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
background-color: var(--skate-gray);
}
.skate .skate-tie::after {
content: '';
display: block;
position: absolute;
top: 0.45rem;
left: 0.45rem;
width: 2.75rem;
height: 0.6rem;
border-radius: 1rem;
background-color: var(--skate-brown);
}
.skate .skate-tie.skate-tie--1 {
top: 4rem;
left: 5.25rem;
transform: rotate(-10deg);
}
.skate .skate-tie.skate-tie--2 {
top: 6rem;
left: 5.75rem;
transform: rotate(-20deg);
}
.skate .skate-tie.skate-tie--3 {
top: 7.6rem;
left: 7rem;
transform: rotate(-30deg);
}
.skate .skate-tie.skate-tie--3::after {
width: 2.5rem;
}
/**
* Day 17 - shooting start
* https://codepen.io/johnnyfekete/pen/vYXZPJj
*/
.shooting-star-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #001122;
background: repeating-radial-gradient(circle at 1rem 1rem, rgba(255, 255, 255, 0.3) 0, transparent 0.2rem, transparent 100%),
repeating-radial-gradient(circle at 4rem 2rem, rgba(255, 255, 255, 0.5) 0, transparent 0.1rem, transparent 100%),
repeating-radial-gradient(circle at 9rem 7rem, rgba(255, 255, 255, 0.5) 0, transparent 0.1rem, transparent 100%),
repeating-radial-gradient(circle at 7rem 4.5rem, rgba(255, 255, 255, 0.5) 0, transparent 0.15rem, transparent 100%),
repeating-radial-gradient(circle at 3rem 9rem, rgba(255, 255, 255, 0.5) 0, transparent 0.1rem, transparent 100%),
repeating-radial-gradient(circle at 12rem 2.5rem, rgba(255, 255, 255, 0.5) 0, transparent 0.25rem, transparent 100%),
repeating-radial-gradient(circle at 11rem 8rem, rgba(255, 255, 255, 0.2) 0, transparent 0.25rem, transparent 100%),
repeating-radial-gradient(circle at 2rem 5rem, rgba(255, 255, 255, 0.2) 0, transparent 0.25rem, transparent 100%),
#001122;
background-size: 14rem 10rem;
height: 100%;
margin: 0;
}
.shooting-star {
--shooting-star: #f4d35e;
--shooting-star-tail-1: #9b5de5;
--shooting-star-tail-2: #00f5d4;
--shooting-star-tail-3: #f15bb5;
position: relative;
width: 12rem;
height: 10rem;
filter: drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.5))
drop-shadow(1px -1px 3px rgba(255, 255, 255, 0.5));
transform: scale(0.5) translateX(-0.7rem) translateY(2.5rem);
}
@media only screen and (min-width: 576px) {
.shooting-star {
transform: scale(0.7) translateX(0.5rem) translateY(2.5rem);
}
}
.shooting-star .shooting-star__star {
position: absolute;
width: 3rem;
height: 3rem;
transform-origin: center center;
transform: rotate(-25deg)
}
.shooting-star .shooting-star__star span {
position: absolute;
display: block;
transform-origin: 50% 90%;
transform: scaleX(0.6);
}
.shooting-star .shooting-star__star span::before {
content: '';
display: block;
width: 2rem;
height: 2rem;
background-color: var(--shooting-star);
border-radius: 0.25rem 0.25rem 1rem 0.25rem;
transform: rotate(45deg);
}
.shooting-star .shooting-star__star span:nth-child(2) {
transform: rotate(72deg) scaleX(0.6);
}
.shooting-star .shooting-star__star span:nth-child(3) {
transform: rotate(144deg) scaleX(0.6);
}
.shooting-star .shooting-star__star span:nth-child(4) {
transform: rotate(216deg) scaleX(0.6);
}
.shooting-star .shooting-star__star span:nth-child(5) {
transform: rotate(-72deg) scaleX(0.6);
}
.shooting-star .shooting-star__tail {
position: absolute;
top: 1.3rem;
left: 1rem;
width: 8rem;
height: 8rem;
background-color: rgba(255, 0, 0, 0.2);
background: radial-gradient(circle at 0 100%,
transparent 0,
transparent 5rem,
var(--shooting-star-tail-1) 5rem,
var(--shooting-star-tail-1) 6rem,
var(--shooting-star-tail-2) 6rem,
var(--shooting-star-tail-2) 7rem,
var(--shooting-star-tail-3) 7rem,
var(--shooting-star-tail-3) 8rem,
transparent 8.05rem);
transform-origin: top left;
transform: scale(0.8) rotate(-10deg) scaleY(0.6);
}
.shooting-star .shooting-star__tail span {
position: absolute;
margin-top: -0.1rem;
width: 1rem;
height: 0.75rem;
border-radius: 0 0 1rem 1rem / 0 0 1rem 1rem;
}
.shooting-star .shooting-star__tail span:nth-child(1) {
transform: translateX(5rem) translateY(8rem);
background-color: var(--shooting-star-tail-1);
}
.shooting-star .shooting-star__tail span:nth-child(2) {
transform: translateX(6rem) translateY(8rem);
background-color: var(--shooting-star-tail-2);
}
.shooting-star .shooting-star__tail span:nth-child(3) {
transform: translateX(7rem) translateY(8rem);
background-color: var(--shooting-star-tail-3);
}
/**
* Day 18 - animated drum
* https://codepen.io/johnnyfekete/pen/xxErNmw
*/
.drum-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #bee3db;
height: 100%;
margin: 0;
}
.drum {
--drum-yellow: #e9c46a;
--drum-dark-yellow: #cf9b1f;
--drum-light-red: #ef233c;
--drum-dark-red: #6a040f;
--drum-white: #edf6f9;
--drum-top: #cec2ab;
--drum-stick: #887880;
position: relative;
width: 16rem;
height: 17rem;
transform: scale(0.22) translateX(-5rem) rotate(5deg);
}
@media only screen and (min-width: 576px) {
.drum {
transform: scale(0.3) translateX(-5.5rem) rotate(5deg);
}
}
.drum .side {
position: absolute;
top: 6rem;
}
.drum .side__bottom {
position: absolute;
top: 3rem;
width: 16rem;
height: 8rem;
background-color: var(--drum-yellow);
border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
.drum .side__bottom::before {
content: '';
display: block;
position: absolute;
top: -3rem;
width: 16rem;
height: 9rem;
background-color: var(--drum-dark-red);
border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
.drum .side__bottom::after {
content: '';
display: block;
position: absolute;
top: -3.2rem;
width: 16rem;
height: 9rem;
background-color: var(--drum-light-red);
border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
.drum .side__top {
position: absolute;
width: 16rem;
height: 3rem;
}
.drum .side__top::before {
content: '';
display: block;
position: absolute;
width: 16rem;
height: 3rem;
background-color: var(--drum-dark-red);
border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
.drum .side__top::after {
content: '';
display: block;
position: absolute;
top: -1.2rem;
width: 16rem;
height: 4rem;
background-color: var(--drum-yellow);
border-radius: 0 0 50% 50% / 0 0 2rem 2rem;
}
.drum .side .pattern {
position: absolute;
height: 9rem;
border-right: 0.4rem solid var(--drum-yellow);
}
.drum .side .pattern::after,
.drum .side .pattern.pattern-6::before{
content: '';
display: block;
width: 1.2rem;
height: 1.2rem;
margin-left: -0.4rem;
position: absolute;
background-color: var(--drum-white);
border-radius: 50%;
}
.drum .side .pattern.pattern-1 {
transform: translateX(1.6rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-1::after {
top: 0.3rem;
}
.drum .side .pattern.pattern-2 {
transform: translateX(4.4rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-2::after {
top: 7.6rem;
left: -0.2rem;
}
.drum .side .pattern.pattern-3 {
transform: translateX(6.3rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-3::after {
top: 1.3rem;
left: -0.05rem;
}
.drum .side .pattern.pattern-4 {
transform: translateX(9.3rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-4::after {
top: 8rem;
left: -0.1rem;
}
.drum .side .pattern.pattern-5 {
transform: translateX(11.3rem) translateY(0.6rem) rotate(-20deg);
}
.drum .side .pattern.pattern-5::after {
top: 1.3rem;
left: -0.1rem;
}
.drum .side .pattern.pattern-6 {
transform: translateX(14rem) translateY(0.6rem) rotate(20deg);
}
.drum .side .pattern.pattern-6::before {
top: 7.6rem;
left: -0.1rem;
}
.drum .side .pattern.pattern-6::after {
top: 0.4rem;
}
.drum .top {
position: absolute;
top: 2rem;
width: 16rem;
height: 5rem;
background-color: var(--drum-dark-yellow);
border-radius: 50% / 2rem;
overflow: hidden;
}
.drum .top::before {
content: '';
display: block;
position: absolute;
top: 1rem;
width: 16rem;
height: 4rem;
background-color: var(--drum-top);
border-radius: 50% / 2rem;
}
.drum .top::after {
content: '';
display: block;
position: absolute;
top: -0.1rem;
left: -0.5rem;
box-sizing: border-box;
width: 17rem;
height: 5.5rem;
border-radius: 50%;
border: 0.4rem solid var(--drum-yellow);
}
.drum .drum-stick {
position: absolute;
z-index: 5;
width: 12rem;
height: 0.6rem;
background: var(--drum-stick);
border-radius: 50% 20% 20% 50% / 50% ;
transform-origin: 90% 50%;
}
.drum .drum-stick::before {
content: '';
display: block;
position: absolute;
width: 0.8rem;
height: 0.6rem;
background: var(--drum-stick);
border-radius: 50%;
}
.drum .drum-stick.drum-stick--left {
left: -14rem;
top: -1rem;
transform: rotate(-170deg);
animation: anim-drum-stick-left 0.3s infinite;
}
.drum .drum-stick.drum-stick--right {
left: 9rem;
top: -1rem;
transform: rotate(-30deg);
animation: anim-drum-stick-right 0.3s infinite;
}
.drum .drum-stick-shadow {
position: absolute;
top: 4rem;
width: 3rem;
height: 1.5rem;
background: radial-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%);
border-radius: 50%;
}
.drum .drum-stick-shadow.drum-stick-shadow--left {
left: 4.5rem;
animation: anim-drum-shadow-left 0.3s infinite;
}
.drum .drum-stick-shadow.drum-stick-shadow--left {
left: 4.5rem;
animation: anim-drum-shadow-left 0.3s infinite;
}
.drum .drum-stick-shadow.drum-stick-shadow--right {
left: 9rem;
animation: anim-drum-shadow-right 0.3s infinite;
}
@keyframes anim-drum-stick-left {
0% { transform: rotate(-170deg) translateX(1rem); }
50% { transform: rotate(-150deg) translateX(0); }
100% { transform: rotate(-170deg) translateX(1rem); }
}
@keyframes anim-drum-shadow-left {
0% { transform: scale(1.6); opacity: 0.3; }
50% { transform: scale(0.6); opacity: 1; }
100% { transform: scale(1.6); opacity: 0.3; }
}
@keyframes anim-drum-stick-right {
0% { transform: rotate(-30deg) translateX(0); }
50% { transform: rotate(-10deg) translateX(1rem); }
100% { transform: rotate(-30deg) translateX(0); }
}
@keyframes anim-drum-shadow-right {
0% { transform: scale(0.6); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.3; }
100% { transform: scale(0.6); opacity: 1; }
}
/**
* Day 19 - animated Christmas sparkler
* https://codepen.io/johnnyfekete/pen/MWjveNj
*/
.sparkler-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #577399;
height: 100%;
}
.sparkler {
--sparkler-stick: #dee2e6;
--sparkler-gun-powder: #706677;
--sparkler-burnt: #252525;
--sparkler-ember: #ff9f1c;
position: relative;
margin-top: 2rem;
height: 16rem;
transform: scale(0.4) translateX(-0.5rem) translateY(-1.5rem) rotate(55deg);
}
@media only screen and (min-width: 576px) {
.sparkler {
transform: scale(0.5) translateX(-0.5rem) translateY(-1.5rem) rotate(55deg);
}
}
.sparkler .stick {
position: absolute;
top: 10rem;
margin-left: -0.1rem;
width: 0.2rem;
height: 6rem;
background-color: var(--sparkler-stick);
border-radius: 0.5rem;
}
.sparkler .gun-powder {
position: absolute;
margin-left: -0.2rem;
bottom: 6rem;
width: 0.4rem;
height: 10rem;
background-color: var(--sparkler-burnt);
border-radius: 0.5rem;
}
.sparkler .gun-powder::before {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0.4rem;
height: 10rem;
background: linear-gradient(to bottom,
var(--sparkler-ember) 0.3rem,
var(--sparkler-gun-powder) 0.4rem
);
border-radius: 0.5rem;
animation: sparkler-burn-anim 20s infinite;
}
.sparkler .sparkler-light {
position: absolute;
width: 9rem;
height: 9rem;
margin-left: -4.4rem;
margin-top: -1.4rem;
animation: sparkler-light-anim 20s infinite;
}
.sparkler .sparkler-light::after {
content: '';
display: block;
border-radius: 50%;
width: 9rem;
height: 9rem;
background-color: rgba(255, 255, 230, 0.05);
animation: sparkler-light-pulsating 2s infinite linear;
}
.sparkler .spark {
position: absolute;
width: 0.1rem;
height: 0.1rem;
bottom: 4.3rem;
left: 4.35rem;
transform: rotate(var(--spark-rotate));
}
.sparkler .spark::after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0.1rem;
height: 2rem;
border-radius: 0.1rem;
opacity: 0;
background-color: white;
transform-origin: bottom center;
animation: sparkler-sparkle 0.5s infinite linear;
animation-delay: var(--spark-delay);
}
@keyframes sparkler-burn-anim {
0% {
height: 10rem
}
100% {
height: 0
}
}
@keyframes sparkler-light-anim {
0% {
bottom: 11.5rem
}
100% {
bottom: 1.5rem;
}
}
@keyframes sparkler-light-pulsating {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
@keyframes sparkler-sparkle {
0% {
transform: translateY(-0.5rem) scaleY(0.25);
opacity: 0;
}
10% {
transform: translateY(-1rem) scaleY(0.5);
opacity: 0.35;
}
30% {
transform: translateY(-2rem) scaleY(0.5);
opacity: 0.7;
}
50% {
transform: translateY(-4rem) scaleY(1.5);
opacity: 0.7;
}
51% {
opacity: 0;
transform: translateY(-4rem) scaleY(1);
}
100% {
opacity: 0;
transform: translateY(0) scaleY(0.25);
}
}
/**
* Day 20 - pom hat with a single div
* https://codepen.io/johnnyfekete/pen/KKgvrJK
*/
.pom-hat-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #b8f2e6;
height: 100%;
}
.pom-hat {
--pom-hat-pink: #f28482;
--pom-hat-green: #84a59d;
--pom-hat-purple: #6d597a;
position: absolute;
width: 8rem;
height: 10rem;
border-radius: 4rem 4rem 0 0;
background:
linear-gradient(135deg, var(--pom-hat-green) 25%, transparent 25%) -0.5rem 0,
linear-gradient(225deg, var(--pom-hat-green) 25%, transparent 25%) -0.5rem 0,
linear-gradient(315deg, var(--pom-hat-green) 25%, transparent 25%),
linear-gradient(45deg, var(--pom-hat-green) 25%, transparent 25%);
background-size: 1rem 1rem;
background-color: var(--pom-hat-pink);
transform: scale(0.5) translateY(1rem);
}
.pom-hat::before {
content: '';
display: block;
width: 8rem;
height: 10rem;
border-radius: 4rem 4rem 0 0;
background: linear-gradient(to bottom,
var(--pom-hat-pink) 0,
var(--pom-hat-pink) 1.8rem,
var(--pom-hat-green) 1.8rem,
var(--pom-hat-green) 2.1rem,
var(--pom-hat-pink) 2.1rem,
var(--pom-hat-pink) 2.6rem,
var(--pom-hat-green) 2.6rem,
var(--pom-hat-green) 2.9rem,
var(--pom-hat-pink) 2.9rem,
var(--pom-hat-pink) 4.5rem,
transparent 4.5rem,
transparent 6.5rem,
var(--pom-hat-pink) 6.5rem
)
}
.pom-hat::after {
content: '';
display: block;
position: absolute;
left: -1rem;
top: -2.8rem;
width: 10rem;
height: 13.8rem;
background: radial-gradient(circle at 5rem 1.7rem, white 0, white 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 1rem 10.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1rem 11rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1rem 11.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1rem 12rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1rem 12.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 9rem 10.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 9rem 11rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 9rem 11.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 9rem 12rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 9rem 12.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1.5rem 10.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 1.5rem 12.2rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.8rem, transparent 0.8rem, transparent 100%),
radial-gradient(circle at 8.5rem 10.5rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.5rem, transparent 0.5rem, transparent 100%),
radial-gradient(circle at 8.5rem 12.2rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 0.8rem, transparent 0.8rem, transparent 100%),
radial-gradient(circle at 2.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 3.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 4.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 5.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 6.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%),
radial-gradient(circle at 7.5rem 11.4rem, var(--pom-hat-purple) 0, var(--pom-hat-purple) 1.5rem, transparent 1.5rem, transparent 100%)
}
/**
* Day 21 - toy train
* https://codepen.io/johnnyfekete/pen/jOMGMJy
*/
.toy-train-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
margin: 0;
background-color: #f1faee;
}
.toy-train {
--toy-train-red: #f45b69;
--toy-train-blue: #456990;
--toy-train-gold: #edaa41;
--toy-train-gray: #ababab;
width: 39rem;
height: 20rem;
position: relative;
transform: scale(0.15) translateX(-16rem) translateY(-45rem);
}
@media only screen and (min-width: 576px) {
.toy-train {
transform: scale(0.20) translateX(-15rem) translateY(-26rem);
}
}
.toy-train .locomotive {
position: absolute;
top: 5rem;
animation: train-shake 1s infinite linear;
}
.toy-train .passanger-car {
position: absolute;
top: 5rem;
left: 25rem;
animation: train-shake 1s infinite linear;
animation-delay: 0.2s;
}
.toy-train .locomotive .chimney {
position: absolute;
left: 5rem;
width: 5.5rem;
height: 1rem;
border-radius: 0.5rem;
background-color: var(--toy-train-gold);
}
.toy-train .locomotive .chimney::before {
content: '';
display: block;
position: absolute;
top: 1rem;
left: 0.5rem;
width: 4.5rem;
height: 2rem;
border-radius: 0.5rem 0.5rem 3rem 3rem;
background-color: var(--toy-train-blue);
}
.toy-train .locomotive .chimney::after {
content: '';
display: block;
position: absolute;
top: 2.5rem;
left: 1.75rem;
width: 2rem;
height: 3rem;
background-color: var(--toy-train-blue);
}
.toy-train .chimney .smoke {
position: absolute;
top: -3rem;
left: 1rem;
width: 5rem;
height: 3rem;
background:
radial-gradient(circle at 1rem 1.5rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem),
radial-gradient(circle at 2rem 1rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem),
radial-gradient(circle at 3rem 1rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem),
radial-gradient(circle at 4rem 1.5rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem),
radial-gradient(circle at 2rem 2rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem),
radial-gradient(circle at 3rem 2rem,
var(--toy-train-gray) 0, var(--toy-train-gray) 0.5rem, transparent 1rem);
opacity: 0;
animation: train-smoke 3s infinite linear;
}
.toy-train .chimney .smoke:nth-child(2) {
animation-delay: 1s;
}
.toy-train .chimney .smoke:nth-child(3) {
animation-delay: 2s;
}
.toy-train .locomotive .boiler {
position: absolute;
z-index: 2;
top: 7rem;
left: 2rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 0.75rem;
background-color: var(--toy-train-gold);
}
.toy-train .locomotive .boiler::before {
content: '';
display: block;
position: absolute;
top: -2rem;
left: 0.75rem;
width: 9.5rem;
height: 6rem;
border-radius: 3rem 0 0 3rem;
background-color: var(--toy-train-red);
}
.toy-train .locomotive .boiler::after {
content: '';
display: block;
position: absolute;
top: -2.5rem;
left: 2.75rem;
width: 1rem;
height: 7rem;
border-radius: 1rem;
background-color: var(--toy-train-gold);
}
.toy-train .car-cabin {
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 4;
top: 2rem;
width: 8em;
height: 6.5rem;
border-radius: 0 0;
background-color: var(--toy-train-blue);
}
.toy-train .car-cabin::before {
content: '';
display: block;
position: absolute;
z-index: 4;
top: -2rem;
left: -1rem;
right: -1rem;
height: 2rem;
border-radius: 2rem 2rem 0.5rem 0.5rem;
background-color: var(--toy-train-red);
}
.toy-train .passanger-car .car-cabin {
width: 12rem;
}
.toy-train .car-cabin .window {
width: 3.5rem;
height: 4.5rem;
box-sizing: border-box;
border: 0.5rem solid var(--toy-train-gold);
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.25rem;
}
.toy-train .side-bar {
position: absolute;
z-index: 5;
top: 8.5rem;
left: 4.75rem;
width: 16em;
height: 1rem;
border-radius: 0 0.5rem 0.5rem 0;
background-color: var(--toy-train-gold);
}
.toy-train .locomotive .car-cabin {
left: 12.25rem;
}
.toy-train .passanger-car .side-bar {
left: -0.5rem;
width: 13rem;
border-radius: 0.5rem;
}
.toy-train .passanger-car .window:first-child {
margin-left: 1.5rem;
}
.toy-train .passanger-car .window:last-child {
margin-right: 1.5rem;
}
.toy-train .locomotive .car-cabin .window {
border-radius: 2rem 2rem 0.5rem 0.5rem;
}
.toy-train .car-bottom {
position: absolute;
z-index: 4;
top: 9rem;
height: 4rem;
border-radius: 0 0 1rem 1rem;
background-color: var(--toy-train-blue);
}
.toy-train .locomotive .car-bottom {
left: 4.75rem;
width: 15.5rem;
}
.toy-train .passanger-car .car-bottom {
width: 12rem;
}
.toy-train .bumper {
position: absolute;
right: -2rem;
top: 1rem;
width: 2rem;
height: 1rem;
background-color: var(--toy-train-blue);
}
.toy-train .bumper::after {
content: '';
display: block;
position: absolute;
right: 0rem;
top: -0.5rem;
width: 1rem;
height: 2rem;
border-radius: 0.5rem;
background-color: var(--toy-train-blue);
}
.toy-train .bumper.bumper--front {
left: -2rem;
right: auto;
transform: rotate(180deg);
}
.toy-train .front {
position: absolute;
z-index: 7;
left: 2.5rem;
top: 9.5rem;
width: 3.5rem;
height: 2.25rem;
border-radius: 0.5rem;
background-color: var(--toy-train-gray);
}
.toy-train .snow-breaker {
position: absolute;
z-index: 6;
left: 0.75rem;
top: 11rem;
width: 3.5rem;
height: 2.25rem;
border-radius: 0.5rem;
border: 0.75rem solid var(--toy-train-red);
border-left: none;
border-top: none;
}
.toy-train .snow-breaker::before {
content: '';
display: block;
position: absolute;
bottom: -0.5rem;
left: 0;
width: 5rem;
height: 0.75rem;
border-radius: 0.5rem;
background-color: var(--toy-train-red);
transform-origin: 0.375rem 0.375rem;
transform: rotate(-50deg);
}
.toy-train .snow-breaker::after {
content: '';
display: block;
position: absolute;
bottom: -0.5rem;
left: 2rem;
width: 4rem;
height: 0.75rem;
border-radius: 0.5rem;
background-color: var(--toy-train-red);
transform-origin: 0.375rem 0.375rem;
transform: rotate(-70deg);
}
.wheel {
position: absolute;
top: 1rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
background:
radial-gradient(circle at center,
var(--toy-train-gold) 10%,
var(--toy-train-red) 10%,
var(--toy-train-red) 25%,
transparent 25%,
transparent 55%,
var(--toy-train-red) 55%
),
linear-gradient(0deg,
transparent 0,
transparent 45%,
var(--toy-train-red) 45%,
var(--toy-train-red) 55%,
transparent 55%,
transparent 100%
),
linear-gradient(60deg,
transparent 0,
transparent 45%,
var(--toy-train-red) 45%,
var(--toy-train-red) 55%,
transparent 55%,
transparent 100%
),
linear-gradient(120deg,
transparent 0,
transparent 45%,
var(--toy-train-red) 45%,
var(--toy-train-red) 55%,
transparent 55%,
transparent 100%
)
}
.toy-train .locomotive .wheel:first-child {
left: 3rem;
animation: train-wheel-1 2s infinite linear;
}
.toy-train .locomotive .wheel:nth-child(2) {
left: 10rem;
animation: train-wheel-2 2s infinite linear;
}
.toy-train .passanger-car .wheel:first-child {
left: 0.5rem;
animation: train-wheel-1 2s infinite linear;
}
.toy-train .passanger-car .wheel:nth-child(2) {
left: 6.5rem;
animation: train-wheel-2 2s infinite linear;
}
@keyframes train-wheel-1 {
0% {
transform: rotate(400deg);
}
100% {
transform: rotate(40deg);
}
}
@keyframes train-wheel-2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes train-shake {
0% { transform: translate(0.1rem, 0.1rem); }
10% { transform: translate(-0.1rem, 0rem); }
20% { transform: translate(0rem, -0.1rem); }
30% { transform: translate(0.1rem, -0.1rem); }
40% { transform: translate(-0.1rem, 0rem); }
50% { transform: translate(0rem, -0.1rem); }
60% { transform: translate(-0.1rem, 0rem); }
70% { transform: translate(0rem, -0.1rem); }
80% { transform: translate(-0.1rem, 0.1rem); }
90% { transform: translate(-0.1rem, -0.1rem); }
100% { transform: translate(0.1rem, 0.1rem); }
}
@keyframes train-smoke {
0% { transform: translate(-1.5rem, 0.5rem) scale(0.5); opacity: 0 }
10% { transform: translate(0rem, 0rem) scale(0.7); opacity: 0.5 }
20% { transform: translate(2rem, -1rem) scale(1); opacity: 1 }
70% { transform: translate(15rem, -4rem) scale(1.3); opacity: 1 }
100% { transform: translate(20rem, -6rem) scale(1.5); opacity: 0 }
}
/**
* Day 22- jingle bells sheet music
* https://codepen.io/johnnyfekete/pen/LYRzXMy
*/
.jingle-bells-container {
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
background-color: #fefae0;
height: 100%;
}
.jingle-bells {
position: absolute;
left: 0;
width: 80%;
height: 10rem;
font-family: 'FreeSerif Medium';
transform: scale(0.15) translateX(-40rem);
}
@media only screen and (min-width: 576px) {
.jingle-bells {
transform: scale(0.20) translateX(-35rem);
}
}
.jingle-bells .staff-lines {
display: flex;
height: 10rem;
margin-left: 55rem;
width: 700rem;
background: linear-gradient(to bottom,
black 0,
black 2%,
transparent 2%,
transparent 24.5%,
black 24.5%,
black 26.5%,
transparent 26.5%,
transparent 49%,
black 49%,
black 51%,
transparent 51%,
transparent 73.5%,
black 73.5%,
black 75.5%,
transparent 75.5%,
transparent 98%,
black 98%,
black 100%
);
transform: translateX(-540rem);
animation: jingle-bells-melody 23s linear;
animation-play-state: paused;
}
.jingle-bells .clef {
margin-top: -9.5rem;
margin-right: 5rem;
font-size: 23.5rem;
}
.jingle-bells .bar {
position: relative;
display: flex;
min-width: 28rem;
height: 10rem;
margin-left: 2.5rem;
padding-right: 2rem;
border-right: 0.3rem solid black;
}
.jingle-bells .bar.bar--end::after {
content: '';
display: block;
position: absolute;
top: 0;
right: -1.5rem;
width: 0.8rem;
height: 10rem;
background-color: black;
}
.jingle-bells .note {
font-size: 13rem;
height: 13rem;
margin-right: 2rem;
min-width: 5.33rem;
animation: jingle-bells-note 0.5s linear;
animation-play-state: paused;
}
.jingle-bells .note.note--full {
position: relative;
top: 1.3rem;
}
.jingle-bells .note.note--c {
margin-top: 1.2rem;
position: relative;
}
.jingle-bells .note.note--c::after {
content: '';
display: block;
position: absolute;
margin-top: -6.5rem;
width: 5.5rem;
border-bottom: 0.2rem solid black;
}
.jingle-bells .note.note--full.note--c::after {
margin-top: -7.8rem;
}
.jingle-bells .note.note--d {
margin-top: 0;
}
.jingle-bells .note.note--e {
margin-top: -1.5rem;
}
.jingle-bells .note.note--f {
margin-top: -2.75rem;
}
.jingle-bells .note.note--g {
margin-top: -4rem;
}
.calendar-grid :checked ~ .inside .jingle-bells .staff-lines,
.calendar-grid :checked ~ .inside .jingle-bells .note
{
animation-play-state: running;
}
.jingle-bells .note.note--a1 { animation-delay: 1.0s }
.jingle-bells .note.note--a2 { animation-delay: 1.3s }
.jingle-bells .note.note--a3 { animation-delay: 1.7s }
.jingle-bells .note.note--a4 { animation-delay: 2.4s }
.jingle-bells .note.note--a5 { animation-delay: 2.7s }
.jingle-bells .note.note--a6 { animation-delay: 3.1s }
.jingle-bells .note.note--a7 { animation-delay: 3.7s }
.jingle-bells .note.note--a8 { animation-delay: 4s }
.jingle-bells .note.note--a9 { animation-delay: 4.4s }
.jingle-bells .note.note--a10 { animation-delay: 4.9s }
.jingle-bells .note.note--a11 { animation-delay: 5.2s }
.jingle-bells .note.note--a12 { animation-delay: 6.6s }
.jingle-bells .note.note--a13 { animation-delay: 6.9s }
.jingle-bells .note.note--a14 { animation-delay: 7.3s }
.jingle-bells .note.note--a15 { animation-delay: 7.9s }
.jingle-bells .note.note--a16 { animation-delay: 8.2s }
.jingle-bells .note.note--a17 { animation-delay: 8.5s }
.jingle-bells .note.note--a18 { animation-delay: 8.8s }
.jingle-bells .note.note--a19 { animation-delay: 9s }
.jingle-bells .note.note--a20 { animation-delay: 9.3s }
.jingle-bells .note.note--a21 { animation-delay: 9.6s }
.jingle-bells .note.note--a22 { animation-delay: 9.9s }
.jingle-bells .note.note--a23 { animation-delay: 10.3s }
.jingle-bells .note.note--a24 { animation-delay: 10.7s }
.jingle-bells .note.note--a25 { animation-delay: 11.4s }
.jingle-bells .note.note--a26 { animation-delay: 12.4s }
.jingle-bells .note.note--a27 { animation-delay: 12.7s }
.jingle-bells .note.note--a28 { animation-delay: 13.1s }
.jingle-bells .note.note--a29 { animation-delay: 13.8s }
.jingle-bells .note.note--a30 { animation-delay: 14.1s }
.jingle-bells .note.note--a31 { animation-delay: 14.5s }
.jingle-bells .note.note--a32 { animation-delay: 15.1s }
.jingle-bells .note.note--a33 { animation-delay: 15.4s }
.jingle-bells .note.note--a34 { animation-delay: 15.8s }
.jingle-bells .note.note--a35 { animation-delay: 16.3s }
.jingle-bells .note.note--a36 { animation-delay: 16.6s }
.jingle-bells .note.note--a37 { animation-delay: 18s }
.jingle-bells .note.note--a38 { animation-delay: 18.3s }
.jingle-bells .note.note--a39 { animation-delay: 18.7s }
.jingle-bells .note.note--a40 { animation-delay: 19.3s }
.jingle-bells .note.note--a41 { animation-delay: 19.6s }
.jingle-bells .note.note--a42 { animation-delay: 19.9s }
.jingle-bells .note.note--a43 { animation-delay: 20.3s }
.jingle-bells .note.note--a44 { animation-delay: 20.4s }
.jingle-bells .note.note--a45 { animation-delay: 20.7s }
.jingle-bells .note.note--a46 { animation-delay: 21s }
.jingle-bells .note.note--a47 { animation-delay: 21.3s }
.jingle-bells .note.note--a48 { animation-delay: 21.7s }
.jingle-bells .note.note--a49 { animation-delay: 22.1s }
@keyframes jingle-bells-melody {
0% { transform: translateX(0) }
100% { transform: translateX(-540rem) }
}
@keyframes jingle-bells-note {
0% {
filter: drop-shadow(0 0 0 black);
transform: scale(1) translateY(0);
}
50% {
filter: drop-shadow(0 -1rem 1.3rem black);
transform: scale(1.2) translateY(-1.5rem);
}
100% {
filter: drop-shadow(0 -2rem 2rem transparent);
transform: scale(1) translateY(0);
}
}
/**
* Day 23 - Rudolph, the red nosed reindeer
* https://codepen.io/johnnyfekete/pen/xxEPYGj
*/
.reindeer-container {
display: flex;
align-items: center;
justify-content: center;
background-color: #eee4df;
height: 100%;
margin: 0;
}
.reindeer {
--rudolph-antler: #ddb892;
--rudolph-body: #9d6b53;
--rudolph-body-dark: #946651;
--rudolph-nose: #8c6351;
--rudolph-nose-red: #690500;
--rudolph-eye: #432818;
--rudolph-ear: #774936;
--rudolph-belly: #ede0d4;
--rudolph-leg: #432818;
position: relative;
width: 16rem;
height: 16rem;
transform: scale(0.4) translateX(-3.5rem);
}
@media only screen and (min-width: 576px) {
.reindeer {
transform: scale(0.4) translateX(-3.5rem);
}
}
.reindeer .antler {
position: absolute;
margin: 2.7rem 0 0 2.3rem;
width: 5rem;
height: 0.7rem;
border-radius: 0.35rem;
background-color: var(--rudolph-antler);
transform-origin: 5.7rem 0;
transform: translate(-1rem, 2.5rem) rotate(20deg);
}
.reindeer .antler.antler--right {
transform: scaleX(-1) translate(-1rem, 2.5rem) rotate(20deg);
}
.reindeer .antler .hook:first-child {
position: absolute;
top: -2.3rem;
left: -2.3rem;
width: 3rem;
height: 3rem;
background: radial-gradient(circle at 100% 0,
transparent,
transparent 2.3rem,
var(--rudolph-antler) 2.3rem,
var(--rudolph-antler) 3rem,
transparent 3rem)
}
.reindeer .antler .hook:nth-child(2) {
position: absolute;
top: -1.7rem;
width: 2.4rem;
height: 2.4rem;
background: radial-gradient(circle at 100% 0,
transparent,
transparent 1.7rem,
var(--rudolph-antler) 1.7rem,
var(--rudolph-antler) 2.4rem,
transparent 2.4rem)
}
.reindeer .antler .hook:nth-child(3) {
position: absolute;
top: -1.3rem;
left: 1.5rem;
width: 2rem;
height: 2rem;
background: radial-gradient(circle at 100% 0,
transparent,
transparent 1.3rem,
var(--rudolph-antler) 1.3rem,
var(--rudolph-antler) 2rem,
transparent 2rem)
}
.reindeer .antler .hook::before {
content: '';
display: block;
position: absolute;
top: -0.35rem;
width: 0.7rem;
height: 0.7rem;
background-color: var(--rudolph-antler);
border-radius: 0.35rem;
}
.reindeer .head {
position: absolute;
z-index: 3;
top: 4rem;
left: 5rem;
width: 6rem;
height: 6rem;
}
.reindeer .head .face {
position: absolute;
width: 6rem;
height: 6rem;
background: var(--rudolph-body);
border-radius: 50% 50% 50% 50% / 50% 50% 60% 60%;
}
.reindeer .head .face::after {
content: '';
display: block;
position: absolute;
top: 0.05rem;
left: 0.5rem;
width: 5rem;
height: 5.4rem;
border-radius: 50%;
background: radial-gradient(circle at center,
transparent,
transparent 2.5rem,
var(--rudolph-body-dark) 2.5rem,
var(--rudolph-body-dark) 5rem
);
background-position: 0 0.2rem;
transform: scaleX(1.1) rotate(45deg) scaleX(1.1) scale(0.9);
}
.reindeer .ear {
position: absolute;
left: -2.6rem;
top: 1.5rem;
width: 5rem;
height: 2rem;
background: var(--rudolph-body);
border-radius: 50% 50% 60% 40% / 50% 40% 40% 50%;
transform: rotate(-10deg) scale(0.8);
}
.reindeer .ear::after {
content: '';
diplay: block;
position: absolute;
left: 1rem;
top: 0.5rem;
width: 3rem;
height: 1.2rem;
background: var(--rudolph-ear);
border-radius: 50% 50% 50% 40% / 50% 40% 60% 50%;
}
.reindeer .ear.ear--right {
left: auto;
right: -2.6rem;
transform: rotate(10deg) scaleX(-1) scale(0.8);
}
.reindeer .eye {
position: absolute;
top: 2.5rem;
left: 2rem;
width: 0.6rem;
height: 0.8rem;
border-radius: 50%;
background-color: var(--rudolph-eye);
transform: rotate(10deg);
}
.reindeer .eye.eye--right {
left: 3.4rem;
transform: rotate(-10deg);
}
.reindeer .nose {
position: absolute;
top: 3.5rem;
left: 0.7rem;
width: 4.6rem;
height: 3.6rem;
border-radius: 50%;
background-color: var(--rudolph-nose);
}
.reindeer .nose::before {
content: '';
display: block;
position: absolute;
top: 0.3rem;
left: 0.6rem;
width: 3.4rem;
height: 2.6rem;
border-radius: 50%;
background-color: var(--rudolph-nose-red);
}
.reindeer .nose::after {
content: '';
display: block;
position: absolute;
top: 0.6rem;
left: 1.6rem;
width: 1.8rem;
height: 1.2rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
}
.reindeer .body {
position: absolute;
top: 9.6rem;
left: 5rem;
width: 6rem;
height: 6rem;
background: var(--rudolph-body);
border-radius: 3rem 3rem 0 0 / 4rem 4rem 0 0;
}
.reindeer .body::after {
content: '';
display: block;
position: absolute;
width: 3rem;
height: 4rem;
background-color: var(--rudolph-belly);
border-radius: 50%;
top: 0rem;
left: 1.5rem;
}
.reindeer .hand {
position: absolute;
z-index: 2;
top: 1rem;
left: 0.8rem;
width: 2rem;
height: 2rem;
background: radial-gradient(circle at 100% 0,
transparent,
transparent 1.15rem,
var(--rudolph-leg) 1.2rem,
var(--rudolph-leg) 2rem,
transparent 2.05rem);
transform: scaleX(0.7) rotate(10deg);
}
.reindeer .hand::after {
content: '';
display: block;
position: absolute;
top: 1.2rem;
left: 1.6rem;
width: 0.8rem;
height: 0.8rem;
background-color: var(--rudolph-leg);
border-radius: 50%;
}
.reindeer .hand.hand--right {
left: 3.2rem;
transform: scaleX(-1) scaleX(0.7) rotate(10deg);
}
.reindeer .legs {
position: absolute;
left: -1rem;
top: 2rem;
width: 8rem;
height: 4rem;
overflow: hidden;
}
.reindeer .legs::before {
content: '';
display: block;
position: absolute;
top: 1rem;
left: 0.3rem;
width: 2rem;
height: 3.4rem;
background-color: var(--rudolph-body);
border-radius: 50%;
transform: rotate(-20deg);
}
.reindeer .legs::after {
content: '';
display: block;
position: absolute;
top: 1rem;
right: 0.3rem;
width: 2rem;
height: 3.4rem;
background-color: var(--rudolph-body);
border-radius: 50%;
transform: rotate(20deg);
}
.reindeer .foot {
position: absolute;
width: 3rem;
height: 1.5rem;
background-color: var(--rudolph-leg);
border-radius: 1.5rem 1.5rem 0 0;
top: 4.5rem;
}
.reindeer .foot.foot--right {
left: 3rem;
}
/**
* Day 24 - 3D CSS Christmas tree
* https://codepen.io/johnnyfekete/pen/YzGEMKx
*/
.christmas-tree-wrapper {
display: flex;
align-items: center;
justify-content: center;
background-color: #454545;
min-height: 100%;
width: 100%;
margin: 0;
}
.christmas-tree-container {
--christmas-tree-green-1: #047a07;
--christmas-tree-green-2: #0b6e4f;
--christmas-tree-green-3: #08a045;
--christmas-tree-green-4: #073b3a;
--christmas-tree-ornament-1: #ffba08;
--christmas-tree-ornament-2: #4cc9f0;
--christmas-tree-ornament-3: #ffffff;
--christmas-tree-ornament-4: #f72585;
perspective: 400px;
position: relative;
width: 340px;
height: 360px;
transform: translateX(0px) translateY(-110px) scale(0.28);
}
@media only screen and (min-width: 576px) {
.christmas-tree-container {
transform: scale(0.7);
}
}
.christmas-tree-container .glow {
position: absolute;
top: -60px;
width: 100px;
height: 100px;
background: radial-gradient(circle at center, white, transparent 50px);
animation: christmas-tree-glow 5s infinite linear;
}
.christmas-tree-container .shadow {
position: absolute;
top: 225px;
left: -20px;
width: 140px;
height: 70px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 576px) {
.christmas-tree-container .glow {
left: 100px;
}
.christmas-tree-container .shadow {
left: 80px;
}
}
.christmas-tree {
position: relative;
margin-top: 240px;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
transform-style: preserve-3d;
animation: christmas-tree-rotate-mobile 10s infinite linear;
}
@media only screen and (min-width: 576px) {
.christmas-tree {
animation: christmas-tree-rotate 10s infinite linear;
}
}
.christmas-tree .branches,
.christmas-tree .ct-ornaments,
.christmas-tree .tree-top {
transform-style: preserve-3d;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.christmas-tree .branch {
position: absolute;
border-radius: 5px;
background-color: var(--christmas-tree-green-1);
transform-origin: center center;
}
.christmas-tree .branch:nth-child(3n + 2) { background-color: var(--christmas-tree-green-2); }
.christmas-tree .branch:nth-child(3n + 1) { background-color: var(--christmas-tree-green-3); }
.christmas-tree .branch:nth-child(4n + 2) { background-color: var(--christmas-tree-green-4); }
.christmas-tree .ct-ornament {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--christmas-tree-ornament-1);
transform-origin: center center;
transform-style: preserve-3d;
}
.christmas-tree .ct-ornament:nth-child(4n + 0) { background-color: var(--christmas-tree-ornament-2); }
.christmas-tree .ct-ornament:nth-child(4n + 1) { background-color: var(--christmas-tree-ornament-3); }
.christmas-tree .ct-ornament:nth-child(4n + 2) { background-color: var(--christmas-tree-ornament-4); }
.christmas-tree .star {
transform-style: preserve-3d;
transform: translateZ(225px) translateY(-4px) rotateX(-90deg);
}
.christmas-tree .star,
.christmas-tree .star:before,
.christmas-tree .star:after {
position: absolute;
content: '';
height: 0;
width: 0;
border-top: solid 10px yellow;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
position: absolute;
top: 0;
left: calc(50% - 15px);
}
.christmas-tree .star:before {
transform: rotate(72deg);
top: -11px;
left: -15px;
}
.christmas-tree .star:after {
transform: rotate(287deg);
top: -11px;
left: -15px;
}
@keyframes christmas-tree-rotate {
0% { transform: translateX(100px) rotateX(60deg) rotateZ(0); }
99.99999% { transform: translateX(100px) rotateX(60deg) rotateZ(360deg); }
}
@keyframes christmas-tree-rotate-mobile {
0% { transform: rotateX(60deg) rotateZ(0); }
99.99999% { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes christmas-tree-glow {
0% { transform: scale(1.1); opacity: 0.15; }
50% { transform: scale(0.7); opacity: 0.25; }
100% { transform: scale(1.1); opacity: 0.15; }
}
!
