Young God (thread)

[dohtml]
<! A TEMPLATE BY HANIE(ORPHEUS) !>

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

<style>
#young-god{
width: 350px;
height: 600px;
background: #110706;
position: relative;
margin: 0px auto;
overflow: hidden;
border: 20px solid #fff;
outline: 1px solid #ccc;
}

#young-god ::-webkit-scrollbar {
width: 1px;
}

#young-god ::-webkit-scrollbar-track {
background: #eee;
border: 0.5px solid #eee;
}

#young-god ::-webkit-scrollbar-thumb {
background: #F6DC92;
border: 0.5px solid #F6DC92;
}

#young-god .tags{
position: absolute;
top: 38px;
left: -210px;
width: 205px;
height: 50px;
background: #110706;
text-align: left;
transition-delay: 1s;
transition-duration: 1s;
line-height: 11px;
}
#young-god:hover .tags{
left: 115px;
}
#young-god:not(:hover) .tags{
transition-duration: 1s;
transition-delay: 0s;
}

#young-god t{
font-family: 'Montseratt', sans-serif;
font-size: 12px;
font-weight: 800;
color: #F6DC92;
letter-spacing: 0.5px;
text-transform: uppercase;
}

#young-god tg{
font-family: 'Muli', sans-serif;
font-weight: 400;
font-size: 7px;
letter-spacing: 0.5px;
color: #eee;
width: 190px;
border-top: 0.5px solid #555;
padding-top: 5px;
}

#young-god .avatar{
position: absolute;
top: -5px;
left: -75px;
width: 50px;
height: 50px;
background: url(https://i.imgur.com/8IIABSM.gif);
background-size: 50px;
outline: 8px solid #fff;
outline-offset: 1px;
transition: 1s;
}

#young-god b{
color: #EC5870;
font-size: 10px;
}

#young-god bb{
color: #F1BD8B;
font-size: 10px;
font-weight: bold;
}

#young-god .header{
position: absolute;
top: 0px;
left: 0px;
width: 350px;
height: 120px;
background: transparent;
transition: 0.8s;
text-align: right;
}
#young-god:hover .header{
opacity: 0;
}
#young-god:not(:hover) .header{
transition-duration: 0.8s;
transition-delay: 1s;
}

#young-god .title{
position: absolute;
top: 33px;
right: 45px;
background: transparent;
width: 330px;
height: 80px;
line-height: 40px;
}

#young-god y{
font-family: 'Montseratt', sans-serif;
color: #EC5870;
font-size: 26px;
font-weight: 800;
letter-spacing: -1px;
}

#young-god g{
font-family: 'Montseratt', sans-serif;
color: #F1BD8B;
font-size: 26px;
font-weight: 800;
letter-spacing: -1px;
}

#young-god .symbol{
position: absolute;
top: 33px;
left: 17px;
width: 330px;
height: 80px;
line-height: 10px;
}

#young-god .textbase{
position: absolute;
bottom: 0px;
left: 0px;
width: 350px;
height: 480px;
background: #eee;
}

#young-god .textbox{
font-family: 'Muli', sans-serif;
font-weight: 400;
line-height: 12.5px;
font-size: 9px;
position: absolute;
bottom: 30px;
left: 30px;
width: 220px;
height: 360px;
background: #fff;
border: 30px solid #fff;
outline: 1px solid #ccc;
text-align: justify;
overflow: auto;
padding-right: 10px;
color: #110706;
}

#young-god .cred a{
position: absolute;
bottom: 7px;
font-family: calibri;
margin-left: 5px;
text-decoration: none;
font-size: 6px;
color: #fff;
}

#young-god .line{
position: absolute;
top: 55px;
left: 45px;
width: 110px;
height: 10px;
background: #110706;
border-top: 0.5px solid #EC5870;
}

</style>

<center>
<div id="young-god">

<div class='textbase'></div>
<div class='textbox'>
  <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien.</b> Mauris sit amet ligula elementum, consequat ligula id, blandit velit. Donec at urna ut augue volutpat tincidunt at quis ex. Morbi odio ex, placerat vitae dui vitae, luctus tristique arcu. Aenean vitae lobortis nisl, sed commodo ex. Fusce sollicitudin, massa ac rhoncus varius, tellus turpis interdum magna, nec malesuada metus nisi non mauris. Suspendisse cursus massa in ornare varius. Integer et rutrum ante. Vivamus et purus rhoncus, tempus nisi ut, convallis ante. Praesent pulvinar quam vitae neque tincidunt semper. Cras sed libero elit. Proin hendrerit venenatis lorem, ac efficitur enim malesuada id.
  <br><br>
  <bb>Aliquam sed pellentesque magna, sed consequat ligula. Phasellus vulputate libero at ligula convallis aliquam.</bb> Cras auctor rutrum pulvinar. Ut pharetra eget lacus sit amet porttitor. Praesent ut arcu sed est hendrerit efficitur ac vehicula elit. In hac habitasse platea dictumst. Donec vulputate pretium dui eget porta. Vestibulum nec efficitur lacus. Suspendisse luctus metus tortor, vitae scelerisque purus vulputate vel.
  <br><br>
  In hendrerit nisl ex, in aliquam ligula viverra in. Aliquam a interdum erat. Fusce risus neque, sollicitudin a ornare eget, varius a arcu. Fusce et pretium mauris, id gravida nulla. Nulla eget sagittis justo. Suspendisse hendrerit facilisis pretium. Quisque ante urna, semper eget augue eu, tristique interdum risus. Vivamus auctor enim augue, eu dignissim erat tincidunt eget. Duis eu nisi scelerisque, rhoncus purus quis, ullamcorper velit. Nulla cursus enim orci, eu fringilla lorem eleifend sit amet. Morbi venenatis nibh nunc, et efficitur sapien hendrerit sit amet. Nunc in nisi elit. Sed vulputate sollicitudin dictum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien. Mauris sit amet ligula elementum, consequat ligula id, blandit velit. Donec at urna ut augue volutpat tincidunt at quis ex. Morbi odio ex, placerat vitae dui vitae, luctus tristique arcu. Aenean vitae lobortis nisl, sed commodo ex. Fusce sollicitudin, massa ac rhoncus varius, tellus turpis interdum magna, nec malesuada metus nisi non mauris. Suspendisse cursus massa in ornare varius. Integer et rutrum ante. Vivamus et purus rhoncus, tempus nisi ut, convallis ante. Praesent pulvinar quam vitae neque tincidunt semper. Cras sed libero elit. Proin hendrerit venenatis lorem, ac efficitur enim malesuada id.
  <br><br>
  Aliquam sed pellentesque magna, sed consequat ligula. Phasellus vulputate libero at ligula convallis aliquam. Cras auctor rutrum pulvinar. Ut pharetra eget lacus sit amet porttitor. Praesent ut arcu sed est hendrerit efficitur ac vehicula elit. In hac habitasse platea dictumst. Donec vulputate pretium dui eget porta. Vestibulum nec efficitur lacus. Suspendisse luctus metus tortor, vitae scelerisque purus vulputate vel.
</div>

<div class='tags'>
     <div class='avatar'></div>

    <t>tags</t><br><br>
    <tg>##put some tags here #make it short</tg>
</div>

 <div class='header'>
     <div class='line'></div>
     <div class='title'><y>young</y> <g>god</g></div>
 </div>

 <div class='cred'><a href="https://shadowplayers.jcink.net/index.php?showuser=95" title='hanie ©'>
    <i class="fa fa-chain"></i></a></div>

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