<!-- CODER ADVENT CALENDAR DECEMBER 2021
      HAPPY HOLIDAYS!!!
      Here's a Christmas Tree: *<<<<=.
-->

<!--COLORS USED-->
<!-- Feel free to replace the colors below as well! (just do a search and replace).-->
<!-- Green: #26593C -->
<!-- Red: #E63737 -->
<!-- Yellow: #FACE7D -->
<!-- Blue: #ABDDF7 -->

<!--CODE---------------------------------------------------------------------
                              -->
<div class="card p-2 mx-md-auto border-0" style="max-width: 1200px;">
<!--NAME HERE--------------------------------------------------------------------->
<div class="card-header p-0"><h4 class="flex-fill mb-0 mt-2 mx-1" style="font-weight:400; font-size: 25px; letter-spacing:1px; text-transform: uppercase;"><i class="fad fa-hat-santa fa-fw mx-1" style="color: #E63737;" /> Character Name<small class="pull-right mt-2 mt-md-0 text-right" style="flex-grow: 4;">SPECIES<i class="fad fa-lights-holiday fa-fw mx-1" style="color: #26593C;" />AGE<i class="fad fa-snowman fa-fw mx-1" style="color: #ABDDF7;" />PRONOUNS</small></h4></div>
<!--CONTENT HERE-------------------------------------------------------------------------->
<!-- To change background image replace the url in between the quotes (where the hashtag (#) is
  url('#')-->
<!-- You can also do a solid color replacing background-image:url('#') with
  background-color: #000000 (input hexcode where the 0s are)-->
<div class="card p-2 mx-md-auto" style="border-top-left-radius: 0px; border-top-right-radius: 0px; font-weight:300; max-width: 1200px; background-image:url('https://images.unsplash.com/photo-1513941025786-ed97f054ebba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80'); background-size:cover; background-position: center; background-repeat: no-repeat;">
  <div class="card-deck">
<!--MOODBOARD HERE--------------------------------------------------------------------->
  <div class="card col-md-5 flex-fill justify-content-space-between p-0 border-0" style="background: none;">
  <div class="flex-row h-100 px-0 pb-1">
    <!-- DO NOT ADD MORE IMAGES unless you know how to make it work-->
    <!-- Click on images to take you to source credit in the FIRST LINK (href)-->
    <!-- Image link goes in the SECOND LINK (background-image:url) do not remove quotes '#'-->
<!--ROW 1--------------------------------------------------------------------->
    <a class="btn flex-fill p-0 mr-1" href="https://unsplash.com/photos/xhY0_j02ZWE" style="background-image:url('https://images.unsplash.com/photo-1576025916944-438d601fc0bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2114&q=80'); background-size:cover; background-position: center; min-height:150px; max-height: 100%; max-width: 100%; background-repeat: no-repeat; background-origin: padding-box;"></a>
    <a class="btn flex-fill p-0" href="https://unsplash.com/photos/QGwojtfNiVk" style="background-image:url('https://images.unsplash.com/photo-1606983773367-8f93e7bbad8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80'); background-size:cover; background-position: center; min-height:150px; max-height: 100%; max-width: 100%; background-repeat: no-repeat;background-origin: padding-box;"></a>
        </div>
<!--ROW 2--------------------------------------------------------------------->
  <div class="flex-row h-100 p-0">
    <a class="btn flex-fill p-0 mr-1" href="https://unsplash.com/photos/ujKXJFlENXg" style="background-image:url('https://images.unsplash.com/photo-1607945964157-bd6552db01af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80'); background-size:cover; background-position: center; min-height:150px; max-height: 100%; max-width: 100%; background-repeat: no-repeat;background-origin: padding-box;"></a>
    <a class="btn flex-fill p-0" href="https://unsplash.com/photos/OgcJIKRnRC8" style="background-image:url('https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80');  background-size:cover; background-position: center; min-height:150px; max-height: 100%; max-width: 100%; background-repeat: no-repeat;background-origin: padding-box;"></a>
  </div>
  </div>
<!--STORY HERE--------------------------------------------------------------------->
  <div class="card col-md-7 mt-2 mt-md-0">
    <!--Add this line to the above line
        style="height: 400px; overflow: auto;"
      if you want this box to scroll-->
    <h4 class="pl-2 pr-2 pt-2 pb-0" style="font-weight:300; font-size: 30px; letter-spacing:1px;">A Holiday Story<span class="pull-right" style="flex-grow: 4;"><i class="fad fa-star-christmas fa-fw mx-1" style="color: #FACE7D;" /></span></h4>
    <div class="card-body pl-2 pr-2 pb-2 pt-0">
      <p>Talk about a fond holiday memory your character remembers! Can be as long as you want, box will not scroll. Images will expand with. —> 'Twas the night before Christmas, when all through the house, not a creature was stirring, not even a mouse. The stockings were hung by the chimney with care, in hopes that St Nicholas soon would be there.</p>
      <p>The children were nestled all snug in their beds, while visions of sugar-plums danced in their heads. And mamma in her ‘kerchief, and I in my cap, had just settled our brains for a long winter’s nap. When out on the lawn there arose such a clatter, I sprang from the bed to see what was the matter. Away to the window I flew like a flash, tore open the shutters and threw up the sash.</p>
    </div>
  </div>
  </div>
<!--Faves Zone--------------------------------------------------------------------->
  <div class="card-deck px-auto">
<!-- These will not scroll and will expand accordingly to be the same height for all 4 cards.-->
<!--Fave Holiday Activity--------------------------------------------------------------------->
  <div class="card mb-2 mb-md-0 mt-2 border-0">
  <div class="card-header py-1 px-1" style="color: white; background-color: #26593C;"><b>Fave Holiday Activity</b></div>
  <div class="card-body p-1">
    <ul class="list-unstyled mb-0">
       <li class="mb-2"><i class="fad fa-tree-decorated fa-fw mx-1" style="color: #26593C;" />Sledding? Tree Decorating? Christmas Lights?</li>
       <li class="mb-2"><i class="fad fa-tree-decorated fa-fw mx-1" style="color: #26593C;" />Can be a list!</li>
      <!--Copy Paste the above [<li>dfjsdkghjf</li>] line above this note for more entries-->
    </ul>
    <div class="mx-auto" style="margin-top: 10px; margin-bottom: 10px; height:2px; width:95%; background-color: #26593C;"></div>
    <p>Tell us about it!</p>
  </div>
  </div>
<!--Fave Holiday Food--------------------------------------------------------------------->
  <div class="card mb-2 mb-md-0 mt-2 border-0">
  <div class="card-header py-1 px-1" style="color: white; background-color: #E63737;"><b>Fave Holiday Food</b></div>
  <div class="card-body p-1">
    <ul class="list-unstyled mb-0">
       <li class="mb-2"><i class="fad fa-candy-cane fa-fw mx-1" style="color: #E63737;" />Cookies? Ham? Candy canes?</li>
       <li class="mb-2"><i class="fad fa-candy-cane fa-fw mx-1" style="color: #E63737;" />Can be a list!</li>
       <!--Copy Paste the above line above [<li>dfjsdkghjf</li>] this note for more entries-->
    </ul>
    <div class="mx-auto" style="margin-top: 10px; margin-bottom: 10px; height:2px; width:95%; background-color: #E63737;"></div>
    <p>Tell us about it!</p>
  </div>
  </div>
<!--Fave Holiday Drink--------------------------------------------------------------------->
  <div class="card mb-2 mb-md-0 mt-2 border-0">
  <div class="card-header py-1 px-1" style="color: white; background-color: #ABDDF7;"><b>Fave Holiday Drink</b></div>
  <div class="card-body p-1">
    <ul class="list-unstyled mb-0">
       <li class="mb-2"><i class="fad fa-mug-marshmallows fa-fw mx-1" style="color: #ABDDF7;" />Hot Cocoa? Peppermint Mocha? Eggnog?</li>
       <li class="mb-2"><i class="fad fa-mug-marshmallows fa-fw mx-1" style="color: #ABDDF7;" />Can be a list!</li>
       <!--Copy Paste the above line above [<li>dfjsdkghjf</li>] this note for more entries-->
    </ul>
    <div class="mx-auto" style="margin-top: 10px; margin-bottom: 10px; height:2px; width:95%; background-color: #ABDDF7;"></div>
    <p>Tell us about it!</p>
  </div>
  </div>
<!--Fave Holiday Song--------------------------------------------------------------------->
  <div class="card mb-2 mb-md-0 mt-2 border-0">
  <div class="card-header py-1 px-1" style="color: white; background-color: #FACE7D;"><b>Fave Holiday Song</b></div>
  <div class="card-body p-1">
    <ul class="list-unstyled mb-0">
      <li class="mb-2"><i class="fad fa-bells fa-fw mx-1" style="color: #FACE7D;" /><a href="https://www.youtube.com/watch?v=1qYz7rfgLWE">Rockin Around the Christmas Tree</a></li>
      <li class="mb-2"><i class="fad fa-bells fa-fw mx-1" style="color: #FACE7D;" /><a href="#">SONG NAME</a></li>
      <!--Copy Paste the above line above [<li>dfjsdkghjf</li>] this note for more entries. Replace Hashtag (#) with Song Link!-->
    </ul>
    <div class="mx-auto" style="margin-top: 10px; margin-bottom: 10px; height:2px; width:95%; background-color: #FACE7D;"></div>
    <p>Tell us about it!</p>
  </div>
  </div>
</div>
</div>
<!--CREDIT DO NOT TOUCH----------------------------------------------------------------------->
<p class="text-right small"><a href="https://toyhou.se/xenobicorn"  data-toggle="tooltip" data-placement="bottom" title="Code"><img src="https://cdn.discordapp.com/attachments/839709227655888909/853456799859212308/d7mjqzo-a4cca10e-7886-462a-81ca-54e3e2d8a22f.gif" /></a></p>
</div>