Take A Break (thread)

<link href="https://fonts.googleapis.com/css?family=Montserrat:500,800|Prata" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#freddie{
  width: 420px;
  height: 550px;
  background: #fff;
  position: relative;
  border: 0.5px solid #ccc;
  border-radius: 20px 0px;
}

#freddie ::-webkit-scrollbar {
  width: 5px;
  border-radius: 50px;
}

#freddie ::-webkit-scrollbar-track {
  background: #fff;
}

#freddie ::-webkit-scrollbar-thumb {
  background: #fbd7e3;
  border-top: 1px solid #00934e;
  border-bottom: 1px solid #00934e;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

#freddie .base{
  width: 380px;
  height: 510px;
  position: relative;
  top: 20px;
  background: #fbd7e3;
  overflow: hidden;
  border-radius: 10px;
}

#freddie .triangle{
  width: 600px;
  height: 400px;
  position: absolute;
  bottom: -250px;
  right: -355px;
  background: transparent;
  border: 0.5px solid #00934e;
  -webkit-transform: rotate(47.5deg);
  transform: rotate(47.5deg);
}
#freddie .triangleb{
  width: 600px;
  height: 400px;
  position: absolute;
  bottom: -238px;
  right: -355px;
  background: #eee;
  -webkit-transform: rotate(47.5deg);
  transform: rotate(47.5deg);
}

#freddie .box{
  width: 300px;
  height: 55px;
  position: relative;
  top: 42px;
  background: transparent;
  overflow: hidden;
  border: 0.5px solid #00934e;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
}
#freddie:hover .box{
  height: 400px;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
}

#freddie .boxb{
  width: 300px;
  height: 30px;
  position: relative;
  top: 42px;
  background: transparent;
  overflow: hidden;
  border: 0.5px solid #00934e;
}

#freddie .textbase{
  width: 300px;
  height: 55px;
  position: absolute;
  top: 37px;
  right: 33px;
  background: #fff;
  overflow: hidden;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
}
#freddie:hover .textbase{
  height: 400px;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
}

#freddie .icon{
  width: 138px;
  height: 138px;
  position: absolute;
  bottom: 120px;
  right: 70px;
  overflow: hidden;
  border: 0.5px solid #00934e;
  border-radius: 100px;
  -webkit-transition: 0.5s ease-in 1.2s;
  transition: 0.5s ease-in 1.2s;
}
#freddie:hover .icon{
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  opacity: 0;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#freddie .icon img{
  width: 110px;
  height: 110px;
  border: 1px dashed #00934e;
  border-radius: 100px;
  margin-top: 8px;
  padding: 5px;
}

#freddie .line{
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: -100px;
  left: -160px;
  background: url(https://i.imgur.com/spoGHNF.png);
  background-size: 400px;
  background-position: right;
  border-top: 0.5px solid #00934e;
  -webkit-transform: rotate(37deg);
  transform: rotate(37deg);
  outline: 5px solid #fff;
  outline-offset: 1px;
}

#freddie .tag{
  width: 225px;
  height: 30px;
  position: absolute;
  top: 12px;
  right: -230px;
  background: transparent;
  overflow: hidden;
  color: #00934e;
  font-family: 'Courier New';
  font-size: 8px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 8px;
  text-align: right;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#freddie:hover .tag{
  right: 10px;
  -webkit-transition: 0.5s ease-in 1.2s;
  transition: 0.5s ease-in 1.2s;
}
#freddie .tag a{
  color: #00934e;
  border-bottom: 0.5px dashed #00934e;
  text-decoration: none;
  background: #fff;
}

#freddie .title{
  width: 300px;
  height: 55px;
  position: absolute;
  top: 28px;
  right: 0px;
  background: transparent;
  overflow: hidden;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
  color: #00934e;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 6px;
  line-height: 18px;
  font-weight: 800;
  z-index: 2;
}

