Caide

 <!-------IN THE SCRIPT SECTION ON THE PROFILE------->

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla|Open+Sans|Playfair+Display|Source+Sans+Pro|Roboto" rel="stylesheet">

<!-------IN THE STYLE SECTION ON THE PROFILE  - DO NOT USE <style> tag!------->

<style type="text/css">

#glenplayer02 {
   position:absolute;
   top:0;margin-top:0px;
   right:0;margin-right:10px;
   display:flex;
   z-index:99;
}
#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
   align-self:center;
   -webkit-align-self:center;
}

.music-controls {
   user-select:none;
   -webkit-user-select:none;
   cursor:pointer;
}

.playy, .pausee {color:#888;} /* color of play & pause buttons */

.playy {font-size:13px;}

.pausee {
   display:none;
   margin-right:1.5px;
}

.sonata {
   margin-left:10px;
   color:#888; /* color of music note symbol */
}

.labeltext {
   margin-left:8px;
   padding: 2px;
   border: 1px solid #222;
   font-family:'Comfortaa';
   font-size:12px;
   color:#888; /* color of song title */
}

.labeltext:hover {
   margin-left:8px;
   background:#888;
   padding: 2px;
   border: 1px solid #888;
   font-family:'Comfortaa';
   font-size:12px;
   color:#fff; /* color of song title */}


#cover{
top:50%;left:50%;
transform:translate(-50%, -50%);
position:absolute;
   background-image:url('https://i.pinimg.com/originals/17/92/d8/1792d89aedcb5f413354b6864b08dd12.jpg');
   background-color: #000;
   background-position:center center;
   background-size:300px;
   background-attachment: absolute;
   background-repeat:no-repeat;
   height:100%; width:100%;
      filter: blur(0px); opacity:1; transition: 1s; }

   body:hover #cover {filter: blur(10px); opacity:0; transition: 1.5s;}



/*---------------BASIC STYLING---------------*/

::-webkit-scrollbar-thumb:vertical {
    display:none;
}

::-webkit-scrollbar-thumb:horizontal {
    display:none;
}

::-webkit-scrollbar {
    display:none;
}

::selection {
    background-color:black;
    color: #fff;
}

a{
    text-decoration:none;
    color:red;
}

body{
    background-color:black;
    font-family:"open sans";
    font-size:10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
overflow: hidden;
height: 100%;}



/*---------------BOX STYLING---------------*/

#everything{
   top:50%;
    margin-top:-240px;
    left:50%;
    margin-left:-395px;
    position:fixed;
    filter: blur(10px); opacity:0; transition: 1s; }

   body:hover #everything {filter: blur(0px); opacity:1; transition: 1.9s;}

#whole{
    width:700px;
    height:400px;
    opacity:0.95 !important;
    position:absolute;
    margin-left:20px;
    margin-top:20px;
    border:20px solid #222;
}




/*---------------INNER RIGHT STYLING---------------*/

