add snowflakes

This is very easy. 

Layout created by Katie, https://layouts.spacehey.com/layout?id=2587

The 🍊 can be replaced by whatever emoji/s you want.

If you want to use something other than emojis (like a custom image), here's what to do:

1. browse the internet, find a SMALL image (make sure it's like, about the size of an emoji)

2. hit "open image in new tab"

3. copy the image address

4. insert it into the code like so:

turn all 🍊 emojis into <img src="the image address"/>

<div class="snowflakes">

  <div class="snowflake">

   🍊

  </div>

 <div class="snowflake">

🍊

  </div>

  <div class="snowflake">

 🍊

  </div>

  <div class="snowflake">

 🍊

  </div>

  <div class="snowflake">

  🍊

  </div>

  <div class="snowflake">

  🍊

  </div>

  <div class="snowflake">

    🍊

  </div>

  <div class="snowflake">

   🍊

 </div>

  <div class="snowflake">

    🍊

  </div>

  <div class="snowflake">

   🍊

  </div>

  <div class="snowflake">

   🍊

  </div>

  <div class="snowflake">

    🍊

  </div>

</div>

<style>

<!-- author's note: the bolded part below will add a drop shadow to your snowflakes, it can be deleted up to the "}" -->

.snowflake {

  color: purple;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px rgba(0,0,0,0.7);

}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>