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.

            
              <div class="header-container">
  <div class="left">
    <div class="inner">
      <h1>prairie building</h1>
      <h2>The labours of johnny</h2>
      <p>Armed with a few primitive tools, a suburban hipster set out to build his own cabin on the open prairie</p>
      <h3>photography by</h3>
      <h4>Todd Quackenbush</h4>
    </div>
  </div>
  <div class="right">
  </div>
</div>
<div class="article-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut soluta et nulla dolor at sint ipsa nihil quis neque consequuntur ab vel quas nesciunt dolores illo commodi, non accusantium quasi laboriosam iusto optio cupiditate sed ipsam unde. Alias maxime amet sequi, iusto dolore qui sed vitae voluptates sit, aliquid eligendi nobis hic illo. Et magni sapiente, inventore nemo, nulla veniam?</p>
  <p>Minus possimus quos pariatur inventore aliquid. Molestias rem vel, itaque nesciunt eligendi maiores, nemo, voluptates commodi error voluptas modi facilis tempore deleniti nostrum iste veniam repellendus quam. Maiores incidunt repellendus fugit totam eius ipsam quia perspiciatis quisquam voluptas, ducimus eos voluptate excepturi, cumque. Ipsam vitae architecto, nemo perspiciatis, explicabo eligendi tempore dignissimos esse animi consequatur id nisi numquam ipsa provident.</p>
  <p>Numquam cumque architecto, voluptatibus optio voluptas porro voluptatum unde ea minima exercitationem dolor modi omnis officiis, velit distinctio doloribus voluptate delectus necessitatibus autem, veniam, tempora! Expedita dolor culpa laborum incidunt ipsum, eius enim modi suscipit delectus voluptatibus reprehenderit in ducimus iusto minima natus, reiciendis molestias animi esse. Voluptas, id nam officiis mollitia in soluta non architecto reprehenderit assumenda. Voluptatibus, iure.</p>
  <p>Molestiae natus ipsam itaque hic deleniti, laboriosam qui ipsum accusantium molestias ipsa beatae ratione dicta aliquam officiis architecto harum velit quos dolores ea iste! Nisi possimus, debitis illo repudiandae totam rem quo officiis, veniam illum eos magnam cumque aspernatur. Odio, sit, similique. Placeat molestiae alias fugiat, distinctio voluptatibus blanditiis doloribus enim aut eius eaque ad sit esse aspernatur consectetur eos.</p>
  <figure>
    <img src="https://unsplash.it/1900/800/?image=804" alt="" />
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus.</figcaption>
  </figure>
  <p>Quos perspiciatis repellendus autem praesentium fuga, dignissimos fugit nesciunt quibusdam fugiat id, saepe, amet. Repellendus iure eaque optio labore facere ex delectus, saepe eligendi maiores numquam nesciunt quas vel culpa enim a quibusdam. Distinctio vel rem odit quam illum nobis dolore reiciendis, rerum nam tempore quasi laudantium praesentium, quos mollitia eligendi, quae repudiandae excepturi! Distinctio eveniet mollitia, qui nesciunt quisquam?</p>
  <p>Fuga harum est magnam animi, ex saepe inventore doloribus debitis facilis commodi nisi ullam mollitia laborum iste unde consectetur consequuntur at omnis, eius accusantium enim vero possimus! Sapiente provident voluptatem illum temporibus modi odio blanditiis quibusdam consequatur dolorem asperiores, velit expedita commodi sed deleniti sunt officia autem quasi. Perspiciatis cupiditate aliquid optio suscipit reiciendis nobis, qui mollitia, voluptatem in velit?</p>
  <p>Dolorem sed quod consequatur minus et, at ipsam cum veniam iste delectus eveniet! Id magnam adipisci eveniet praesentium cum modi, eos animi rem quae sit officiis aperiam eligendi optio voluptate minima aut, reprehenderit pariatur necessitatibus nam! Maxime ex, consequuntur quod labore rerum dolor. Suscipit praesentium ipsa, ex quo qui quidem aliquid numquam rem accusamus neque ipsum doloremque minima vitae pariatur.</p>
  <p>Quis ex temporibus eum repudiandae, obcaecati dignissimos dolorem dolores id harum, dolore tempora accusantium qui iure modi incidunt doloremque velit quae magnam illum est quos fugiat perspiciatis, tempore! Animi, voluptatibus, commodi? Ratione veritatis praesentium quibusdam dicta facilis sunt, voluptates eaque. Laboriosam necessitatibus eligendi, ullam, assumenda mollitia itaque libero minima vitae suscipit delectus molestiae dolorem quos natus nihil voluptatem et tempore.</p>
  <p>Eligendi corporis eius, ut facere animi incidunt velit cum facilis expedita officiis architecto dolorum sint nemo iste cupiditate recusandae nostrum hic ad labore saepe vitae ex! Aliquid deleniti nemo tenetur praesentium, in iure nostrum quibusdam modi, atque deserunt earum omnis officiis dignissimos repellendus facere distinctio maiores eos velit, vitae. Magnam, facere qui. Impedit fugit, commodi esse nobis atque debitis sequi.</p>
  <p>Vero tenetur explicabo placeat laborum a! Incidunt aliquam hic odio ex culpa adipisci at distinctio quos iusto, illum laborum deserunt ducimus atque libero consequatur, voluptates totam fuga ratione, mollitia fugit est. Molestiae quidem sequi unde aliquid tempora numquam ea laboriosam. Omnis enim, iste quos dolores rerum cumque, laborum repellat molestias assumenda consequuntur, quaerat? Voluptates molestias, ea voluptatem sit animi sapiente?</p>
  <p>Atque perferendis placeat rerum doloremque nulla fugit labore nisi? Dolore veritatis accusantium, quod magnam, minus repellat beatae quia esse architecto dicta veniam dolorem quam explicabo laborum dolor ullam doloremque unde sapiente. Amet laboriosam saepe nostrum tenetur illo, odit nemo, a veniam asperiores corporis, tempora, quam ipsam inventore consectetur aliquam! Obcaecati laborum sunt fugit delectus, hic beatae mollitia fugiat rerum voluptates.</p>
  <p>Magnam pariatur ex velit fugit ullam vitae atque reprehenderit unde laborum dolorem voluptas similique, architecto magni voluptatem a ipsa repellendus expedita eum nobis. Ea laborum aperiam consectetur facilis veniam magni distinctio modi quis maiores provident necessitatibus iusto deleniti quas animi soluta id similique dolore neque velit libero, tempora. Ad vitae nisi eligendi enim voluptatem et dicta commodi molestias modi magnam.</p>
