advent-calendar

by mtenschert

HTML

<!--
https://github.com/hongkiat/advent-calendar
-->

<!DOCTYPE html>
<html lang="en">
<!-- 
  <head>
    <meta charset="utf-8">
    <title>Advent Calendar</title>

    <!-- Mobile-friendly viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lato:300,400,700'>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css">
   

  </head>    -->

  <body>

    <div class="demo-content cf">
      <article>

        <img src="https://www.alpinresorts.com/uploads/marketing/images/trans.png" alt="Advent Calendar" width="400" height="333" id="adventCal">

        <ul id="adventDoors"></ul>
      </article>
    </div>

  </body>

</html>

CSS

/* Styles for the Demo Wrapper */
html {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
body {
  margin: 0;
  background-color: #e6e9ed;
  font-family: "Lato", sans-serif;
}
header {
  background-color: #254d86;
}
header h1,
header a {
  padding: 15px;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}
header h1 {
  float: left;
  margin: 0;
}
header a {
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
  float: right;
  background-color: #1a365e;
}
header a:hover {
  background-color: #1f4272;
}
.demo-content {
  max-width: 400px;
  margin-top: 90px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 90px;
}

/* Styles for the Advent Calendar */
ul#adventDoors {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
}
#adventDoors li {
	position: absolute;
}
#adventDoors li a {
	color: #fff;
	width: 100%;
	height: 100%;
	font-size: 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	border: 1px #fff solid;
}
#adventDoors li a:not(.disabled):hover {
	color: #fff;
	background-color: transparent;
	background-color: #bf4d28);
}
#adventDoors li a.disabled {
	border-color: unset;
	background-color: #09505d;
	color: #fff;
	cursor: default;
}

JavaScript

var messages = [
	["There is nothing in the world so irresistibly contagious as laughter and good humor.", "Charles Dickens"],
	["Christmas, children, is not a date. It is a state of mind.", "Mary Ellen Chase"],
	["Christmas waves a magic wand over this world, and behold, everything is softer and more beautiful.", "Norman Vincent Peale"],
	["Blessed is the season which engages the whole world in a conspiracy of love.", "Hamilton Wright Mabie"],
	["A lovely thing about Christmas is that it's compulsory, like a thunderstorm, and we all go through it together.", "Garrison Keillor"],
	["Christmas is a necessity. There has to be at least one day of the year to remind us that we're here for something else besides ourselves.", "Eric Sevareid"],
	["Christmas magic is silent. You don't hear it --- you feel it, you know it, you believe it.", "Kevin Alan Milne"],
	["Never worry about the size of your Christmas tree. In the eyes of children, they are all thirty feet tall.", "Larry Wilde"],
	["Peace on Earth will come to stay, when we live Christmas every day.", "Helen Steiner Rice"],
	["What kind of Christmas present would Jesus ask Santa for?", "Salman Rushdie"],
	["Unless we make Christmas an occasion to share our blessings, all the snow in Alaska won't make it white.", "Bing Crosby"],
	["Gifts of time and love are surely the basic ingredients of a truly merry Christmas.", "Peg Bracken"],
	["The real Santa Claus is at the mall.", "Lemony Snicket"],
	["What if, doesn't come from a store. What if Christmas... perhaps... means a little bit more!", "Dr. Seuss"],
	["It was often in small moments that significant things were revealed.", "Lisa Kleypas"],
	["I wish we could put up some of the Christmas spirit in jars and open a jar of it every month.", "Harlan Miller"],
	["Christmas is not an external event at all, but a piece of one's home that one carries in one's heart.", "Freya Stark"],
	["Christmas, my child, is love in action. Every time we love, every time we give, it's...