binding v2 - char page

<html>

<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;0,900;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap" rel="stylesheet">


        <style type="text/css">
          /* -- credits
 code was made by lollyracketcodes. please do not copy or frankenstein.

honyebee icon font is credit to suiomi

--*/

#credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
#credit icon { padding:5px; font-size:20px; }
#credit:hover {  transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0;  }


 body { font-family:lato; font-size:11px; background-color:#d8d8d8; }
 body a { text-decoration:none; color:#000; }

 /* width */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background:transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}



 /*-- fonts --*/
   @font-face { font-family: 'little birds'; src: url(https://files.jcink.net/uploads/hannahislame/fonts/Little_Birds.ttf); }

 #bindingchar .bgstick { position:relative; width:650px; padding:5px; margin:40px auto 20px auto; background-color:#ebebeb; border:1px solid #b0b0b0; }
 #bindingchar .sidelink { position:absolute; top:0px; left:0px; bottom:0px; padding:10px; background-color:#fff; border-right:1px solid #ccc; font-family:rajdhani; font-size:14px; font-style:italic;  }
 #bindingchar .sidelink ul { list-style-type:circle; margin-top:10px; color:#bf6db1; }
 #bindingchar .sidelink li { padding:5px;  }
#bindingchar .sidelink a:hover { color:#bf6db1; }

#bindingchar .pageimg { width:200px; height:200px; padding:5px; border:1px solid #000; margin-left:120px; margin-top:10px; background-color:#fff; border:1px solid #ccc;  }
#bindingchar .pageimg img { width:200px; height:200px; background-size:cover; }
#bindingchar .pagename { padding:20px; width:270px; position:absolute; top:45px; right:10px;  }
#bindingchar .nametext { font-family:little birds; font-size:25px; text-align:left; margin-bottom:5px; }
#bindingchar .locate { width:100px; background-color:#fff; border:1px solid #ccc; font-family:lato; font-size:10px; text-transform:uppercase; padding:5px; color:#6DB1BF; display:inline; }
#bindingchar .locate span { padding:5px; }


#bindingchar .listinfo { width:270px; padding:5px; margin-left:120px; margin-top:10px; background-color:#fff; border:1px solid #ccc; }
#bindingchar .listinside { height:200px; padding:10px; overflow:auto; }
#bindingchar .listyle { padding:0px; font-size:10px; }
#bindingchar .listyle b { color:#6db1bf; font-family:rajdhani; text-transform:uppercase; }
#bindingchar .divide { height:1px; background-color:#ccc; margin:10px; }
#bindingchar .listinfo blockquote { padding:7px; background-color:#f2f2f2; border:1px solid #ccc; margin:8px; }

#bindingchar .biginfo { width:200px; padding:10px; background-color:#fff; border:1px solid #ccc; text-align:justify; font-size:10px; margin-top:10px;  }
#bindingchar .infoinside { height:200px; padding:5px; overflow:auto; }
#bindingchar .biginfo b { text-decoration:underline; text-decoration-color:#6dbf7b; }
#bindingchar .biginfo u { color:#bf6db1; text-decoration-color:#000; }
#bindingchar .biginfo i { background-color:rgba(109,177,191,0.5); padding:1px; }
#bindingchar .imagebottom { padding:5px; margin-left:120px; margin-top:5px; }
#bindingchar .tableimg { width:80px; height:80px; padding:5px; background-color:#fff; border:1px solid #ccc; margin-right:5px; }
#bindingchar .tableimg img { width:80px; height:80px; background-size:cover; }
           </style>


</head>

  <body>
    <div id="credit"><a href="https://lollyracketcodes.tumblr.com/"><icon><span class="th th-moon-o" title="page credit to lollyracketcodes"></span></icon></a></div>


 <div id="bindingchar"><div class="bgstick">
<div class="sidelink">
<ul>
	<li><a href="//">home</a></li>
	<li><a href="//">ask</a></li>
<li><a href="//">archive</a></li>
<li><a href="//">link</a></li>
<li><a href="//">link</a></li>
<li><a href="//">link</a></li>
<li><a href="//">link</a></li>
</ul>
</div>
<div class="pageimg"><img src="http://placehold.it/200"></div>

<div class="pagename"><div class="nametext">name</div>
<div class="locate"><span class="th th-id-card-1-o"></span> pronouns</div>	 <div class="locate"><span class="th th-location-4-o"></span> timezone</div>

 </div>
 <table>
<td><div class="listinfo"><div class="listinside">
	<div class="listyle"><b>full name</b> here</div>
	<div class="listyle"><b>preferred name</b> here</div>
<div class="listyle"><b>age</b> here</div>
<div class="listyle"><b>pronouns</b> here</div>
<div class="listyle"><b>gender</b> here</div>
<div class="listyle"><b>birthdate</b> here</div>
<div class="listyle"><b>zodiac</b> here</div>

<div class="divide"></div>

<div class="listyle"><b>hometown</b> here</div>
<div class="listyle"><b>current location</b> here</div>
<div class="listyle"><b>notable family</b>
	<blockquote>here</blockquote>
</div>
<div class="listyle"><b>relationship status</b> here</div>
<div class="listyle"><b>significant other</b> here</div>

<div class="divide"></div>

<div class="listyle"><b>likes</b>
	<blockquote>here</blockquote>
</div>
<div class="listyle"><b>dislikes</b>
	<blockquote>here</blockquote>
</div>
<div class="listyle"><b>hobbies</b>
	<blockquote>here</blockquote>
</div>

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

	 <td>
 <div class="biginfo"><div class="infoinside">info about you goes here this'll expand and <b>it'll scroll if it needs to</b> <u>so there's plenty of room</u> <i>for talking</i>
 </div></div></td></table>

<div class="imagebottom">
<table><td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
<td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
<td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
<td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
<td><div class="tableimg"><img src="http://placehold.it/80"></div></td>
</div>


 </div>

  </body>

</html>