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.
Babel includes JSX processing.
Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
#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.
@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
Also see: Tab Triggers