Katie (sig)

<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style>
#katiesig{
  position: relative;
  background-color: #000000;
  background-image: url(https://k.nickpic.host/rIF6ks.png);
  margin: 10px auto;
  width: 500px;
  height: 200px;
  overflow: hidden;
  border: 3px solid #ffff;
  outline: 1px solid #A93226;
}

#katiesig ::-webkit-scrollbar {
  width: 7px;
}

#katiesig ::-webkit-scrollbar-track {
  background: #000000;
  border: 1px solid #A93226;
}

#katiesig ::-webkit-scrollbar-thumb {
  background: #A93226;
  border: 1px solid #A93226;
}

#katiesig .bg{
  position: relative;
  background: #000000;
  width: 500px;
  height: 200px;
  top: 0px;
  left: -500px;
  opacity: 0.75;
  transition: 0.7s;
}

#katiesig:hover .bg{
  transition: 0.7s;
  left: 0px;
}

#katiesig .icon{
  background: #000000;
  position: absolute;
  bottom: 37px;
  left: 78px;
  border-radius: 100px;
  overflow: hidden;
  padding: 5px;
  border: 1.7px solid #A93226;
}

#katiesig .icon img{
  width: 75px;
  border-radius: 100px;
}

#katiesig .leftbox{
  background: #000000;
  width: 120px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-right: 1px solid #A93226;
}

#katiesig .navbox{
  background: #000000;
  width: 170px;
  height: 36px;
  position: absolute;
  top: 30px;
  right: 80px;
  border: 1px solid #A93226;
  border-radius: 0px 15px 0px 0px;
}

#katiesig a{
  text-decoration: none;
}

#katiesig .th{
  color: #A93226;
  font-size: 17px;
  margin-top: 10px;
  margin-right: 7px;
  transform: scale(1.0);
  transition: 0.3s;
}
#katiesig .th:hover{
  transition: 0.3s;
  transform: scale(1.25);
  color: #85C1E9;
}

#katiesig .line{
  background: transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 67px;
  border-bottom: 1px solid #A93226;;
}


#katiesig .textbox{
  background: #000000;
  width: 298px;
  height: 101px;
  position: absolute;
  bottom: 30px;
  right: 80px;
  overflow: hidden;
  border: 1px solid #A93226;
}

#katiesig .box{
  background: #000000;
  width: 220px;
  height: 79px;
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid #A93226;
}

#katiesig .scrollbox{
  background: #000000;
  width: 170px;
  height: 50px;
  position: absolute;
  top: 15px;
  right: 15px;
  overflow: auto;
  padding-right: 15px;
  color: #85C1E9;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  text-align: justify;
  line-height: 13px;
  letter-spacing: 0px;
}

#katiesig .namebox{
  background: transparent;
  width: 125px;
  height: 36px;
  position: absolute;
  top: 30px;
  right: 240px;
  color: #5DADE2;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 15px;
  text-align: left;
}


</style>
<center>
<div id="katiesig">

  <div class="bg">
      <div class="leftbox"></div>
      <div class="line"></div>

      <div class="navbox">
          <a href="#"><span class="th th-pencil" title="Writing Gallery"></span></a>
          <a href="#"><span class="th th-notebook" title="FF.net"></span></a>
          <a href="#"><span class="th th-bookmark-1" title="Archive of Our Own"></span></a>
          <a href="#"><span class="th th-wattpad" title="Wattpad"></span></a>
          <a href="#"><span class="th th-youtube" title="Youtube"></span></a>
      </div>

      <div class="namebox"> Romcom Taterbug</div>

      <div class="textbox">
      <div class="box">
          <div class="scrollbox">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et lectus nec dui tempor ullamcorper non condimentum ante. Vestibulum rhoncus diam sed tortor vulputate efficitur. Ut dictum auctor dapibus.
          </div>
      </div>
      </div>

      <div class="icon">
        <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="Hanie ©"><img src="https://via.placeholder.com/80x80"></a>
      </div>
  </div>

</div>
</center>