Billy Hargrove (shipper)

[dohtml]<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans|Nunito" rel="stylesheet">

<style>
#billyhargrove-shipper{
  width: 600px;
  height: 600px;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
  background-image: linear-gradient(to right, #1e1b6f, #443b7d, #635b8a, #817d95, #a0a0a0);
}

#billyhargrove-shipper ::-webkit-scrollbar {
  width: 6px;
  border-radius: 50px;
}

#billyhargrove-shipper ::-webkit-scrollbar-track {
  background: transparent;
  border: 1px solid #000;
}

#billyhargrove-shipper ::-webkit-scrollbar-thumb {
  background: #211D8E;
  border: 2.5px solid #000;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}

#billyhargrove-shipper .border{
  width: 510px;
  height: 370px;
  background: url(https://i.imgur.com/oeAYYHj.jpg?1);
  background-size: 650px;
  position: absolute;
  top: 45px;
  left: 45px;
  overflow: hidden;
}

#billyhargrove-shipper .overlay{
  width: 600px;
  height: 500px;
  opacity: 0.75;
  background-image: linear-gradient(to right, #b0b0b0, #88829e, #61568b, #3b2c76, #03005f);
  -webkit-filter: contrast(1.2);
}

#billyhargrove-shipper .letter{
  cursor: context-menu;
  width: 510px;
  height: 550px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  left: -125px;
  overflow: hidden;
  opacity: 0.7;
  color: #000;
  text-transform: uppercase;
  font-family: 'Abril Fatface', cursive;
  font-size: 555px;
  font-style: italic;
  line-height: 245px;
  text-align: justify;
  transition: 0.6s ease-in 0.7s;
  webkit-transition: 0.6s ease-in 0.7s;
}
#billyhargrove-shipper input[type=checkbox]:checked ~ .letter{
  opacity: 0;
  transition: 0.6s ease-in 0.5s;
  webkit-transition: 0.6s ease-in 0.5s;
  left: -525px;
}

#billyhargrove-shipper .name{
  height: 20px;
  background: transparent;
  position: absolute;
  bottom: 175px;
  left: -62px;
  overflow: hidden;
  opacity: 0.5;
  color: #eee;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  line-height: 9px;
  text-align: justify;
  transform: rotate(-90deg);
  letter-spacing: 7px;
  transition: 0.5s ease-in 1.2s;
  webkit-transition: 0.5s ease-in 1.2s;
 -webkit-filter: blur(0.6px);
}
#billyhargrove-shipper input[type=checkbox]:checked ~ .name{
  opacity: 0;
  left: -155px;
  transition: 0.5s ease-in 0s;
  webkit-transition: 0.5s ease-in 0s;
}

#billyhargrove-shipper .line{
  height: 200px;
  width: 10px
  background: transparent;
  border-left: 0.5px solid #fff;
  position: absolute;
  top: 20px;
  left: 25px;
}

#billyhargrove-shipper .box{
  width: 350px;
  height: 370px;
  background: #000;
  position: absolute;
  top: 0px;
  right: -350px;
  opacity: 0.75;
  transition: 0.7s ease-in 0s;
  webkit-transition: 0.7s ease-in 0s;
}

#billyhargrove-shipper input[type=checkbox]:checked ~ .box{
  right: 160px;
  transition: 0.7s ease-in 1.1s;
  -webkit-transition: 0.7s ease-in 1.1s;
}

#billyhargrove-shipper .textbox{
  width: 350px;
  height: 370px;
  background: transparent;
  position: absolute;
  top: 0px;
  left: 0px;
  border-right: 0.5px solid #aaa;
}

#billyhargrove-shipper .title{
  font-family: 'Abril Fatface', cursive;
  font-size: 28px;
  letter-spacing: -1px;
  font-style: italic;
  line-height: 35px;
  color: #888;
  position: absolute;
  top: 35px;
  left: 47px;
  width: 250px;
  height: 120px;
  background: #000;
  text-align: left;
}

#billyhargrove-shipper .scrollbox{
  width: 250px;
  height: 215px;
  background: #000;
  position: absolute;
  top: 115px;
  left: 49px;
  overflow: auto;
  color: #aaa;
  text-align: justify;
  padding-right: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0px;
}

#billyhargrove-shipper .click {
 display: block;
}

#billyhargrove-shipper .click input[type=radio]:checked ~ label ~ .textbox{
 z-index: 1;
}

#billyhargrove-shipper .click label{
 display: block;
 width: 140px;
 height: 95px;
 margin-bottom: 0px;
 position: relative;
 left: 302px;
 top: 2px;
 z-index: 3;
 color: #ddd;
 font-family: 'Abril Fatface', cursive;
 font-size: 82px;
 letter-spacing: -7px;
 transform: rotate(-90deg);
 font-style: italic;
 line-height: 100px;
 opacity: 0.5;
 overflow: hidden;
 cursor: crosshair;
 transition: 0.2s ease-in 0s;
 webkit-transition: 0.2s ease-in 0s;
}
#billyhargrove-shipper .click label:hover{
 color: #000;
}

