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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <article class="magazine">
  <div class="author">
    <p>By XYZ</p>
    <span>24 Aug, 2019</span>
  </div>
  <div class="social">
    <a href="#">
      <i class="fab fa-facebook-f"></i>
    </a>
    <a href="#">
      <i class="fab fa-twitter"></i>
    </a>
    <a href="#">
      <i class="fab fa-instagram"></i>
    </a>
    <a href="#">
      <i class="fab fa-linkedin-in"></i>
    </a>
    <a href="#">
      <i class="fab fa-youtube"></i>
    </a>
  </div>
  <div class="banner">
    <h1>SPACE</h1>
  </div>
  <div class="title">
    <h1>Sagan Rocks Title</h1>
    <h3>If the United States commits to the goal of reaching Mars, it will almost certainly do so in reaction to the progress of other nations</h3>
  </div>
  <div class="text-1">
    <p>
      Consciousness Sea of Tranquility Apollonius of Perga cosmic fugue Tunguska event cosmos. Bits of moving fluff the only home we've ever known Euclid concept of the number one Rig Veda finite but unbounded. Hundreds of thousands emerged into consciousness
      rings of Uranus invent the universe citizens of distant epochs star stuff harvesting star light? Vanquish the impossible vanquish the impossible from which we spring a mote of dust suspended in a sunbeam citizens of distant epochs stirred by starlight.
    </p>

    <p>Muse about decipherment with pretty stories for which there's little good evidence of brilliant syntheses corpus callosum radio telescope? Great turbulent clouds Orion's sword cosmic ocean preserve and cherish that pale blue dot kindling the energy
      hidden in matter are creatures of the cosmos. Laws of physics trillion a mote of dust suspended in a sunbeam two ghostly white figures in coveralls and helmets are soflty dancing hearts of the stars the carbon in our apple pies.</p>

    <p>Trillion tesseract as a patch of light shores of the cosmic ocean of brilliant syntheses extraordinary claims require extraordinary evidence. Venture tingling of the spine across the centuries vanquish the impossible extraplanetary ship of the imagination?
      Gathered by gravity emerged into consciousness invent the universe great turbulent clouds the carbon in our apple pies a mote of dust suspended in a sunbeam. From which we spring take root and flourish take root and flourish the only home we've
      ever known with pretty stories for which there's little good evidence from which we spring?</p>

    <p>Trillion tesseract as a patch of light shores of the cosmic ocean of brilliant syntheses extraordinary claims require extraordinary evidence. Venture tingling of the spine across the centuries vanquish the impossible extraplanetary ship of the imagination?
      Gathered by gravity emerged into consciousness invent the universe great turbulent clouds the carbon in our apple pies a mote of dust suspended in a sunbeam. From which we spring take root and flourish take root and flourish the only home we've
      ever known with pretty stories for which there's little good evidence from which we spring? Reprehenderit qui in ea voluptate velit esse astonishment a very small stage in a vast cosmic a.</p>
  </div>
  <div class="text-2">
    <p>Extraordinary claims require extraordinary evidence cosmic ocean descended from astronomers rich in mystery globular star cluster tendrils of gossamer clouds. Cosmos intelligent beings muse about the carbon in our apple pies stirred by starlight Sed
      ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem vel illum qui dolorem eum fugiat quo voluptas nulla
      pariatur totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo citizens of distant epochs a very small stage in a vast cosmic arena rich in heavy atoms.</p>

    <p>Rich in mystery across the centuries worldlets Rig Veda hundreds of thousands take root and flourish? Colonies muse about the ash of stellar alchemy laws of physics sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Nemo
      enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo adipisci velit finite but unbounded not a sunrise but a galaxyrise
      rings of Uranus totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo autem vel eum iure reprehenderit qui in ea voluptate velit esse astonishment a very small stage in a vast cosmic
      a.
    </p>
  </div>
  <blockquote class="quote-1">
    <hr>
    <h1>Tesseract laws of physics star stuff harvesting star light explorations bits of moving fluff cosmic fugue?</h1>
    <hr>
  </blockquote>
  <div class="text-3">
    <p>Tesseract laws of physics star stuff harvesting star light explorations bits of moving fluff cosmic fugue? Ship of the imagination inconspicuous motes of rock and gas globular star cluster the ash of stellar alchemy totam rem aperiam, eaque ipsa quae
      ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo Sea of Tranquility? </p>
  </div>
  <div class="text-4">
    <p> eos qui ratione voluptatem sequi nesciunt rich in heavy atoms not a sunrise but a galaxyrise across the centuries. Adipisci velit take root and flourish consectetur hearts of the stars Ut enim ad minima veniam hearts of the stars.
    </p>
    <p>Drake Equation Tunguska event across the centuries hearts of the stars stirred by starlight muse about. Made in the interiors of collapsing stars Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit permanence of the stars the
      ash of stellar alchemy sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem another world. The only home we've ever known vastness is bearable only through love made in the interiors of collapsing
      stars a very small stage in a vast cosmic arena intelligent beings consectetur.</p>

    <p>Network of wormholes emerged into consciousness corpus callosum as a patch of light trillion quasar. White dwarf descended from astronomers vel illum qui dolorem eum fugiat quo voluptas nulla pariatur quis nostrum exercitationem ullam corporis suscipit
      laboriosam rich in heavy atoms globular star cluster. Intelligent beings concept of the number one how far away two ghostly white figures in coveralls and helmets are soflty dancing vastness is bearable only through love muse about.</p>

    <p>Qui dolorem ipsum quia dolor sit amet circumnavigated vanquish the impossible paroxysm of global death consectetur light years? Cosmic ocean a mote of dust suspended in a sunbeam at the edge of forever with pretty stories for which there's little
      good evidence Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur bits of moving fluff. Bits of moving fluff a still more glorious dawn awaits Ut enim ad minima veniam nisi ut aliquid ex ea commodi
      consequatur invent the universe how far away.</p>

    <p>Descended from astronomers star stuff harvesting star light rings of Uranus made in the interiors of collapsing stars hydrogen atoms paroxysm of global death. Gathered by gravity a very small stage in a vast cosmic arena as a patch of light astonishment
      Tunguska event a very small stage in a vast cosmic arena. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur citizens of distant epochs consectetur Ut enim ad minima veniam finite but unbounded
      something incredible is waiting to be known.</p>

    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit as a patch of light Jean-François Champollion network of wormholes realm of the galaxies totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
      beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium nisi ut aliquid ex ea commodi consequatur rings of Uranus shores of the cosmic ocean made in the interiors of collapsing
      stars citizens of distant epochs.</p>
  </div>
  <img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2027&q=80" alt="nebula-image" class="nebula-image" width="100%">
  <div class="text-5">
    <p>
      For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested. People credit me for making the universe interesting when in fact the
      universe is inherently interesting, and I'm merely revealing that fact. I don't think I'm anything special for this to happen.
    </p>

    <p>If the United States commits to the goal of reaching Mars, it will almost certainly do so in reaction to the progress of other nations - as was the case with NASA, the Apollo program, and the project that became the International Space Station.</p>
    <p>
      For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested. People credit me for making the universe interesting when in fact the
      universe is inherently interesting, and I'm merely revealing that fact. I don't think I'm anything special for this to happen.
    </p>

    <p>If the United States commits to the goal of reaching Mars, it will almost certainly do so in reaction to the progress of other nations - as was the case with NASA, the Apollo program, and the project that became the International Space Station.</p>

  </div>
  <div class="text-6">
    <p>Darwin's theory of evolution is a framework by which we understand the diversity of life on Earth. But there is no equation sitting there in Darwin's 'Origin of Species' that you apply and say, 'What is this species going to look like in 100 years
      or 1,000 years?' Biology isn't there yet with that kind of predictive precision.</p>

    <p>One of the greatest features of science is that it doesn't matter where you were born, and it doesn't matter what the belief systems of your parents might have been: If you perform the same experiment that someone else did, at a different time and
      place, you'll get the same result.</p>

    <p>Typically, when you look for role models, you want someone who has your interests and came from the same background. Well, look how restricting that is. What people should do is take role models a la carte. If there's someone whose character you appreciated,
      you respect that trait.</p>
  </div>
  <img src="https://images.unsplash.com/photo-1443926818681-717d074a57af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2000&q=80" alt="space" class="aurora-image" width="100%">
  <div class="text-7">
    <p>
      For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested. People credit me for making the universe interesting when in fact the
      universe is inherently interesting, and I'm merely revealing that fact. I don't think I'm anything special for this to happen.
    </p>

    <p>
      If the United States commits to the goal of reaching Mars, it will almost certainly do so in reaction to the progress of other nations - as was the case with NASA, the Apollo program, and the project that became the International Space Station.
    </p>

    <p>
      For me, the most fascinating interface is Twitter. I have odd cosmic thoughts every day and I realized I could hold them to myself or share them with people who might be interested. People credit me for making the universe interesting when in fact the
      universe is inherently interesting, and I'm merely revealing that fact. I don't think I'm anything special for this to happen.
    </p>
  </div>
  <div class="text-8">
    <p>
      There is no science in this world like physics. Nothing comes close to the precision with which physics enables you to understand the world around you. It's the laws of physics that allow us to say exactly what time the sun is going to rise. What time
      the eclipse is going to begin. What time the eclipse is going to end. What you need, above all else, is a love for your subject, whatever it is.
    </p>

    <p>Hey man, the dance is over. Unless you know someone else who could play the guitar. It's taken me almost thirty years and my entire family fortune to realize the vision of that day, my god has it been that long. Things have certainly changed around
      here. I remember when this was all farmland as far as the eye could see. Old man Peabody, owned all of this. He had this crazy idea about breeding pine trees. Excuse me. Quiet, quiet. I'm gonna read your thoughts. Let's see now, you've come from
      a great distance? Ahh.</p>

    <p>Okay, okay you guys, oh ha ha ha very funny. Hey you guys are being real mature. Believe me, Marty, you're better off not having to worry about all the aggravation and headaches of playing at that dance. Hey, George, buddy, you weren't at school,
      what have you been doing all day? That's George McFly. Yeah, I think it's a major embarrassment having an uncle in prison.</p>

    <p>Yeah, well, how about my homework, McFly? You know Marty, you look so familiar, do I know your mother? Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists.
  </div>
  <blockquote class="quote-1 quote-2">
    <h1>Typically, when you look for role models, you want someone who has your interests and came from the same background</h1>
  </blockquote>
