HTML
<span id="verge">
<a href="https://twitter.com/verge/"><img src="http://derekbtw.com/tweets/assets/img/verge.jpg"></a>
<a class="twitter-timeline" data-width="479" data-height="105vh" data-dnt="true" data-theme="light" href="https://twitter.com/verge"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</span>
<span id="tnw">
<div class="header"><img src="http://derekbtw.com/tweets/assets/img/tnw.svg"></div>
<!--<a href="https://twitter.com/tnw/"><img src="./assets/img/tnw.jpg"></a>-->
<a class="twitter-timeline" data-width="479" data-height="105vh" data-dnt="true" data-theme="light" href="https://twitter.com/TNW"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</span>
<span id="product-hunt">
<a href="https://twitter.com/producthunt/"><img src="http://derekbtw.com/tweets/assets/img/product-hunt.jpg"></a>
<a class="twitter-timeline" data-width="479" data-height="105vh" data-dnt="true" data-theme="light" href="https://twitter.com/producthunt"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</span>
<span id="gizmodo">
<!--<a href="https://twitter.com/gizmodo/"><img src="./assets/img/gizmodo.jpg"></a>-->
<a class="twitter-timeline" data-width="479" data-height="105vh" data-dnt="true" data-theme="light" href="https://twitter.com/gizmodo"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</span>
CSS
body {
background-color:#fff;
overflow-x: scroll;
overflow-y: hidden;
}
#verge {
display: block;
position: absolute;
left: 0;
height: 100vh;
/*border-right: 1px solid #677680;*/
border-right: 1px solid #000;}
#verge img {
/*background-image: url('../img/verge.jpg') no-repeat;
background-size: 479px 56px;*/
width: 479px;
height: 56px;
position: fixed;
top: 0;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
box-shadow: 0 0 25px rgba(0,0,0,0.7);}
#verge img:hover {
-webkit-filter: brightness(1.1);
-moz-filter: brightness(1.1);
-o-filter: brightness(1.1);
}
#tnw {
display: block;
position: absolute;
left: 480px;
height: 100vh;
/*border-right: 1px solid #677680;*/
border-right: 1px solid #000;}
.header {
display: block;
position: fixed;
top: 0;
left: 480px;
width: 479px;
height: 56px;
box-shadow: 0 0 25px rgba(0,0,0,0.7);
background-color: #F42;
background: -webkit-linear-gradient(left top,#C09,#F42 85%);
background: -moz-linear-gradient(bottom right,#C09,#F42 85%);
background: -o-linear-gradient(bottom right,#C09,#F42 85%);
background: linear-gradient(to bottom right,#c09,#f42 85%);}
.header img {
display: block;
width: 66px;
height: 16px;
margin: 0 auto;
position: relative;
top: 20px;
will-change: transform;
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#product-hunt {
display: block;
position: absolute;
left: 960px;
height: 100vh;
/*border-right: 1px solid #677680;*/
border-right: 1px solid #000;}
#product-hunt img {
width: 479px;
height: 56px;
position: fixed;
top: 0;
left: 960px;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
box-shadow: 0 0 25px rgba(0,0,0,0.7);}
#product-hunt img:hover {
-webkit-filter: brightness(1.1);
-moz-filter: brightness(1.1);
-o-filter: brightness(1.1);
}
#gizmodo {
display: block;
position: absolute;
left: 1440px;
height: 100vh;
}
/*iframe {
border-right: 1px solid #fff !important;
}*/
/*::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background-color: #1da1f2;
}
::-webkit-scrollbar {
width: 10px;
background-color: #1da1f2;
}
::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .5)),
color-stop(.5, transparent), to(transparent));
}*/
