004. Villain-esque.

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Karla:300,300i,400,400i,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Spectral:300,300i,400,400i,600,700,700i');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900');
@import url('https://fonts.googleapis.com/css2?family=Changa:wght@300;400;500;600;700&family=Inter:wght@500;600;800&family=Vollkorn:ital,wght@0,400;0,700;1,400&display=swap');

/*-- code by juice, please don't steal or copy. leave credit. --*/

body, a, a:hover {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=84490), auto;}

body{
background: linear-gradient(to bottom,#3bbfd4,#f0edee); /*-- change colours to fit your color scheme. first color hex is the top color. --*/
}
::-webkit-scrollbar-thumb:vertical{
width: 0px;
background-color:  transparent;
}
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
}
::selection {
background: #000;
color: #fff;
}
::-moz-selection {
background: #000;
color: #fff;
}

.name{
position: fixed; margin: auto;
top: -100; left: 0; right: 0; bottom: 0;
height: 200px; width: 1200px;
font-family: inter;
font-size: 200px;
line-height: 200px;
text-align: center;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -5px;
color: transparent;
/*-- change the text-shadow colors to the text-shadow you want. --*/
text-shadow: -1px 1px 0px #f3f1f1,
-1px -1px 0px #f3f1f1,
1px -1px 0px #f3f1f1,
1px 1px 0px #f3f1f1;
}
.name2{
position: fixed; margin: auto;
top: -100; left: 0; right: 0; bottom: 0;
height: 200px; width: 1200px;
font-family: inter;
font-size: 200px;
line-height: 200px;
text-align: center;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -5px;
color: #999;
-webkit-text-fill-color: transparent;
background: url('http://i.picpar.com/S97e.jpg');
background-repeat: repeat-x;
background-position: 315px -325px; /*- change as needed. 340px is horizontal positioning, -325px is vertical positioning. -*/
background-size: 700px; /*- change as needed. -*/
-webkit-background-clip: text;
}
.bar{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: -100;
height: 15px; width: 550px;
background: #f3f1f1;  /*-- quote/stat bar background color. --*/
border-radius: 2px;
}
.small1{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: -100px;
height: 15px; width: 500px;
line-height: 15px;
font-family: inter;
font-size: 8px;
font-weight: 700;
color: #111;  /*-- quote text color. --*/
text-transform: uppercase;
text-align: center;
opacity: 0; visibility: hidden;
transition: .6s linear;
}
body:hover .small1{
opacity: 1; visibility: visible;
transition: .6s linear;
}
.small2{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: -100px;
height: 15px; width: 500px;
line-height: 15px;
font-family: inter;
font-size: 8px;
font-weight: 700;
color: #111; /*-- stat text color. --*/
text-transform: uppercase;
text-align: center;
opacity: 1; visibility: visible;
transition: .6s linear;
}
body:hover .small2{
opacity: 0; visibility: hidden;
transition: .6s linear;
}
.click{
position: fixed; margin: auto;
top: 0; left: 0; right: 0; bottom: -175px;
height: 15px; width: 16px;
border: 1px solid #fff;
line-height: 11px;
text-align: center;
font-family: inter;
font-size: 23px;
color: #fff;
font-weight: 100;
}
.tab{
position: fixed; margin: auto;
top: 0; left: 0;
height: 100%; width: 100%;
background: rgba(366,366,366,.5);
opacity: 0; visibility: hidden;
transition: .6s linear;
}
.tab:target{
opacity: 1; visibility: visible;
transition: .6s linear;
}
.center{
position: fixed; margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
height: 400px; width: 600px;
background: #fff; /*-- extra info box background color --*/
}
.centertitle{
float: left;
margin-top: 25px;
margin-left: 25px;
height: 50px; width: 550px;
line-height: 50px;
font-size: 45px;
font-family: roboto;
font-weight: 900;
font-style: italic;
color: #111; /*-- extra info title text color --*/
border-bottom: 3px solid #111; /*-- title border color --*/
text-transform: uppercase;
text-align: left;
letter-spacing: -3px;
}
.clear{
float: right;
margin-right: 10px;
margin-top: -70px;
height: 25px; width: 25px;
background: #111;
color: #fff;
font-family: roboto;
font-size: 25px;
line-height: 21px;
display: inline-block;
margin-left: 5px;
font-weight: 900;
text-align: center;
}
.text1{
position: fixed; margin: auto;
top: 0; left: -350; right: 0; bottom: -75;
height: 275px; width: 200px;
line-height: 15px;
font-family: karla;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0px;
text-align: justify;
overflow: auto;
}
.text1 p{
border-bottom: 1px solid #111;
margin-bottom: 5px;
padding-bottom: 10px;
}
.text1 h1{
display: inline-block;
float: left;
margin-top: 9px;
margin-bottom: 5px;
margin-left: 15px; margin-right: 15px;
border-bottom: 1px solid #111;
font-family: roboto;
font-size: 12px;
font-weight: 900;
font-style: italic;
letter-spacing: 0px;
padding-bottom: 2px;
}
.text1 span.stat{
display: -webkit-box;
line-height: 18px;
padding-bottom: 2px;
margin-bottom: 2px;
border-bottom: 1px solid #111;
text-align: center;
height: 14px;
font-weight: 900;
}
.text1 span.stat i{
font-family: spectral;
font-style: italic;
font-weight: 600;
font-size: 10px;
text-transform: lowercase;
color: #5f5f5f;
}
.text1 span.ooc{
height: 10px;
padding: 2px;
background: #111;
line-height: 10px;
font-weight: 900;
text-align: center;
display: inline-block;
float: left;
margin: 10px;
margin-bottom: 0px;
color: #fff;
}
.text1 a.friend{
display: -webkit-box;
line-height: 10px;
background: #111;
border-radius: 2px;
margin-bottom: 2px;
height: 10px;
padding: 2px;
font-weight: 100;
color: #fff;
text-decoration: none;
transition: .7s linear;
}
.text1 a.friend:hover{
background: #fff;
color: #111;
transition: .7s linear;
}
.text1 a{
display: inline-block;
text-decoration: none;
color: #111;
border-bottom: 1px solid #111;
padding-bottom: 2px;
margin-bottom: 2px;
}
.text1 a:hover{
color: #999;
}
.text1 i{
font-family: spectral;
font-style: italic;
font-weight: 600;
font-size: 10px;
text-transform: lowercase;
color: #5f5f5f;
}
.text1 b{
font-size: 12px;
font-weight: 900;
color: #121212;
}

