wip: the sea roared on

<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i|Lora:400,400i" rel="stylesheet">
        <script src="http://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js"></script>
    <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

 <script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:700,
attribute:"title"
});
});
})(jQuery);
</script>

<style type="text/css">
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #5499C7;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:active {
  background: #5499C7;
}
::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 21px;
}
::-webkit-scrollbar-track:active {
  background: #5499C7;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
 body {
 background-color: #f6f6f6;
 font-family: 'EB Garamond', serif;
 font-size: 1em;
 color: #222;
 }
 a {
     color: #7FB3D5;
     text-decoration: none;
     moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
 }
 a:hover {
     color: #5499C7;
     moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
 }
 h1 {
 font-family: 'Lora', serif;
 font-size: 1.75em;
 font-style: italic;
 text-align: center;
 }
 h2 {
 font-family: 'Lora', serif;
 font-size: 1.25em;
 font-style: italic;
 }
 h3, h4, h5 {
 font-family: 'Lora', serif;
 font-size: 1.1em;
 font-style: italic;
 }
 #sideb {
 position: fixed;
 width: 25vw;
 height: 100%;
 padding: 20px;
 top: 0;
 left: 0;
 color: #000;
 background-image: url(url of your background image);
 background-size: cover;
 }
 #summ {
     background-color: rgb(255,255,255,0.65);
     padding: 10px;
     height: 70%;
     overflow: scroll;
 }
 .table {
   width: 50vw;
   padding: 0px 25px 0px 0px;
   position: absolute;
   margin-top: 15vh;
   margin-left: 40vw;
 }
 .two {
    width: 50vw;
   padding: 0px 25px 0px 0px;
   position: relative;
   margin-top: 15vh;
   margin-bottom: 50px;
   margin-left: -0.5vw;
 }
.charac {
    border-bottom: 1px solid #e7e7e7;
}
 .chari {
     display: inline-block;
     width: 50px;
     vertical-align: middle;
     padding-right: 15px;
     margin-left: -15px;
     margin-bottom: 15px;
     margin-top: 15px;
 }
 .char {
     display: table-cell;
     width: 25vw;
     text-align: center;
     border-right: 1px solid #e7e7e7;
 }
 .summary {
     display: table-cell;
     width: 25vw;
     position: relative;
     top: -15px;
     padding-left: 10px;
     padding-bottom: 15px;
 }
 .dett {
     border-bottom: 1px solid #e7e7e7;
     width: 50vw;
 }
 .det1 {
     display: table-cell;
     width: 25vw;
     text-align: center;
     padding: 10px 0px;
 }
 .det2 {
     display: table-cell;
     width: 25vw;
     text-align: center;
     padding: 10px 0px;
     border-left: 1px solid #e7e7e7;
 }
 .last {
     text-align: center;
     margin-bottom: 60px;
 }
 /*CREDIT: DO NOT TOUCH */
.credit img {
    width: 20px;
    position: fixed;
    bottom: 15px;
    right: 17px;
    text-align: center;
}
/* END CREDIT */

#s-m-t-tooltip {
   max-width:300px;
   border-radius: 0px;
   padding:4px;
   margin:5px 10px 5px 0px;
   color:#222;
   border:1px solid #e7e7e7;
   font-family: inherit;
   font-size: 0.75em;
   background:#f6f6f6;
   z-index:99999;
}
</style>
</head>
<body>
<div id="sideb">
<h1>the sea roared on</h1><br>
<div id="summ">
<h2>summary:</h2><p>Lorem ipsum dolor sit amet, mei patrioque argumentum dissentias at. Nec dico antiopam in, vel an quot natum imperdiet. Omittam singulis forensibus sit eu, probatus principes comprehensam pri ne. Nec modus consequuntur ei, mel sensibus assueverit ea. Has liber ponderum at, quo dolorum commune invenire eu, possim splendide has cu. Elitr scaevola patrioque eum an, nobis pertinax in eam. Elit semper minimum eu eam, mel te populo delicata persequeris, eius iuvaret definitiones eu nam.<br>

Vim ex labore civibus constituto. Agam facer ut vix. Euismod prodesset omittantur mea ne, sale recusabo mnesarchum et mea. Ea quis imperdiet mea, probo omnis epicuri at mei. His te alterum deserunt quaerendum.<br></p>
</div>
</div>

    <div class="table">
<h3 style='text-align: center;'>characters</h3>
        <div class="charac">
        <div class="char">
        <img class="chari" src="https://i.imgur.com/FsX0i1r.png">
        Angela Hall
        </div>
        <div class="summary">
        Lorem ipsum dolor sit amet, mei padivioque argumentum dissentias at.
        </div>
        </div>

        <div class="charac">
        <div class="char">
        <img class="chari" src="https://i.imgur.com/ElMSnkD.png">
        Courtney Rivera
        </div>
        <div class="summary">
        Lorem ipsum dolor sit amet, mei padivioque argumentum dissentias at.
        </div>
        </div>

        <div class="charac">
        <div class="char">
        <img class="chari" src="https://i.imgur.com/pP7Zv1n.png">
        Naomi Burke
        </div>
        <div class="summary">
        Lorem ipsum dolor sit amet, mei padivioque argumentum dissentias at.
        </div>
        </div>

        <div class="charac">
        <div class="char">
        <img class="chari" src="https://i.imgur.com/pfYxuap.png">
        Lauren Reilly
        </div>
        <div class="summary">
        Lorem ipsum dolor sit amet, mei padivioque argumentum dissentias at.
        </div>
        </div>

        <div class="charac">
        <div class="char">
        <img class="chari" src="https://i.imgur.com/sPchViY.png">
        Lena Mayer
        </div>
        <div class="summary">
        Lorem ipsum dolor sit amet, mei padivioque argumentum dissentias at.
        </div>
        </div>
<div class="two">
<h3 style="text-align:center;">details</h3>

    <div class="dett">
<div class="det1">
        setting
    </div>
    <div class="det2">
        new york city, 2020
    </div>
    </div>

    <div class="dett">
<div class="det1">
        genre
    </div>
    <div class="det2">
        realistic fiction
    </div>
    </div>

    <div class="dett">
<div class="det1">
        progress
    </div>
    <div class="det2">
        30k words
    </div>
    </div>
       <div class="dett">
<div class="det1">
        status
    </div>
    <div class="det2">
        first draft
    </div>
    </div>
</div>



<div class="last">
    <a href="http://{Name}.tumblr.com">return / </a>
    <a href="http://tumblr.com/dashboard">dashboard / </a>
    <a href="linkone">uno / </a>
    <a href="linktwo">dos</a>
</div>
<a class="credit" href="https://aubadese.tumblr.com" title="theme credit"><img src="https://i.imgur.com/ZLwssBb.png"/></a>

</body>
</html>