cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <header>
  <div class="category"><span>Lorem ipsum dolor sit amet, consectetur</span></div>
</header>
<div class="wrapper">

  <aside>
    <div class="chapter">
      <h1>4</h1>
    </div>
  </aside>
  <article>
    <div class="chapter">
      <h1>4</h1>
    </div>
    <h2 class="title">Lorem ipsum dolor robero, <br />sit maime error illum ullam aspernatur</h2>
    <div class="cover-img"><img src="https://unsplash.it/640/330" alt="cover image" /></div>
    <div class="content first">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime error illum, eum placeat quae molestias repudiandae ipsa odit, ab incidunt molestiae, repellendus quam perspiciatis laborum praesentium id doloremque nostrum sit cum fugit. Vero incidunt
        iste ipsam, explicabo illum libero, enim ullam tenetur id, quaerat sapiente.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ratione asperiores, quam labore ullam dolore a neque molestiae! Facere atque nobis voluptas! Blanditiis tempora adipisci quis nemo expedita voluptate a aspernatur suscipit reiciendis nesciunt possimus illum, assumenda sequi eius voluptas neque! Libero, laborum quos ut corporis totam ducimus magnam quasi, quod pariatur distinctio, alias commodi enim dolores earum obcaecati! Numquam.</p>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eveniet dolor sequi accusantium, voluptatum mollitia, dolores voluptates omnis officia praesentium veritatis? Dolorum, delectus expedita!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptatum deserunt facere voluptas similique ullam doloremque minus harum praesentium, veritatis vel obcaecati fuga dicta molestias error! Sequi.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, quod.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sapiente molestias quam iste dolorem non itaque vitae ullam.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque magni beatae, eligendi distinctio. Cum, tempora atque inventore repellat ipsum dolore ipsam maxime mollitia sequi earum odit enim consectetur possimus quasi, iusto deleniti et ad. Consectetur vero reiciendis soluta sint, itaque, repellendus molestias consequatur dolorem iure.</li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, fugit, repudiandae. Ad facilis, possimus enim, voluptatum aperiam facere nihil totam!</p>
    </div>
    <hr class="flourish" />
    <div class="content">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error.</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et deserunt beatae assumenda saepe dolorem molestiae voluptatem quisquam commodi consequatur tempora. In quisquam rerum repellendus. Cumque architecto atque, maiores necessitatibus. Expedita commodi dolores quos reprehenderit, possimus vel aliquid ducimus ea doloremque nulla beatae harum blanditiis minus officiis eius fuga quod error facilis debitis rem. Sapiente commodi, maiores accusamus earum, animi nihil eos dicta eveniet impedit pariatur eius perspiciatis quis officia quia eligendi ducimus enim possimus nam iusto ipsa itaque sunt rerum quo reiciendis. Tenetur consequuntur quasi numquam omnis perspiciatis laudantium quisquam magnam, labore voluptas, autem ipsam. Consequatur eaque provident molestias doloremque.</p>
      <blockquote class="right">
        Now this is a story all about how my life got flipped - turned upside down. And I'd like to take a minute just sit right there, I'll tell you how I became the prince of a town called Bel-Air.
      </blockquote>
      <p>
        <img class="right" src="https://unsplash.it/400/300" alt="image" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae consequatur est sit non, laboriosam odit quidem mollitia minus. Doloremque eum, atque sunt. Quisquam, totam. Quidem perspiciatis cumque facere blanditiis aspernatur corrupti ut alias et odio aut at consectetur voluptatibus possimus rerum animi sapiente quibusdam suscipit, id modi ex deserunt omnis ipsum architecto nam. Consequuntur, quam culpa. Nisi quidem accusamus voluptates enim cupiditate ullam adipisci dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis voluptatem, in ad consequuntur inventore voluptatum excepturi amet corporis vel, sed magnam nulla, id. Quam voluptatem quae ipsa corporis tenetur nisi eius amet sint magnam eligendi. Error sequi distinctio officia quia laborum maiores delectus provident vero, architecto qui cupiditate harum totam ea, facilis quas quae non earum ab eveniet quo nulla quis porro vitae. Rem minus nam quas nesciunt eos sed corporis nostrum neque, quia praesentium aperiam! Consectetur optio magnam ab!</p>
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
      <p><img src="https://unsplash.it/220/400" alt="" class="left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam modi sed minima consequuntur laborum porro doloribus unde alias, eligendi vel voluptas optio ipsum quae!</p>
      <h4>Lorem ipsum dolor sit amet, consectetur.</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nihil eaque quaerat, facilis dolorum suscipit, saepe maiores, optio libero dignissimos nam iure. Quaerat itaque, reprehenderit possimus cumque fuga, maxime nihil earum accusantium natus veritatis culpa quisquam optio. Harum, facilis. Quas impedit voluptates quia repellat suscipit officia quis, doloremque, beatae consequatur, quaerat commodi! Necessitatibus dolore, ipsum laudantium aperiam placeat doloribus cum. Itaque a unde totam nam sequi provident accusamus, tenetur impedit temporibus. Rerum velit voluptas eum natus cupiditate quos harum nesciunt.</p>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, illum. Mollitia molestiae recusandae fugit dignissimos quae fugiat necessitatibus aperiam quaerat sapiente, officiis labore ullam rerum ex accusamus ratione assumenda consectetur velit ipsa odit dolorem voluptatibus nihil. Atque sunt, eveniet mollitia repellat deserunt nesciunt repellendus minus! In itaque, rerum voluptatum eum deleniti neque quis harum ipsam enim! Ex ab quas consequatur provident debitis. Facilis dignissimos laboriosam corporis, quam ipsam, sint officiis, sunt nam temporibus magni quae quisquam nihil animi minima ab! Fugiat blanditiis necessitatibus pariatur modi dolorum itaque sunt quibusdam amet quisquam corrupti similique voluptate in, quas fuga veniam harum ex.</p>
      <blockquote class="full left">
        I had a dream I could buy my way to heaven, <br />
        when I awoke, I spent that on a necklace <br />
        I told God I'd be back in a second; <br />
        Man it's so hard not to act reckless.
      </blockquote>
      <hr class="flourish" />
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing.</h3>
      <p><img src="https://unsplash.it/1100/500/" alt="cover-image-2" /></p>
    </div>
    <div class="content two col">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nisi reiciendis illo odio soluta iusto eos quo ab numquam error nam aliquid quidem facere aperiam commodi aliquam, non excepturi, repellat expedita in alias quaerat eligendi! Illo omnis ipsam maiores porro eos voluptatum, ea distinctio perferendis:</p>
      <blockquote class="full right">
        1, 2, 3 and to the 4 -
        Snoop Doggy Dogg and Dr. Dre is at the door.
        Ready to make an entrance so back on up,
        'cause you know we're about to rip shit up.
      </blockquote>
      <h4>Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit temporibus mollitia voluptate!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis error earum ipsa recusandae, cupiditate magnam.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quis facilis fuga modi voluptate.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt aliquid quaerat quo voluptatibus excepturi, neque assumenda!</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis reiciendis suscipit dolores deleniti!</li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo soluta, fugiat sunt cum non aspernatur tempora praesentium exercitationem aliquid magnam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum itaque laudantium suscipit, id ratione in tempore voluptatum.</p>
    </div>
  </article>
