Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
  <header class="group">
    <img class="logo" title="Logo" src="http://www.aicf.church/wp-content/uploads/2015/12/christmas-with-gold.png" />
    <nav id="fontsize">
      <ul>
        <li class="resetFont"><span>Size:</span></li>
        <li class="decrease"><span class="fa fa-minus"></span></li>
        <li class="increase"><span class="fa fa-plus"></span></li>
      </ul>
    </nav>
  </header>
<div class="mainimg">
  <img class="eventimg" title="Jesus Is Alive" src="http://www.aicf.church/wp-content/uploads/2015/12/jesus-is-alive-logo.png" />
</div>
  <section id="carols">
    <article>
      <a name="away"></a>
      <h2>Away In a Manger</h2>
      <p>Away in a manger, no crib for a bed,
<br>The little Lord Jesus laid down his sweet head.</p>
      <p>The stars in the sky looked down where he lay,<br>
The little Lord Jesus asleep in the hay.</p>
      <p>The cattle are lowing, the baby awakes,<br>
But little Lord Jesus no crying he makes.</p>
      <p>I love Thee, Lord Jesus, look down from the sky<br>
And stay by my cradle til morning is nigh.</p>
      <p>Be near me, Lord Jesus, I ask Thee to stay<br>
Close by me forever, and love me, I pray.</p>
      <p>Bless all the dear children in thy tender care,<br>
And take us to heaven, to live with Thee there.</p>
    </article>
    <article>
      <a name="csong"></a>
      <h2>The Christmas Song</h2>
      <p>Chestnuts roasting on an open fire<br>
Jack Frost nipping at your nose<br>
Yuletide carols being sung by a choir<br>
And folks dressed up like Eskimos</p>
      <p>Everybody knows a turkey and some<br>
Mistletoe help to make the season bright<br>
Tiny tots with their eyes all aglow<br>
Will find it hard to sleep tonight</p>
      <p>They know that Santa’s on his way<br>
He's loaded lots of toys and goodies on his sleigh<br>
And every mother's child is going to see<br> If
Reindeer really know how to fly</p>
      <p>And so, I'm offering this
simple phrase <br>To kids from
One to ninety-two<br>
Altho' it's been said many times
many ways<br>
“Merry Christmas to you”</p>
    </article>
    <article>
      <a name="deck"></a>
      <h2>Deck the Halls</h2>
      <p>Deck the halls with boughs of holly, Fa la la la la la la la!

<br>'Tis the season to be jolly, Fa la la la la la la la!
<br>Don we now our gay apparel, Fa la la la la la la la!
<br>Troll the ancient Yuletide carol, Fa la la la la la la la!</p>
      <p>See the blazing yule before us, Fa la la la la la la la!<br>
Strike the harp and join the chorus, Fa la la la la la la la!

<br>Follow me in merry measure, Fa la la la la la la la!
<br>While I tell of Yuletide treasure, Fa la la la la la la la!
</p>
      <p>Fast away the old year passes, Fa la la la la la la la!
<br>Hail the new, ye lads and lasses, Fa la la la la la la la!
<br>Sing we joyous all together! Fa la la la la la la la!
<br>Heedless of the wind and weather, Fa la la la la la la la!</p>
    </article>
    <article>
      <a name="hear"></a>
      <h2>Do You Hear What I Hear?</h2>
      <p>Said the night wind to the little lamb,
<br>do you see what I see
<br>Way up in the sky, little lamb,
<br>do you see what I see
<br>A star, a star, dancing in the night
<br>With a tail as big as a kite
<br>With a tail as big as a kite</p>
      <p>Said the little lamb to the shepherd boy,
<br>do you hear what I hear
<br>Ringing through the sky, shepherd boy,
<br>do you hear what I hear
<br>A song, a song, high above the trees
<br>With a voice as big as the sea
<br>With a voice as big as the sea</p>
      <p>Said the shepherd boy to the mighty king,
<br>do you know what I know
<br>In your palace warm, mighty king,
<br>do you know what I know
<br>A Child, a Child shivers in the cold
<br>Let us bring Him silver and gold
<br>Let us bring Him silver and gold
<br>Said the king to the people everywhere,
<br>listen to what I say
<br>Pray for peace, people everywhere!
<br>listen to what I say
<br>The Child, the Child, sleeping in the night
<br>He will bring us goodness and light
<br>He will bring us goodness and light</p>
    </article>
    <article>
      <a name="noel"></a>
      <h2>The First Noel</h2>
      <p>The First Noel the angel did say
