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

              
                <div class="header-wrapper" style="background-image: url('https://images.unsplash.com/photo-1508881646078-01783ab4a6f8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ec38049ee48080ae3f15e920aea748d0&auto=format&fit=crop&w=1350&q=80')">
  <div class="header">
    <h1 class="h1">Australian shepherd saves the last Pokémon from captivity</h1>
    <div class="stamp">
      <div class="author">By: <a href="https://bulbapedia.bulbagarden.net/wiki/Ash_Ketchum" class="gold">Ash Ketchum</a> Published: <span class="gold">04/09/1997</span>
      </div>
      <div class="tags">
        Categories:
        <a href="www.google.com">Pokémon</a> |
        <a href="www.google.com">Research and Wildlife</a> |
        <a href="www.google.com">Pokéball Technology</a> 
      </div>
    </div>
  </div>
  <div class="info-wrapper">
        <div id="js-info-trigger" class="info-trigger">i</div>
        <div id="js-info-content" class="info-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus rem, suscipit 
      repudiandae mollitia fuga obcaecati tenetur!</div>
  </div>
</div>
<div class="researcher">
  <ul>
    <li>
      <div class="researcher-avatar">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Oak" class="gold"> <img src="http://via.placeholder.com/50x50/ffcc00/ffcc00"></a>
      </div>
      <div class="detail">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Oak" class="gold">Samuel Oak</a><br> Kanto Region Pokémon Professor.<br>Lead Pokémon Expert
      </div>
    </li>
    <li>
      <div class="researcher-avatar">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Elm" class="gold"> <img src="http://via.placeholder.com/50x50/ccff00/ccff00"></a>
      </div>
      <div class="detail">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Elm" class="gold">Professor Elm</a><br> Johto Region Pokémon Professor
      </div>
    </li>
    <li>
      <div class="researcher-avatar">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Rowan" class="gold"><img src="http://via.placeholder.com/50x50/00ccff/00ccff"></a>
      </div>
      <div class="detail">
        <a href="https://bulbapedia.bulbagarden.net/wiki/Professor_Rowan" class="gold">Professor Rowan</a><br>Sinnoh Region Pokémon Professor
      </div>
    </li>
    </div>
  <div class="content-wrapper">
    <article class="magazine-layout three-col-text">
      <h2>Super Dog</h2>
      <section>
        <h3>Astounding Heroisim</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdam fugiat neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium? Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
        <blockquote class="float-right">Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam.
          <span class="author">Lorem Ipsum</span>
        </blockquote>
        consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
        </p>
      </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibu dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero
      perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
    </p>
    </section>
  <section>
    <h3>Fantasitc Heroisim</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdamtetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero perspiciatis magnam
      provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdam fugiat neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium? Lorem ipsumdolor sit amet
      consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdam fugiat neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium? Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad, obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
    </p>
  </section>
  <img src="https://vetstreet.brightspotcdn.com/dims4/default/d5e8451/2147483647/thumbnail/645x380/quality/90/?url=https%3A%2F%2Fvetstreet-brightspot.s3.amazonaws.com%2F6b%2F4a%2F95942b2b42269144fc87f33bd93e%2Faustralian-shepherd-ap-kfqkvx-645-x-380.jpg">
  </article>
<div class="background-breaker">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad.</p>
</div>
<div class="single-layout">
  <h2>Awards Abound</h2>
  <figure class="caption float-left" style="max-width: 350px;">     
    <img src="https://images.unsplash.com/photo-1505333495796-5b46a56bec90?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be22831806788875245ad80ef841c2c4&auto=format&fit=crop&w=1353&q=80"> 
    <figcaption class="figcaption">
      <p>This good boy is a good boy aliquid a dignissimos! Porro, neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium rerum aliquid!</p>
      <p><i>(Unsplash photo)</i>&nbsp;&nbsp;
      </p>
    </figcaption>
  </figure>

  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdam fugiat neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium? Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid quos natus ad,
  <blockquote class="float-right">Dolor sit amet, consectetur adipisicing elit. Tenetur maxime.</blockquote>
  obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam. obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe.
  </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem delectus cum atque eius consequatur mollitia, saepe quisquam. Quibusdam fugiat neque suscipit provident eos, consequuntur incidunt harum nisi explicabo ducimus laudantium? Lorem ipsum
  obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe.obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. dolor sit amet, consectetur adipisicing elit. Tenetur maxime, aliquid
  quos natus ad, obcaecati modi nihil vero perspiciatis magnam provident impedit nostrum dicta earum saepe. Nobis nesciunt atque ullam.