</div>
            
          
!
            
              @import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic);

$black100: black;
$black200: tint($black100, 15%);
$black300: tint($black200, 15%);

@mixin chapter-number {

  color: $black300;
  background-color: $black300;
  @include background-image( url('https://unsplash.it/1425'));
  background-image: url("https://unsplash.it/1425"), -webkit-linear-gradient(0deg, black 0%, black 100%);
  background-size: contain;
  background-position: right top;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba($black300, 0.4);
}

html,
body {
  height: 100%;
  font-family: "Lora", Garamond, Georgia, serif; 
  background: tint(wheat, 92%);
}

.wrapper {
  display: block;
  padding: rem(15);
  float: left;
}

header {
  position: relative;
  display: block;
  width: 100%;
  margin: rem(15) 0;

  .category {
    margin-left: rem(60);

    &:before {
      content: '';
      display: block;
      position: relative;
      top: calc(17px/2);
      left: rem(-40);
      width: rem(30);
      height: 0;
      border-top: solid 1px red;
    }

    span {
      font-size: rem(14);
      font-style: italic;
      color: $black300;
    }
  }
}

aside {
  position: relative;
  display: none;

  @media (min-width: 1024px){
    display: inline-block;
    z-index: 2;
    float: left;
    width: 320px;
    height: 100%;
  }

  .chapter {
    @include chapter-number;
    display: block;
    float: right;
    margin-right: rem(35);
    font-size: rem(530);

  }
}