<br>Was to certain poor shepherds
in fields as they lay;
<br>In fields as they lay, keeping their sheep,
<br>On a cold winter's night that was so deep.</p>
      <p><strong>Chorus</strong><br>Noel, Noel, Noel, Noel,
<br>Born is the King of Israel.</p>
      <p>They looked up and saw a star
<br>Shining in the east beyond them far,
<br>And to the earth it gave great light,
<br>And so it continued both day and night.</p>
      <p>And by the light of that same star
<br>Three wise men came from country far;
<br>To seek for a king was their intent,
<br>And to follow the star wherever it went.</p>
      <p>This star drew nigh to the northwest,
<br>O'er Bethlehem it took it rest,
<br>And there it did both stop and stay
<br>Right over the place where Jesus lay.</p>
      <p>Then entered in those wise men three
<br>Full reverently upon their knee,
<br>and offered there in his presence
<br>Their gold, and myrrh, and frankincense.</p>
      <p>Then let us all with one accord
<br>Sing praises to our heavenly Lord;
<br>That hath made heaven and earth of naught,
<br>And with his blood mankind hath bought</p>
    </article>
    <article>
      <a name="frosty"></a>
      <h2>Frosty the Snowman</h2>
      <p>Frosty the Snowman, was a jolly happy soul,<br>
With a corn cob pipe and a button nose, and two eyes made of coal.
<br>
Frosty the Snowman, is a fairytale, they say.
<br>He was made of snow, but the children know he came to life one day.</p>
      <p>There must have been some magic in that old silk hat they found,
<br>
For when they placed it on his head, he began to dance around!<br>Oh, Frosty, the Snowman, was alive as he could be;<br>
and the children say he could laugh and play,
        just the same as you and me.</p>
<p>
Thumpety thump, thump, thumpety thump, thump,
look at Frosty go.
<br>
Thumpety thump, thump, thumpety thump, thump,
over the hills of snow.</p>
      <p>Frosty the Snowman, knew the sun was hot that day,<br>
so he said, "Let's run, and we'll have some fun now, before I melt away."
<br>
Down to the village, with a broomstick in his hand,<br>
Running here and there, all around the square,
sayin', "Catch me if you can."</p>
      <p>He led them down the streets of town, right to the traffic cop;
<br>
and only paused a moment, when he heard him holler, "Stop!"<br>For Frosty, the Snowman, had to hurry on his way,<br>
But he waved goodbye, sayin' "Don't cry, I'll be back again some day."</p>
    </article>
    <article>
      <a name="hark"></a>
      <h2>Hark! The Herald Angels Sing</h2>
      <p>Hark! the herald angels sing,
<br>"Glory to the newborn King!"
<br>Peace on earth, and mercy mild,
<br>God and sinners reconciled
<br>Joyful, all ye nations, rise,
<br>Join the triumph of the skies;
<br>With th' angelic host proclaim,
<br>"Christ is born in Bethlehem." 
<br>Hark! the herald angels sing,
<br>"Glory to the newborn King!"</p>
      <p>Christ, by highest heav'n adored:
<br>Christ, the everlasting Lord;
<br>Late in time behold him come,
<br>Offspring of the favored one.
<br>Veil'd in flesh, the Godhead see;
<br>Hail, th'incarnate Deity:
<br>Pleased, as man, with men to dwell,
<br>Jesus, our Emmanuel!
<br>Hark! the herald angels sing,
<br>"Glory to the newborn King!"</p>
      <p>Hail! the heav'n born Prince of peace!