#billyhargrove-shipper .click input[type=radio]:checked ~ label {
 z-index: 2;
 color: #000;
 opacity: 0.8;
}

#billyhargrove-shipper .click input[type=radio] {
 display: none;
}

#billyhargrove-shipper .etc{
  width: 600px;
  height: 136px;
  background: #111;
  position: absolute;
  bottom: 0px;
  left: 0px;
  opacity: 0.85;
  border-top: 0.5px solid #aaa;
}

#billyhargrove-shipper .toggle img{
  width: 55px;
  height: 55px;
  position: absolute;
  bottom: 33px;
  right: 60px;
  border: 1px solid #2B26C8;
  padding: 4px;
  -webkit-filter: brightness(0.6);
  transition: 1s ease-in-out 0s;
  -webkit-transition: 1s ease-in-out 0s;
  cursor: crosshair;
  transform: rotate(-45deg);
  -webkit-border-image: linear-gradient(to right, #ddd 0%, #2B26C8 100%);
  border-image: linear-gradient(to right, #ddd 0%, #2B26C8 100%);
  border-image-slice: 1;
}

#billyhargrove-shipper input[type=checkbox] {
  display: none;
}

#billyhargrove-shipper .quotebase{
  width: 375px;
  height: 45px;
  background-image: linear-gradient(to right, #1e1b6f, #443b7d, #635b8a, #817d95, #a0a0a0);
  position: absolute;
  bottom: 43px;
  left: 48px;
  opacity: 0.85;
}

#billyhargrove-shipper .quote{
  width: 355px;
  height: 15px;
  background: #111;
  position: absolute;
  bottom: 12px;
  right: 0px;
  opacity: 0.9;
  color: #aaa;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  font-size: 6.5px;
  line-height: 12px;
  letter-spacing: 6px;
  font-weight: bold;
  border: 0.5px solid #999;
  border-right: 0px;
  padding-top: 5px;
  cursor: context-menu;
}

#billyhargrove-shipper a{
  text-decoration: none;
  color: #eee;
  cursor: context-menu;
}

