butterfly v2 - nav page

<html>

<head>

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,800,600&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Be+Vietnam|Bree+Serif|Bungee+Outline|Elsie|Emblema+One|Fugaz+One|Kumar+One|Monoton|Prata|Righteous|Roboto+Slab:400,700|Shrikhand|Sonsie+One|Vidaloka&display=swap" rel="stylesheet">

        <style type="text/css">

 body { font-family:poppins; background-image:url(https://img.nickpic.host/rYQN3D.png); }
 body a { text-decoration:none; color:#000; }

  ::-webkit-scrollbar {
   width: 1px;          }
::-webkit-scrollbar-thumb {
 background-color:#000; }

::-webkit-scrollbar-track {
 background-color:transparent;
}

#butterside { position:fixed; top:0px; bottom:0px; left:0px; padding:20px; background-color:rgba(244,187,211,0.6); border-right:1px solid #F4BBD3; }
#butterside .sideone { background-color:#fff; padding:8px; margin-top:20px;  border:1px solid #fe5d9f;}
#butterside  .sidelink { padding:5px; font-weight:800; font-size:20px; }
#butterside .sidelink a:hover { background-color:#fe5d9f; }

#butterhold { position:fixed; top:50px; left:220px;  padding:20px; width:700px; }
#butterhold .maintitle { font-family:sonsie one; font-weight:800; letter-spacing:-2px; font-size:50px; margin-bottom:10px;  }
#butterhold .navbox { width:600px; padding:10px; background-color:#fff; border:1px solid #ccc; }
#butterhold .navinside { padding:10px; }
#butterhold .navtitle { text-align:left; font-size:25px; font-family:sonsie one; }
#butterhold .navtitle color { border:1px solid #f4bbd3; background-color:rgba(244,187,211,0.5); padding:5px; }
#butterhold .navlist { padding:10px; text-align:left; }
#butterhold .navlist a:hover { color:#f4bbd3; font-style:italic; letter-spacing:2px; transition:0.8 ease-in-out; }
#butterhold .navlist ul { list-style-type:circle; }


</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="butterside">
<div class="sideone">
  <div class="sidelink"><a href="//">link one</a></div>
    <div class="sidelink"><a href="//">link two</a></div>
      <div class="sidelink"><a href="//">link three</a></div>
        <div class="sidelink"><a href="//">link four</a></div>
          <div class="sidelink"><a href="//">link five</a></div>
          <div class="sidelink"><a href="//">link six</a></div>
 </div></div>

<div id="butterhold">
    <center>
<div class="maintitle">navigation</div>

<div class="navbox"><div class="navinside">
    <div class="navtitle"><color>header one</color></div>
    <div class="navlist">
    <ul>
    <li><a href="//">link</a></li>
        <li><a href="//">link</a></li>
        <li><a href="//">link</a></li>
    <li><a href="//">link</a></li>
    <li><a href="//">link</a></li>
    </ul>
      </div>

<div class="navtitle"><color>header two</color></div>
    <div class="navlist">
    <ul>
    <li><a href="//">link</a></li>
        <li><a href="//">link</a></li>
        <li><a href="//">link</a></li>
    <li><a href="//">link</a></li>
    <li><a href="//">link</a></li>
    </ul>
      </div>
      </div></div>

    </center>


  </body>

</html>