lols - story page

<html>


    <!-- SOME FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
    <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700&display=swap" rel="stylesheet">


    <head>


    </head>

<style type="text/css">

 /* -- credits
 code was made by lollyracketcodes. please do not copy or frankenstein.


--*/

#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;  }


/* hosted fonts */

    @font-face { font-family:"rotters"; src:url('https://dl.dropbox.com/s/n5eagm9wp1ylbaf/Rotters.otf'); }
    @font-face{ font-family:"moon"; src: url('https://dl.dropboxusercontent.com/s/ubael2mwud27z8o/moon_get-Heavy.ttf’)'); }

body {
    background-image:url(https://img.nickpic.host/rYQN3D.png);
    font-family:poppins;
    font-size: 11px;
    line-height:140%;
}

body a { color:#000; text-decoration:none; }

#s-m-t-tooltip{
  /* basic */
  z-index:10;
  margin:24px 14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#222; /* fallback if rgba not supported */
  background:rgba(0,0,0,0.8);

  /* font */
  font-family:moon;
  font-size:12px;
  line-height:16px;
  color:#fff;
  letter-spacing:1px;
}


#pgbg { width:750px; padding:30px; background-color:#fff; border:1px solid rgba(209, 206, 224, 1.00); border-radius:5px; margin-top:60px; margin-bottom:40px; }

#pgbg .toptitle { font-family:moon; font-size:60px; text-align:left; -webkit-text-stroke: 1px #222222; color:transparent; text-transform:uppercase; letter-spacing:1px; margin-top:20px; margin-bottom:40px; }

#pgbg .pageinfo { margin-top:20px; margin-bottom:10px; }

#pgbg .pageinfo blockquote { background-color:rgba(209, 206, 224, 0.7); padding:20px; text-align:justify; font-family:poppins; font-size:11px; border-radius:5px; }

#pgbg .pagetitle { font-family:rotters; font-size:40px; text-align:left; padding:30px; }

#pgbg .pagetags { padding:30px; max-height:100px; overflow:auto; line-height:400%; word-spacing:10px; margin-bottom:20px; }
#pgbg .pagetags a { background-color:#cee0d1; padding:10px; border-radius:5px; word-spacing:0px;}

#pgbg .pagecharas { padding:30px; max-height:320px; overflow:auto; }
#pgbg .charblock { width:120px; padding:20px; text-align:center; text-transform:uppercase; font-size:9px; }
#pgbg .charimg { width:100px; height:100px; padding:10px; }
#pgbg .charimg img { width:100px; height:100px; background-size:cover; border-radius:100%; }
#pgbg .charname { padding:10px; text-transform:uppercase; font-weight:800; }
#pgbg .charname a:hover { background-color:#dacee0; padding:10px; border-radius:5px; }


</style>

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


<center>
<div id="pgbg">
    <div class="toptitle">story title</div>

    <div class="pageinfo"><blockquote>hi there i made this as a little story info page to match my theme. i don't think i'm going to use it so i decided to release it to the public. here you all go. also testing to see how this'll look long. this is supposed to be like a story blurb/about thing</blockquote></div>

    <div class="pagetitle">tags</div>

    <div class="pagetags"><a href="//">tag one</a> <a href="//">tag two</a> <a href="//">tag three</a> <a href="//">tag four</a> <a href="//">tag five</a> <a href="//">tag six</a> <a href="//">tag seven</a> <a href="//">tag eight</a> <a href="//">tag one</a> <a href="//">tag two</a> <a href="//">tag three</a> <a href="//">tag four</a> <a href="//">tag five</a> <a href="//">tag six</a> <a href="//">tag seven</a> <a href="//">tag eight</a>
</div>


<div class="pagetitle">characters</div>

<div class="pagecharas">

    <table><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
        <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
        <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
    </table>


    <table><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
        <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
        <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
    </table>


</div>

</div>
    </center>
</body>

</html>