Trippy (shipper)

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

<style>
#trippy-shipper{
  width: 530px;
  height: 550px;
  background: url(https://i.imgur.com/V6wjIfk.gif);
  background-size: 740px;
  overflow: hidden;
  margin: 0px auto;
  position: relative;
  border: 0.5px solid #31285F;
  border-radius: 0px 0px 0px 50px;
}

#trippy-shipper .overlay{
  width: 530px;
  height: 550px;
  background: #EAB3B9;
  opacity: 0.9;
}

#trippy-shipper ::-webkit-scrollbar {
  width: 0px;
  border-radius: 50px;
}

#trippy-shipper ::-webkit-scrollbar-track {
  background: #fff;
  border: 1px solid #fff;
}

#trippy-shipper ::-webkit-scrollbar-thumb {
  background: #fff;
  border-top: 0.5px solid #31285F;
  border-bottom: 0.5px solid #31285F;
}

#trippy-shipper .title{
  background: #31285F;
  border: 0.5px solid #31285F;
  width: 320px;
  position: absolute;
  top: 50px;
  right: -1px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
  padding: 19px;
  border-radius: 50px 0px 0px 50px;
}
#trippy-shipper .title c{
  color: #C7A6C5;
}

#trippy-shipper .left{
  background: #fff;
  border: 0.5px solid #31285F;
  width: 200px;
  height: 70px;
  position: absolute;
  bottom: 329px;
  left: -1px;
}

#trippy-shipper .bottom{
  background: #31285F;
  width: 150px;
  height: 210px;
  padding-left: 60px;
  padding-top: 50px;
  position: absolute;
  bottom: -1px;
  left: -1px;
  border-radius: 0px 0px 0px 50px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 8px;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: justify;
}
#trippy-shipper .bottom .th{
  color: #C7A6C5;
  font-size: 7px;
  margin-right: 10px;
}

#trippy-shipper .right{
  background: #fff;
  border: 0.5px solid #31285F;
  width: 280px;
  height: 400px;
  position: absolute;
  bottom: -1px;
  right: 50px;
}

#trippy-shipper .icon{
  background: url(https://i.imgur.com/4LBKDGX.gif);
  outline: 0.5px solid #31285F;
  border: 5px solid #fff;
  width: 160px;
  position: absolute;
  top: 20px;
  left: 15px;
}
#trippy-shipper .icon img{
  width: 160px;
  height: 90px;
}

#trippy-shipper .textbox{
  background: #fff;
  width: 200px;
  height: 320px;
  position: absolute;
  top: 40px;
  right: 40px;
  text-align: justify;
  font-family: Arial;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0px;
  overflow: auto;
  color: #31285F;
}

#trippy-shipper .textbox t{
  background: #31285F;
  color: #fff;
  padding: 8px 15px;
  float: left;
  border-radius: 0px 50px 50px 0px;
  text-align: justify;
  font-family: 'Roboto', sans-serif;
  font-size: 8px;
  line-height: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-right: 14px;
}
#trippy-shipper .textbox c{
  color: #C7A6C5;
}

</style>

<center>
<div id='trippy-shipper'>

  <div class='overlay'></div>

  <div class='bottom'>
    <span class="th th-skip-track"></span> pronouns<p>
    <span class="th th-skip-track"></span> face claim<p>
    <span class="th th-skip-track"></span> age<p>
    <span class="th th-skip-track"></span> timezone<p>
    <span class="th th-skip-track"></span> contact<p>
    <span class="th th-skip-track"></span> triggers<p>
  </div>

  <div class='left'>
    <div class='icon'>
      <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
      <img src="https://i.imgur.com/4LBKDGX.gif"></a>
    </div>
  </div>

  <div class='right'>
    <div class='textbox'>
      <t><c>01.</c>⠀⠀About</t>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis magna augue, sed viverra elit dictum eu. Vivamus quis metus egestas, mattis diam in, hendrerit lacus. In semper neque non elit venenatis cursus in consectetur nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis viverra augue vitae velit convallis, in semper nulla eleifend. Quisque facilisis justo placerat, facilisis sapien ut, condimentum augue. Ut ut dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      <p><br>
      <t><c>02.</c>⠀⠀platonic</t>
      Aenean et tellus est. Vestibulum et pharetra odio. Ut quis ipsum magna. Vestibulum euismod finibus mauris id accumsan. Nulla imperdiet ornare nisl quis condimentum. Nam et aliquam nulla, a varius justo. Donec laoreet mauris eget sem mattis euismod. Maecenas fringilla consequat libero, sed lobortis turpis dapibus sit amet. In porttitor lacinia turpis vel hendrerit. Nunc sit amet ultricies est. Vivamus enim ante, egestas eget efficitur sit amet, imperdiet ut nulla. Etiam dictum efficitur ullamcorper. Mauris vel auctor neque.
      <p><br>
      <t><c>03.</c>⠀⠀antagonistic</t>
      Aliquam dictum risus in enim euismod volutpat. In pulvinar erat et iaculis tincidunt. Integer ultrices malesuada sapien, quis molestie elit lobortis eu. Nullam dapibus semper nulla, eget accumsan sem pharetra a. In porttitor ipsum et ligula faucibus pellentesque. Nam vehicula, nibh auctor ornare fermentum, mauris felis mollis sem, id euismod ligula dolor at massa. Nam commodo metus ut vestibulum commodo. Morbi tincidunt pretium mi, quis consequat purus suscipit nec. Cras quis pulvinar elit.
      <p><br>
      <t><c>04.</c>⠀⠀romantic</t>
      Duis elementum viverra vestibulum. Donec lectus ex, scelerisque lobortis tortor vitae, tincidunt vehicula nisl. Nulla eget dignissim quam, quis pulvinar augue. Etiam vitae odio venenatis, feugiat nulla sit amet, consequat mi. Duis vel malesuada elit. Mauris iaculis nisl sit amet quam convallis, et imperdiet mi vulputate. Quisque vestibulum, ex sollicitudin laoreet suscipit, quam sem luctus neque, eu sagittis leo dolor quis leo. Etiam commodo neque vitae mauris porta gravida. In vitae suscipit ligula. Donec ultricies ligula a ligula ornare, ac pharetra tellus malesuada. Nulla tempor dui eget tortor scelerisque pulvinar. Etiam et ligula enim.
   </div>
  </div>


  <div class="title">first <c>m.</c> last </div>
  </div>

</div>
</center>