Holiday Calendar Card

In this example below you will see how to do a Holiday Calendar Card with some HTML / CSS and Javascript

It's holiday season, so I thought I'd make an animated calendar date tile.

Thumbnail
This awesome code was written by aaronguernsey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aaronguernsey ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Holiday Calendar Card</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="calendar">
  <article>
    <span class="month">25</span>
    <span class="date">
      <span class="date-number">25</span>
      <span class="snowman">&#9731;</span>
      <span class="snow snow--1">&#10052;</span>
      <span class="snow snow--2">&#10053;</span>
      <span class="snow snow--3">&#10054;</span>
      <span class="snow snow--4">&#10054;</span>
      <span class="snow snow--5">&#10052;</span>
      <span class="snow snow--6">&#10053;</span>
    </span>
    <span class="day">Dec</span>
  </article>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/aaronguernsey/holiday-calendar-card-aBMezb */
/* 
// My Christmas Color Theme Found Here:
// https://color.adobe.com/My-Christmas-color-theme-8546390/
*/
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500");
body {
  color: #FAFBF7;
  background-color: #FAFBF7;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

article {
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  width: 190px;
  height: 200px;
  text-align: center;
}

.month, .date, .day {
  border: 2px solid #73583f;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1 0 0;
}

.month {
  background-color: #315b45;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.day {
  position: relative;
  background-color: #468263;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 4;
}

.month, .day {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 1.2em;
}

.date {
  position: relative;
  background-color: #FAFBF7;
  color: #731509;
  flex: 2 0 0;
  border-top: 0;
  border-bottom: 0;
}

.date-number {
  position: absolute;
  align-self: center;
  visibility: hidden;
}

.snowman {
  color: #731509;
  font-weight: 100;
  font-size: 6em;
}

.snow {
  position: absolute;
  color: #731509;
  font-size: 1.2em;
}
.snow--1 {
  top: 0;
  left: 0;
  animation: flake-1 7s infinite;
}
.snow--2 {
  top: 0;
  left: 35%;
  animation: flake-4 5s infinite;
}
.snow--3 {
  top: 0;
  right: 0;
  animation: flake-3 5s infinite;
}
.snow--4 {
  top: 0;
  left: 15%;
  animation: flake-2 3s infinite;
}
.snow--5 {
  top: 0;
  left: 55%;
  animation: flake-2 9s infinite;
}
.snow--6 {
  top: 0;
  right: 25%;
  animation: flake-2 4s infinite;
}

@keyframes flake-1 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% {
    left: 5%;
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    top: 55%;
    left: 0;
    opacity: 0;
  }
}
@keyframes flake-2 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.2;
  }
  100% {
    top: 65%;
    opacity: 0;
  }
}
@keyframes flake-3 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% {
    opacity: 0.3;
    right: 5%;
  }
  50% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    right: 7%;
    top: 35%;
  }
}
@keyframes flake-4 {
  0% {
    top: -10px;
    opacity: 0;
  }
  25% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    top: 25%;
  }
}

Comments