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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                #app
  header.article-header
    .article-header-text
      h1.article-header-title Marley's Ghost
      h2.article-header-byline by Charles Dickens
  article.article-text
    aside.article-text-lead 
      h3 Marley was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner.
    article.article-text-content
      p Marley was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge’s name was good upon ’Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.

      p Mind! I don’t mean to say that I know, of my own knowledge, what there is particularly dead about a door-nail. I might have been inclined, myself, to regard a coffin-nail as the deadest piece of ironmongery in the trade. But the wisdom of our ancestors is in the simile; and my unhallowed hands shall not disturb it, or the Country’s done for. You will therefore permit me to repeat, emphatically, that Marley was as dead as a door-nail.

      p Scrooge knew he was dead? Of course he did. How could it be otherwise? Scrooge and he were partners for I don’t know how many years. Scrooge was his sole executor, his sole administrator, his sole assign, his sole residuary legatee, his sole friend, and sole mourner. And even Scrooge was not so dreadfully cut up by the sad event, but that he was an excellent man of business on the very day of the funeral, and solemnised it with an undoubted bargain.

      p The mention of Marley’s funeral brings me back to the point I started from. There is no doubt that Marley was dead. This must be distinctly understood, or nothing wonderful can come of the story I am going to relate. If we were not perfectly convinced that Hamlet’s Father died before the play began, there would be nothing more remarkable in his taking a stroll at night, in an easterly wind, upon his own ramparts, than there would be in any other middle-aged gentleman rashly turning out after dark in a breezy spot—say Saint Paul’s Churchyard for instance—literally to astonish his son’s weak mind.

      p Scrooge never painted out Old Marley’s name. There it stood, years afterwards, above the warehouse door: Scrooge and Marley. The firm was known as Scrooge and Marley. Sometimes people new to the business called Scrooge Scrooge, and sometimes Marley, but he answered to both names. It was all the same to him.
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700")

body, html
  font-family: 'Open Sans', sans-serif
  margin: 0
  background:
    color: #F9F9F9
    
@media (min-width: 1200px)
  
  #app
    display: flex
    
  
  @supports (display: grid)
    #app
      display: grid
      grid-template-columns: 1fr 1fr
    
.article-header
  background:
    image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/blake-cheek-631519-unsplash_resized.jpg)
    position: center
    size: cover
  height: 60vh
  position: relative
  
@media (min-width: 600px)
  .article-header
    height: 80vh
    
@media (min-width: 1200px)
  .article-header
    height: 100vh
    width: 50vw
  
.article-header-text
  position: absolute
  top: 1rem
  right: 1rem
  text-align: right
  max-width: 40%  
  
  h1,
  h2
    color: white
    
@media (min-width: 600px)
  .article-header-text
    max-width: 70%

.article-header-title
  text-transform: uppercase
  font-size: 2rem
  line-height: 1
  margin-bottom: 0
  
@media (min-width: 600px)
  .article-header-title
    font-size: 5.25rem
  
.article-header-byline
  font-weight: 400
  font-size: .9rem
    
@media (min-width: 600px)
  .article-header-byline
    font-size: 1.5rem
    
.article-text
  padding: 1rem
  max-width: 650px
  margin: auto
  
.article-text-lead
  padding: 2rem 1rem
  
  h3
    font-weight: 300
    text-align: center
    margin: 0
    line-height: 1.5
    
  @media (min-width: 600px)
    h3
      text-align: right
      font-size: 1.5rem
      
  @media (min-width: 1200px)
    h3
      font-size: 1.1rem
    
@media (min-width: 600px)
  .article-text-lead
    padding: 3rem 0 3rem 2rem  

@media (min-width: 1200px)
  .article-text-lead
    padding: 2rem 0 5rem 3rem
    
@media (min-width: 600px)
  .article-text-content
    columns: 2
    column-width: 300px
    
    p
      &:first-of-type
        margin-top: 0
      
@media (min-width: 1200px)
  .article-text-content
    columns: 3
    column-width: 100px
    
    p
      font-size: .95rem
              
            
!

JS

              
                
              
            
!
999px

Console