Custom Tweetdeck Feeds

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)); }*/
JAVASCRIPT
var links = document.links; for (var i = 0; i < links.length; i++) { links[i].target = "_blank"; } $('img').on('dragstart', function(event) { event.preventDefault(); });
Expand for more options Login