release - story page

<html>

<head>
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" 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">

        <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:10px;   background-image: linear-gradient(to bottom right, #ceedbc, #edbcce); }
 body a { text-decoration:none; color:#000; }

 ::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-track {
  background:transparent;
}
::-webkit-scrollbar-thumb {
  background:#000;
}

 #releasebig { width:950px; height:500px; padding:10px; background-color:#f2f2f2; border:1px solid #ccc; margin:50px auto auto auto; }
 #releasebig .inside { height:480px; padding:10px; background-color:#fff; border:1px solid #ccc; }
  #releasebig .inside table { border-collapse:collapse; }

 #releasebig .insideright { width:350px; padding:10px; text-align:left; }
 #releasebig .rightblock { padding:20px; max-height:100px; overflow:auto; background-color:#f5f5f5; text-align:justify; border:1px solid #ccc; margin:20px 20px 20px 20px; }
 #releasebig .rightblock b { border-bottom:1px dashed #bcceed; }
 #releasebig .rightblock i { color:#bcceed; }
 #releasebig .rightblock u { background-color:#bcceed; }
 #releasebig .rightitle { font-family:righteous; font-size:50px; letter-spacing:-2px; margin-top:90px; }
 #releasebig .rightable { margin:20px auto auto auto;  }
 #releasebig .rightable table { border-collapse:collapse; }
 #releasebig .rightable table td, th { width:120px; border:1px solid #dd80a2; background-color:#edbcce; padding:20px; font-size:9px; text-transform:uppercase; text-align:center; font-weight:800; }

 #releasebig .insideleft { width:510px; padding:20px; height:430px; overflow:auto; }
 #releasebig .charleft { height:120px; padding:20px; background-color:#ceedbc; border:1px solid #a2dd80; margin-bottom:10px; text-align:center; }
 #releasebig .charname { margin:40px auto auto auto; font-family:righteous; font-size:20px; }
 #releasebig .charimg { width:120px; height:120px; float:left; padding:5px; border:1px solid #fff; }
 #releasebig .charimg img { width:120px; height:120px; background-size:cover; }
 #releasebig .clearfix { overflow:auto; }


 /* -- changing colors of the name boxes

the default color is the green

 1.) pick a unique div name
 2.) replace ".colornew" with the div name
 3.) you need a new div name for every different color you want to use (i made four)
 4.) pick out two colors - one for the background and one for the border
 5.) replace the background color and the border color in the code below with your new colors
 6.) look for the <div class="colornew"> div in the code
 7.) replace "colornew" with your unique div name
 8.) and that's it! the color should change now. feel free to send me an ask if you're having any trouble or need more help

 if you're adding a new name box and want the color to change copy from clearfix down

--*/

 #releasebig .colornew .charleft { background-color:#ceedbc; border:1px solid #a2dd80; }
 #releasebig .colorone .charleft { background-color:#bcceed; border:1px solid #80a2dd; }
  #releasebig .colortwo .charleft { background-color:#edbce7; border:1px solid #dd80d1; }
   #releasebig .colorthree .charleft { background-color:#dbbced; border:1px solid #bb80dd; }


           </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="releasebig">
    <div class="inside">
    <table><td><div class="insideright">
        <div class="rightitle">title here</div>

<div class="rightblock">info goes here <b>bold stuff</b> <i>italtic</i> <u>underline</u> </div>
<div class="rightable"><center>
    <table><tr><td><a href="//">link</a></td>
        <td><a href="//">link</a></td>
        <td><a href="//">link</a></td>
        </tr><tr>
            <td><a href="//">link</a></td>
        <td><a href="//">link</a></td>
        <td><a href="//">link</a></td>
        </tr>
    </table>
    </center>
</div>

    </div></td><td>
        <div class="insideleft">
       <div class="clearfix"><div class="colornew">
       <div class="charleft"><div class="charimg"><img src="http://placehold.it/120"></div> <div class="charname">first last</div></div></div>
       </div>

              <div class="clearfix"><div class="colorone">
       <div class="charleft"><div class="charimg"><img src="http://placehold.it/120"></div> <div class="charname">first last</div></div>
       </div></div>

              <div class="clearfix"><div class="colortwo">
       <div class="charleft"><div class="charimg"><img src="http://placehold.it/120"></div> <div class="charname">first last</div></div>
       </div></div>

              <div class="clearfix"><div class="colorthree">
       <div class="charleft"><div class="charimg"><img src="http://placehold.it/120"></div> <div class="charname">first last</div></div>
       </div></div>
        </div></td></table>


    </div>
</div>

  </body>

</html>