</div>
            
          
!
            
              html, body {
  height:100%;
}
body {
  font-size:100%;
  line-height:1.5;
  font-family: "Roboto Condensed", sans-serif;
  background:#fff;
  &:after {
    content:'\003C\002F\003E';
    display:block;
    width:100%;
    text-align:center;
    font-size:8em;
    color:#e0e0e0;
  }
}

*, *:before, *:after {
  box-sizing:border-box;
}

.group {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

img {
  vertical-align:baseline;
}

a {
  text-decoration:none;
}

.max(@maxWidth;
  @rules) {
    @media only screen and (max-width: @maxWidth) {
      @rules();
    }
}

.min(@minWidth;
  @rules) {
    @media only screen and (min-width: @minWidth) {
      @rules();
    }
}

.header-container {
  width:100%;
  min-width:280px;
  margin-bottom:36px;
  .right {
    background-image:url('https://unsplash.it/g/800/?image=491');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    min-height:400px;
  }
  .left {
    padding:2em;
    background:#f0f0f0;
    .inner {
      position:relative;
      padding:0;
      margin:auto;
      padding:0;
      max-width:400px;
      &:before, &:after {
        content:'\f005';
        font-family:FontAwesome;
        color:lighten(#696a58,15%);
        font-size:3em;
        padding:0 6px;
        display:block;
        width:100%;
        text-align:center;
      }
      &:before {
        margin-bottom:24px;
      }
      &:after {
        margin-top:24px;
      }
    }
    h1, h3, h4 {
      font-family:"Playfair Display", serif;
      font-size:calc(~"1em + 3.5vw");
      text-transform:uppercase;
      text-align:center;
      line-height:1;
      color:#696a58;
      font-weight:400;
    }
    h2 {
      font-family:"Vast Shadow";
      font-size:calc(~"1em + 1.5vw");
      text-transform:uppercase;
      text-align:center;
      line-height:1;
      color:#696a58;
      font-weight:400;
      margin:0.5em 0;
    }
    h3 {
      font-size:calc(~"1.25em + 1vw");
      margin:0.75em 0 0.5em;
    }
    h4 {
      font-size:calc(~"0.8em + 1vw");
      margin:0.5em;
      position:relative;
      &:before {
        content:'\f083';
        font-family:FontAwesome;
        padding-right:6px;
      }
    }
    p {
      font-family:"Playfair Display",serif;
      text-align:center;
      line-height:1.2;
      color:#696a58;
      font-weight:400;
      font-size:calc(~"0.75em + 1vw");
      border-top:7px solid #696a58;
      border-bottom:7px solid #696a58;
      padding:0.75em 0;
    }
  }
}
.min(800px, {
  .header-container {
    display:flex;
    min-height:100vh;
    .left, .right {
      flex:1 1 50%;
      width:50%;
    }
    .right img {
      object-fit:cover;
      object-position:center center;
      min-height:100vh;
      min-width:100%;
    }
    .left {
      display:flex;
      .inner {
        max-width:400px;
      }
    }
  }
});
.article-container {
  padding:2em;
  .min(800px, {
    columns:2;
    column-gap:3rem;
  });
  p {
    font-family:serif;
    line-height:1.4;
    color:#222;
    font-weight:400;
    font-size:calc(~"0.75em + 0.75vw");
    margin-bottom:calc(~"0.75em + 0.75vw");
    widows:3;
    orphans:3;
  }
  p:first-of-type:first-letter {
    margin: 1% 3% -2px 0;
    padding:0 5% 0;
    font-size: calc(~"(0.75em + 0.75vw * 1.4) * 2.75");
    line-height: 1.5;
    float: left;
    color:#f0f0f0;
    font-weight:700;
    background: tomato;
    vertical-align:bottom;
  }
}

figure {
  display:block;
  margin:0;
  padding:0;
  column-span: all;
  margin-top:calc(~"0.75em + 0.75vw");
  background:#c0c0c0;
  background: repeating-linear-gradient(-135deg, 
  #e0e0e0, #e0e0e0 .1em /* black stripe */, 
  #fff 0, #fff .4em /* blue stripe */
);
  img {
    max-width:100%;
    height:auto;
    vertical-align:bottom;
    display:block;
    margin:0 auto;
  }
  figcaption {
    font-size:calc(~"0.75em + 0.75vw");
    display:block;
    color:#999;
    padding:6px 0 calc(~"0.75em + 0.75vw * 2");
    text-align:right;
    background:#fff;
    &:before {
      content:'\f083';
      font-family:FontAwesome;
      padding-right:6px;
    }
  }
}
            
          
!
999px
Loading ..................

Console