<section>
  <h1>Merry Christmas!</h1>
  
  <img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-9xjis/images/snowman.png" id="snowman">
  
  <p><span>From,</span> Zeke</p>
</section>
html {
  font-size: 16px;
}

body {
  background-color: rgba(75, 75, 76, 1);
  font-size: 62.5%;
}

section {
  background: url(https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-9xjis/images/winter.jpg);
  width: 700px;
  height: 500px;
  color: white;
  position: relative;
  margin: auto;
}

#snowman {
  width: 13%;
  margin-bottom: -47%;
  margin-left: 5%;
  transform: rotateZ(5deg);
  -webkit-transform: rotateZ(5deg);
}

h1 {
  font-family: "Dancing Script OT";
  font-size: 5em;
  padding-top: 0.5em;
}

section h1 {
  text-align: center;
}

p {
  font-size: 37px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 10%;
  margin-bottom: 5%;
  font-family: "vshandprinted";
}

span {
  font-family: "Dancing Script OT";
  font-weight: bold;
  font-size: 30px;
}
$(document).ready(function() {
  snowFall.snow($('section'), {
    minSize: 1,
    maxSize: 8,
    round: true,
    minSpeed: 1,
    maxSpeed: 2,
    flakeCount: 120,
  });
  
  $('body').hide();
  $('section').hide();
  $('h1').hide();
  $('p').hide();
  
  $('body').delay(300).fadeIn();
  $('section').delay(400).fadeIn();
  
  $('h1').delay(500).fadeIn(1000);
  
  $('p').delay(1500).fadeIn(250);
});
Run Pen

External CSS

  1. https://fontlibrary.org/face/dancing
  2. https://fontlibrary.org/face/vshandprinted

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3.amazonaws.com/codecademy-content/courses/holiday-cards/snowfall.min.js