cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div class="wrapper">


  <p class="poem1">'Twas the night before Christmas, when all thro' the house Not a creature was stirring, not even a mouse;
    <br>The stockings were hung by the chimney with care, In hopes that St. Nicholas soon would be there;
    <br>The children were nestled all snug in their beds, While visions of sugar plums danc'd in their heads,
    <br>And Mama in her 'kerchief, and I in my cap, Had just settled our brains for a long winter's nap —
    <br>When out on the lawn there arose such a clatter, I sprang from the bed to see what was the matter.
    <br>Away to the window I flew like a flash, Tore open the shutters, and threw up the sash.
    <br>The moon on the breast of the new fallen snow, Gave the luster of mid-day to objects below;</p>

  <p class="poem2">When, what to my wondering eyes should appear, But a miniature sleigh, and eight tiny reindeer,
    <br>With a little old driver, so lively and quick, I knew in a moment it must be St. Nick.
    <br>More rapid than eagles his coursers they came, And he whistled, and shouted, and call'd them by name:
    <br>"Now! Dasher, now! Dancer, now! Prancer and Vixen, "On! Comet, on! Cupid, on! Donder and Blitzen;
    <br>"To the top of the porch! To the top of the wall! "Now dash away! Dash away! Dash away all!"
    <br>As dry leaves that before the wild hurricane fly, When they meet with an obstacle, mount to the sky;
    <br>So up to the house-top the coursers they flew, With the sleigh full of toys — and St. Nicholas too:
    <br>And then in a twinkling, I heard on the roof The prancing and pawing of each little hoof.
  </p>


  <p class="poem3">
    As I drew in my head, and was turning around, Down the chimney St. Nicholas came with a bound:
    <br>He was dress'd all in fur, from his head to his foot, And his clothes were all tarnish'd with ashes and soot;
    <br>A bundle of toys was flung on his back, And he look'd like a peddler just opening his pack:
    <br>His eyes — how they twinkled! His dimples: how merry, His cheeks were like roses, his nose like a cherry;
    <br>His droll little mouth was drawn up like a bow, And the beard of his chin was as white as the snow;
    <br>The stump of a pipe he held tight in his teeth, And the smoke it encircled his head like a wreath.
    <br>He had a broad face, and a little round belly That shook when he laugh'd, like a bowl full of jelly:
  </p>

  <p class="poem4">
    He was chubby and plump, a right jolly old elf, And I laugh'd when I saw him in spite of myself;
    <br>A wink of his eye and a twist of his head Soon gave me to know I had nothing to dread.
    <br>He spoke not a word, but went straight to his work, And fill'd all the stockings; then turn'd with a jerk,
    <br>And laying his finger aside of his nose And giving a nod, up the chimney he rose.
    <br>He sprung to his sleigh, to his team gave a whistle, And away they all flew, like the down of a thistle:
    <br>But I heard him exclaim, ere he drove out of sight — Happy Christmas to all, and to all a good night.
  </p>


  <div class="landscape"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas1.jpg" alt="Bird decoration"></div>


  <div class="landscape"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas2.jpg" alt="Owl decoration"></div>

  <div class="landscape"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas3.jpg" alt="Cat face decoration"></div>

  <div class="landscape"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas4.jpg" alt="Tree"></div>


  <div class="landscape"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas5.jpg" alt="Glass bauble"></div>

  <div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas6.jpg" alt="Widget disapproves of Christmas"></div>


  <div class="landscape"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas7.jpg" alt="Weird bear/cat decoration"></div>


  <div> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas8.jpg" alt="Burd"></div>

  <div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/christmas9.jpg" alt="Tree"></div>


  


</div>
            
          
!
            
              img {
  max-width: 100%;
  border-radius: 10px;
}

.wrapper div,
.wrapper p {
  box-sizing: border-box;
  padding: 1em;
  font-size: 120%;
}

.wrapper img {
  border-radius: 10px;
}

.wrapper {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: 1fr;
}

.poem1 {
  grid-row: 2;
  min-width: 1%;
}

.poem2 {
  grid-row: 4;
  min-width: 1%;
}

.poem3 {
  grid-row: 6;
  min-width: 1%;
}

.poem4 {
  grid-row: 8;
  min-width: 1%;
}

@media screen and (min-width: 640px) {
  .wrapper {
  
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: start;
  }
  .landscape {
    grid-column: auto / span 2;
    min-width: 1%;
  }
  .poem1 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .poem2 {
    grid-column: 2 / 5;
    grid-row: 3;
  }
  .poem3 {
    grid-column: 1 / 3;
    grid-row: 4;
  }
  .poem4 {
    grid-column: 2 / 4;
    grid-row: 5;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console