<!DOCTYPE html>
<html>
<head>
<title>Twitter Float Exercise</title>
</head>
<body>
<!--
Make the page background light gray(#CCCCCC)
Make the tweet background white (#FFFFFF)
Add a 5px border radius to each tweet.
Add 20 pixels of padding around each tweet
Add a rule that makes an underline appear when you mouseover links
Make each tweet 400 pixels wide
Float the tweets so that you have two tweets in each row
Make each tweet have 20 pixels of space between each one.
-->
<!-- BEGIN TWEET-->
<div class="tweet">
<a class="user-profile-link" href="http:/twitter.com/richgor"><img class="avatar" src="https://si0.twimg.com/profile_images/62574822/gordon140x140_normal.jpg" alt="Rich Gordon"> <strong class="fullname">Rich Gordon</strong> <span class="username">@richgor</span></a>
<p class="tweet-text">
MT <a href="http:/twitter.com/rbole">@rbole</a>: Great <a href="http:/twitter.com/HuffingtonPost">@HuffingtonPost</a> use of <a href="http:/twitter.com/TimelineJS">TimelineJS</a> on Boston bombing. <a href="http://twitter.com/knightlab">@KnightLab</a> <a href="http://twitter.com/matthewrbaise">@matthewrbaise</a> <a href="http://huff.to/12jSzVL" target="_blank">huff.to/12jSzVL</a>
</p>
<div class="tweet-card">
<div class="card-profile-link">
<a href="http://twitter.com/HuffPostCrime"><img src="https://si0.twimg.com/profile_images/1971756972/crime_avatar_160x160_normal.png" width="18" height="18" alt=""> HuffPost Crime</a>
</div>
<div class="card-summary">
<h3>
<a href="http://t.co/5EjKmos6Tl" target="_blank">LOOK: How The Tragic Events In Boston Unfolded</a>
</h3>
<p>
The 2013 Boston Marathon came to a tragic end just before 3 p.m. on Monday, April 15, when twin explosions rocked the finish line causing multiple casualties. At least two people are dead and more...
</p>
</div>
</div>
</div>
<!-- END TWEET-->
<!-- BEGIN TWEET-->
<div class="tweet">
<a class="user-profile-link" href="https://twitter.com/knightlab"><img class="avatar" src="https://si0.twimg.com/profile_images/3315299872/cb315d575db4e0638d209029662a3368_normal.jpeg" alt="NU Knight Lab"> <strong class="fullname">NU Knight Lab</strong> <span class="username">@knightlab</span></a>
<p class="tweet-text">
Can <a href="http:/twitter.com/TimelineJS">@TimelineJS</a> help you win a Pulitzer? Actually, yes! <a href="http:/twitter.com/denverpost">@denverpost</a> used it its Aurora theater shooting coverage! <a href="http://ow.ly/keTdH" target="_blank">http://ow.ly/keTdH</a>
</p>
</div>
<!-- END TWEET-->
<!-- BEGIN TWEET-->
<div class="tweet">
<a class="user-profile-link" href="https://twitter.com/jmm"><img class="avatar" src="https://si0.twimg.com/profile_images/3392778906/85a913287a7256b8daf8516cb5a006c3_normal.jpeg" alt="miranda mulligan"> <strong class="fullname">miranda mulligan</strong> <span class="username">@jmm</span></a>
<p class="tweet-text">
There's so much good stuff in <a href="http:/twitter.com/lara">@lara's</a> new project — <a href="http:/twitter.com/syriadeeply">@syriadeeply</a>, <a href="http://alpha.syriadeeply.org/" target="_blank">http://alpha.syriadeeply.org/</a> – and exciting to see <a href="http:/twitter.com/knightlab">@knightlab</a>'s <a href="http:/twitter.com/TimelineJS">@TimelineJS</a>.
</p>
</div>
<!-- END TWEET-->
<!-- BEGIN TWEET-->
<div class="tweet">
<a class="user-profile-link" href="https://twitter.com/ChicagosMayor"><img class="avatar" src="https://si0.twimg.com/profile_images/1380494300/twitter_MO_TEXT_2_normal.jpg" alt="ChicagoMayorsOffice"> <strong class="fullname">ChicagoMayorsOffice</strong> <span class="username">@ChicagosMayor</span></a>
<p class="tweet-text">
Like the Best of 2012 slideshow? Embed code is beneath: <a href="http://bit.ly/RMBmAU" target="_blank">http://bit.ly/RMBmAU</a> Built with <a href="http:/twitter.com/TimelineJS">@TimelineJS</a> <a href="https://twitter.com/search?q=%23opensource&src=hash#opensource">#opensource</a> <a href="https://twitter.com/search?q=%23ChicagoDigital&src=hash">#ChicagoDigital</a>
</p>
</div>
<!-- END TWEET-->
</body>
</html>
/*
This looks weird, but if you have this CSS in your stylesheet, you can add the class "clearfix" to the "second-part" div to prevent it from collapsing
From: http://css-tricks.com/all-about-floats/
*/
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
a {
text-decoration:none;
}
a.user-profile-link {
font-family: 'Helvetica Neue', Arial, sans-serif;
padding-bottom:20px;
}
a.user-profile-link .username, a.user-profile-link .fullname {
margin-left:55px;
}
a.user-profile-link .fullname {
color:#333;
font-size:18px;
display:block;
}
a.user-profile-link .username {
color:#999;
font-size:14px;
display:block;
}
.avatar {
width: 48px;
height: 48px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
float:left;
}
.tweet-text {
padding-top:10px;
font-size:22px;
line-height:28px;
font-family: Georgia, 'Times New Roman', serif;
}
.tweet-text a {
color:#0084B4;
}
.tweet-card {
font-size: 14px;
line-height:18px;
color:#333;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border: 1px solid #CCC;
padding:10px;
}
.tweet-card h3 {
margin:0px;
margin-bottom:3px;
}
.tweet-card a {
color:#333;
}
.tweet-card p {
margin:0px;
margin-top:5px;
}
.card-profile-link {
margin-bottom:7px;
font-weight:bold;
font-size:12px;
line-height:12px;
}
.card-profile-link img {
vertical-align: middle;
margin-right:5px;
}