I’ve taken this idea from an episode of from the couch (#170) and turned it into code.
Basic HTML:
<div id="wrapper">
<div class="articles">
<article>
<!-- Large text -->
<header>
<h2>Design should never say, “Look at me.”
It should always say, “Look at this.”</h2>
</header>
<!-- Columned Paragraphs -->
<section>
<p>Pellentesque habitant morbi...</p>
<!-- Paragraphs here -->
</section>
</article>
</div>
</div>CSS:
#wrapper {
width: 1080px;
margin:0 auto;
}
.articles article {
margin:2em 0;
color:#222222;
clear:both;
}
.articles article header {
width:450px;
float:left;
}
.articles article header h2 {
font-size: 5em;
font-family:Georgia, "Times New Roman", Times, serif;
text-align:right;
letter-spacing:-5px;
}
.articles article header h2:first-line {
font-size:1.5em;
}
.articles article .words {
float:right;
width:600px;
margin:2.5em 0 0;
line-height:1.5;
-moz-column-count: 3;
-moz-column-gap:1.5em;
-webkit-column-count: 3;
-webkit-column-gap:1.5em;
text-align:justify;
}
.articles article .words p {
margin-bottom:10px;
}