</p>
</div>
<div class="single-layout">
  <h2 class="clear-fix">The Newest Generation</h2>
  <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/13001352/Australian-Shepherd-Care-500x749.jpg" class="float-right" style="width:200px;display: block; padding-right: 1rem;padding-bottom: 1rem;">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid incidunt nostrum voluptates perferendis laboriosam, quaerat praesentium sint, eligendi adipisci sed, iusto ipsam officiis molestiae! Corporis quod dolorem ullam magnam odit.</p>

</div>
</div>
<div class="after-content">
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 1</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 2</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 3</h3>
  </div>
  <div>
    <img src="http://via.placeholder.com/350x150">
    <h3>Title 4</h3>
  </div>
</div>
              
            
!

CSS

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

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
}

// Header image and Header title
.header-wrapper {
  display: flex;
  position: relative;
  background-color: #2a2a2a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 25rem;
  height: 70vh;
}

// Header Fade to black at bottom
.header-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.4) 95%);
}

//Info Blurb
.info-wrapper{
  position: absolute;
  z-index: 999;
  right: 15px;
  top: 15px;
  width: 100%;
}

.info-trigger{
  background-color: #fafafa;
  position: absolute;
  top:0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 1;
}

.info-trigger:hover{
  background-color: #cccccc;
}

.info-content{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 100%;
  max-width: 600px;
  background: #fefefe;
  border-radius: 10px;
  padding: 1rem;
  background-color: #fafafa;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 2px 6px 0 rgba(0,0,0,.1);
  transform: scale(0);
  transform-origin: top right;
  transition: all 0.2s ease-out;
  // animation: infoin 0.4s  ease-out  0s 1 reverse forward;
}

.info-content.info-content-open{
  transform: scale(1); 
  // animation: infoin 0.4s  ease-out  0s 1 normal both;
}

@keyframes infoin{
  0%{
    transform: scaleX(0) scaleY(0);
  }

  50%{
    transform: scaleX(1) scaleY(0.05);
  }

  100%{
    transform: scaleX(1) scaleY(1);
  }
}

// Header Title Backdrop
.header {
  align-self: flex-end;
  justify-self: flext-start;
  color: white;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;


  .author,
  .tags{
    padding: 0.25rem;
    width: 100%;
  }

  @media (min-width:768px){
    .author,
    .tags{
      float: left;
      padding: 0;
      width: 50%;
    }

    .tags{
      text-align: right;
    }
  }
}

// Header Title
.header .h1 {
  margin-top: 1rem;
  text-shadow: 2px 2px 2px black;
  font-size: calc(2rem + 3vw);
}

// Author Stamp Styles
.stamp {
  font-size: 0.85rem;
}

.gold,
.stamp a{
  color: #fc0;
  opacity: 0.9;
  font-weight: 400;
  text-decoration: none;
}

// Researcher Styles
.researcher {
  display: flex;
  background: black;
  margin: 0;
  color: white;
  padding: 1rem;
  font-weight: 100;

  a{
    font-size: 1rem;
  }

  ul {
    list-style-type: none;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 0;
    justify-content: space-evenly;
    display: flex;
    flex-wrap: wrap;

    > li {
      display: flex;
      padding: 0.5rem;
      align-items: center;

      > .detail {
        margin-left: 1rem;
        font-size: 0.85rem;
      }
    }
  }
}

.researcher-avatar,
.researcher li > .detail {
  float: left;
}

.researcher-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

