avery jr - about page

<html>

<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&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:11px; 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;  }
          /*--- fonts ---*/

          @font-face { font-family: 'summerlove'; src: url(https://files.jcink.net/uploads/sofewcares/fonts/Summer_Love.ttf); }


 body { font-family:abeezee; font-size:10px; background-image:url(https://img.nickpic.host/Fy6tcO.jpg); }
 body a { text-decoration:none; color:#000; }
 ::-webkit-scrollbar {
  width: 5px; background-color:transparent;
}
 ::-webkit-scrollbar-track {
  background:transparent;
}
  ::-webkit-scrollbar-thumb {
  background:#dace87;
}

 #bullocklinks { position:fixed; top:120px; left:50px; border:1px solid #ad9b35; padding:5px; width:150px; }
 #bullocklinks .linkinside { height:100%; background-color:#ad9b35; padding:10px; }
 #bullocklinks .averybo { padding:5px; font-family:rajdhani; font-size:15px; font-weight:700px; border:1px solid #000; margin-bottom:5px; text-align:center; font-style:italic; }
 #bullocklinks .averybo:hover { transition:0.8s ease-in-out; background-color:#000; color:#ad9b35; letter-spacing:3px;  }


 #bullockhold { width:700px; height:460px; padding:10px; background-color:rgba(255,255,255,0.8); border:1px solid #fff; margin:45px auto auto auto; }
#bullockhold .insideback { height:440px; padding:10px; background-color:#fff; border:1px solid #df9b9c; position:relative; }
#bullockhold .insidetitle { position:absolute; font-family:summerlove; font-size:30px; width:300px; height:70px; overflow:hidden; text-align:center; transform:rotate(-15deg); top:40px; padding:10px; }
#bullockhold .insidetitle bg { background-color:rgba(223,155,156,0.7); padding:8px; }
#bullockhold .infoback { position:absolute; width:270px; padding:5px; background-color:#f2f2f2; border:1px solid #ccc; border-radius:5px;  text-align:justify; top:180px; left:50px; }
#bullockhold .infopls { max-height:80px; overflow:auto; padding:10px;  }
#bullockhold .infoback b { font-family:rajdhani; background-color:rgba(223,155,156,0.7); padding:2px; }
#bullockhold .infoback i { color:#ad9b35; }
#bullockhold .infoback u { text-decoration:underline dashed #df9b9c; }

   #bullockhold .titletwo { position:absolute; font-family:summerlove; font-size:30px;  width:300px; height:70px; overflow:hidden; text-align:center; transform:rotate(15deg); bottom:45px; padding:10px; right:10px; }
   #bullockhold .titletwo bg { background-color:rgba(223,155,156,0.7); padding:8px; }

   #bullockhold .biginfo { width:250px;  position:absolute; right:40px; top:20px; background-color:#f2f2f2; border:1px solid #ccc; border-radius:5px; padding:10px; text-align:left; }
   #bullockhold .bighold { padding:5px; border-bottom:1px solid #dace87; font-size:12px; font-family:summerlove;}
   #bullockhold .littlehold { font-family:rajdhani; font-size:10px; font-weight:700; text-transform:uppercase; margin-bottom:7px; margin-top:7px; }
   #bullockhold .littlehold bg { background-color:#df9b9c; padding:3px; }

   #bullockhold .imagehold { position:absolute; bottom:10px; left:3px; padding:10px; }
   #bullockhold .imagebox { width:100px; height:100px; padding:5px; border:1px solid #dace87;  margin-left:7px; }
   #bullockhold .imagebox img { width:100px; height:100px; background-size:cover; }

   /*--- use the code below to make one or all the boxes solid colors

  just replace the <img> tag with <div class="imagecolor">

   ---*/

   #bullockhold .imagecolor { width:100px; height:100px; background-color:#dace87; }
   #bullockhold .imagecolor1 { width:100px; height:100px; background-color:colorhere; }
      #bullockhold .imagecolor2 { width:100px; height:100px; background-color:colorhere; }

           </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="bullocklinks"><div class="linkinside">
      <a href="//"><div class="averybo">link</div></a>
      <a href="//"><div class="averybo">link</div></a>
        <a href="//"><div class="averybo">link</div></a>
  <a href="//"><div class="averybo">link</div></a>
  <a href="//"><div class="averybo">link</div></a>
  <a href="//"><div class="averybo">link</div></a>
    <a href="//"><div class="averybo">link</div></a>
  </div></div>


  <div id="bullockhold"><div class="insideback">
  <div class="insidetitle"><bg>short lyrics here</bg></div>

    <div class="titletwo"><bg>short lyrics here</bg></div>

    <div class="infoback">
    <div class="infopls">this is where your about info goes </div></div>


      <div class="biginfo">
      <div class="bighold"><div class="littlehold"><bg>alias</bg></div>goes here</div>
     <div class="bighold"><div class="littlehold"><bg>pronouns</bg></div>goes here</div>
     <div class="bighold"><div class="littlehold"><bg>timezone</bg></div>goes here</div>
          <div class="bighold"><div class="littlehold"><bg>favorite animal</bg></div>goes here</div>
               <div class="bighold" style="border-bottom:none"><div class="littlehold"><bg>favorite book</bg></div>goes here</div>

      </div>

<div class="imagehold"><table><td>
<div class="imagebox"><div class="imagecolor"></div></div>
</td><td>
 <div class="imagebox"><img src="http://placehold.it/100"></div></div>
 </td><td>
 <div class="imagebox"><div class="imagecolor"></div></div>
    </td></table>
</div>

  </div>
       </div>


  </body>

</html>