article {
  position: relative;
  z-index: 1;
  display: inline-block;
  float: left;

  @media (min-width: 1024px){
    padding-left: rem(30);
    border-left: solid 1px $black100;
    width: calc(100% - 320px - 1px - 15px );
    margin-left: rem(-60);
    max-width: rem(940);
  }

  .chapter {
    @include chapter-number;
    display: inline-block;
    font-size: rem(80);
    width: 100%;

    @media (min-width: 480px){
      float: left;
      width: auto;
      font-size: rem(100);
      padding-right: rem(15);
    }

    @media (min-width: 1024px){
      display: none;
    }
  }

  .title {
    color: $black300;
    font-size: rem(24);
    font-style: italic;
    line-height: 1.1;
    letter-spacing: 0.4px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    float: left;
    margin-bottom: rem(15);
    width: 100%;

    @media (min-width: 480px){
      margin-bottom: rem(30);
      max-width: calc(100% - 100px - 30px - 1px);    
      padding-left: rem(15);
      border-left: solid 1px $black100;
      font-size: rem(32);
    }

    @media (min-width: 1024px){
      border-left: none;
      padding-left: 0;
      display: block;
      float: none;
      max-width: 90%;
    }

    &:after {
      content: "\f1d1";
      font-family: "FontAwesome";
      font-size: rem(28);
      font-style: normal;
      position: relative;
      display: block;
      width: rem(40);
      height: auto;
      border-radius: 50%;
      margin-top: rem(15);

      @media (min-width: 768px){
        margin-top: rem(30);
      }
    }
  }

  .cover-img {
    margin-bottom: rem(15);

    @media (min-width: 768px){
      margin-bottom: rem(30);
    }

    img { width: 100%;}
  }

  .content {
    position: relative;
    display: block;
    margin-bottom: rem(15);

    &.first,
    &.two.col {
      @media (min-width: 768px){
        -webkit-columns: 2;
        columns: 2;
      }
    }

    h3 {
      display: inline-block;
      font-size: rem(18);
      line-height: 1.2;
      font-weight: bold;
      margin-top: rem(20);
      margin-bottom: rem(15);

      @media (min-width: 768px){
        font-size: rem(21);
      }
    }

    h4 {
      display: inline-block;
      color: $black300;
      font-size: rem(17);
      line-height: 1.1;
      font-weight: bold;
      margin-top: rem(15);
      margin-bottom: rem(10);

      @media (min-width: 768px){
        font-size: rem(18);
      }
    }

    p {
      font-size: rem(15);
      line-height: 1.5;
      margin-bottom: rem(15);
    }

    img {
      width: 100%;
      // @include filter(sepia(100%));
      
      @media (min-width: 640px){
        width: initial;
        max-width: 100%;
      }

      &.right {
        margin: 0 0 rem(10) rem(10);
        // margin-top: 0;
        float: right;
        // margin-right: 0;
      }

      &.left {
        margin: 0 rem(10) rem(10) 0;
        // margin-top: 0;
        float: left;
        // margin-left: 0;
      }
    }

    ul {
      margin-left: rem(17);
      list-style: circle;

      li {
        font-size: rem(15);
        margin-bottom: rem(10);
        line-height: 1.5;
      }
    }
  }

  blockquote {
    font-size: rem(23);
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    margin-bottom: rem(15);
    display: inline-block;
    width: calc(100% - 15px - 20px - 10px);
    
    @media (min-width: 768px){
    width: 75%;
    font-size: rem(26);
    }

    &.right {
      float: right;
      text-align: right;
      border-right: solid 10px $black300;
      margin-left: rem(15);
      margin-right: 0;
      padding-right: rem(20);
    }

    &.left {
      float: left;
      text-align: left;
      padding-left: rem(20);
      border-left: solid 10px $black300;
      margin-right: rem(15);
      margin-left: 0;
    }
    &.full {
      // display: block;
      // margin: 0 rem(15) rem(15);
      width: calc(100% - 15px - 20px - 10px);
      float: none;
    }
  }

  .flourish {
    margin: rem(30) 0;
    @include border-image(linear-gradient(90deg, transparent 0%, tint($black100, 20%) 50%, transparent 100%) 1);
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-bottom-color: transparent;
  }
}
            
          
!
999px
Loading ..................

Console