Tabs/Tumblr like css

background:#e0e0e0}/***CSS by iiiiiiii (409914266) - [ɪɴᴅᴇx]***/*{margin:0}*{padding:0}*{-webkit-user-select:none}*{user-select:none}*{-webkit-user-drag:none}::-webkit-scrollbar{width:3px}::-webkit-scrollbar{background:none}::-webkit-scrollbar-thumb{background:#263238}[name=container]{display:block}[name=container]{margin:100px auto}[name=container]{width:545px}[name=container]{height:auto}[name=container]{background:#FFF}[name=container]{border-radius:10px 10px 0 0}[name=container]{border-bottom:4px solid rgba(0, 0, 0, 0.15)}[name=nav]{position:relative}[name=nav]{z-index:999}[name=nav]{background:#263238}[name=nav]{width:545px}[name=nav]{border-radius:5px 5px 0 0}[name=nav]{box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.3)}[name=items]{position:relative}[name=items]{margin: 0 0.5rem 0 0.5rem}[name=items]{display:flex}[name=item]{cursor:pointer}[name=item]{width:60px}[name=item]{height:60px}[name=item]{transition:all .3s}[name=item] a{position:absolute}[name=item] a{width:60px}[name=item] a{height:60px}[name=item]:nth-child(1){background:url('http://i68.tinypic.com/2ujtw9k.png')center no-repeat}[name=item]:nth-child(2){background:url('http://i65.tinypic.com/5kj6rs.png')center no-repeat}[name=item]:nth-child(3){background:url('http://i63.tinypic.com/2n0io8x.png')center no-repeat}[name=item]:nth-child(4){background:url('http://i67.tinypic.com/s6qct1.png')center no-repeat}[name=item]:nth-child(5){background:url('http://i64.tinypic.com/20z8myc.png')center no-repeat}[name=item]:nth-child(6){background:url('http://i66.tinypic.com/2mwbkzq.png')center no-repeat}[name=item]:nth-child(6){margin:0 0 0 auto}[name=item] a:after{content:''}[name=item] a:after{position:absolute}[name=item] a:after{bottom:0} a:after{width:60px}[name=item] a:after{height:0}[name=item] a:after{background:#FFF}[name=item] a:after{transition:all .3s}[name=item]:hover{background-color:#172024}[name=item]:active{-webkit-transform:translateY(3px)}[name=item]:active{transform:translateY(3px)}[name=item] a:hover:after{height:3px}[name=content]{overflow:hidden}[name=content]{width:545px}[name=content]{height:450px}[name=content]{position:absolute}[name=content]{background:#FFF url('http://i.cubeupload.com/RPHD4T.png')center no-repeat}[name=content]{border-radius: 0 0 5px 5px}[name=content]{border-bottom:4px solid rgb(200, 200, 200)}[name=social],[name=music],[name=friends],[name=feed]{position:absolute}[name=social],[name=music],[name=friends],[name=feed]{margin-top:-100%}[name=social],[name=music],[name=friends],[name=feed]{padding:2.5rem}[name=social],[name=music],[name=friends],[name=feed]{box-sizing:border-box}[name=social],[name=music],[name=friends],[name=feed]{width:100%}[name=social],[name=music],[name=friends],[name=feed]{height:100%}[name=social],[name=music],[name=friends],[name=feed]{z-index:99}[name=social],[name=music],[name=friends],[name=feed]{background:#FFF}[name=social],[name=music],[name=friends],[name=feed]{box-shadow: 0 0 50px rgba(0, 0, 0, 0.5)}[name=social],[name=music],[name=friends],[name=feed]{transition: .8s ease-in-out}[name=social],[name=music],[name=friends],[name=feed]{overflow-y:scroll}[name=social]:target, [name=music]:target, [name=friends]:target, [name=feed]:target{margin-top:0%}[name=music]{padding:0}[name=music]{overflow:hidden}embed{width:100%}embed{height:100%}[name=post]{position:relative}[name=post]{margin-bottom:2.5rem}[name=post]{border-radius:3px}[name=post]{box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1)}[name=post]:before{content:''}[name=post]:before{position:absolute}[name=post]:before{left:-25px}[name=post]:before{top:20%}[name=post]:before{width:7px}[name=post]:before{height:7px}[name=post]:before{border-radius:50%}[name=post]:before{border:2px solid #ff7f7f}[name=post]:before{background:#FFF}[name=post]:before{z-index:99}[name=post]:before{cursor:pointer}[name=post]:after{content:''}[name=post]:after{position:absolute}[name=post]:after{left:-20px}[name=post]:after{top:0}[name=post]:after{bottom:0}[name=post]:after{width:1px}[name=post]:after{height:100%}[name=post]:after{background:rgba(0, 0, 0, 0.2)}[name=date]{font:600 10px 'Arial', sans-serif}[name=date]{text-transform:uppercase}[name=date]{display:flex}[name=date]{justify-content:center}[name=date]{align-items:center}[name=date]{text-align:center}[name=date]{color:white}[name=date]{position:absolute}[name=date]{left:-5px}[name=date]{width:0px}[name=date]{white-space:nowrap}[name=date]{height:25px}[name=date]{top:calc(20% - 15px)}[name=date]{opacity:0}[name=date]{background:rgba(0, 0, 0, 0.5)}[name=date]{border-radius:100px 100px 100px 0}[name=date]{transition:all .8s cubic-bezier(0.18, 0.89, 0.32, 1.28)}[name=date]{box-shadow:2px 2px 5px rgba(0, 0, 0, 0.2)}[name=post]:hover [name=date]{opacity:1}[name=post]:hover [name=date]{width:100px}[name=post] img{max-width:100%}[name=text]{font:500 14px 'Arial', sans-serif}[name=text]{color:#FFF}[name=text]{position:absolute}[name=text]{top:100%}[name=text]{padding:1.5rem}[name=text]{opacity:0}[name=text]{transition:all .8s cubic-bezier(0.18, 0.89, 0.32, 1.28)}[name=text]{background: rgba(0, 0, 0, 0.5)}[name=text]{text-align:justify}[name=post]:hover [name=text]{top:50%}[name=post]:hover [name=text]{opacity:1}[name=credits]{cursor:pointer}[name=credits]{position:absolute}[name=credits]{right:0}[name=credits]{bottom:0}[name=credits]{width:70px}[name=credits]{height:70px}[name=credits]{border-radius:50%}[name=credits]{margin:1rem}[name=credits]{background-color:#263238}[name=credits]{box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3)}[name=credits]{transition:all .5s}[name=credits] a{position:absolute}[name=credits] a{width:70px}[name=credits] a{height:70px}[name=credits] a{background:url('http://i64.tinypic.com/f1mw7r.png')center no-repeat}[name=credits] a{transition:all .5s}[name=credits]:hover{background-color:#000}[name=credits]:hover a{-webkit-transform:rotateZ(180deg)}[name=credits]:hover a{transform:rotateZ(180deg);
_____________________________________________________

<div name="container">
	<div name="nav">
		<div name="items">
			<div name="item">                    <a href="#"></a>                </div>
			<div name="item">                    <a href="#social"></a>                </div>
			<div name="item">                    <a href="#music"></a>                </div>
			<div name="item">                    <a href="#friends"></a>                </div>
			<div name="item">                    <a href="#feed"></a>                </div>
			<div name="item">                    <a href="#"></a>                </div>            </div>        </div>
	<div name="content">            <a name="social">
			<h1>Eyrin</h1>            </a>            <a name="music">      [youtube:450:480:O3UuqCN1sQs:autoplay=1&loop=1&controls=0&disablekb=1&showinfo=0&start=0]
            </a>            <a name="friends">
			<h1>/f 99654972</h1>            </a>            <a name="feed">
			<div name="post">                    <img src="http://i.cubeupload.com/tRyFsO.jpg" />
				<p name="text">                        "If you do not tell the truth about yourself you cannot tell it about other people.”
                    </p>
				<div name="date">
					<p>9am - 21/07/17</p>                    </div>                </div>                </a></div></div>