#freddie .title d{
  font-weight: 500;
  font-size: 7px;
  font-style: italic;
  letter-spacing: 10px;
}

#freddie .title a{
  color: #00934e;
  text-decoration: none;
}

#freddie .textbox{
  overflow: auto;
  width: 205px;
  height: 260px;
  position: absolute;
  top: 100px;
  right: 40px;
  background: #fff;
  -webkit-transition: 0.7s ease-in 0.5s;
  transition: 0.7s ease-in 0.5s;
  letter-spacing: 0px;
  line-height: 13px;
  font-family: 'Courier new';
  font-size: 9px;
  text-align: justify;
  padding-right: 10px;
  color: #00934e;
  font-weight: 500;
  z-index: 3;
}
#freddie .textbox b{
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #fbd7e3;
  padding: 2px;
}

#freddie .textbox blockquote{
  border-left: 3px solid #fbd7e3;
  padding: 10px;
  margin-left: 15px;
  width: 150px;
  background: #f7f7f7;
  font-family: 'Prata', cursive;
  letter-spacing: 0.5px;
  line-height: 12px;
  font-style: italic;
}

#freddie .textbox .sf{
  font-size: 18px;
  float: left;
  margin-right: 9px;
}

#freddie .line2{
  width: 280px;
  height: 400px;
  position: absolute;
  bottom: -60px;
  right: -160px;
  background: url(https://i.imgur.com/spoGHNF.png);
  background-size: 400px;
  background-position: right;
  border-top: 0.5px solid #00934e;
  -webkit-transform: rotate(240deg);
  transform: rotate(215deg);
  outline: 3px solid #fff;
  outline-offset: 1px;
  -webkit-transition: 0.5s ease-in 1.2s;
  transition: 0.5s ease-in 1.2s;
}
#freddie:hover .line2{
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
  right: -360px;
}

</style>
<center>
<div id='freddie'>

  <div class='base'>

    <div class='line'></div>

    <div class='triangleb'></div>
    <div class='triangle'></div>

    <div class='textbase'>

        <div class='title'>
            take a break <p>
           <a href="https://shine.jcink.net/index.php?showuser=29444" title="hanie ©">
           <d>///</d></a>
        </div>

        <div class='textbox'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Happy birthday Lauz!</b> Fusce sagittis, lacus sed sodales pellentesque, dui nibh consequat quam, at faucibus nibh ligula vel nulla. Duis posuere bibendum felis, sed dignissim sapien feugiat ut.
            <p>

            <blockquote>
            <span class="sf sf-donut-o"></span>
            I got that sunshine in my pocket. Got that good soul in my feet. I feel that hot blood in my body when it drops. Ooh ~
            </blockquote>
            <p>

            Phasellus sapien augue, vulputate in blandit non, varius sit amet massa. Quisque tempus est non dapibus congue. In hac habitasse platea dictumst. Aliquam id metus pretium, interdum mi vitae, molestie neque. Fusce vestibulum augue vel ultrices convallis. Ut semper, turpis nec congue faucibus, nibh nisi placerat justo, quis efficitur metus leo ac risus.
            <p>
            Donec laoreet, enim non tincidunt sollicitudin, libero metus facilisis massa, sed lacinia dolor nibh nec diam. Maecenas hendrerit orci sit amet enim pellentesque, vitae pharetra quam vulputate. Curabitur pharetra nec justo non bibendum. Fusce vel aliquet urna, sed venenatis odio. Curabitur ac sem accumsan ante aliquam facilisis ut at felis. Curabitur suscipit metus vel augue porttitor, vel suscipit enim placerat.
        </div>

    </div>

    <div class='box'></div>

    <div class='boxb'>
      <div class='line2'></div>
      <div class='tag'># <a href="#">@tags</a> or notes goes here # </div>
    </div>

    <div class='icon'>
      <img src="https://media.giphy.com/media/kWqTfdz5RJBRe/giphy.gif">
    </div>

  </div>

</div>
</center>