binding - about 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); }

 #bindingpg .bgstick { position:relative; width:580px; padding:5px; margin:60px auto auto auto; background-color:#ebebeb; border:1px solid #b0b0b0; }
 #bindingpg .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;  }
 #bindingpg .sidelink ul { list-style-type:circle; margin-top:10px; color:#bf6db1; }
 #bindingpg .sidelink li { padding:5px;  }
#bindingpg .sidelink a:hover { color:#bf6db1; }

#bindingpg .pageimg { width:200px; height:100px; padding:5px; border:1px solid #000; margin-left:120px; margin-top:10px; background-color:#fff; border:1px solid #ccc;  }
#bindingpg .pageimg img { width:200px; height:100px; background-size:cover; }
#bindingpg .pagename { padding:20px; width:200px; position:absolute; top:15px; right:10px;  }
#bindingpg .nametext { font-family:little birds; font-size:25px; text-align:left; margin-bottom:5px; }
#bindingpg .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; }
#bindingpg .locate span { padding:5px; }

#bindingpg .biginfo { width:430px; padding:10px; background-color:#fff; border:1px solid #ccc; text-align:justify; margin-left:120px; margin-top:15px; font-size:11px;  }
#bindingpg .infoinside { min-height:100px; max-height:150px; padding:5px; overflow:auto; }
#bindingpg .biginfo b { text-decoration:underline; text-decoration-color:#6dbf7b; }
#bindingpg .biginfo u { color:#bf6db1; text-decoration-color:#000; }
#bindingpg .biginfo i { background-color:rgba(109,177,191,0.5); padding:1px; }
#bindingpg .imagebottom { padding:5px; margin-left:123px; margin-top:10px; }
#bindingpg .tableimg { width:90px; height:90px; padding:5px; background-color:#fff; border:1px solid #ccc; margin-right:5px; }
#bindingpg .tableimg img { width:90px; height:90px; 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="bindingpg"><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/200x100"></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>

 <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>

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


 </div>

  </body>

</html>