</style>
<center>
<div id="billyhargrove-shipper">

  <div class='border'>

      <input type="checkbox" id="billy-toggle">

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

      <div class='letter'><br>B</a></div>

      <div class='name'><br>
        <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
           Billy Hargrove</a></div>

      <div class='box'>
          <div class="click">
             <input type="radio" id="click-1" name="click-group-1" checked>
             <label for="click-1">01</label>

             <div class='textbox'>
                <div class='title'>ABOUT<br> — <p></div>
                <div class='scrollbox'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum dui ac egestas sollicitudin. Nam vitae nisl vel libero congue dictum. Aliquam ornare iaculis gravida. Nullam vitae consectetur turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ornare faucibus augue, ut viverra lectus fermentum sed. Etiam dapibus viverra dui, nec vehicula lorem accumsan a. Quisque magna arcu, ornare at enim non, pharetra mattis mauris. Donec at ipsum eget elit vehicula pulvinar.
                    <p>
                    Nam volutpat pulvinar diam non volutpat. Integer sagittis rhoncus ex sit amet dictum. Nam pretium tortor in maximus vestibulum. Sed luctus pharetra volutpat. Quisque feugiat eu ipsum tincidunt scelerisque. Donec consequat augue eu tellus tincidunt, lacinia efficitur enim rhoncus. Suspendisse erat massa, porttitor nec ligula tempor, bibendum malesuada nulla. Duis a sapien mattis, pharetra elit nec, dapibus mi.
                    <p>
                    Integer tempus laoreet velit, nec ullamcorper lorem cursus ac. Etiam sit amet purus neque. Morbi bibendum dui velit. Vivamus ac metus id purus vehicula congue. Proin dignissim lacus metus, vel cursus diam pulvinar id. Sed eros arcu, imperdiet quis nibh ac, tristique placerat ipsum. Aliquam consectetur neque sit amet est dictum, et pellentesque risus varius. Donec id sodales felis, eget lobortis lorem. Duis pharetra tristique nibh id sodales.
                </div>
             </div>
          </div>

          <div class="click">
             <input type="radio" id="click-2" name="click-group-1">
             <label for="click-2">02</label>

              <div class='textbox'>
                <div class='title'>PLATONIC<br> — <p></div>
                <div class='scrollbox'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum dui ac egestas sollicitudin. Nam vitae nisl vel libero congue dictum. Aliquam ornare iaculis gravida. Nullam vitae consectetur turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ornare faucibus augue, ut viverra lectus fermentum sed. Etiam dapibus viverra dui, nec vehicula lorem accumsan a. Quisque magna arcu, ornare at enim non, pharetra mattis mauris. Donec at ipsum eget elit vehicula pulvinar.
                    <p>
                    Nam volutpat pulvinar diam non volutpat. Integer sagittis rhoncus ex sit amet dictum. Nam pretium tortor in maximus vestibulum. Sed luctus pharetra volutpat. Quisque feugiat eu ipsum tincidunt scelerisque. Donec consequat augue eu tellus tincidunt, lacinia efficitur enim rhoncus. Suspendisse erat massa, porttitor nec ligula tempor, bibendum malesuada nulla. Duis a sapien mattis, pharetra elit nec, dapibus mi.
                    <p>
                    Integer tempus laoreet velit, nec ullamcorper lorem cursus ac. Etiam sit amet purus neque. Morbi bibendum dui velit. Vivamus ac metus id purus vehicula congue. Proin dignissim lacus metus, vel cursus diam pulvinar id. Sed eros arcu, imperdiet quis nibh ac, tristique placerat ipsum. Aliquam consectetur neque sit amet est dictum, et pellentesque risus varius. Donec id sodales felis, eget lobortis lorem. Duis pharetra tristique nibh id sodales.
                </div>
             </div>
          </div>

          <div class="click">
             <input type="radio" id="click-3" name="click-group-1">
             <label for="click-3">03</label>

              <div class='textbox'>
                <div class='title'>ANTAGONISTIC<br> — <p></div>
                <div class='scrollbox'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum dui ac egestas sollicitudin. Nam vitae nisl vel libero congue dictum. Aliquam ornare iaculis gravida. Nullam vitae consectetur turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ornare faucibus augue, ut viverra lectus fermentum sed. Etiam dapibus viverra dui, nec vehicula lorem accumsan a. Quisque magna arcu, ornare at enim non, pharetra mattis mauris. Donec at ipsum eget elit vehicula pulvinar.
                    <p>
                    Nam volutpat pulvinar diam non volutpat. Integer sagittis rhoncus ex sit amet dictum. Nam pretium tortor in maximus vestibulum. Sed luctus pharetra volutpat. Quisque feugiat eu ipsum tincidunt scelerisque. Donec consequat augue eu tellus tincidunt, lacinia efficitur enim rhoncus. Suspendisse erat massa, porttitor nec ligula tempor, bibendum malesuada nulla. Duis a sapien mattis, pharetra elit nec, dapibus mi.
                    <p>
                    Integer tempus laoreet velit, nec ullamcorper lorem cursus ac. Etiam sit amet purus neque. Morbi bibendum dui velit. Vivamus ac metus id purus vehicula congue. Proin dignissim lacus metus, vel cursus diam pulvinar id. Sed eros arcu, imperdiet quis nibh ac, tristique placerat ipsum. Aliquam consectetur neque sit amet est dictum, et pellentesque risus varius. Donec id sodales felis, eget lobortis lorem. Duis pharetra tristique nibh id sodales.
                </div>
             </div>
          </div>

          <div class="click">
             <input type="radio" id="click-4" name="click-group-1">
             <label for="click-4">04</label>

              <div class='textbox'>
                  <div class='title'>ROMANTIC<br> — <p></div>
                  <div class='scrollbox'>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum dui ac egestas sollicitudin. Nam vitae nisl vel libero congue dictum. Aliquam ornare iaculis gravida. Nullam vitae consectetur turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ornare faucibus augue, ut viverra lectus fermentum sed. Etiam dapibus viverra dui, nec vehicula lorem accumsan a. Quisque magna arcu, ornare at enim non, pharetra mattis mauris. Donec at ipsum eget elit vehicula pulvinar.
                      <p>
                      Nam volutpat pulvinar diam non volutpat. Integer sagittis rhoncus ex sit amet dictum. Nam pretium tortor in maximus vestibulum. Sed luctus pharetra volutpat. Quisque feugiat eu ipsum tincidunt scelerisque. Donec consequat augue eu tellus tincidunt, lacinia efficitur enim rhoncus. Suspendisse erat massa, porttitor nec ligula tempor, bibendum malesuada nulla. Duis a sapien mattis, pharetra elit nec, dapibus mi.
                      <p>
                      Integer tempus laoreet velit, nec ullamcorper lorem cursus ac. Etiam sit amet purus neque. Morbi bibendum dui velit. Vivamus ac metus id purus vehicula congue. Proin dignissim lacus metus, vel cursus diam pulvinar id. Sed eros arcu, imperdiet quis nibh ac, tristique placerat ipsum. Aliquam consectetur neque sit amet est dictum, et pellentesque risus varius. Donec id sodales felis, eget lobortis lorem. Duis pharetra tristique nibh id sodales.
                  </div>
             </div>
          </div>

      </div>

  </div>

  <div class='etc'>
    <div class='quotebase'>
        <div class='quote'>
          I see what's mine and take it
        </div>
    </div>
  </div>

  <div class="toggle">
    <label for="billy-toggle"><img src="https://i.imgur.com/G9B2EXZ.gif"></label>
  </div>

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