tt live preview

background:white}*{padding:0;margin:0}figure{margin:0px}::-webkit-scrollbar{height:10px;width:10px;background:rgb(255,255,255)}::-webkit-scrollbar-thumb{border-radius:100px;border:4px solid rgb(255,255,255);background:rgb(244,205,199)}::selection{color:rgb(244,205,199);background:rgb(255,255,255)}::-webkit-selection{color:rgb(244,205,199);background:rgb(255,255,255)}body,html{height:100%;min-height:100%;color:rgb(136,136,136);line-height:16px;font-size:11px;font-family:"Open Sans"}a{cursor:help;color:rgb(162,162,162);text-decoration:none}a:hover{color:rgb(205,157,157)}b{color:rgb(85,85,85);font-weight:bold}i{color:rgb(187,187,187);font-style:italic}s{color:rgb(205,157,157);text-decoration:line-through}u{color:rgb(244,205,199);text-decoration:underline}#side{top:5px;left:10px;position:fixed;width:250px;z-index:9999}.icon{height:150px;width:150px;overflow:hidden}.icon img{width:150px;height:150px;-webkit-mask-image:url("https://s20.postimg.org/luo3ilpot/maskpolygon.png")}.title1{top:30px;left:145px;color:rgb(205,157,157);font-style:italic;font-family:Raleway,sans-serif;font-weight:bold;font-size:10px;text-transform:uppercase;background:rgb(244,205,199);display:block;position:fixed;z-index:9999}.title2{top:50px;left:155px;color:rgb(255,255,255);font-family:Raleway,sans-serif;font-weight:bold;font-size:20px;display:block;letter-spacing:2px;text-transform:uppercase;background:rgb(244,205,199);position:fixed;z-index:9999}.bar{top:0px;left:0px;height:80px;width:100%;background:rgb(244,205,199);position:fixed;z-index:999}.nav{top:0px;left:250px;height:40px;width:calc(460px);background:rgb(244,205,199);padding:20px;line-height:20px;text-align:center;z-index:999;position:fixed}.nav i{font-size:18px;height:18px;width:18px;padding:14px;color:rgb(255,255,255);border:2px solid transparent;border-radius:100%;margin:0px 2px;display:inline-block}.nav i:hover{border:2px solid rgb(205,157,157)}.navb{top:80px;left:250px;height:40px;min-width:500px;text-align:center;line-height:40px;font-size:11px;background:rgb(255,255,255);position:fixed;z-index:100}.navb a{font-style:italic;margin:0px 20px;color:rgb(162,162,162)}.navb a:hover{color:rgb(205,157,157)}.descr{margin-top:60px;font-size:12px;color:rgb(170,170,170);text-align:center;padding:40px}.social{top:0px;right:0px;height:20px;line-height:20px;width:calc(50% - 40px);padding:20px;text-align:right;position:absolute;display:inline-block}.social i{font-size:16px;margin-left:20px;color:rgb(244,205,199)}.search .query{left:0px;margin:50px;border:0px;outline:0px;font-family:inherit;font-size:11px;font-style:italic;color:rgb(162,162,162);line-height:11px;text-align:left;display:inline-block;padding:5px;position:absolute}.fa-instagram:hover{color:rgb(186,54,130)}.fa-twitter:hover{color:rgb(85,172,238)}.fa-youtube-play:hover{color:rgb(193,32,37)}.fa-facebook:hover{color:rgb(59,89,152)}::-webkit-input-placeholder{color:inherit}input:focus::-webkit-input-placeholder{color:transparent}.noshow{height:0px}#more{width:500px;z-index:10;left:250px;bottom:0px;position:fixed;background:rgb(255,255,255);color:rgb(170,170,170)}.header{top:0px;left:0px;font-family:Raleway,sans-serif;font-weight:bold;height:20px;font-size:20px;width:calc(50% - 40px);padding:20px;color:rgb(244,205,199);text-align:left;line-height:20px;text-transform:uppercase;position:absolute;display:inline-block}#entry{top:150px;left:242px;width:500px;position:relative}.posts{margin:0px auto 200px;width:500px;position:relative}.posts img{max-width:100%}.prma{top:0px;right:-50px;width:20px;padding:10px;text-align:center;line-height:20px;font-family:"Open Sans";font-weight:bold;font-size:16px;position:absolute}.prma a{color:rgb(205,157,157)}.pma{bottom:-30px;right:0px;height:30px;position:absolute}.pma i{height:16px;width:16px;padding:8px;color:rgb(162,162,162);font-size:16px;line-height:16px;text-align:center;border-top:4px solid rgb(244,205,199);display:inline-block}.like-b{position:relative;display:inline-block;height:34px;line-height:34px;overflow:hidden;margin-bottom:-6px}.like-b .like_button iframe{position:absolute;top:0px;left:0px;bottom:0px;right:0px;z-index:2;opacity:0}.like-b .liked + i{color:red}.captions{margin-top:1px;width:calc(100% - 40px);padding:20px;text-align:left;background:rgb(243,243,243)}.posts:hover .tags{opacity:1}blockquote{margin-left:6px;padding-left:10px;width:100%;overflow:hidden;border-left:1px solid rgb(187,187,187)}.footer{margin-left:auto;margin-right:auto;height:40px;width:calc(480px);padding:10px;position:relative;display:block}.cred a{top:10px;right:20px;color:rgb(85,85,85);line-height:40px;font-size:10px;text-align:right;position:absolute;display:inline-block}a,i,.music,.show,.noshow,.ltitle,.line,.tags,.pma{transition:all 0.6s ease-in-out}.tb0dy{width:calc(100% - 40px);padding:20px;background:#f3f3f3}[id*=styme]{height:100%;

[font:Open Sans]
[font:Raleway]
[icons:fontawesome]
<div class="bar"></div>
<div id="side">
<div class="icon"><img src="https://s20.postimg.org/kk6fhjp4t/36d257c2cd83aa376b9292423afece10680d9b5d_128.gif" /></div>
<div class="title1">we'll always be</div>
<div class="title2">together</div>
</div>
<div class="nav">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="navb">
<a href="#">link one</a>
<a href="#">link two</a>
<a href="#">link three</a>
<a href="#">link four</a>
<a href="#">link five</a>
</div>
<div id="entry">
<div class="posts">
<div class="prma">
<a href="#">03 28</a>
</div>
<div class="tb0dy">
<p><img src="https://s20.postimg.org/3rv0rewf1/tumblr_nfx4oq_Wu_L51ssq9uio3_500.png" /></p>
</div>
<div class="captions">
<p><a href="#" class="tumblr_blog">lauriestrode</a>:</p>
<p>That’s what I thought…</p>
</div>
<div class="pma">
<a class="like-b" href="#">
<div class="like_button"></div>
</a>
<a href="#"></a>
</div>
</div>
<div class="footer">
<div class="cred">
<a href="/Austin">Austin</a>
</div>
</div>
</div>