Using classes and CSS overrides to create an alternate pull quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Using classes and CSS overrides to create an alternate pull quote</title>
<style type="text/css" media="screen">
h1+p {
font-weight: bold;
color: #222222;
}
blockquote {
background: url(quote-open.gif) 0 0 no-repeat;
margin: 2.4em 2em;
}
blockquote p {
color: #555555;
font-size: 1.3em;
font-weight: bold;
text-align: justify;
background: url(quote-close.gif) 100% 90% no-repeat;
padding: 0 33px;
margin-bottom: 0;
}
cite {
background: none;
display: block;
text-align: right;
font-size: 1.1em;
font-weight: normal;
font-style: italic;
}
blockquote>p+p {
background: none;
}
blockquote.floatRight {
float: right;
width: 150px;
background: none;
border-top: 5px solid #dddddd;
border-bottom: 5px solid #dddddd;
padding: 10px 0;
margin: 0 0 2em 2.4em;
}
blockquote.floatRight p {
text-align: center;
background: none;
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<blockquote class="floatRight">
<p>This is the pull quote. It's really very exciting, so read it now! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p><cite>Fred Bloggs</cite></p>
</blockquote>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis et, venenatis at, velit. Ut sodales lacus sed eros. Pellentesque tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Praesent rutrum</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
<h3>Habitant morbid</h3>
<p>Nam scelerisque dignissim quam. Ut bibendum enim in orci. Vivamus ligula nunc, dictum a, tincidunt in, dignissim ac, odio.</p>
</div>
</body>
</html>
Related examples in the same category