@media (max-width: 768px) {
  .researcher ul {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 450px) {
  .researcher ul{
    margin-left: 0;


    .detail{
      margin: 0;
    }
    .researcher-avatar{
      display: none;
    }
  }
}

// Top and bottom yellow Triangels
.content-wrapper {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid black;
}

.content-wrapper::before,
.content-wrapper::after {
  content: "";
  width: 150%;
  height: 200px;
  display: block;
  position: absolute;
  transform: rotate(-5deg);
  background: #fc0;
  z-index: -1;
}

.content-wrapper::before {
  top: 0;
  left: 0;
  transform-origin: bottom left;
}

.content-wrapper::after {
  right: 0;
  bottom: 0;
  transform-origin: top right;
}

.single-layout,
.magazine-layout{
  line-height: 1.5;
}

.single-layout,
.magazine-layout.single-layout {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  columns: auto;
}

@media (max-height: 768px) {
  .magazine-layout {
    columns: auto !important;
  }
}

.magazine-layout img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.magazine-layout:not(.single-layout) {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  column-gap: 3rem;
  column-rule: 1px solid rgba(0, 0, 0, 0.25);

  & > h2 {
    column-span: all;
    margin: 0;
    padding: 0;
  }

  & > section:first-of-type h3 {
    margin-top: 0;
  }

  & > p:first-of-type {
    margin-top: 0;
  }

  blockquote {
    float: none !important;
  }
}

.three-col-text {
  columns: 3 300px;
}

.two-col-text {
  columns: 2 300px;
}

@media (min-width: 1200px) {
  .magazine-layout + .single-layout {
    border-top: 2px solid hsl(0, 0%, 80%);
  }
}

.single-layout + .single-layout {
  padding-top: 0;
}

// Big content breaker
.background-breaker {
  position: relative;
  display: flex;
  min-height: 10vh;
  width: 100%;
  background-image: url("https://images.unsplash.com/photo-1530261411399-c28bd12eb2dd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=11224eecf7d403425e82b667b18567da&auto=format&fit=crop&w=1268&q=80");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 2px black;
  align-items: center;
  justify-content: center;

  p {
    z-index: 2;
    padding: 2rem;
    max-width: 500px;
    text-align: center;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }
}

// Related posts
.after-content {
  width: 100%;
  max-width: 800px;
  padding: 2rem 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.after-content > div {
  float: left;
  margin: 1rem;
}

// Helper Classes
blockquote {
  display: block;
  margin: 1rem auto 1rem 0;
  padding: 1rem;
  max-width: 75%;
  width: 100%;
  min-width: 1px;
  border-left: 5px solid #fc0;
  font-size: 1.4em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.75);

  .author{
    display: block;
    text-align: right;

    &::before{
      content: '\2014'
    }
  }

  @media (min-width: 1200px){
    border-right: 5px solid #fc0;
    border-radius: 15px;
    text-align: center;
  }
}


figure,
blockquote {
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

figure {
  display: block;
  margin: 1rem auto;

  img {
    max-width: 100%;
  }

  @media (min-width: 1200px) {
    display: inline-block;
    margin: 1rem 1.5rem 1.5rem 0;
  }
}

figure.caption {
  background: #eaeaea;
  overflow: hidden;
  border-bottom: 1px solid black;
}

figure figcaption {
  display: block;
  padding: 0 1rem;
  color: #666666;
  font-size:0.8em;

}

figure p{
  &:first-of-type {
    margin-top: 0.25rem;
  }
}

.clear-fix::before,
.clear-fix::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 1200px) {
  .float-left {
    float: left;
  }

  .float-right {
    float: right;
  }

  .single-layout blockquote.float-left {
    max-width: 30%;
    margin: 1rem;
    margin-left: -15%;
  }

  .single-layout blockquote.float-right {
    max-width: 30%;
    margin: 1rem;
    margin-right: -15%;
  }
}

              
            
!

JS

              
                (function() {
  /* Need to calculate the best column if it can be fit as a 2 column. */
  var textDivHeight = document.querySelectorAll(".magazine-layout");

  textDivHeight.forEach(function(item) {
    if (item.clientHeight > window.innerHeight) {
      item.classList.add("single-layout");
    }
  });

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    var textDivHeight = document.querySelectorAll(".magazine-layout");

    textDivHeight.forEach(function(item) {
      item.classList.remove("single-layout");

      if (item.clientHeight > window.innerHeight) {
        item.classList.add("single-layout");
      } else if (item.clientHeight < window.innerHeight) {
        item.classList.remove("single-layout");
      }
    });
  }

  var info_tag = document.querySelector('#js-info-trigger');
  var info_content = document.querySelector('#js-info-content');

  info_tag.addEventListener('click', function(){
    info_content.classList.toggle('info-content-open');
  });
})();

              
            
!
999px

Console