<div class="twitter-widget">
<div class="twitter-widget">
<div class="header cf">
<a href="http://twitter.com/kayrel" target="_blank" class="avatar"><img src="http://cameronbaney.com/codepen/twitter-widget/avatar.jpg" alt="Edwin Delgado"></a>
<h2>Edwin Delgado @kayrel</h2>
<p>I do not recall how I came into existence.<br>Something to do with my dad and mom.</p>
</div>
<div class="stats cf">
<a href="#" class="stat">
<strong>1,250</strong>
tweets
</a>
<a href="#" class="stat">
<strong>60</strong>
following
</a>
<a href="#" class="stat">
<strong>117</strong>
followers
</a>
</div>
<ul class="menu cf">
<li><a href="#" class="ico-compose">Compose</a></li>
<li><a href="#" class="ico-mentions">Mentions</a></li>
<li><a href="#" class="ico-profile">Profile</a></li>
<li><a href="#" class="ico-settings">Settings</a></li>
</ul>
</div>
<p>Dribbble Rebound of <a target="_blank" href="http://dribbble.com/shots/833870-Rebound-Twitter">Rebound Twitter</a> by <a target="_blank" href="http://dribbble.com/Kayrel">Edwin Delgado</a></p>
/*--------------------------------------------------------------
/*--------------------------------------------------------------1.1 - CLEARFIX--------------------------------------------------------------*/.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/*--------------------------------------------------------------1.2 - FORMATTING--------------------------------------------------------------*/body {background: #343434 url(http://cameronbaney.com/codepen/twitter-widget/bg.jpg);
background-size: cover;
color: #4c4c4c;
font:300 1.1em/1.7em 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
}
body > p {
bottom: 10px;
color: #fff;
font-size: 12px;
left: 10px;
position: absolute;
}
body > p a {
color: #fff
}
/*--------------------------------------------------------------2.0 - TWITTER WIDGET--------------------------------------------------------------*/.twitter-widget {color: #4c4c4c;
height: 249px;
left:50%;
margin: -125px 0 0 -223px;
position: absolute;
top:50%;
width:446px;
box-shadow: 1px 1px 16px rgba(0,0,0,.58);
border-radius:2px;
}
/*--------------------------------------------------------------2.1 - TWITTER WIDGET HEADER--------------------------------------------------------------*/.header {background: url(http://cameronbaney.com/codepen/twitter-widget/bg-header.jpg) no-repeat;
color: #fdfdfd;
font: 12px/17px 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
padding: 18px 28px 20px;
border-radius:2px 2px 0 0;
}
.avatar {border: 4px solid #29c6f5;
border-top-width:3px;
float: left;
margin-right: 16px;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.6), 0 -1px 0 #9ce5fa;
border-radius: 2px
}
.avatar::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
}.avatar img {
display: block;
box-shadow: 0 0 2px rgba(0,0,0,.5) inset
}.header h2, .header p {
float: left;
width:288px;
}
.header h2 {
font-size:26px;
line-height: 32px;
margin: 10px 0 8px
}/*--------------------------------------------------------------2.2 - TWITTER WIDGET STATS--------------------------------------------------------------*/.stats {background: rgb(243,243,243);
background: linear-gradient(top, rgba(243,243,243,1) 0%, rgba(236,236,237,1) 100%);
background: gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(100%,rgba(236,236,237,1)));
background: linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
background: linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
background: linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
background: linear-gradient(to bottom, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ececed',GradientType=0 );
border-top:1px solid #fff;
border-bottom: 1px solid #d4d4d4;
}
.stat {color: #4c4c4c;
float:left;
font-size: 14px;
line-height: 17px;
padding: 15px 0 14px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
width:148px;
}
.stat:first-child{
margin-left: 1px
}.stat:hover {
color: #747474
}.stat strong {
display: block;
font-size: 25px;
line-height: 25px
}
/*--------------------------------------------------------------2.3 - TWITTER WIDGET MENU--------------------------------------------------------------*/.menu {background: rgb(236,236,236);
background: linear-gradient(top, rgba(236,236,236,1) 0%, rgba(233,233,233,1) 86%, rgba(232,232,232,1) 94%, rgba(228,228,228,1) 100%);
background: gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(86%,rgba(233,233,233,1)), color-stop(94%,rgba(232,232,232,1)), color-stop(100%,rgba(228,228,228,1)));
background: linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
background: linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
background: linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
background: linear-gradient(to bottom, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#e4e4e4',GradientType=0 );
border-top:1px solid #fff;
border-radius:0 0 2px 2px;
padding: 11px 0;
text-align: center
}
.menu li {
display:inline-block;
margin: 0 34px
}
.menu a {
background: url(http://cameronbaney.com/codepen/twitter-widget/icons.png) no-repeat;
display:block;
overflow: hidden;
text-indent: -9999px
}
.menu .ico-compose {
background-position:-1px -2px;
width: 25px;
height: 26px;
}.menu .ico-mentions {
background-position: -31px -1px;
width: 27px;
height: 28px;
}.menu .ico-profile {
background-position: -65px -1px;
width: 24px;
height: 27px;
}.menu .ico-settings {
background-position: -97px -2px;
width: 26px;
height: 27px;
}.menu a:hover {
opacity:.75
}