Rachel Green (shipper)

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Muli" rel="stylesheet">

<style>
#rachelgreen{
  width: 400px;
  height: 550px;
  background: url(https://i.imgur.com/uXUNCFP.jpg);
  background-size: 400px;
  outline: 1px solid #000;
  border: 18px solid #eee;
  position: relative;
  margin: 10px auto;
  overflow: hidden;
}

#rachelgreen a{
  text-decoration: none;
  cursor: crosshair;
}

#rachelgreen ::-webkit-scrollbar {
  width: 0px;
}

#rachelgreen ::-webkit-scrollbar-track {
  background: #000;
  border: 0.5px solid #000;
}

#rachelgreen ::-webkit-scrollbar-thumb {
  background: #000;
  border: 0.5px solid #000;
}

#rachelgreen .main{
  width: 400px;
  height: 55px;
  top: 240px;
  left: 0;
  background: #000;
  position: relative;
  opacity: 0.85;
  border-top: 0.5px solid #ccc;
  border-bottom: 0.5px solid #ccc;
  -webkit-transition: 0.5s ease-in 0.9s;
  transition: 0.5s ease-in 0.9s;
  z-index: 1;
}

#rachelgreen:hover .main{
  top: 52px;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}

#rachelgreen .icon{
  width: 110px;
  height: 110px;
  position: relative;
  background: #000;
  top: -30px;
  border-radius: 100px;
  border: 1px solid #aaa;
}

#rachelgreen img{
  width: 90px;
  height: 90px;
  border-radius: 100px;
  padding: 10px;
}

#rachelgreen .first{
  height: 20px;
  position: absolute;
  top: 11px;
  right: 256px;
  color: #fff;
  letter-spacing: 2px;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 12px;
  background: #000;
  padding: 10px;
}

#rachelgreen .last{
  height: 20px;
  position: absolute;
  top: 11px;
  left: 256px;
  color: #fff;
  letter-spacing: 2px;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 12px;
  background: #000;
  padding: 10px;
}

#rachelgreen .line{
  width: 350px;
  top: 28px;
  border-top: 0.5px solid #ccc;
  position: relative;
}

#rachelgreen .base{
  width: 400px;
  height: 550px;
  top: 0px;
  left: -400px;
  position: absolute;
  background: transparent;
  -webkit-transition: 0.7s ease-in 0s;
  transition: 0.7s ease-in 0s;
}
#rachelgreen:hover .base{
  left: 0px;
  -webkit-transition: 0.7s ease-in 0.7s;
  transition: 0.7s ease-in 0.7s;
}

#rachelgreen .box{
  width: 325px;
  height: 80px;
  background: #aaa;
  opacity: 0.8;
  outline: 1px solid #fff;
  position: relative;
  top: 141px;
  margin-top: 13px;
}

#rachelgreen c{
  color: #fff;
  padding: 25.5px 33px;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  font-size: 17px;
  line-height: 17.5px;
  opacity: 0.8;
  letter-spacing: 0px;
}

#rachelgreen .about{
  width: 312px;
  height: 68px;
  background: #000;
  opacity: 0.9;
  position: absolute;
  top: 160px;
  left: 44px;
  color: #fff;
  outline: 1px solid #ccc;
}
#rachelgreen .about c{
  float: left;
  background: #972b38;
  border-right: 0.5px solid #ddd;
}
#rachelgreen .textbox{
  width: 200px;
  height: 42px;
  position: absolute;
  top: 172px;
  right: 60px;
  overflow: auto;
  color: #ddd;
  text-align: justify;
  font-family: 'Times';
  font-size: 9.5px;
  letter-spacing: 0px;
  line-height: 11px;
}

#rachelgreen .enemies{
  width: 312px;
  height: 68px;
  background: #000;
  opacity: 0.9;
  position: absolute;
  top: 254px;
  left: 44px;
  outline: 1px solid #ccc;
}
#rachelgreen .enemies c{
  float: right;
  background: #2d767f;
  border-left: 0.5px solid #ddd;
}
#rachelgreen .textbox2{
  width: 200px;
  height: 42px;
  position: absolute;
  top: 266px;
  left: 63px;
  overflow: auto;
  color: #ddd;
  text-align: justify;
  font-family: 'Times';
  font-size: 9.5px;
  letter-spacing: 0px;
  line-height: 11px;
}

#rachelgreen .friends{
  width: 312px;
  height: 68px;
  background: #000;
  opacity: 0.9;
  position: absolute;
  top: 346px;
  left: 44px;
  outline: 1px solid #ccc;
}
#rachelgreen .friends c{
  float: left;
  border-right: 0.5px solid #ddd;
  background: #7a916e;
}
#rachelgreen .textbox3{
  width: 200px;
  height: 42px;
  position: absolute;
  top: 357px;
  right: 60px;
  overflow: auto;
  color: #ddd;
  text-align: justify;
  font-family: 'Times';
  font-size: 9.5px;
  letter-spacing: 0px;
  line-height: 11px;
}

#rachelgreen .lovers{
  width: 312px;
  height: 68px;
  background: #000;
  opacity: 0.9;
  position: absolute;
  top: 440px;
  left: 44px;
  outline: 1px solid #ccc;
}
#rachelgreen .lovers c{
  float: right;
  border-left: 0.5px solid #ddd;
  background: #be7c49;
}
#rachelgreen .textbox4{
  width: 200px;
  height: 42px;
  position: absolute;
  top: 452px;
  left: 63px;
  overflow: auto;
  color: #ddd;
  text-align: justify;
  font-family: 'Times';
  font-size: 9.5px;
  letter-spacing: 0px;
  line-height: 11px;
}

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

   <div class="main">
       <div class="line"></div>

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

       <div class="first">rachel</div>
       <div class="last">green</div>
   </div>

   <div class="base">
       <div class="box"></div>
       <div class="about"><c title='about'>A</c></div>
       <div class="textbox">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lectus dui, ultricies rutrum dolor vel, volutpat aliquet metus. Mauris ut dui dapibus, hendrerit odio convallis, consectetur sem. In ut diam nec eros egestas porttitor. Ut suscipit est a libero eleifend luctus.
       </div>

       <div class="box"></div>
       <div class="enemies"><c title='enemies'>E</c></div>
       <div class="textbox2">
          Nulla ut nunc id nisl dictum scelerisque vel ut lacus. Phasellus vulputate volutpat enim aliquet gravida. Proin vulputate ipsum sed porta tincidunt. Suspendisse venenatis sem vitae volutpat tempus. Ut egestas, nibh a ornare finibus, lorem dui pharetra eros, eget finibus augue leo non dui.
       </div>

       <div class="box"></div>
       <div class="friends"><c title='friends'>F</c></div>
       <div class="textbox3">
          Morbi eu libero purus. Sed finibus diam ut tortor aliquet congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vestibulum efficitur libero eget auctor. Cras tincidunt porta vehicula. Sed pellentesque orci nec purus lacinia, vitae tincidunt erat faucibus.
       </div>

       <div class="box"></div>
       <div class="lovers"><c title='lovers'>L</c></div>
       <div class="textbox4">
          Proin ut venenatis augue, et finibus ligula. Phasellus sed nulla vel lorem vestibulum dapibus. Ut ut efficitur justo. Suspendisse finibus ex non odio venenatis, mattis semper elit aliquet. Curabitur fringilla auctor aliquet. Ut at commodo felis, in luctus nisl.
       </div>
   </div>

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