#app

  header.hero
    img(src="https://source.unsplash.com/1600x900/?nature,water")

  main

    section.article-title
      h1 Marley was dead

    article.article-text
      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.
View Compiled
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700|Merriweather:400,400i,700")


body
  margin: 0
  font-family: Merriweather, serif
  color: #444
  
#app
  max-width: 1250px
  margin: auto
  
img
  width: 100%
  
main
  padding: 0 1rem
  
@media (min-width: 600px)
  main
    display: grid
    grid-template-columns: 200px 1fr
    grid-column-gap: 2rem
    padding: 3rem 2rem
    
@media (min-width: 900px)
  main
    grid-template-columns: 25% 200px 1fr 60px
    padding: 3rem 0
    
@media (min-width: 900px)
  .article-title
    grid-column: 2    
  
h1
  font-family: 'Open Sans', sans-serif
  text-transform: uppercase
  
@media (min-width: 600px)
  h1
    text-align: right
    margin-top: 0
    
@media (min-width: 768px)
  .article-text
    columns: 2
    column-gap: 2rem
    
@media (min-width: 900px)
  .article-text
    grid-column: 3
    
p
  line-height: 1.5
  
  &:first-of-type
    margin-top: 0
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.