for Mari

[dohtml]
<! A GIFT TO MARI FROM HANIE !>

<link href="https://fonts.googleapis.com/css?family=Montseratt:800|Muli:400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#for-mari{
width: 500px;
height: 200px;
background: url(https://i.imgur.com/w4hAo6r.png);
position: relative;
margin: 0px auto;
overflow: hidden;
outline: 0.5px solid #ccc;
outline-offset: 2px;
}

#for-mari ::-webkit-scrollbar {
width: 2px;
}

#for-mari ::-webkit-scrollbar-track {
background: #fff;
border: 0.5px solid #eee;
}

#for-mari ::-webkit-scrollbar-thumb {
background: #cfcfcf;
}

#for-mari .base{
position: absolute;
right: 0px;
width: 364px;
height: 200px;
background: #222;
transition: 1s;
opacity: 0;
}
#for-mari:hover .base{
opacity: 1;
}

#for-mari .title{
font-family: 'Montseratt', sans-serif;
font-weight: 800;
font-size: 15px;
position: absolute;
top: -28px;
left: 0px;
width: 270px;
height: 30px;
background: transparent;
color: #eee;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
}
#for-mari t1{
color: #EBAA8A;
}

#for-mari .foreground{
position: absolute;
top: 55px;
right: 66px;
width: 270px;
height: 115px;
background: #ddd;
transition-delay: 1s;
transition-duration: 1s;
}

#for-mari .avatar{
position: absolute;
bottom: 18px;
right: -40px;
width: 60px;
height: 60px;
border: 9px solid #EBAA8A;
outline: 1px solid #eee;
background: url(https://78.media.tumblr.com/43515133d7c4df05c6e6013363bdcffc/tumblr_inline_nyryt15yfn1qlt39u_250.gif);
background-size: 60px;
}

#for-mari .textbox{
font-family: 'Muli', sans-serif;
font-weight: 400;
font-size: 9px;
color: #000;
line-height: 10px;
position: absolute;
top: 14px;
left: 20px;
width: 150px;
height: 50px;
border: 18px solid #fff;
outline: 1px solid #ccc;
overflow: auto;
padding-right: 5px;
text-align: justify;
background: #fff;
}

#for-mari .navbase{
position: absolute;
top: 0px;
left: -140px;
height: 200px;
width: 100px;
background: #ddd;
padding-left: 18px;
padding-right: 18px;
transition: 1s;
}
#for-mari:hover .navbase{
left: 0px;
}

#for-mari .nav{
font-family: 'Montseratt', sans-serif;
font-size: 8px;
font-weight: 800;
text-transform: uppercase;
background: #222;
width: 80px;
height: 19px;
padding-top: 7px;
margin-bottom: 3.5px;
transition: 0.5s;
border: 0.5px solid #222;
line-height: 10px;
}

#for-mari .nav:hover{
background: #fff;
border: 0.5px solid #ccc;
}

#for-mari .nav2{
background: #ddd;
width: 80px;
height: 19px;
padding-top: 6px;
line-height: 10px;
}

#for-mari .fa{
color: #EBAA8A;
margin-right: 5px;
font-size: 10px;
}

#for-mari a{
text-decoration: none;
color: #ccc;
transition: 0.5s;
line-height: 10px;
}
#for-mari a:hover{
color: #222;
}

</style>

<center>
<div id="for-mari">

  <div class="navbase"><br>
      <div class="nav"><a href="YOURLINKHERE"><i class="fa fa-gift"></i>xmas</a></div>
      <div class="nav"><a href="YOURLINKHERE"><i class="fa fa-code"></i>code</a></div>
      <div class="nav"><a href="YOURLINKHERE"><i class="fa fa-bookmark"></i>tracker</a></div>
      <div class="nav"><a href="YOURLINKHERE"><i class="fa fa-trophy"></i>hof</a></div>
      <div class="nav"><a href="YOURLINKHERE"><i class="fa fa-deviantart"></i>deviant</a></div>
      <div class="nav2"><a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©"><i class="fa fa-heart-o" style="color:#EBAA8A;font-size:8px;"></i></a></div>
  </div>

  <div class="base">

      <div class="foreground">
          <div class="title"><t1>young</t1> volcanoes</div>

          <div class="textbox">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac scelerisque erat, vitae suscipit elit. Praesent commodo mi et augue tempor accumsan. Praesent a nulla sem. Donec ultricies hendrerit nisl at iaculis. Sed lacus quam, ornare a rhoncus ac, volutpat vitae lorem. Phasellus porttitor gravida varius. Etiam rhoncus augue in ex elementum tincidunt. Proin semper ipsum id turpis consectetur, eget dictum ligula mollis. Praesent non quam eget lorem rutrum commodo et a nulla. Nulla varius consequat risus quis viverra.
          </div>

          <div class="avatar"></div>
      </div>

  </div>

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