css and html xatspace

############# CSS ################

background:url(http://oi64.tinypic.com/2ywzm2g.jpg)top left no-repeat fixed,url(http://oi63.tinypic.com/np1e0z.jpg)bottom right no-repeat fixed,repeating-linear-gradient(0deg,#fff 1px,transparent 2px,transparent 22px) fixed,repeating-linear-gradient(90deg,#fff 1px,transparent 2px,transparent 22px) fixed,linear-gradient(#7bd4ec,#def4f9 35px) fixed}*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:Rokkitt,serif;--font-2:Economica,sans-serif;--font-3:Sacramento,cursive;--font-4:'Black And White Picture',sans-serif;--blue:#7BD4E7;--bluelight:#DEF4F9;--bluedarck:#48A1B4}a{display:inline-block;text-decoration:none}span{display:inline-block}h1,h2,h3{font-weight:300}.main{width:100%;height:auto;position:relative;font-family:var(--font-2);color:#222;font-size:1em}.container{width:1070px;height:auto;position:relative;margin:0 auto;padding:25px 10px;display:flex;justify-content:space-between}.aside{width:330px;height:160px;padding:10px;background:#fff;box-shadow:0 0 0 1px var(--bluedarck),5px 5px var(--blue);position:fixed;top:25px}.inner{width:100%;height:100%;border:dashed 1px var(--bluedarck);padding:10px 20px}.aside .inner{display:flex;flex-wrap:wrap}.title{width:100%;height:40px;line-height:40px;text-align:center;font-family:var(--font-1);color:#000;background:var(--bluelight);position:relative;margin-bottom:10px}.title:before,.title:after{width:0;height:0;border-top:solid 20px transparent;border-bottom:solid 20px transparent;top:0}.title:before{border-right:solid 20px #fff;right:0}.title:after{border-left:solid 20px #fff;left:0}.aside img{width:70px;height:70px;box-shadow:5px 5px var(--blue);margin-right:15px}.user h2{color:var(--bluedarck);font-family:var(--font-3)}.section{width:450px;height:auto;margin-left:360px;background:#fff;box-shadow:0 0 0 1px var(--bluedarck),5px 5px var(--blue);padding:10px}.title-page{line-height:44px;font-family:var(--font-4);color:#000;text-shadow:2px 2px 3px #c7f5ff;margin-bottom:10px;font-size:1.6em}.img-big{width:390px;height:300px;margin-bottom:15px}.desc{font-family:var(--font-1);margin-bottom:20px}.video{width:390px;height:204px;background:#222}.nav{width:170px;height:auto;background:repeating-linear-gradient(0deg,#def4f9 1px,transparent 2px,transparent 22px),repeating-linear-gradient(90deg,#def4f9 1px,transparent 2px,transparent 22px),#fff;box-shadow:0 0 0 1px var(--bluedarck),5px 5px var(--blue);padding:10px;position:fixed;right:20px}.nav .inner{padding:10px}.col-friend{width:100%;height:auto}.row{width:100%;height:52px;margin-bottom:10px;display:flex}.avatar{width:46px;height:46px;box-shadow:5px 5px var(--blue);margin-right:10px}.infor{line-height:26px;color:#222}.infor span{color:var(--bluedarck);


###################################

############# HTML ################

[font:Rokkitt]
[font:Economica]
[font:Sacramento]
[font:Black And White Picture]

<div class="main">
 <div class="container">
 <div class="aside">
 <div class="inner">
 <h1 class="title">Personal xat me</h1>
 <img src="http://oi67.tinypic.com/vpjhfs.jpg" />
 <div class="user">
 <h2>Name Here</h2>
 <span>xxxxxxxxxx</span>
 </div>
 </div>
 </div>
 <div class="section">
 <div class="inner">
 <h1 class="title-page">Welcome to my xatspace</h1>
 <img class="img-big" src="http://oi64.tinypic.com/a3ghhf.jpg" />
 <p class="desc">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit tempor porttitor. Integer dignissim ipsum non maximus pharetra. Donec vitae tincidunt dolor. Donec gravida ultrices metus, et lobortis orci accumsan sit amet. Morbi elementum ex ipsum, et vehicula mi accumsan sed. Maecenas porta nisi nunc.
 </p>
 <div class="video">
[youtube:390:204:qN4ooNx77u0:start=0&end=0&autohide=1&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]
 </div>
 </div>
 </div>
 <div class="nav">
 <div class="inner">
 <h1 class="title-page">My Friends</h1>
 <div class="col-friend">
 <a class="row" href="http://xat.me/">
 <img class="avatar" src="http://oi67.tinypic.com/vpjhfs.jpg" />
 <div class="infor">
 <span>Friend 01</span>
 <p>xxxxxxxxxx</p>
 </div>
 </a>
 <a class="row" href="http://xat.me/">
 <img class="avatar" src="http://oi67.tinypic.com/vpjhfs.jpg" />
 <div class="infor">
 <span>Friend 02</span>
 <p>xxxxxxxxxx</p>
 </div>
 </a>
 <a class="row" href="http://xat.me/">
 <img class="avatar" src="http://oi67.tinypic.com/vpjhfs.jpg" />
 <div class="infor">
 <span>Friend 03</span>
 <p>xxxxxxxxxx</p>
 </div>
 </a>
 <a class="row" href="http://xat.me/">
 <img class="avatar" src="http://oi67.tinypic.com/vpjhfs.jpg" />
 <div class="infor">
 <span>Friend 04</span>
 <p>xxxxxxxxxx</p>
 </div>
 </a>
 </div>
 </div>
 </div>
 </div>
</div>

###################################