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="container">
  <div class="picture-box"></div>
  <div class="top-matter">
    <div class="title-box">
      <h1>Powers&nbsp;of <span>Attraction</span></h1>
    </div>
    <div class="byline">
      <p>In the modern world chlorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque asperiores dolores sed expedita eum amet facere suscipit doloribus architecto autem commodi quidem voluptates repellendus.</p>
      <p>By Amanda McCrae</p>
    </div>
  </div>
  <div class="main-article">
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quis nisi sit consectetur quae incidunt est ex magni error nam doloremque enim, corporis sunt aliquam vero nemo necessitatibus! Cum laboriosam, facilis perferendis distinctio ex aspernatur esse, quidem aliquam tenetur impedit, dignissimos voluptate sint culpa error consequatur hic officia. Repellat!</p>
      <p>Velit enim assumenda commodi quas minus fugiat, facilis deserunt mollitia voluptatem sed animi, suscipit tenetur voluptate tempora eius magni hic iusto. Unde voluptatibus enim sint ipsam voluptatum qui culpa, mollitia similique magnam voluptate cupiditate, quia aperiam maiores blanditiis. Magnam consequatur illo fugiat ea tempora eos culpa earum, voluptates dicta.</p>
      <p>Voluptates quaerat, tenetur quos incidunt ipsum eaque fugit. Maiores minima officiis sequi doloremque non accusamus consectetur, inventore, fugiat facilis, praesentium itaque iste odio vel, porro! Aliquid officia nihil explicabo, non quidem odio earum commodi doloribus, dolor neque quod ratione voluptas magnam! Dicta reprehenderit, quasi facilis possimus magni sint iure.</p>
      <p>Voluptatibus nesciunt maiores, ipsa enim id quasi alias placeat, amet aliquid mollitia corporis sunt quia expedita officia aliquam, adipisci, eum voluptatum quaerat cupiditate harum? Inventore a officia, dolores consequatur perferendis atque commodi molestiae repellat odio quibusdam alias perspiciatis nemo facilis. Maxime ullam consequuntur, consequatur repudiandae magni, soluta perspiciatis illo!</p>
      <p>Magnam fugiat earum soluta, magni quos blanditiis suscipit eligendi sapiente, necessitatibus aperiam. Molestias quisquam, officia similique rem adipisci iure atque quod voluptas voluptates laudantium molestiae distinctio culpa placeat, repellendus sed laborum ex voluptatum fuga. Laudantium maiores eos consequuntur, sequi facere autem impedit! Est, eius. Optio, doloribus sit odio corrupti.</p>
      <p>A qui culpa beatae quis natus suscipit voluptatum earum assumenda optio, itaque nobis facere repudiandae illum perferendis eligendi ad minus ab voluptate quae quisquam sint, et consequatur nesciunt! Distinctio nihil, commodi optio perspiciatis cum possimus adipisci ut. At nesciunt exercitationem eius doloribus ullam reiciendis, ipsa magnam, autem nam itaque!</p>
    </section>
    <section>
      <p>Aliquid voluptatem aspernatur, non perferendis, ad labore quas consequatur, nihil atque veritatis ut minus repellat pariatur dolorum excepturi adipisci itaque commodi. Corporis, maxime et deleniti perspiciatis? Facere dolorum delectus, alias maxime quaerat, cum nostrum blanditiis consequuntur, ad explicabo atque, veritatis rerum. Assumenda dolor temporibus non alias dolores accusantium, ea.</p>
      <p>Esse a dolorem modi rem sunt ex, veniam, quasi animi excepturi cumque pariatur beatae delectus quisquam porro, facere quis ipsa sequi nihil blanditiis ipsum vel eaque. Laborum culpa quam unde earum cumque rerum fugiat, aut excepturi nobis numquam ipsa deserunt ex iusto est qui doloribus atque suscipit, consectetur voluptatem.</p>
      <p>Commodi dolorem eligendi qui, reprehenderit tempora. Accusamus asperiores atque, a facilis sapiente voluptatum alias provident ea dicta ab sint quae vero consequuntur! Dolorem iusto veniam alias vero consequatur voluptatum dolorum adipisci voluptatibus corporis porro autem ex, doloribus exercitationem dolores sint libero at quaerat sed error ea. Provident, praesentium quae.</p>
      <p>Tenetur dicta illo commodi non est laborum sit sint, dolorum iusto aliquid ipsum expedita ex et atque, qui voluptate eaque ea cumque, exercitationem minus deserunt illum suscipit quisquam. Eum veritatis, at nemo similique excepturi tempore aspernatur illo ipsum? Accusantium ducimus nihil perferendis, in saepe libero maiores quisquam nam maxime?</p>
      <p>Inventore minima, eos praesentium eligendi assumenda doloremque maiores optio consequatur possimus laboriosam minus nisi quisquam sed debitis aspernatur sequi nam ullam, illum placeat atque quas harum nihil. Fuga maiores odio at, molestiae nemo dolorum, aliquam minima, quisquam facilis eum perspiciatis eius deserunt placeat error voluptas, impedit inventore cumque nobis.</p>
      <p>Ipsum, voluptatum sit quas consequuntur quidem dicta minima, mollitia expedita perspiciatis, ratione ducimus optio reprehenderit fugit dolorem nisi velit id quia! Unde odit aliquid animi quasi quam ipsam similique repellat dolor deleniti! Quisquam minus accusamus, recusandae repellat tempora, quae dignissimos sit at nihil ab aliquid. Ut impedit aut itaque.</p>
    </section>
  </div>
