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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

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.

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.

            
              <main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum nisi quis ante interdum, ac blandit tortor tempus. Duis iaculis sem eu sapien mattis, nec interdum augue vulputate. Cras venenatis posuere enim eu tincidunt. Integer eu dolor
    eu quam semper convallis. Cras vel enim eu erat imperdiet lacinia ut et leo. Donec nec euismod urna. Praesent eu risus semper, dapibus eros non, condimentum nibh. Cras rhoncus varius tortor, scelerisque tempor lacus.
  </p>
  <p>
    Morbi ac finibus quam. In sed scelerisque nisl, vel rutrum dui. Quisque finibus lacus enim, sit amet maximus diam pellentesque ut. Praesent erat nisl, cursus a feugiat convallis, elementum eget ipsum. Nam arcu erat, gravida id lacus at, finibus vulputate
    felis. Vestibulum aliquet arcu eget consequat fringilla. Cras fringilla neque in nulla ullamcorper, vitae elementum nibh ornare. Aenean eleifend eros nec molestie dapibus. Ut non euismod nulla, in suscipit massa. Phasellus neque dui, fringilla non
    suscipit at, finibus at ligula. Aliquam arcu erat, luctus quis condimentum eu, interdum id urna. Fusce nec lobortis orci, quis scelerisque risus. Nunc sit amet eros diam. Nullam odio leo, consequat eu erat vitae, elementum ornare odio.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum velit tortor, vitae cursus magna consectetur eget. Fusce ultricies faucibus magna at volutpat. Duis varius finibus odio, et elementum nibh luctus et. Aliquam quis blandit turpis.
    Ut semper maximus elementum. Integer venenatis, sem non varius elementum, tortor augue vestibulum orci, at blandit tellus libero vitae odio. Phasellus rutrum faucibus commodo. Nullam euismod lectus ex, quis venenatis arcu feugiat vel. Phasellus eu
    tristique orci. Morbi ante orci, aliquam a interdum eu, sagittis eget odio. Fusce urna augue, placerat sit amet consequat id, gravida sed metus. Nulla facilisi. Mauris id ipsum ipsum. Aliquam erat volutpat.
  </p>
  <p>
    Morbi rhoncus et diam eget rutrum. Fusce id arcu sit amet arcu accumsan facilisis id non arcu. Fusce molestie ultricies rhoncus. Cras et pulvinar sem. Nam semper a tortor id iaculis. Morbi ultricies consectetur purus, sed vehicula est mattis mollis. Nulla
    viverra erat non mauris cursus consectetur. Nulla a justo nec eros volutpat efficitur eget ut libero. Suspendisse nunc velit, pellentesque vel vehicula eu, elementum non ligula. Quisque vulputate, magna sed maximus sagittis, lectus lacus sollicitudin
    odio, et tincidunt velit tellus volutpat lacus. Mauris varius sit amet arcu non ultrices. Etiam a libero urna. Vestibulum vulputate luctus quam vitae interdum. Nam non enim sit amet ante varius tempus eget vitae nunc.
  </p>
  <h3>Approaching a design studio</h3>
  <p>
    Vestibulum augue nisi, laoreet vitae maximus vel, suscipit in erat. Cras ullamcorper luctus vestibulum. Nullam tincidunt arcu a orci mattis, vestibulum sagittis libero tincidunt. Donec ut nibh id justo sollicitudin tincidunt. Fusce suscipit ultricies
    augue, ut porttitor ipsum vulputate sit amet. In elementum ultrices nisl, id dignissim nisi imper.
  </p>
  <p class="footnote">An hour or so after writing these words I was called by a designer friend and asked if I'd seen anyone good recently. You see, it happens all the time!</p>
  <p class="footnote">This is not vanity. My name is not easy to spell. But if an applicant can't get it right, it suggests they may be slapdash in other matters of detail.
  </p>
</main>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Work+Sans:400,700');
body {
  font-family: 'Work Sans', sans-serif;
  max-width: 1200px;
  margin: 2em auto;
  font-size: 100%;
  background: #333;
}

main {
  padding: 1em;
  background: #eee;
  font-size: 1em;
  line-height: 1.35;
}

@media screen and (min-width: 1000px) {
  main {
    padding: 5em 7em 8em 6em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0 calc(1em*1.35);
  }
}

main p {
  margin: 0;
  padding: 0;
}

main p + p {
  text-indent: 1.5em;
}

main p:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 6;
}

main p:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 6;
}

main p:nth-child(3) {
  grid-column-start: 2;
  grid-column-end: 10;
}

main p:nth-child(4) {
  grid-column-start: 2;
  grid-column-end: 10;
}

main h3 {
  grid-column-start: 1;
  grid-column-end: 10;
  padding: 0;
  padding-top: calc(3*(1em*1.35));
  margin: 0;
  color: #0692cc;
}

main p:nth-child(6) {
  grid-column-start: 1;
  grid-column-end: 6;
}

main p.footnote {
  color: #0692cc;
  font-size: 0.8em;
  line-height: calc(0.8em*1.35);
  font-weight: bold;
  text-indent: 0;
  padding-top: 1em;
}

@media screen and (min-width: 1000px) {
  main p.footnote {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 6;
    grid-column-end: 8;
    align-self: end;
  }
  main p.footnote + p.footnote {
    grid-row-start: 6;
    grid-row-end: 6;
    grid-column-start: 8;
    grid-column-end: 10;
    align-self: end;
  }
}

            
          
!
999px
Loading ..................

Console