.icon{
position: fixed; margin: auto;
top: 0; left: 0; right: -225px; bottom: -75px;
height: 275px; width: 325px;
background: url('http://i.picpar.com/S97e.jpg');
background-repeat: repeat-x;
background-position: 0px -25px; /*- change as needed. 0px is horizontal positioning, -50px is vertical positioning. -*/
background-size: 325px; /*- change as needed. -*/
}


</style>


<div class="name">hero</div>
<div class="name2">hero</div>
<div class="bar"></div>
<div class="small2">
godsent.
</div>
<div class="small1">
name / age / occupation
</div>
<a href="#open"><div class="click">+</div></a>

<div class="tab" id="open">
<div class="center">
<div class="centertitle">but not your savior</div>
<a href="#"><div class="clear">x</div></a>
</div>
<div class="text1">
<h1 style="margin-top: 20px;">stats</h1>
<p>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>
<span class="stat"><i>stat</i>, info here</span>

<br>
<b>bold.</b> <i>italic.</i> <a>link.</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat. Vestibulum pulvinar mauris eu libero faucibus, non dictum metus elementum. Curabitur mauris eros, ullamcorper ac justo in, tempor finibus massa.

</p>


<h1>pals</h1>
<p>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
<a class="friend">name here.</a>
</p>

<h1>info</h1>
<p>Nullam dignissim rhoncus ligula, a fringilla lectus luctus at. Phasellus ligula tortor, tempus ac ante id, tincidunt tincidunt lorem. In viverra fermentum est quis imperdiet. Cras fermentum odio in lectus mollis, eget ornare ipsum varius. Quisque varius volutpat congue. Sed vitae nibh placerat, luctus augue accumsan, vulputate lectus. Sed risus ligula, vehicula vel nulla ut, auctor porta est.</p>

<h1>ooc</h1>
<p>
<span class="ooc">01</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat.<br>
<span class="ooc">02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat.<br>
<span class="ooc">03</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat.<br>
<span class="ooc">04</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat.<br>
<span class="ooc">05</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sed ante sit amet placerat.<br>
<span class="ooc">!!</span> Code by Juice. Don't steal, or remove credit.
</p>
</div>

<div class="icon"></div>
</div>