Ultraviolence

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Montseratt:700,800|Homemade+Apple|Muli:800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#ultraviolence{
  width: 350px;
  height: 500px;
  background: url(https://i.imgur.com/M7rUvvg.png);
  background-size: 400px;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  outline: 3px double #000;
}

#ultraviolence ::-webkit-scrollbar {
  width: 4px;
}

#ultraviolence ::-webkit-scrollbar-track {
  background: #ddd;
  border: 1px solid #fff;
}

#ultraviolence ::-webkit-scrollbar-thumb {
  background: #5F4B8B;
  border: 0.5px solid #fff;
}

#ultraviolence .sd{
  position: absolute;
  top: 0px;
  width: 350px;
  height: 350px;
  background: transparent;
  transition: all 1s ease-in-out 1s;
}
#ultraviolence:hover .sd{
  top: -350px;
  transition: all 1s ease-in-out 0s;
}

#ultraviolence .single{
  font-family: 'Montseratt', sans-serif;
  font-size: 200px;
  font-weight: 800;
  position: absolute;
  width: 350px;
  height: 300px;
  background: transparent;
  top: 0px;
  left: 0px;
  letter-spacing: 0px;
  color: #fff;
  text-transform: uppercase;
  line-height: 380px;
  opacity: 1;
}

#ultraviolence .dash{
  font-family: 'Montseratt', sans-serif;
  font-size: 200px;
  font-weight: 700;
  position: absolute;
  width: 350px;
  height: 100px;
  background: transparent;
  top: 243px;
  left: -5px;
  letter-spacing: 0px;
  color: #fff;
  text-transform: uppercase;
  line-height: 100px;
  opacity: 1;
}

#ultraviolence .title{
  font-family: 'Montseratt', sans-serif;
  font-size: 12px;
  font-weight: 800;
  position: absolute;
  width: 350px;
  height: 200px;
  background: transparent;
  bottom: 0px;
  left: 5px;
  letter-spacing: 6px;
  color: #fff;
  text-transform: uppercase;
  line-height: 170px;
  opacity: 1;
  transition: all 1s ease-in-out 1s;
}
#ultraviolence:hover .title{
  bottom: -75px;
  font-size: 14px;
  letter-spacing: 7px;
  transition: all 1s ease-in-out 0s;
}

#ultraviolence .textbox{
  font-family: 'Roboto', sans-serif;
  font-size: 10px;
  font-weight: 400;
  position: absolute;
  top: 115px;
  left: 25px;
  width: 220px;
  height: 238px;
  background: #fff;
  transition: 1s;
  letter-spacing: 0px;
  line-height: 12px;
  overflow: auto;
  text-align: justify;
  padding-right: 10px;
  border: 35px solid #fff;
  color: #000;
  transform: scale(0);
  transition: all 1s ease-in-out 0s;
}
#ultraviolence:hover .textbox{
  transform: scale(1);
  transition: all 1s ease-in-out 1s;
}

#ultraviolence .tags{
  font-family: 'Montseratt', sans-serif;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  width: 350px;
  height: 100px;
  background: transparent;
  top: 30px;
  left: -230px;
  letter-spacing: 0px;
  color: #fff;
  text-transform: lowercase;
  line-height: 11px;
  text-align: left;
  transition: all 1s ease-in-out 0s;
}
#ultraviolence:hover .tags{
  left: 23px;
  transition: all 1s ease-in-out 1s;
}

#ultraviolence img{
  width: 32px;
  border: 4px solid #fff;
}

#ultraviolence .t{
  font-family: 'Montseratt', sans-serif;
  font-size: 12px;
  font-weight: 800;
  font-size: 18px;
  background: #fff;
  color: #222;
  padding: 3px;
  text-transform: uppercase;
  letter-spacing: 0px;
  line-height: 18px;
}

#ultraviolence tg{
  padding-left: 8px;
  letter-spacing: 0px;
}

</style>

<center>
<div id="ultraviolence">

    <div class="sd">
      <div class="single">U</div>
      <div class="dash">-</div>
    </div>

    <div class="title"> Ultraviolence </div>

    <div class="tags">
        <table>
          <tr>
            <td class="t"><a href="http://candyland-couture.com/index.php?showuser=7400" title="hanie ©">
               <img src="https://i.imgur.com/HDvv0un.gif"></a></td>
            <td class="t" style="padding-left:20px;padding-right:20px;">something</td>
          </tr>
        </table><br>

        <tg> your tags or notes goes here # # </tg>
    </div>

    <div class="textbox">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum maximus erat, eget pharetra tortor luctus aliquet. Mauris lobortis rhoncus sapien. Sed sollicitudin neque ac arcu efficitur sagittis. Cras neque velit, dapibus blandit orci ut, sodales sodales sapien. Nulla eleifend purus id mauris interdum porttitor. Vestibulum semper porttitor aliquet. Phasellus scelerisque imperdiet augue non viverra. Duis leo ex, facilisis ut enim vitae, rhoncus laoreet ante.
      <br><br>
      Donec eget varius justo. Praesent lacinia dapibus sem. Proin ex urna, sollicitudin ac odio ac, rutrum molestie dolor. Nullam in ex arcu. Maecenas bibendum elit arcu. Maecenas velit lorem, faucibus eu nisi vel, dignissim euismod risus. Phasellus venenatis aliquam urna pulvinar tristique.
      <br><br>
      Aenean maximus sem pharetra turpis tempus, pretium faucibus ex aliquam. Aliquam erat volutpat. Fusce varius tempor nisi nec facilisis. Duis vitae cursus sapien, a ullamcorper ante. Phasellus aliquam lorem et purus efficitur ullamcorper. Suspendisse sit amet gravida massa, in elementum lectus. Nulla nec lorem viverra, pulvinar urna sit amet, tempor tellus. Vestibulum vel fermentum lacus, a consequat ex. Morbi mollis mi in est condimentum vehicula. Maecenas mauris enim, euismod nec nisi a, suscipit placerat tortor. Morbi vel ligula at nisi imperdiet dignissim. Sed cursus est in sem ornare faucibus. Aenean sed tellus quis ipsum tristique convallis. Duis viverra cursus elit, id sollicitudin velit sagittis sit amet. Nam mollis suscipit urna id vestibulum.
    </div>

</div>
</center>
[/dohtml]