</div>

            
          
!
            
              html, body {
  height:100%;
}
body {
  font-size:100%;
  line-height:1.5;
  font-family:"Roboto Slab", sans-serif;
  background:rgb(29,29,69);
}

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

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

img {
  max-width:100%;
  height:auto;
  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();
    }
  }

.container {
  max-width:1600px;
  margin:0 auto;
  background:#fff;
}
.picture-box {
  background-image:url(http://lorempixel.com/800/900/people/9/);
  background-repeat:no-repeat;
  height:300px;
}
h1 {
  font-size:9vw;
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  margin:1em;
  font-family:Bevan, sans-serif;
  span {
    display:block;
    color:tomato
  }
}
.byline {
  font-size:1em;
  color:#555;
  > p:first-child {
    font-style:italic;
  }
}
.byline, .main-article {
  padding:1em;
}
.main-article p {
  margin-bottom:16px;
  text-indent:1em;
}
.main-article section:first-child p:first-child {
  text-indent:0;
}
.main-article section:first-child p:first-child:first-letter {
  float: left;
  color: tomato;
  font-size: 81px;
  line-height: 60px;
  padding-top: 5px;
  padding-right: 8px;
  padding-left: 3px;
  font-weight:100;
}


.min(900px, {
  .container {
    display:flex;
    flex-flow: row wrap;
  }
  .picture-box, .top-matter {
    flex:50%;
    height:100vh;
    min-height:900px;
  }
  .picture-box {
    background-image:url(http://lorempixel.com/800/1200/people/9/);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }
  .top-matter {
    display:flex;
    flex-flow:row;
    align-items:stretch;
    justify-content:center;
    background:rgb(240,255,255);
  }
  .title-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:200px;
    order:2;
    h1 {
      width:100%;
      display:table;
      font-size:5em;
      text-align:center;
      margin:auto 0;
      transform:rotate(-90deg);
    }
  }
  .byline {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:400px;
    p {
      font-size:1.25em;
      line-height:1.3;
      text-align:right;
      padding-left:10px;
    }
  }
  .main-article {
    display:flex;
    justify-content:space-between;
    background:#fff;
    padding:4em 2em;
  }
  section {
    width:48%;
  }
});
.min(1200px, {
  .main-article p {
    font-size:1.25em;
  }
  .main-article section:first-child p:first-child:first-letter {
  float: left;
  color: tomato;
  font-size: 105px;
  line-height: 60px;
  padding-top: 13px;
  padding-right: 8px;
  padding-left: 3px;
  font-weight:100;
}
});
.byline p {
  margin-bottom:16px;
}
            
          
!
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