kylo

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
             // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
            // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
        });
});















 @import url('https://fonts.googleapis.com/css?family=Dosis|Red+Hat+Display');

@font-face {
 font-family: "Warlock";
 src: url('https://dl.dropboxusercontent.com/s/wsp378rqsegxwu4/LemonMilk.otf?dl=0');
 format("truetype");
}

@font-face {
 font-family: "bakery";
 src: url('https://dl.dropboxusercontent.com/s/lnjs9z8olojzmpv/Skywalker_alt.ttf?');
 format("truetype");
}

 body {
 font-smooth: always;
 overflow: hidden;
 background: linear-gradient(#ffcccc 50%, #D8F7FF);
}

h1 {
 font-family: 'Warlock';
 font-size: 20px;
 margin-top: 0px;
 line-height: 25px;
font-weight: 400;
 color: #ffcccc;
 width: 100%;
 border-bottom: 1px solid;
 border-color: #ffcccc;
 border-image-slice: 1;
}

.detail {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 background-image: url("https://www.transparenttextures.com/patterns/fake-luxury.png");
}

.square {
 position: absolute;
 bottom: 0px;
 left: 50%;
 transform: translate(-50%, 0%);
 width: 500px;
 height: 500px;
 background-color: #fff;
clip-path: polygon(50% 0%, 20% 100%, 80% 100%);
}

.hallow {
 position: absolute;
 bottom: -50px;
 left: 50%;
 height:500px;
 width:400px;
 transform: translate(-50%, 0%);
 background-image: url('http://i.picpar.com/LLce.png');
 background-attachment: absolute;
 background-size: 400px;
 background-repeat: no-repeat;
 filter: drop-shadow(0px 0px 15px #ffcccc);
}

.box {
 position: absolute;
 bottom: 510px;
 left: 50%;
 transform: translate(-50%, 0%);
 height: 75px;
 width: 700px;
 background-color: #fff;
 border: 5px solid #D8F7FF;
}

.boxoverlay {
 position: absolute;
 bottom: 517px;
 left: 50%;
 transform: translate(-50%, 0%);
 height: 75px;
 width: 700px;
 z-index: 10;
}

.box2 {
 position: absolute;
 bottom: 0px;
 left: 50%;
 transform: translate(-180%, -17%);
 height: 400px;
 width: 200px;
 font-family: 'Red Hat Display';
 color: #ffcccc;
 background-color: #fff;
 border: 5px solid #D8F7FF;
 padding: 5px;
}

.box3 {
 position: absolute;
 bottom: 0px;
 left: 50%;
 transform: translate(80%, -17%);
 height: 400px;
 width: 200px;
 background-color: #fff;
 border: 5px solid #D8F7FF;
 padding: 5px;
}

.title {
 position: absolute;
 bottom: 550px;
 left: 50%;
 transform: translate(-43%, 14%);
 letter-spacing: 10;
 width: 420px;
 height: 150px;
 font-family: 'bakery';
 font-size: 100px;
 background: url('https://66.media.tumblr.com/d799d9ea1b62f5bad539402f7ca0034c/tumblr_oerd4uRGdm1rw3w54o1_500.gif');
 background-position: 0px 200px;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 filter: drop-shadow(0px 0px 15px #fff);
 z-index: 1;
}

.tooltip {
 display:none;
 position:absolute;
 max-width: 400px;
 border: 1px solid #00aaff;
 background: #fff;
 font-family: 'Red Hat Display';
 font-size: 10px;
 color: #212121;
 letter-spacing: 1px;
 border: 1px solid #ffcccc;
 padding: 10px;
 z-index: 14;
}


#friend {
height: 70px;
width: 150px;
border: solid #ffcccc 1px;
padding: 5px;
}

.credit {
 position:absolute;
 bottom:0px;
 left:5px;
 height:75px;
 width:75px;
 padding:0vh;
 opacity: .7;
 background-image: url('http://i.picpar.com/OfYd.png');
 background-position: center;
 background-size: cover
}


.pic{ border: 1px solid #555; width: 60px; height: 60px; margin-bottom: 10px; margin-top: 10px; margin-right: 2px; margin-left: 2px; border-radius: 360px;}


















<div class="detail"></div>
<div class="square"></div>
<div class="hallow"></div>

<div class="title">Hallow</div>

<div class="box"></div>
<div class="boxoverlay">
<center>

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Hallow"><img src="https://i.imgur.com/4cL4VuD.png"class="pic"title="Hallow"></a>

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Circus"><img src="https://i.imgur.com/XyYgdA8.png"class="pic"title="Soleil"></a>

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Clairvoyance"><img src="https://i.imgur.com/7VhMz1C.png"class="pic"title="Juniper"></a>

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Smitten"><img src="https://i.imgur.com/FXAE2Yx.png"class="pic"title="Mara"></a>

 <a target="_blank" href="https://roleplay.chat/profile.php?user=Arcanist"><img src="https://i.imgur.com/T2exwg6.png"class="pic"title="Ruby"></a>


</div>

<div class="box2">

<h1>H-Hewwo?</h1>

Hi! I'm Kylo, but more widely known as Hallow! I don't write as much as I used to, but I have a few accounts still floating around here and there. I'm always open to hearing writing ideas, though I may be a little rusty when it comes to longer posts. I'm working on getting better at coding, as I'm not very good currently. ♥
</div>

<div class="box3">

<h1>Friends</h1>

<center>
<a class="masterTooltip" title="you may be stupid, but i love you. even after everything that's happened, i still love you." href="https://roleplay.chat/profile.php?user=wife" target="_blank"><img id="friend" src="https://i.imgur.com/mbpjXX1.png" alt="" /></a>

<a class="masterTooltip" title="u mean a lot to me even if ur a bully" href="https://roleplay.chat/profile.php?user=WURM" target="_blank"><img id="friend" src="https://i.imgur.com/SCP1mJT.png" alt="" /></a>


<a class="masterTooltip" title="thank u for being my venting buddy" href="https://roleplay.chat/profile.php?user=Kazami" target="_blank"><img id="friend" src="https://i.imgur.com/D6DTBJm.png" alt="" /></a>

<a class="masterTooltip" title="one of the most chill people i know. mans just goes with the flow" href="https://roleplay.chat/profile.php?user=Zenith" target="_blank"><img id="friend" src="https://i.imgur.com/lqsHbZV.png" alt="" /></a>
</div>

<a target="_blank" href="https://roleplay.chat/profile.php?user=wife"><div class="credit"></div></a>