octocatstartv

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.

Want a Run Button?

If active, the preview will update automatically when you change code.

            
              <div id="column-left" class="span-17">
			<h2>Thoughts about love, life, the pursuit of happiness, and regret</h2>
			<h6 class="meta">Written by Tanner Campbell on April 3rd, 2013</h6>

			<p>Qorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam tincidunt ante, <a href="#">this is a link</a> tristique at. Vivamus lectus tellus, pellentesque ac porta ac, sollicitudin ut nunc. Donec erat lectus, mollis a luctus non, tempor non eros. <span class="highlight">This text is hilighted using the "highlight" class</span> tempus eros, eget porttitor leo nisi at arcu. Cras eget vestibulum massa. Donec porta fringilla elementum. Nunc sagittis tellus enim. Aliquam congue ligula et sapien molestie gravida. </p>

			<blockquote>
				<p>In visions of the dark night
				I have dreamed of joy departed-
				But a waking dream of life and light
				Hath left me broken-hearted. Ah! what is not a dream by day to him whose eyes are cast
				On things around him with a ray
				Turned back upon the past? That holy dream- that holy dream,
				While all the world were chiding,
				Hath cheered me as a lovely beam
				A lonely spirit guiding. What though that light, thro' storm and night,
				So trembled from afar-
				What could there be more purely bright
				In Truth's day-star?</p>
			</blockquote>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam tincidunt ante, sed gravida nunc tristique at. Vivamus lectus tellus, <cite>This is a citation</cite> ac, sollicitudin ut nunc. Donec erat lectus, mollis a luctus non, tempor non eros. Sed porta, tortor accumsan volutpat malesuada, <q>this is a quote</q>, eget porttitor leo nisi at arcu. Cras eget vestibulum massa. Donec porta fringilla elementum. Nunc sagittis tellus enim. Aliquam congue ligula et sapien molestie gravida. </p>

			<p class="comments">4 Comments | Leave a Comment</p></div>
</div>
            
          
!
            
              #column-left p {
	font-size: 1.5em;
	line-height: 24px;
	text-align: left;
	padding: ;
}

#column-left h6 + p:first-letter {
	font-size: 3em;
}

#column-left h2 {
	width: 100%; 
	margin: 0;
	padding: 5px;
	background: #666;
	font-size: 2.2em;
	line-height: 34px;
	color: #fff;
	text-shadow: 1px 1px #000;
}

#column-left h2:first-child {
	margin: 20px 0 0 0;
}

.meta {
	margin: 0;
	padding: 10px 0;
	font-size: 1.2em;
	font-weight: normal;
	text-align: right;
	font-style: italic;
}

blockquote {
	width: 500px;
	margin: 12px auto 25px auto;
	padding: 10px 10px 2px 10px;
	background-color: #eee;
	border-left: 8px solid #CCC;
	font-size: .9em;
}

blockquote p {
	padding: 20px 30px 0 10px;
}

#column-left p a {
	color: #666;
	text-decoration: underline;
	font-style: italic;
	padding: 0 4px 0 4px;
}

#column-left p a:hover {
	color: #000;
	background: #e5f4f7;
}

.highlight {
	background: #fffbbc;
	padding: 0 4px 0 4px;
}

cite {
	background: #999;
	padding: 0 4px 0 4px;
	color: #fff;
}
            
          
!
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