<div class="wrapper">
<img src="https://goo.gl/LS1Lls" alt="">
<article>
<h2><a href="https://www.twitter.com/random_studio" target="_blank" >@random_studio</a> mentioned you</h2>
<p>
<a href="https://www.twitter.com/waynespiegel" target="_blank">@waynespiegel</a> How would you like to intern with us this summer?
</p>
</article>
<nav>
<ul>
<li class="time">10m</li>
<li><a href="#" class="fontawesome-star"></a></li>
<li><a href="#" class="fontawesome-retweet"></a></li>
<li><a href="#" class="fontawesome-reply"></a></li>
</ul>
</nav>
</div>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'fontawesome', sans-serif;
}
html {
background: #eee url(https://goo.gl/kqNwg);
color: #555;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
-webkit-font-smoothing: antialiased;
font-style, font-weight, letter-spacing, line-height, word-spacing: normal;
}
a, a:visited {
color: #4099FF;
text-decoration: none;
}
.wrapper {
margin: 50px auto;
width: 375px;
height: 125px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px #ddd;
overflow: hidden;
}
img {
float: left;
width: 125px;
height: 125px;
border-right: 1px solid #eee;
}
article {
float: right;
padding: 14px 14px 20px;
width: 221px;
border-bottom: 1px solid #eee;
}
h2 {
margin: 1px 0 7px;
font-size: 1.2rem;
font-weight: bold;
}
p {
font-size: 1.1rem;
line-height: 1.5rem;
}
nav {
float: right;
margin: 14px;
width: 221px;
}
nav ul li {
float: right;
display: inline-block;
}
nav ul li a {
margin: 0 8px;
font-size: 1.2rem;
}
nav ul li .fontawesome-retweet, nav ul li .fontawesome-reply {
color: #aaa;
}
nav ul li .fontawesome-star {
color: #4099FF;
}
nav li.time {
float: left;
color: #aaa;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.