.innerwhole{
    width:380px;
    height:380px;
    background:#222;
    position:absolute;
    right:0px;
    padding:10px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



/*---------------INNER LEFT STYLING---------------*/

.profileimg{
    width:300px;
    height:400px;
    position:fixed;
}

.profileimg img{
    width:100%;
    height:100%;
}

.profileimg h1{
    position:absolute;
    margin:30px;
    bottom:0px;
    font-weight:900;
    color:white;
    font-family:"source sans pro";
    font-size:30px;
    font-style:italic;
    text-transform:uppercase;
}

.innerimg{
    width:260px;
    height:360px;
    border:20px solid black;
    position:fixed;
    z-index:10;
    opacity: 0.4;
background-image: url('https://pmcdeadline2.files.wordpress.com/2010/06/spartacus-andy-whitfield-1-788789.jpg');
background-repeat:no-repeat;
 background-position:top center;
 background-attachment: absolute;
 background-size:cover;
-webkit-transition: all 0.8s ease-in-out;
 -moz-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
-webkit-filter: grayscale(100%);
}

.innerimg:hover{
    width:260px;
    height:360px;
    border:20px solid black;
    position:fixed;
    z-index:10;
    opacity: 0.4;
background-image: url('https://i.pinimg.com/originals/17/92/d8/1792d89aedcb5f413354b6864b08dd12.jpg');
background-repeat:no-repeat;
 background-position:top center;
 background-attachment: absolute;
 background-size:cover;
-webkit-transition: all 0.8s ease-in-out;
 -moz-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;}

.innerimg:before{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    border:1px solid #666;
}



/*---------------INNER RIGHT HEADER STYLING---------------*/

.header{
    width:100%;
    height:25px;
}



.title {
    background:#222;
    text-align: center;
    font-family:"crimson text";
    text-transform:lowecase;
    font-weight:100;
    width:auto;
    padding-right:15px;
    padding-left:5px;
    font-size:30px;
    top:17.5px;
    margin:0px;
    line-height:10px;
    height:15px;
    color:red;
    position:absolute;
    font-style:italic;
}



/*---------------TOP SECTION RIGTHT QUOTE STYLING---------------*/

.topsec{
    width:367.5px;
    height:35px;
    position:absolute;
    margin:5px;
    padding:5px;
    padding-bottom:10px;
    margin-left:5px;
    margin-top:-5px;
    border-bottom: 3px solid #000;
}

.wrap {
    margin-top:-10px;
    float: right;
    margin-left: 10px;
    position:relative;}

 .wrapimg{
 border-radius: 50%;
    border:5px solid #000;
    height:90px;
    width:90px;
    margin-top:-70px;
    float: right;
    shape-outside: inset(1% round 50%);
    margin-left: 00px;
    position:relative;
background-image: url('http://www.legendarydeeds.com/wiki/images/c/c7/Andy-Gabriel-andy-whitfield-32460816-245-138.gif');
background-repeat:no-repeat;
 background-position:top center;
 background-attachment: absolute;
 background-size:cover;}

 .wrap2 {
    border:5px solid #000;
    height:80px;
    width:160px;
    margin-left: 0px;
    position:relative;
background-image: url('https://66.media.tumblr.com/tumblr_lxjw7umpo41r9pmwlo1_500.gif');
background-repeat:no-repeat;
 background-position:top center;
 background-attachment: absolute;
 background-size:cover;}

.topsec b{
    font-size:40px;
    margin-top:-2.5px;
    margin-left:-7.5px;
    color:red;
    position:absolute;
}

.topsec article{
    width:100%;
    height:auto;
    margin:10px 10px 10px 10px;
    text-align:center;
}

.topsec article p{
    height:100%;
    width:70%;
    text-align:center;
    font-size:13px;
    font-family:"crimson text";
    font-style:italic;
    line-height:12px;
    bottom:0px;
color:#666;}




/*---------------STATS SECTIONG RIGHT INNER STYLING---------------*/

.stats{
    width:170px;
    height:310px;
    padding:5px;
    margin-top:45px;
    border-right:0px solid #666;
    position:absolute;
    overflow:auto;
    line-height:6px;}

.stats h1{
    font-family:"karla";
    text-transform:uppercase;
    font-weight:100;
    color:white;
    background:red;
    text-align:center;
    font-size:13px;
    padding:2px;
    border-radius:0px;
    }

.stats p{
    font-size:10px;
    font-family:"roboto";
    border-bottom:0px solid #666;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
color: #666;}

.stats p:last-child{
    border-bottom: 0;
}

.stats span{
    float:right;
}

.stats b{
    font-size:9.5;
    font-family:"karla";
    text-transform:uppercase;
    color: red;}




/*---------------ABOUT SECTION RIGHT SIDE STYLING---------------*/

.about{
    position:absolute;
    width:200px;
    height:140px;
    right:0px;
    margin-top:90px;
    padding:5px;
    overflow:auto;
    color: #666;
    text-align: justify;
    border-bottom: 0px solid #666;
    line-height:10px;}

.about p{
        text-indent:0.9em;
}


.about h1{
    font-family:"karla";
    text-transform:uppercase;
    font-weight:100;
    color:white;
    background:red;
    text-align:center;
    font-size:13px;
    padding:2px;
    border-radius:0px;
}


.about ul, .about ol{
    margin-left:20px;
    padding-left:5px;
}

.ooc{
    position:absolute;
    width:200px;
    height:100px;
    right:0px;
    margin-top:250px;
    padding:5px;
    overflow:auto;
    text-align: Justify;
color: #666;
border-top: 2px solid #000;
line-height:10px;}

.ooc p{
    padding-top:0px;
    padding-bottom:2px;
    text-indent:0.9em;
color: #666;}


.ooc h1{
    font-family:"karla";
    text-transform:uppercase;
    font-weight:100;
    color:white;
    background:red;
    text-align:center;
    font-size:13px;
    padding:2px;
    border-radius:0px;
}

.ooc ul, .about ol{
    margin-left:10px;
    padding-left:5px;
color: #666;}

#profile{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}


</style>


<!---------------BODY------------------>
<div id="profile" oncontextmenu="return false;">

<div id="cover"></div>
<div id="everything">

<div id="whole">



<!---------------LEFT PROFILE------------------>

    <div class="profileimg">

       <div class="innerimg"></div>

       <h1>CAIDE</h1>


    </div>



<!---------------RIGHT PROFILE------------------>

    <div class="innerwhole">


<!---------------HEADER------------------>

        <div class="header">

            <div class="title">about caide.</div>


        </div>

<!---------------TOP SECTION QUOTE------------------>

        <div class="topsec">

        <div class="wrap"></div>
            <b>❝ </b>
            <article>
            <p> Be careful who you trust. The Devil was once an Angel.</p>


            </article><div class="wrapimg"></div>

        </div>

<!---------------STATISTICS SECTION------------------>

        <div class="stats">

            <h1>stats.</h1>

            <p><b>D.O.B:</b> <span>Ageless</span></p>
            <p><b>Gender:</b> <span>Male</span></p>
            <p><b>Height:</b> <span>6'0</span></p>
            <p><b>Weight:</b> <span>195</span></p>
            <p><b>Build:</b> <span>Lean | Athletic</span></p>
            <p><b>Hair | Eyes:</b> <span>Brown | Blue</span></p>
<p><b>Species:</b> <span>Fallen Angel</span></p>
<p><b>RANK:</b> <span>Prince of Underground</span></p>
<p><b>ORIENTATION:</b> <span>Hetero | Single<span></p>

       <p><div class="wrap2"></div>

       </div>



<!---------------ABOUT SECTION------------------>

        <div class="about">

          <h1>History</h1>
<p>There came a war. From that war came the first wave. Within that, he fell.<br>One of the first. <br><br>He followed the others, dividing up and spreading out into the different sections that reigned supreme below. Governed by one, though never seen. <br>He led armies to destroy and conquer the East, untold casualties among those that fought. He was victorious however, and his name is whispered among those in history, as far back as ancient scrolls first scribbled his title. </p>



<h1>Personality</h1>
<p>Ruthless, hard hearted, corrupt, dishonorable. Just a few traits that Caide possesses but he does not always let them show. He can be just as charismatic, charming and sensitive to those he deems deserving. However, he always has a hidden agenda, whatever it may happen to be.<br><br>Upon his return to middle ground, he keeps his true identity hidden, using the alias "Caide" as a means of performing what diabolicals acts he so chooses.<br><br>Intelligent yet scheming, something dark and sinister is always lurking in close proximity...</p>

        </div>


         <div class="ooc">

            <h1>OOC</h1>

<li>DM Friendly</li>
<li>IC is not OOC, know the difference</li>
<li>Do not DM with a starting post, but ideas are more than welcome</li>
<li>Para preferred</li>
<li>Room RP preferred</li>
<li>Story based writer, I don't apologize for this</li>
<li>Don't be a cunt, I won't be a dick</li>
<li>FC: Andy Whitfield

        </div>

    </div>


    <!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
 <div class="music-controls" onclick="songstart();">
 <div class="playy">►</div>
 <div class="pausee">❚❚</div>
 </div>
 <div class="sonata">♫</div>
 <div class="labeltext">TITLE</div>
</div><!--end music player-->

<audio id="tune" src="LINK" type="audio"></audio>
</div>
</div>