<br>Hail! the Son of Righteousness!
<br>Light and life to all he brings,
<br>Risen with healing in his wings
<br>Mild he lays his glory by,
<br>Born that man no more may die:
<br>Born to raise the sons of earth,
<br>Born to give them second birth.
<br>Hark! the herald angels sing,
<br>"Glory to the newborn King!"</p>
    </article>
  </section>
  <footer id="foot">
    <a href="#" id="menu-button"><span class="fa fa-bars"></span></a>
    <a href="#" id="close-menu" class="hidden"><span class="fa fa-times"></span> Close</a>
    <nav id="alpha">
      <ul>
        <li><a href="#a">A</a></li>
        <li><a href="#c">C</a></li>
        <li><a href="#d">D</a></li>
        <li><a href="#f">F</a></li>
        <li><a href="#h">H</a></li>
        <li><a href="#i">I</a></li>
        <li><a href="#j">J</a></li>
        <li><a href="#l">L</a></li>
        <li><a href="#m">M</a></li>
        <li><a href="#o">O</a></li>
        <li><a href="#r">R</a></li>
        <li><a href="#s">S</a></li>
        <li><a href="#t">T</a></li>
        <li><a href="#w">W</a></li>
      </ul>
    </nav>
    <nav id="songlist">
      <ul>
        <li><a href="#" name="a">A</a>
          <ul>
            <li><a href="#away">Away in a Manger</a></li>
          </ul>
        </li>
        <li><a href="#" name="c">C</a>
          <ul>
            <li><a href="#csong">The Christmas Song</a></li>
          </ul>
        </li>
        <li><a href="#" name="d">D</a>
          <ul>
            <li><a href="#deck">Deck the Halls</a></li>
            <li><a href="#hear">Do You Hear What I Hear?</a></li>
          </ul>
        </li>
        <li><a href="#" name="f">F</a>
          <ul>
            <li><a href="#noel">The First Noel</a></li>
            <li><a href="#frosty">Frosty the Snowman</a></li>
          </ul>
        </li>
        <li><a href="#" name="h">H</a>
          <ul>
            <li><a href="#hark">Hark the Herald Angels Sing</a></li>
            <li><a href="#haveyourself">Have Yourself a Merry Little Christmas</a></li>
            <li><a href="#herecomes">Here Comes Santa Claus</a></li>
            <li><a href="#hollyjolly">Holly Jolly Christmas</a></li>
          </ul>
        </li>
        <li><a href="#" name="i">I</a>
          <ul>
            <li><a href="#home">I'll Be Home for Christmas</a></li>
            <li><a href="#midnight">It Came Upon a Midnight Clear</a></li>
            <li><a href="#looklike">It's Beginning to Look a Lot Like Christmas</a></li>
          </ul>
        </li>
        <li><a href="#" name="j">J</a>
          <ul>
            <li><a href="#bells">Jingle Bells</a></li>
            <li><a href="#bellrock">Jingle Bell Rock</a></li>
            <li><a href="#joy">Joy to the World</a></li>
          </ul>
        </li>
        <li><a href="#" name="l">L</a>
          <ul>
            <li><a href="#letitgo">Let It Go</a></li>
            <li><a href="#letitsnow">Let It Snow</a></li>
            <li><a href="#drummer">Little Drummer Boy</a></li>
          </ul>
        </li>
        <li><a href="#" name="m">M</a>
          <ul>
            <li><a href="#wonderful">The Most Wonderful Time of the Year</a></li>
          </ul>
        </li>
        <li><a href="#" name="o">O</a>
          <ul>
            <li><a href="#tree">O Christmas Tree</a></li>
            <li><a href="#faithful">O Come All Ye Faithful</a></li>
            <li><a href="#holynight">O Holy Night</a></li>
          </ul>
        </li>
        <li><a href="#" name="r">R</a>
          <ul>
            <li><a href="#rockin">Rockin' Around the Christmas Tree</a></li>
            <li><a href="#rudolph">Rudolph the Red Nosed Reindeer</a></li>
          </ul>
        </li>
        <li><a href="#" name="s">S</a>
          <ul>
            <li><a href="#town">Santa Claus is Coming to Town</a></li>
            <li><a href="#silent">Silent Night</a></li>
            <li><a href="#sleigh">Sleigh Ride</a></li>
            <li><a href="#silverbells">Silver Bells</a></li>
          </ul>
        </li>
        <li><a href="#" name="t">T</a>
          <ul>
            <li><a href="#twelve">Twelve Days of Christmas</a></li>
          </ul>
        </li>
        <li><a href="#" name="w">W</a>
          <ul>
            <li><a href="#wish">We Wish You a Merry Christmas</a></li>
            <li><a href="#white">White Christmas</a></li>
            <li><a href="#wonderland">Winter Wonderland</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </footer>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
