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.

            
              <aside>
  
  <p>One liner here for good measure.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus dolor, vehicula sed vehicula vitae, semper in erat. Quisque placerat commodo semper. Proin iaculis bibendum tempor. Ut elementum dolor et quam mollis fermentum.Quisque sit amet pellentesque orci. Aliquam eget purus turpis, vel auctor elit. Aliquam placerat convallis iaculis. Nullam ultricies dui ac augue facilisis blandit.</p>
  
  <ul>
    <li>Proin ac condimentum mauris.</li>
    <li>Vivamus sagittis, nisi non venenatis molestie, massa elit tristique nisl, vitae porttitor metus mauris at dui.</li>
    <li>Quisque sit amet pellentesque orci.</li>
    <li>Aliquam eget purus turpis, vel auctor elit.</li>
    <li>Aliquam placerat convallis iaculis.</li>
</ul>
    
  <p>Nullam ultricies dui ac augue facilisis blandit.</p>
  
  

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus dolor, vehicula sed vehicula vitae, semper in erat. Quisque placerat commodo semper. Proin iaculis bibendum tempor. Ut elementum dolor et quam mollis fermentum.Quisque sit amet pellentesque orci. Aliquam eget purus turpis, vel auctor elit. Aliquam placerat convallis iaculis. Nullam ultricies dui ac augue facilisis blandit.</p>
</aside>
<section>
  <h1>Header One<br/>Multiline Works</h1>
  <h2>Header Two<br/>Multiline Works</h2>
  <h3>Header Three<br/>Multiline Works</h3>
  <h4>Header Four<br/>Multiline Works</h4>
  <h5>Header Five<br/>Multiline Works</h5>
  <h6>Header Six<br/>Multiline Works</h6>
</section>
            
          
!
            
              body {
  
  /* Preserve default size */
  font-size: 1em; /* 16px */
  
  /* Set the vertical rhythm */
  /* Round, even numbers are best */
  line-height: 125%; /* 20px */
  font-family: sans-serif;
}

/* Here's the typography settings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}
h1 {
  /* Total Height: 100px */
  font-size: 400%; /* 64 */
  
  /* Below should be multiple 0f 20px */
  line-height: 94%; /* 60 */  
  padding: 0.3125em 0; /* 20 */
}
h2 {
  /* Total Height: 80px */
  font-size: 200%; /* 32 */
  
  /* Below should be multiple 0f 20px */
	line-height: 125%; /* 40 */  
	padding: 0.625em 0; /* 20 */
}
h3 {
	/* Total Height: 60px */
	font-size: 150%; /* 24 */
  
  /* Below should be multiple 0f 20px */
	line-height: 167%; /* 40 */
  padding: 0.833333333em 0; /* 20 */
}
h4 {
	/* Total Height: 60px */
	font-size: 132%; /* 21 */
  
  /* Below should be multiple 0f 20px */
	line-height: 96%; /* 20 */
	padding: 0.952380952em 0;  /* 20 */
}
h5 {
	/* Total Height: 80px */
	font-size: 113%; /* 18 */
  
  /* Below should be multiple 0f 20px */
	line-height: 112%; /* 20 */
	padding: 1.111111111em 0; /* 20 */
}
h6 {
	/* Total Height: 40px */
	font-size: 100%; /* 16 / 16 */
  
  /* Below should be multiple 0f 20px */
	line-height: 125%; /* 20 */  
	padding: 1.25em 0; /* 20 */
}
p, ul {
	font-size: 1em; /* 16 */
  margin: 1.25em 0; /* 20 */
}
li {
	margin-bottom: 0em;
}

/* JUST FOR DEMO PURPOSES */

html {
 /* Baseline grid stolen from http://jsfiddle.net/joshnh/GdAEf/ for example purposes only */
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:    -moz-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:     -ms-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:      -o-linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-image:         linear-gradient(hsla(0,0%,0%,0) 95%, hsla(0,25%,50%,.5) 95%);
    background-position: 50% 0;
    background-size: 1.25em 1.25em;
    margin: 0;
    padding: 0.75em 3em;
}

/* Show element boundries */
h1, h3, h5 {
  background: rgba(0,0,0,0.2);
}

/* Position elements side by side for comparison */
aside, section {
  display: inline-block;
  vertical-align: top;
}
section {
  width: 74%;
}
aside {
  width: 25%;
}
            
          
!
999px
Loading ..................

Console