cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <article>
  <header>
    <div class="cover-img">
      <img src="http://static.stephanmax.is/serving/edgar_allan_poe.jpg">
    </div>
    <div class="front-matter">
      <div>
        <h1 class="title">Edgar Allan Poe</h1>
        <p class="subtitle">Januar 19, 1809 – October 7, 1849</p>
      </div>
    </div>
  </header>
  <main>
    <p>Edgar Allan Poe (Januar 19, 1809 – October 7, 1849) was one of the most influential and celebrated American writers of the 19th century. The first well-known author to try to earn a living as a writer, he is credited with inventing the detective fiction genre and also with contributing to the emerging genre of science fiction and horror. The <i>Master of the Macabre</i> and his works influenced literature around the world and the <i>Mystery Writers of America</i> tender the annual <i>Edgar Award</i> for excellent work in the mystery genre.</p>
    
    <h3>Cryptography</h3>
    
    <p>Poe had a fascination for cryptography. He had even placed an ad in the Philadelphia paper <i>Alexander’s Weekly (Express) Messenger</i>, inviting people to submit ciphers that he would solve.</p>
    
    <img class="inline" src="http://static.stephanmax.is/serving/edgar_allan_poe-gold_bug-cipher.jpg">

    <p>The sensation that Poe created with his endeavors in cryptography played a major role in popularizing cryptograms and cryptographic puzzles in newspapers and magazines. But Poe influenced cryptography beyond just increasing the public interest duringn his lifetime.</p>
    
    <p>William Friedman, one of America’s finest cryptologists, was introduced to cryptography during his childhood when he read the short story <em>The Gold-Bug</em> by Edgar Allan Poe. Friedmann later put his interest to use and broke Japan’s <em>PURPLE</em> cipher during World War II.</p>
    
    <h3>Father of the Detective Story</h3>

    <p>Poe’s early detective stories around mastermind <em>C. Auguste Dupin</em>, for example <em>The Murders in the Rue Morgue</em>, paved the way for future detectives in history. Sir Arthur Conan Doyle said, <q>Each [of Poe’s detective stories] is a root from which a whole literature has developed… Where was the detective story until Poe breathed the breath of life into it?</q></p>
    
    <h3>Master of Macabre</h3>

    <p>Besides being an outstanding poet, a recognized literary critic, and a passionate amateur researcher, Poe is probably most famous for transforming the horror genre and adding a psychological depth not envisioned in the genre before his time and only rarely seen ever since.</p>
    
    <blockquote>Deep into that darkness peering, long I stood there, wondering, fearing, doubting, dreaming dreams no mortal ever dared to dream before.</blockquote>
    
    <p>Masterpieces like <i>The Tell-Tale Heart</i>, <i>The Masque of the Red Death</i>, <i>The Pit and the Pendulum</i>, and <i>The Fall of the House of Usher</i> reveal Poe’s talent at the zenith of his career.</p>
    
    <p>He even left this world with a final mystery and down to the present day people keep on speculating on the rumors growing around the circumstances of his death.</p>
    
    <p>Go ahead and get an idea how Poe crafted words over at the <a href="http://www.gutenberg.org/ebooks/author/481">Gutenberg Project</a>.</p>
  </main>
</article>
            
          
!
            
              $color-main: #8C2C07;
$color-bg: #F2F0CE;

html {
  box-sizing: border-box;
  font-family: "Cormorant", georgia, serif;
  font-size: 125%;
  line-height: 1.5;
}

*, *::before, *::after {
	box-sizing: inherit;
  font-size: inherit;
}

html, body, p {
  margin: 0;
  padding: 0;
}

p + p {
  text-indent: 1.5em;
}

header {
  background: lighten($color-bg, 8%);
  color: rgba(0, 0, 0, .6);
  overflow: hidden;
  text-align: center;
}

.title {
  color: $color-main;
  font-size: 10vw;
  margin: 0;
}

.subtitle {
  font-size: 3.5vw;
  font-weight: normal;
}

.cover-img {
  background: no-repeat center center url("http://static.stephanmax.is/serving/edgar_allan_poe.jpg");
  background-size: cover;
  height: 50vh;
}

.front-matter {
  display: flex;
  height: 50vh;
  
  & > div {
    margin: auto;
  }
}

.cover-img img {
  display: none;
  width: 100%;
  height: 100%;
}

main {
  columns: 4 15em;
  column-gap: 1.5em;
  padding: 1.5em 4vw;
}

h3 {
  color: darken($color-main, 5%);
  font-size: 1.25em;
  font-weight: normal;
  line-height: 1.2;
  margin-top: 1.6em;
}

.inline {
  margin: 1.5em 0;
  max-width: 100%;
}

blockquote, q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote {
  color: $color-main;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  margin: 1em;
  position: relative;
  
  &:before {
    content: open-quote;
    font-size: 4em;
    opacity: .2;
    position: absolute;
    top: -.25em;
    left: -.25em;
    z-index: -1;
  }
  
  &:after {
    content: no-close-quote;
  }
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

a {
  background: $color-bg;
  color: $color-main;
  font-weight: bold;
  text-decoration: none;
}

@supports (object-fit: cover) {
  .cover-img {
    background: none;
    
    img {
      display: initial;
      object-fit: cover;
      object-position: 50% 25%;
    }
  }
}

@media (min-aspect-ratio: 3/4) {
  .cover-img {
    height: 100vh;
  }
  .front-matter {
    height: 100vh;
  }
}

@media (min-aspect-ratio: 1/1) {
  .cover-img {
    float: left;
    width: 50%;
  }
  .front-matter {
    float: right;
    width: 50%;
  }
  .title {
    font-size: 5vw;
  }
  .subtitle {
    font-size: 1.8vw;
  }
}

@media (min-aspect-ratio: 5/2) {
  .cover-img {
    width: 25%;
  }
  .front-matter {
    width: 75%;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console