html {
  font-size: 16px;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
body {
  font-family: Lato, sans-serif;
  background-color: maroon;
  background: url('http://www.aicf.church/wp-content/uploads/2015/11/2015-one-accord-ppt-blank-1024-no-light1.jpg') center center no-repeat fixed;
  background-size: cover;
  color: white;
}
li {
  list-style: none;
}
header, #carols, #songlist > ul li a {
  padding: 2% 10%;
}
header .logo {
  float: left;
  max-width: 300px;
}
#fontsize {
  position: fixed;
  right: 10%;
}
#fontsize li {
  display: inline-block;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}
#fontsize li:hover,
#fontsize li:focus,
#fontsize li:active {
  background: rgba(0,0,0,0.1);
}
.mainimg {
  clear: both;
  margin: 2em auto;
  text-align: center;
}
#carols article:first-child {
  border-top: 6px solid #d3b36e;
  padding-top: 40px;
}
article {
  border-bottom: 1px dashed #d3b36e;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
}
#carols article:last-child {
  border-bottom: none;
}
h2 {
  font-size: 2em;
  margin: 1em 0;
}
p {
  line-height: 1.618em;
  font-size: 1.3em;
  margin: 1.2em 0;
}
footer {
  position: fixed;
}
#foot {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transition: 0.25s ease;
  -moz-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease;
  background-color: #d3b36e;
}
footer a {
  text-decoration: none;
  color: rgba(0,0,0,0.3);
}
#close-menu {
  position: absolute;
  top: 0.75em;
  left: 0;
  z-index: 5;
  padding: 10px;
  display: block;
}
.hidden {
  visibility: hidden;
}
#menu-button {
  color: rgba(0,0,0,0.2);
  position: absolute;
  top: -29px;
  left: 48%;
  width: 60px;
  height: 30px;
  text-align: center;
  background-color: #c9ab69;
  padding: 13px 20px 0;
  border-radius: 100px;
  z-index: 3;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
}
#alpha {
  box-shadow: 0px 0.5px 1px rgba(0,0,0,0.2);
  background: #c9ab69;
  z-index: 0;
}
#alpha ul {
  padding: 1.5%;
  text-align: center;
}
#alpha li {
  display: inline;
  padding: 10px;
}
#alpha li:hover,
#alpha li:focus,
#alpha li:active {
  background: rgba(0,0,0,0.1);
}
#alpha a {
  color: white;
}
#songlist {
  overflow-y: scroll;
  position: relative;
  height: 100%;
}
#songlist a:focus {
  outline: none;
}
#songlist li {
  background: #e0ca99;
  padding: 10px 0 0;
}
#songlist li ul li {
  border-top: 1px solid #e0ca99;
  padding-bottom: 10px;
  background: rgba(255,255,255,0.2);
}
#songlist li ul li:first-child {
    margin-top: 10px;
}
#songlist li ul a {
  color: black;
}
#songlist li ul a:hover,
#songlist li ul a:focus,
#songlist li ul a:active {
  color: #c9ab69;
}
              
            
!

JS

              
                var $height = $(window).height();
var $width = $(window).width();

var $footerPosition = $height-63;

/**
 * Source: http://jsfiddle.net/My2xt/1/
 */
var changeFontSize = function (increaseFont) {
    var fontTargets = new Array('article', 'p');

    fontTargets.forEach(function (element) {
        var $element = $(element);
        var newFontSize;
        var currentFontSize = $element.css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);

        if (increaseFont) {
            $element.css('font-size', 0);
            newFontSize = currentFontSizeNum * 1.2;
        } else {
            newFontSize = currentFontSizeNum * 0.8;
        }

        $element.css('font-size', newFontSize);
    });
};

$(document).ready(function () {
    // Reset Font Size
    var originalFontSize = $('html').css('font-size');
  
  // Set Footer to bottom of screen
  $('#foot').css({'top': $footerPosition + 'px' });

    $(".resetFont").on('click', function () {
        $('html').css('font-size', originalFontSize);
    });
    // Increase Font Size
    $(".increase").on('click', function () {
        changeFontSize(true);
    });
    // Decrease Font Size
    $(".decrease").on('click', function () {
        changeFontSize(false);
    });
  
  // Click menu
  $("#menu-button").on('click', function(){
      $("#foot").css({'top':'0px'});
      $("#close-menu").toggleClass('hidden');
  });
  // Close menu OR click a song name
  $("#close-menu, #songlist a").on('click', function() {
    $("#foot").css({'top': $footerPosition + 'px'});
    $("#close-menu").toggleClass('hidden');
  });
});
              
            
!
999px

Console