Monday Blues (thread)

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>
#mondayblues{
  margin: 0px auto;
  position: relative;
  border: 0.5px solid #3152A3;
  width: 500px;
  height: 500px;
  background: #172E88;
  overflow: hidden;
  border-radius: 10px;
}

#mondayblues ::-webkit-scrollbar {
  width: 1px;
  border-radius: 50px;
}

#mondayblues ::-webkit-scrollbar-track {
  background: #F0F1F9;
}

#mondayblues ::-webkit-scrollbar-thumb {
  background: #3152A3;
  border: #3152A3;
}

#mondayblues .bottom{
  border-top: 5px solid #809ED0;
  width: 500px;
  height: 65px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

#mondayblues .left{
  border-left: 5px solid #3152A3;
  width: 7px;
  height: 500px;
  position: absolute;
  left: 60px;
  bottom: 0px;
}

#mondayblues .box{
  width: 500px;
  height: 320px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #fff;
}

#mondayblues .icon{
  width: 90px;
  height: 90px;
  position: absolute;
  left: 106px;
  top: 58px;
}
#mondayblues .icon img{
  width: 50px;
  height: 50px;
  border: 5px solid #B8CCE1;
  padding: 1px;
  border-radius: 5px 0px 0px 5px;
}

#mondayblues .textbox{
  overflow: auto;
  width: 314px;
  height: 160px;
  position: absolute;
  right: 56px;
  bottom: 117px;
  font-family: 'Open Sans', san-serif;
  font-size: 9px;
  line-height: 13px;
  letter-spacing: 0px;
  text-align: justify;
  padding-right: 10px;
  color: #000;
}
#mondayblues .textbox h{
  background: #FFFB4B;
}

#mondayblues .tag{
  background: #fff;
  width: 500px;
  height: 30px;
  position: absolute;
  right: 55px;
  bottom: 15px;
  font-family: 'Courier New';
  font-size: 7px;
  letter-spacing: 2px;
  line-height: 9px;
  color: #fff;
  text-align: right;

  text-transform: uppercase;
}

#mondayblues .tag a{
  color: #fff;
}

#mondayblues .tag t{
  background: #172E88;
  padding: 5px 10px;
  border-radius: 3px;
}
#mondayblues .tag b{
  background: #172E88;
  letter-spacing: 1px;
  color: #FFFB00;
  font-size: 7.5px;
}

#mondayblues .title{
  width: 253px;
  height: 52.5px;
  background: #fff;
  position: absolute;
  right: 61px;
  top: 63px;
  outline: 1px solid #B8CCE1;
  outline-offset: 4px;
  color: #172E88;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-family: 'Courier New';
  font-size: 10.5px;
  line-height: 52px;
  font-weight: bold;
}
#mondayblues .title b{
  background: #172E88;
  padding: 4px 7px 4px 14px;
  color: #FFFB00;
  border-radius: 3px;
}

</style>

<center>
<div id='mondayblues'>

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

  <div class='title'><b>Monday</b> Blues</div>

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

  <div class='textbox'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in quam accumsan massa gravida aliquam euismod sed ex. <h>Duis congue ex vitae efficitur viverra. Praesent ultrices dui a lectus dictum molestie. Cras consectetur aliquam felis, vel commodo augue mattis nec</h>. In ultricies mi vel arcu porta egestas. Sed dictum luctus sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu dui lacus.
    <p>
    Vestibulum laoreet ex non ipsum interdum, non consequat mauris pharetra. Quisque ipsum ante, tempor ut tincidunt eu, mollis nec ante. Quisque in est vitae sapien sollicitudin blandit. Ut erat nisi, rutrum ac tincidunt et, efficitur ultricies lacus. Curabitur vel semper tellus, eu maximus nisl. <h>Maecenas at mi augue. Fusce mollis aliquet turpis id lacinia. Ut quis rutrum mauris, vitae venenatis metus</h>.
    <p>
    Pellentesque viverra sollicitudin leo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam malesuada, est quis efficitur tincidunt, nibh nulla efficitur purus, bibendum condimentum eros mauris eu elit. Donec non diam vitae sem euismod mollis. Ut semper interdum nisi, vel hendrerit diam laoreet eu. Nullam euismod, turpis sit amet commodo tempus, risus dolor hendrerit est, quis vulputate urna odio vitae odio. Mauris tristique venenatis quam, ut dapibus augue fringilla et. Nulla varius, tellus sed luctus commodo, massa tortor facilisis erat, vitae rutrum tortor dui suscipit arcu. Phasellus gravida velit in scelerisque feugiat.
    <p>
    Duis et mauris a metus imperdiet porttitor non et eros. In hac habitasse platea dictumst. Etiam quis sapien non arcu ullamcorper condimentum. Quisque magna magna, fringilla et volutpat eget, porttitor vel mauris. Morbi facilisis elit nisl. Donec rutrum ultrices est sed dictum. Donec posuere, orci in hendrerit aliquet, ipsum velit maximus nibh, at rutrum dui quam ut est. Aliquam congue vestibulum consectetur. Nam mollis turpis lacus, nec facilisis justo cursus eget. Nullam iaculis malesuada nisl non accumsan. Nunc eleifend purus in ipsum molestie, id pharetra dolor maximus.
  </div>

  <div class='tag'>
    <t><b>tags:</b> ##</t> <t><b>notes:</b> bla bla</t>
  </div>

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

  <div class='bottom'></div>
  <div class='left'></div>

</div>
</center>