CodePen

HTML

            
              <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>
            
          
!

CSS

            
              #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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................