chat prototype

<body
oncontextmenu="alert('Excuse you.');
return false;">

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onkeydown="return false">

<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Arapey" rel="stylesheet">



<style type="text/css">
.jknopf{display:none}
body {
background:url(https://i.imgur.com/7oiHYQA.jpg) repeat top left fixed;
background-color:d3d3d3;
}

.contain div {

color:a5a5a5;
font: 7pt Arial,Helvetica,sans-serif;
overflow:auto;
text-align: left;
padding-left:0px;
}
a:link, a:active, a:visited, a.navbar:link, a.navbar:active, a.navbar:visited, a.man:link, a.man:active, a.man:visited, a:hover, a.navbar:hover, a.man:hover {
color:000000;
font: 10pt Open Sans Condensed;
}

a:link, a:active, a:visited, a:link b, a:active b, a:visited b {
font-family:Open Sans Condensed;
font-size:10px;
font-weight:normal;
letter-spacing:2px;
line-height:10px;
text-transform:uppercase;
text-decoration:none;
color:000000;
}

a:hover, a:hover b {
font-size:10px !important;
font-weight:normal !important;
letter-spacing:2px !important;
line-height:10px !important;
text-transform:uppercase !important;
text-decoration:none !important;
color:000000 !important;
background-color:ffffff !important; }

    I {font: italic 10px georgia; text-transform:none; color:4a4a4a; line-height:11px;}
    B {font: bold 9px Alegreya Sans; text-transform:uppercase; color:9fabb0; letter-spacing: .5px; line-height: 6px;}
    STRONG {font: 9px Lucida Console; text-transform:uppercase; color:C0BDBD; line-height:5px; letter-spacing:0px;}
    EM {font: 8px Lucida Sans Unicode; text-transform:uppercase; color:a09f9f; line-height:5px;}

BAE {font: 9px Open Sans Condensed; width: 15px; color:#f0f0f0; line-height: 15px; padding: 2px; background-color: f0f0f0; letter-spacing: 2px; text-transform: uppercase; margin:3px;}

BAE2 {font: 9px Open Sans Condensed; width: 15px; color:#868686; line-height: 15px; padding: 2px; background-color: 868686; letter-spacing: 2px; text-transform: uppercase; margin:3px;}

H1 {font: normal 10px Open Sans Condensed; letter-spacing:2px; line-height:10px; text-transform:uppercase; text-decoration:none; color:000000; text-align: center;}

H2 {font: bold 15px Cambria; text-transform:lowercase; color: 424242; line-height: 14px; margin: 5px; text-align: center; padding-top:2px; line-spacing: 3px}

time {font: normal 7px Arial; color:a5a5a5; text-align: right;}

H4 {font: normal 25px Roboto; text-transform:uppercase; color:a92d1c; line-height: 10px; margin: 5px; text-align: center; padding-top: 4px; line-spacing: 5px}

H5 {font: normal 12px Times New Roman; text-transform:normal; color:808080; line-height: 10px; margin: 4px; text-align: left; padding-top: 4px; line-spacing: 5px}

H6 {font: normal 12px courier new; text-transform:uppercase; color:404040; line-height: 10px; margin: 2px;  text-align: right; line-spacing: 3px}

H7 {font: normal 45px Nixie One; text-transform:normal; color: 8f8f8f; line-height: 45px; margin: 5px; text-align: center; padding-top:2px; letter-spacing: 3px; line-spacing: 3px}

H8 {font: normal 20px arapey; text-transform:uppercase; color:929296; line-height: 14px; margin: 5px; text-align: right; line-spacing: 3px}

H9 {font: italic 9px Arial; text-transform:uppercase; color:929296; background-color: d4d4d4; width: 200px; line-height: 14px; margin: 5px; text-align: right; letter-spacing: 3px; padding: 2px; line-spacing: 1px}

H10 {font: italic 9px Arial; text-transform:uppercase; color:929296; background-color: cbcbcb; line-height: 14px; padding: 2px; margin: 5px; text-align: right; letter-spacing: 3px; line-spacing: 1px}


.jlinks {
text-transform:uppercase;
text-align:center;
font-family:'courier new';
font-size:10px;
color:ffffff;
position:fixed;
margin-top:200px;
margin-left:140px;
}

.jlinks a {
margin-bottom:-15px;
height:20px;
width:20px;
text-align:center;
padding:6px;
letter-spacing:3px;
color:ffffff;
border-radius: 100%;
font-family:'courier new';
background-color:727c81;
font-size:10px;
text-transform:uppercase;
text-align:center;
display:block;
}

.jlinks a:hover {
background-color:727c81;

}

#apcredit {
    bottom: 5px;
    right: 5px;
    position: fixed;
    padding: 3px;
    color: #6C5749;
    font-family: oswald;
    font-size: 10px;
    text-transform: uppercase;
    }

 .circular-image {   border-radius:  50%; border-color:abc0b3; border-style: solid; align: center; border-width; 7px;}

 .circular-image2 {   border-radius:  50%; border-color:aa5b5b; border-style: solid; align: center; border-width; 7px;}

.cb{width:276px;height:50px;top:-49px;left:-10px;position:absolute; background-color: dddddd; border-color: dddddd; border-width: 5px; border-style: solid; border-radius: 3px; margin: 10px;}

.cb2{width:276px;height:50px;top:-20px;left:100px;position:absolute; background-color: dddddd; border-color: dddddd; border-width: 5px; border-style: solid; border-radius: 3px; margin: 10px;}


.b2{width:90px;height:34px;top:8px;left:90px;position:absolute; background-color: ffffff; border-color: dddddd; border-width: 5px; border-style: solid; border-radius: 3px; margin: 10px;}

.b3{width:75px;height:34px;top:8px;left:191px;position:absolute; background-color: ffffff; border-color: dddddd; border-width: 5px; border-style: solid; border-radius: 3px; margin: 10px;}

.ch{width:276px;height:300px;top:50px;left:-10px;position:absolute; background-color: ffffff; border-color: dddddd; border-width: 5px; border-style: solid; border-radius: 3px; margin: 10px;}


body {
  font-family: Arial, sans-serif;
  background-size: cover;
}

.box {
  width: 250px;
  height: 300px;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  text-align: center;
    background-clip: padding-box;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  width: 100px;
  text-decoration: none;
  background-color: ffffff;
  cursor: pointer;
  border-color: dddddd;
  border-width: 5px;
  border-style: solid;
  border-radius: 3px;
  border-opacity: 0;

}
.button:hover {
  background: ffffff;
  border-color: dddddd;
  border-width: 5px;
  border-style: solid;
  border-radius: 3px;
  border-opacity: 0;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 2px auto;
  padding: 2px;
  background: #fff;
  border-color: dddddd;
  border-width: 5px;
  border-style: solid;
  border-radius: 5px;
  width: 272px;
  height: 350px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 350px;
  width: 258px;
  padding: 2px;
  overflow: auto;
}




.hold{background-color:transparent}
.contain{left:50%;margin-left:-400px;top:150px;position:absolute;z-index:0;background-color:transparent;visibility:visible}
.corner{left:0;top:0;position:absolute;z-index:9;visibility:visible !important}
.mpd{left:50%;margin-left:-400px;top:0;position:absolute;z-index:9;visibility:visible !important}
.comments{display:none}
.contacttable,.profileinfo,.latestBlogEntry,.interestsAndDetails,.extendedNetwork,.orangetext15{display:none}
.bodyContent div div form{display:inline}
.bodyContent table table table{visibility:hidden}
a img{border:none}
td,form{margin:0;padding:0}
table,tr,td{background:transparent}
jknopf{display:none}
</style>


    *<HIDING>*
    <br />
    <style>.clearfix {margin-top: -100px;}</style>
    <p>

    <br />
    <style>.friendscomments{display:none;}</style>
    <p>

    <br />
    <style> div td {display:none;} table {top:24px; position:relative;} table table {top:0px; position:relative;}</style>
    <p>

    <br />
    <style type="text/css">table.latestblogentry {display: none;}</style>
    <style>.extendednetwork{display:none;}</style>
    <p>

    <style>
    [id="footerWarpper"] { display: none; }
    </style>




    <style>
    table.profileInfo td td {display:none;}
    table.profileInfo td td.text {display:table-cell; _display:inline;}
    </style>


         <style>.nametext{display:none;}</style>

    <STYLE type=text/css> .contacttable {display: none;}</STYLE>

    <br />
    <style>.blurbs{display:none;}</style>
    <p>


<style type="text/css">.profileInfo {display:none;}</style>

    <br />
    <style>.friendspace{display:none;}</style>
    <p>

    <br />
    <style>.userprofileurl{display:none;}</style>
    <p>

    <br />
    <style>.userprofiledetail{display:none;}</style>
    <p>

    <br />
    <style>table div font {display: none;}</style>
    <p>

    <style>.interestsanddetails{display:none;}</style>

    <style>.userprofiledetail{display:none;}</style>

    <style>.lightbluetext8{DISPLAY:none;VISIBILITY:hidden;}</style></style>



    *<MISC>*
    <style>td.text table {position:relative; top: -48px;}td.text table table {position:static;}</style>

    <style> div td {display:none;} table {top:0px; position:relative;} table table {top:0px; position:relative;}</style>




---------------------------------------------LIKE TO MEET-------------------------------
   </td>
</tr>
</table>
</td>
</tr>

</table>
<br />
<table bordercolor="ffcc99" cellspacing="0" cellpadding="0" width="500" bgcolor="ffcc99" border="0">

<div class="hold"><div class="contain">

<div class="cb">
<h6>- □ ✕</h6><br>
</div>

<div class="ch">

<div style="padding: 5px; margin: 2px; width: 260px; height: 38px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: cdcdcd; background-color: ffffff; text-align:justify;">
<img src="https://i.imgur.com/jYWyGiP.png" class="circular-image2" width="30px" align="left">
<b> kailer walsh </b><br>
<br><cht>⤶ you are literally so ridiculous, it's cute.</cht>
</div>

<div style="padding: 5px; margin: 2px; width: 260px; height: 38px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: cdcdcd; background-color: ffffff; text-align:justify;">
<img src="https://i.imgur.com/u3STfxk.png" class="circular-image2" width="30px" align="left">
<b> margo walsh </b><br>
<br><cht>tea time?????</cht>
</div>

<div style="padding: 5px; margin: 2px; width: 260px; height: 38px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: cdcdcd; background-color: ffffff; text-align:justify;">
<img src="https://i.imgur.com/H9KLTGb.png" class="circular-image" width="30px" align="left">
<b> vic walsh </b><br>
<br><cht>IMY.</cht>
</div>

<div style="padding: 5px; margin: 2px; width: 260px; height: 38px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: cdcdcd; background-color: ffffff; text-align:justify;">
<img src="https://i.imgur.com/YiWuHky.png" class="circular-image" width="30px" align="left">
<b> althaia neuhaus </b><br>
<br><cht>⤶ you look like you got mauled by a bear.</cht>
</div>

<div style="padding: 5px; margin: 2px; width: 260px; height: 38px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: cdcdcd; background-color: ffffff; text-align:justify;">
<img src="https://i.imgur.com/gjZKMwF.png" class="circular-image2" width="30px" align="left">
<b> jacob whitlock </b><br>
<br><cht>let's watch titanic, tho??</cht>
</div>


</div>

<div class="b2"><br>
<center><a href="/">chats</a></center>
</div>

<div class="b3"><br>
<center><a href="/">⚙️</a></center>
</div>

<div class="box">
	<a class="button" href="#profile">view profile</a>
</div>



<div id="profile" class="overlay">
	<div class="popup">
		<a class="close" href="#">x</a>
		<div class="content">
			<br><br><br>
<h2><img src="https://i.imgur.com/l2TpaQe.png" class="circular-image" width="100px" align="center"></h2>
<h2>ziggy stardust,</h2><br>
<center>write a quick little status here. about, i don't know, anything. write a quick little status here. about, i don't know, anything.</center>
<br><br>
<h9>aim: username</h9><br>
<h10>line: username</h10><br>
<h9>askfm: username</h9><br><br>
<a href="/">+ summary</a><br><br>
<a href="/">+ quick facts</a><br>


		</div>
	</div>
</div>


<div class="cb2">
<h6>- □ ✕</h6><br>
</div>




<div id="apcredit"><a href="/apotelesm"><img src="http://vignette2.wikia.nocookie.net/elderscrolls/images/3/31/Smguildmember01.png/revision/20120228214838" width="50px"></a></div>




</div></div></div>
<table><tr><td>
<table><tr><td>

   </td>
</tr>
</table>
</td>
</tr>

</table>
<br />
<table bordercolor="ffcc99" cellspacing="0" cellpadding="0" width="500" bgcolor="ffcc99" border="0">


</div>