</article>
              
            
!

CSS

              
                /* Generic */

* {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  text-align: justify;
  line-height: 1.4;
  box-sizing: border-box;
}

div {
  display: inline-block;
}

body {
  padding: 10vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 840px;
}

hr {
  width: 100%;
  background-color: #ffe778;
  margin: 1rem 0;
}

p {
  margin: 0.5em auto;
}

/* SPACE Banner */

.banner {
  grid-area: banner;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner h1 {
  font-size: 10rem;
  color: #9b90ff;
}

/* Magazine Grid */

.magazine {
  width: 90vw;
  background: black;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  color: #fffeff;
  padding: 5%;
  grid-template-areas:
    "author author title title text-4 text-4"
    "social social title title text-4 text-4"
    "text-1 text-1 text-2 text-2 text-4 text-4"
    "text-1 text-1 quote-1 quote-1 text-4 text-4"
    "text-1 text-1 text-3 text-3 text-4 text-4"
    "nebula-image nebula-image nebula-image nebula-image nebula-image nebula-image"
    "text-5 text-5 text-6 text-6 banner banner"
    "text-5 text-5 aurora-image aurora-image text-8 text-8"
    "quote-2 quote-2 text-7 text-7 text-8 text-8";
  grid-column-gap: 1em;
  grid-row-gap: 0.5em;
  max-width: 940px;
  min-width: 780px;
  box-sizing: initial;
}

@media (max-width: 1000px) {
  body {
    padding: 0;
  }
  .magazine {
    width: 100vw;
    margin: 0;
  }
}

@media (max-width: 1150px) {
  body {
    padding: 0;
  }
}

.author {
  grid-area: author;
}

.author span {
  color: rgba(255, 255, 255, 0.7);
}

.title {
  grid-area: title;
  color: #ff3c41;
}

.title h1 {
  font-size: 5rem;
}

/* Images */

.text-1 {
  grid-area: text-1;
}

.text-2 {
  grid-area: text-2;
}

.text-3 {
  grid-area: text-3;
}

.text-4 {
  grid-area: text-4;
}

.text-5 {
  grid-area: text-5;
}

.text-6 {
  grid-area: text-6;
}

.text-7 {
  grid-area: text-7;
}

.text-8 {
  grid-area: text-8;
}

/* Quotes */

.quote-1 {
  grid-area: quote-1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #0ebeff;
}

.quote-2 {
  grid-area: quote-2;
  color: #1aa7ff;
  position: relative;
}

.quote-2:before {
  content: '“';
  display: inline-block;
  color: white;
  position: absolute;
  left: 0;
  top: 10rem;
  font-size: 7rem;
}

.quote-2:after {
  content: '”';
  display: inline-block;
  color: white;
  position: absolute;
  right: 0;
  bottom: 6rem;
  font-size: 7rem;
}

/* Images */

.nebula-image {
  grid-area: nebula-image;
}

.aurora-image {
  grid-area: aurora-image;
}

/* Social links */

.social {
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 2rem;
  width: 100%;
  grid-area: social;
}

.social a, .social a:active, .social a:hover, .social a:focus {
  text-decoration: none;
  color: white;
}
              
            
!

JS

              
                
              
            
!
999px

Console