Pastel Streak (thread)

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Space+Mono:400" rel="stylesheet">

<style>
#pastel-streak{
  position: relative;
  margin: 10px auto;
  background: #F8AA5F;
  width: 400px;
  height: 700px;
  overflow: hidden;
}

#pastel-streak ::-webkit-scrollbar {
  background: transparent;
  width: 8px;
}

#pastel-streak ::-webkit-scrollbar-track {
  background: transparent;
  border: 0px solid #fff;
}

#pastel-streak ::-webkit-scrollbar-thumb {
  background: #F8AA5F;
  border-top: 3px solid #F8AA5F;
  border-bottom: 3px solid #F8AA5F;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
}

#pastel-streak .bg{
  position: relative;
  background: url(https://i.imgur.com/PocQPhU.jpg);
  background-size: 400px;
  width: 400px;
  height: 500px;
}

#pastel-streak .title{
  position: absolute;
  background: transparent;
  bottom: 105px;
  width: 400px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 80px;
  line-height: 70px;
  color: #F8AA5F;
  text-stroke: 1px #ffffff;
  -webkit-text-stroke: 1px #ffffff;
}

#pastel-streak .icon{
  position: absolute;
  background: #ddd;
  left: 19px;
  bottom: 16px;
  width: 35px;
  height: 35px;
  border-radius: 100px;
}

#pastel-streak .icon img{
  width: 35px;
  height: 35px;
  border-radius: 100px;
}

#pastel-streak .quote-bg{
  position: absolute;
  background: #ffffff;
  left: 51px;
  bottom: 43px;
  width: 300px;
  height: 70px;
}

#pastel-streak .quote-box{
  position: absolute;
  background: #ffffff;
  right: 18px;
  bottom: 16.5px;
  width: 188px;
  border: 1px solid #F8AA5F;
  font-family: Space Mono;
  font-weight: 400;
  font-size: 7px;
  line-height: 10px;
  text-transform: uppercase;
  color: #000000;
  padding: 7px;
}

#pastel-streak .text-bg{
  position: absolute;
  background: #ffffff;
  left: -400px;
  top: 10px;
  width: 380px;
  height: 480px;
  transition: 0.7s;
  opacity: 0;
}

#pastel-streak:hover .text-bg{
  left: 10px;
  transition: 0.7s;
  opacity: 1;
}

#pastel-streak .text-border{
  position: absolute;
  background: #ffffff;
  left: 10px;
  top: 10px;
  width: 358px;
  height: 458px;
  border: 1px solid #F8AA5F;
}

#pastel-streak .textbox{
  position: absolute;
  background: #ffffff;
  left: 50px;
  top: 50px;
  width: 245px;
  height: 360px;
  overflow: auto;
  font-family: Playfair Display;
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  text-align: justify;
  padding-right: 15px;
  color: #000000;
}

#pastel-streak .textbox b{
  color: #F8AA5F;
  font-size: 11px;
}

#pastel-streak .textbox i{
  font-family: 'Space Mono', monospace;
  color: #F8AA5F;
  text-transform: uppercase;
  font-size: 9px;
}

</style>

<center>
<div id="pastel-streak">

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

  <div class="text-bg">
      <div class="text-border">
          <div class="textbox">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae dictum elit, at aliquam mauris. Fusce molestie magna non ligula pharetra pharetra. <b>Phasellus lacinia blandit ante. Curabitur aliquet volutpat pharetra. Sed est dui, tempus in arcu laoreet, eleifend feugiat augue.</b> Nam fermentum interdum orci, vehicula sodales magna vulputate et. Sed id lacinia nisi, non vulputate neque. Nam quis venenatis enim, quis porttitor enim. Vivamus condimentum tortor dapibus purus condimentum laoreet.
              <p>
              Integer maximus ac nibh nec cursus. Vivamus eget turpis pellentesque, vulputate libero a, ornare augue. Phasellus ac nibh finibus, fringilla sapien eget, ultricies arcu. <i>Aenean vel sapien blandit massa consectetur luctus in vel erat. Cras auctor elit nulla, id fermentum elit laoreet ut.</i> Praesent erat mi, elementum ac elementum nec, volutpat in dolor. Vestibulum vestibulum lacinia enim, at consequat urna mollis sit amet.
              <p>
              Maecenas commodo arcu eu felis vestibulum maximus. Mauris quis metus in libero sagittis finibus. Morbi ac porttitor risus. Pellentesque malesuada nisl sit amet turpis malesuada, nec auctor est ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc faucibus rhoncus euismod. Sed nec facilisis tellus. Aenean dapibus purus mauris, non pulvinar orci lobortis in.
              <p>
              Ut consequat, ligula pellentesque volutpat rhoncus, magna ante mollis urna, sit amet consectetur nisi ipsum id augue. Sed tempus efficitur ipsum. Sed consectetur eros mi. Vivamus rhoncus non tortor sit amet varius. Nulla a imperdiet odio. Sed et ultrices risus, blandit hendrerit dolor. Cras iaculis et lectus sit amet viverra. Aliquam dictum efficitur massa vel mollis. Vestibulum imperdiet tristique pulvinar. Phasellus pretium metus sit amet enim fringilla, vitae sagittis mauris scelerisque.
          </div>
      </div>
  </div>

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

  <div class="quote-bg">
      <div class="icon">
          <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
          <img src="https://i.imgur.com/hI2DljH.gif"></a>
      </div>
      <div class="quote-box">
          The games you played were never fun
          You'd say you'd stay but then you'd run
      </div>
  </div>

</div>
</center>