Next To Me (sig)

<link href="https://fonts.googleapis.com/css?family=Cardo:400,700" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#nexttome-sig{
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  width: 500px;
  height: 200px;
  background: url(https://i.imgur.com/nQoyIEK.png);
  outline: 1px solid #000;
  border: 2px solid #fff;
}

#nexttome-sig .bg{
  position: relative;
  width: 500px;
  height: 200px;
  background: rgb(217,163,64);
  background: linear-gradient(0deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(184,129,8,1) 100%);
  border: 0px solid #000;
  opacity: 0;
  transition: 0.5s ease-in 0.5s;
}

#nexttome-sig:hover .bg{
  opacity: 0.95;
  transition: 0.3s ease-in 0s;
}

#nexttome-sig .left-bar{
  position: absolute;
  width: 345px;
  height: 200px;
  bottom: -100px;
  left: 0px;
  transition: 0.5s ease-in 0s;
  opacity: 0;
}
#nexttome-sig:hover .left-bar{
  bottom: 0px;
  transition: 0.5s ease-in 0.4s;
  opacity: 1;
}

#nexttome-sig .right-bar{
  position: absolute;
  width: 155px;
  height: 200px;
  top: 0px;
  right: -100px;
  transition: 0.5s ease-in 0s;
  opacity: 0;
}
#nexttome-sig:hover .right-bar{
  right: 0px;
  transition: 0.5s ease-in 0.4s;
  opacity: 1;
}

#nexttome-sig .sidebar{
  position: absolute;
  width: 155px;
  height: 200px;
  top: 0px;
  right: 0px;
  border-left: 0.5px solid #000;
  overflow: hidden;
}

#nexttome-sig .links{
  position: absolute;
  width: 35px;
  height: 102px;
  top: 27px;
  right: 155px;
  background: #000000;
  border: 0.5px solid #000;
}

#nexttome-sig .links a{
  cursor: crosshair;
  text-decoration: none;
  font-size: 12px;
  color: #c04704;
  line-height: 10px;
}
#nexttome-sig .links a:hover{
  color: #cccccc;
}

#nexttome-sig .names{
  position: absolute;
  top: 27px;
  left: 45px;
  background: transparent;
  border-top: 0.5px solid #000;
  border-bottom: 0.5px solid #000;
  font-family: 'Cardo', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 9px;
  padding: 7px 2px 5px 2px;
  letter-spacing: 0px;
}

#nexttome-sig .title{
  position: absolute;
  top: 65px;
  left: 45px;
  width: 230px;
  background: transparent;
  font-family: 'Cardo', serif;
  font-size: 16.px;
  font-weight: 700;
  line-height: 21px;
  text-align: left;
  letter-spacing: -0.2px;
}

#nexttome-sig .textbox{
  position: absolute;
  top: 132px;
  left: 45px;
  width: 212px;
  height: 42px;
  overflow: auto;
  background: transparent;
  font-family: 'Cardo', serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: justify;
  padding-right: 10px;
  letter-spacing: -0.1px;
}

#nexttome-sig ::-webkit-scrollbar{
  width: 5px;
}

#nexttome-sig ::-webkit-scrollbar-track{
  border: 0.5px solid #1D1602;
  background: transparent;
}

#nexttome-sig ::-webkit-scrollbar-thumb{
  border: 0.5px solid #1D1602;
  background: #000000;
}

#nexttome-sig .icon{
  position: absolute;
  width: 85px;
  height: 85px;
  bottom: 23px;
  right: 35px;
  border: 0.5px solid #000;
  border-radius: 100px;
  background: rgb(217,163,64);
  background: linear-gradient(0deg, rgba(217,163,64,1) 0%, rgba(199,12,0,1) 0%, rgba(184,129,8,1) 100%);
}

#nexttome-sig .icon img{
  position: relative;
  width: 72px;
  height: 72px;
  margin: 6px;
  border: 0.8px solid #000;
  border-radius: 100px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#nexttome-sig .pattern{
  position: absolute;
  width: 185px;
  height: 300px;
  top: -32px;
  right: -50px;
  transform: rotate(6deg);
}

#nexttome-sig .pattern .sf{
  font-size: 264px;
  -webkit-text-fill-color: #000000;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: black;
}

</style>
<center>
<div id="nexttome-sig">

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

  <div class="left-bar">
      <div class="names">.Erenae .Perceus</div>

      <div class="title">
        Who needs to go to sleep when
        I got you next to me? <br>
        -
      </div>

      <div class="textbox">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique elit quis lacus luctus pretium. Nunc arcu nibh, vestibulum dictum quam ultricies, laoreet pretium nisl. Curabitur semper consequat massa a tempus.
      </div>
  </div>

  <div class="right-bar">
      <div class="links"><br>
        <a href="#"><span class="sf sf-pinterest" title="pinterest"></span></a><p>
        <a href="#"><span class="sf sf-deviantart" title="deviantart"></span></a><p>
        <a href="#"><span class="sf sf-wattpad" title="wattpad"></span></a>
      </div>

      <div class="sidebar">
          <div class="pattern">
            <span class="sf sf-diamond"></span>
          </div>

          <div class="icon">
            <img src="https://i.imgur.com/jSFlgT3.jpg?1">
          </div>
      </div>
  </div>


</div>
</center>