wilderness - story page

<html>

<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Be+Vietnam&display=swap" rel="stylesheet">
 <link href="//solrainha.github.io/saturnicons/saturnicons.css" 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:be vietnam; font-size:10px; background-image:url(https://img.nickpic.host/FTmLQe.png); }
 body a { text-decoration:none; color:#000; }

        ::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background:transparent;
}
::-webkit-scrollbar-thumb {
  background: #888;
}

          /*--- fonts --*/

  @font-face { font-family: 'altairthin'; src: url(https://files.jcink.net/uploads/sofewcares/Altair_Thin_Trial.ttf); }
@font-face { font-family: 'altairbold'; src: url(https://files.jcink.net/uploads/sofewcares/Altair_Bold_Trial.ttf); }


#wilderone { width:700px; background-color:#f5f5f5; border:1px solid #ccc; padding:10px; margin:40px auto auto auto; position:relative; }
#wilderone .inside { padding:10px; background-color:#fff; border:1px solid #ccc; }

#wilderone .fillerbox { width:60px; padding:5px; border:1px solid transparent; }

#wilderone .linkside { position:absolute; top:0px; bottom:0px; left:0px; padding:10px; background-color:#8cbe9f; }
#wilderone .bigbox { padding:10px; text-align:center; font-family:altairbold; font-size:12px; }
#wilderone .biglink { padding:10px; font-size:30px; text-align:center; }
#wilderone .bigbox a:hover { color:#fff; transition:0.7s ease-in-out; }

#wilderone .secondbod { width:420px; padding:10px;  text-align:center; }
#wilderone .secondtitle { font-family:altairbold; font-size:35px;  padding:10px; margin-bottom:40px; margin-top:40px;  }
#wilderone .secondtry  { background: linear-gradient(180deg,rgba(255,255,255,0) 60%, #a4a8d1 60%);  }
#wilderone .secondinfo { width:400px; font-size:11px; padding:10px; text-align:justify; font-family:be vietnam; }
#wilderone .secondinfo u { text-decoration-style:wavy; text-decoration-color:#8cabbe; }
#wilderone .secondinfo i { border-bottom:1px dashed #000; color:#a4a8d1; }
#wilderone .secondinfo b { background-color:#bba0b2; padding:2px; }
#wilderone .infodos { max-height:50px; padding:10px; overflow:auto; }

#wilderone .charover { padding:5px; height:145px; overflow:auto;  text-align:center; }
#wilderone .charhead { font-family:altairthin; text-align:left; font-size:15px; font-style:italic; margin:30px; color:#bba0b2; }
#wilderone .charcolor { background: linear-gradient(180deg,rgba(255,255,255,0) 60%, #bba0b2 60%);  }
#wilderone .charbox { width:80px; padding:20px; text-align:center; }
#wilderone .charimg { width:60px; height:60px; border-radius:100%; padding:5px; border:1px dashed #a4a8d1; }
#wilderone .charimg img { width:60px; height:60px; background-size:cover; border-radius:100%; }
#wilderone .charname { margin-top:10px; font-family:altairthin; font-size:11px; }
#wilderone .charname a:hover { color:#bba0b2; letter-spacing:2px; transition:0.8s ease-in-out; }

#wilderone .thirdbox { width:135px; height:465px; padding:5px; margin-left:5px; border:1px dashed #8cabbe; }
#wilderone .thirdbox img { width:135px; height:465px; 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="wilderone">
    <div class="linkside">
<center>

<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-apple-o"></span></div>link</a></div>
<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-avocado-o"></span></div>link</a></div>
<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-bacon-o"></span></div>link</a></div>
<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-bagel-o"></span></div>link</a></div>
<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-baguette-o"></span></div>link</a></div>
<div class="bigbox"><a href="//"><div class="biglink"><span class="th th-biscuit-o"></span></div>link</a></div>

</center>
    </div>
    <div class="inside">
        <table><td><div class="fillerbox"></div></td>
        <td><div class="secondbod">
            <div class="secondtitle"><span class="secondtry">title</span></div>
        <div class="secondinfo"><div class="infodos">
        story info here
</div></div>
<div class="charhead">characters</div>
<div class="charover"><center>
<table><tr>
    <td><div class="charbox"><div class="charimg"><img src="http://placehold.it/60"></div><div class="charname"><a href="//">name</a></div></div>
</td>
   <td><div class="charbox"><div class="charimg"><img src="http://placehold.it/60"></div><div class="charname"><a href="//">name</a></div></div>
</td>
   <td><div class="charbox"><div class="charimg"><img src="http://placehold.it/60"></div><div class="charname"><a href="//">name</a></div></div>
</td>
</tr>

</table></center>
        </div></td><td>
        <div class="thirdbox">
         <img src="http://placehold.it/135x465">
        </div></td>
        </table>
        </div>
    </div>
    </div>


  </body>

</html>