xs 2020

body {background:url(https://i.postimg.cc/GLp07HXC/bg.jpg)center center no-repeat / cover,purple}*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:'Indie Flower',cursive;--font-2:Satisfy,cursive;--font-3:Kalam,cursive}h1,h2{font-weight:300}p{width:200px}.jd-main{width:100%;height:auto;min-height:100vh;font-size:1em;font-family:var(--font-1);color:#e7c2ff;position:relative;overflow-x:hidden}.jd-app{width:970px;height:600px;margin:135px auto 0;background:url(https://i.postimg.cc/wBfr8Qwd/px1.jpg)top left repeat,#f8ecff;display:flex}.jd-aside{width:250px;position:relative;display:flex;flex-direction:column;align-items:center}.jd-aside:before,.jd-aside:after{width:5px;top:0}.jd-aside:before{background:#c798e6;height:350px;right:5px}.jd-aside:after{background:#5a3671;height:450px;right:0}.jd-user{width:140px;height:193px;border-radius:50%;margin-top:80px;overflow:hidden;box-shadow:0 0 0 5px #c798e6;margin-bottom:30px}[class*='jd-box']{position:relative;background:#fff;box-shadow:0 10px #5a3671;padding:20px 10px}[class*='jd-box']:before,[class*='jd-box']:after{width:calc(100% - 20px);height:2px;background:transparent;border-bottom:dashed 1px #b8afd4;left:10px}[class*='jd-box']:before{top:20px}[class*='jd-box']:after{bottom:50px}[class*='jd-box'] > div{position:absolute;width:calc(100% + 16px);height:40px;background:url(https://i.postimg.cc/grFqbx9p/k-t.png)center center no-repeat,#c798e6;bottom:0;left:calc(50% - 50% - 8px);background-size:100px;box-shadow:0 -4px 10px rgba(0,0,0,.2)}[class*='jd-box'] > div:before,[class*='jd-box'] > div:after{width:0;height:0;top:-10px}[class*='jd-box'] > div:before{border-right:solid 8px #5a3671;border-top:solid 10px transparent;left:0}[class*='jd-box'] > div:after{border-left:solid 8px #5a3671;border-top:solid 10px transparent;right:0}.jd-box-first{width:200px;height:214px;text-align:center}h1{text-indent:20000px;background:url(https://i.postimg.cc/2jqsYgp9/name.png)center center no-repeat;background-size:150px;margin:10px 0}.jd-box-first span{font-size:1em;display:block}.jd-section{flex-grow:1;display:flex}.jd-col{width:50%;padding:10px}.jd-box-second{width:280px;height:380px;margin-top:70px;margin-left:calc(50% - 140px)}.jd-box-last{width:280px;height:210px;margin-top:50px;margin-left:10px}.jd-desc{padding:10px 0;font-size:1.1em;width:95%}.jd-footer{width:970px;height:45px;line-height:45px;text-align:center;background:#5a3671;margin:0 auto}.jd-visited{position:absolute;width:250px;height:50px;display:flex;align-items:center;justify-content:center;overflow:hidden;right:20px;bottom:0;}















</style>
<div id="xatstyme">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Indie Flower">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Satisfy">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Kalam">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Teko">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Rajdhani">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Satisfy">


<div class="jd-main">
 <div class="jd-app">
 <div class="jd-aside">
 <div class="jd-user">
 <img src="https://i.postimg.cc/TwK4R5s5/user.jpg" />
 </div>
 <div class="jd-box-first">
 <div></div>
 <h1>Kaay</h1>
 <h2>10131013</h2>
 <span>Welcome to my xatspace</span>
 </div>
 </div>
 <div class="jd-section">
 <div class="jd-col">
 <div class="jd-box-second">
 <div></div>
 <p class="jd-desc">
 Every moment of your life is infinitely
creative, and the universe is endlessly bountiful.
Just put forth a clear enough request, and everything your heart desires must come to you.
 </p>
 </div>
 </div>
 <div class="jd-col">
 <div class="jd-box-last">
 <div></div>
 <p class="jd-desc">
 When you learn to survive without anyone, you can survive anything.
 </p>
 </div>
 <div class="jd-box-last">
 <div></div>
 <p class="jd-desc">
 Every saint has a past, and every sinner has a future
 </p>
 </div>
 </div>
 </div>
 </div>
 <div class="jd-footer">
 <span>Copyright © 2019 by Jason - Design</span>
 </div>
 <div class="jd-visited">
 <span name="contador"><a href="http://info.flagcounter.com/rwLP"><img src="http://s07.flagcounter.com/mini/rwLP/bg_C798EF/txt_E7C2FF/border_8FECFF/flags_0/" /></a></span>
 </div>
</div></div>
<div onmouseover="showMenu(this)" onmouseout="hideMenu(this)" id="noowayfixed">
  <img id="noowayplanet" src="//xat.com/images/logow2.svg">
  <div id="noowaymenu">
    <div id="noowayitems">
<a href="//xat.com">xat</a><br>
<a href="//xat.com/web_gear/chat/editprofile.php?email=XkMy">Edit</A><br>

<A href="//xat.com/wiki">Wiki (help)</A><br>
<A href="//forum.xat.com/">Forum</A><br>

<A href="//xat.com/privacy.html">Privacy</A><br>
<A href="//xat.com/terms.html">Terms</A><br>
<A href="//xat.com/safety.html">Safety</A><br>

<A href="//xat.com/web_gear/chat/inappropriateprofile.php?id=10131013">Inappropriate&#x1F44E;</A><br>
&copy;2020 xat<br>

    </div>
    <a href="//xat.com"><img src="//xat.com/images/logow.svg"></a>
  </div>
</div>

<script>
function showMenu(x) {
    document.getElementById("noowaymenu").style.display = "block";
    document.getElementById("noowayplanet").style.display = "none";
}

function hideMenu(x) {
    document.getElementById("noowaymenu").style.display = "none";
    document.getElementById("noowayplanet").style.display = "block";