naomi

function tooltip() {
    var title = $(this).attr("title");
    $(this).removeAttr("title");

    this.TooltipMessage = $("<div/>", {class: "tooltipMessage", style: "display: none;"});
    this.TooltipMessage.html("<span>" + title + "</span>");
    $("body").append(this.TooltipMessage);


    if ($(this).hasClass("tooltipLeft")) {
        this.TooltipMessage.addClass("left");
    }

    $(this).hover(tooltipFadeIn, tooltipFadeOut);
    $(this).mousemove(tooltipMousemove);
}

function tooltipFadeIn() {
    this.TooltipMessage.stop(true, false).fadeIn();
}

function tooltipFadeOut() {
    this.TooltipMessage.stop(true, false).fadeOut();
}

function tooltipMousemove(e) {
    var offset = {
        left: e.pageX,
        top: e.pageY + 5
    };

    if (this.TooltipMessage.hasClass("left")) {
        offset.left -= this.TooltipMessage.width() + 10;
    } else {
        offset.left -= 100;

    }
    this.TooltipMessage.offset(offset);
}

$(function (e) {
    $(".tooltip").each(tooltip);
});

 window.onload = function() {
    document.addEventListener("contextmenu", function(e){
      e.preventDefault();
    }, false);
    document.addEventListener("keydown", function(e) {
    //document.onkeydown = function(e) {
      // "I" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        disabledEvent(e);
      }
      // "J" key
      if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
        disabledEvent(e);
      }
      // "S" key + macOS
      if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
        disabledEvent(e);
      }
      // "U" key
      if (e.ctrlKey && e.keyCode == 85) {
        disabledEvent(e);
      }
      // "F12" key
      if (event.keyCode == 123) {
        disabledEvent(e);
      }
    }, false);
    function disabledEvent(e){
      if (e.stopPropagation){
        e.stopPropagation();
      } else if (window.event){
        window.event.cancelBubble = true;
      }
      e.preventDefault();
      return false;
    }};

$("img").mousedown(function(){
    return false;
});




----------------------------------------------------------------------------------------------------------------


<style>
@import url('https://fonts.googleapis.com/css?family=Cookie|Pacifico');
@import url('https://fonts.googleapis.com/css?family=Mukta|Overpass|Quicksand|Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Gamja+Flower|Jua|Muli|Tenali+Ramakrishna');

body{
background-image:url('https://www.transparenttextures.com/patterns/noisy-grid.png');
background-color: #FC94C6;
background-repeat:repeat;
}

::-webkit-scrollbar {display: none}

h1{
color:#0028BF;
font-family: 'Pacifico', sans-serif;
}

hr {
	border:0;
	margin-bottom:5px;
	width:90%;
	height:1px;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#000;
	}
a{
color:#FFF
 filter: drop-shadow(.1vh .1vh .1vh #FF80D4);
text-decoration: none;

}

b{
color:#FFF;
 filter: drop-shadow(.1vh .1vh .1vh #FF80D4);
}

.hlw img {
top: 20vh;
left: 10vh;
 position: absolute;
 height: 80vh;
width:57vh;
overflow:auto;
 filter: drop-shadow(.5vh .5vh .5vh #FF99CB);
z-index: 99;
 }

.warn img {
top: 40vh;
left: 160vh;
 position: absolute;
 height: 12vh;
width:23vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
 }

.aaa img {
top: 82vh;
left: 160vh;
 position: absolute;
 height: 12vh;
width:23vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
z-index:99;
 }

.bbb img {
top: 60vh;
left: 160vh;
 position: absolute;
 height: 12vh;
width:23vh;
overflow:auto;
border-style: solid;
border-color:#FFF;
z-index:99;
 }

.box {
	position:absolute;
	background-color:#FFC4E1;
	height:55vh;
	width:130vh;
	left:35vh;
	top: 40vh;
border-style:solid
border-color: #EB9FB1;
opacity:0.5;
	}

.stats {
	position:absolute;
	padding: 1px;
	font-family: 'Text';
	font-size:20px;
	color:#FE80BD;
	text-align:justify;
	line-height:42px;
	height:50vh;
	width:38vh;
	left:65vh;
	top: 42vh;
overflow: auto;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
	}

.box2 {
	position:absolute;
	background-color:#FFC4E1;
	height:55vh;
	width:40vh;
	left:120vh;
	top: 25vh;
border-style:solid
border-color: #EB9FB1;
opacity:0.5;
	}

.words {
	position:absolute;
	padding: 1px;
	font-family: 'Text';
	font-size:20px;
	color:#FE80BD;
	text-align:justify;
	line-height:42px;
	height:50vh;
	width:38vh;
	left:111vh;
	top: 42vh;
overflow: auto;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
	}

.box3 {
	position:absolute;
	background-color:#FFC4E1;
	height:55vh;
	width:40vh;
	left:165vh;
	top: 40vh;
border-style:solid
border-color: #EB9FB1;
opacity:0.5;
	}

.fwends {
	position:absolute;
	padding: 1px;
	font-family: 'Text';
	font-size:20px;
	color:#FF96B8;
	text-align:justify;
	line-height:42px;
	height:50vh;
	width:38vh;
	left:166vh;
	top: 42vh;
overflow: auto;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
	}

.title{
color:#FFFFFF;
font-family: 'Title';
font-size:30vh;
top:15vh;
width:50vh;
left:77vh;
position: absolute;
z-index:5;
letter-spacing:.5px;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
}

.title2{
color:#FF7ECC;
font-family: 'Title';
font-size:30vh;
top:15vh;
height:20vh;
width:50vh;
left:167vh;
position: absolute;
z-index:5;
letter-spacing:.5px;
 filter: drop-shadow(.1vh .1vh .1vh #FFF);
}

.credit {
 overflow:hidden;
 position:fixed;
 text-align:justify;
 bottom:2vh;
 right:2vh;
 height:5vh;
 width:5vh;
 padding:0vh;
 opacity: .8;
 background-image: url('https://i.imgur.com/Ldl49Wz.png');
 background-position:top center;
 background-attachment: absolute;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;}

div.tooltipMessage {
 z-index: 600;
 position: absolute;
 width: 220px;
 font-family: verdana;
 font-variant: small-caps;
 font-size: 10px;
 text-align: justify;
}

div.tooltipMessage > span {
 display: inline-block;
 background: #FF7ECC;
 padding: 4px 5px;
 color: #FFF;
 border: 1px solid #FFF;
 border-radius: 5px;
}
div.tooltipMessage.left > span {
 float: right;
}


@font-face {
 font-family: "Title";
 src: url('https://dl.dropboxusercontent.com/s/fjjqzhvpr9f1yri/Coaster%20Quake%20-%20Personal%20Use.otf?dl=0');
 format("truetype");
}

@font-face {
 font-family: "Text";
 src: url('https://dl.dropboxusercontent.com/s/1829lpmhv6kpafu/coffee%2Bteademo-Regular.ttf?dl=0');
 format("truetype");
}
</style>


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

<div class="hlw">
<img src="https://i.imgur.com/fzm22vR.png">
</div>

<div class="warn">
<img src="https://data.whicdn.com/images/270507228/original.gif">
</div>

<div class="aaa">
<img src="https://i.pinimg.com/originals/09/5d/71/095d71e519211adacc10257fdb49efda.gif">
</div>

<div class="bbb">
<img src="https://66.media.tumblr.com/6d0edb4b8b66cd42e1f468fbf4142d50/tumblr_p34co6bWrA1sgowuyo1_500.gifv">
</div>

<div class="box"></div>
<div class="stats">
<font style=float:left><b>NAME:</b></font> <font style=float:right>Naomi Price</font><br>
<font style=float:left><b>NICKNAMES:</b></font> <font style=float:right>Nao, Princess</font><br>
<font style=float:left><b>AGE:</b></font> <font style=float:right>Twenty years old.</font><br>
<font style=float:left><b>ATTITUDE:</b></font> <font style=float:right>Sweet but Bratty</font><br>
<font style=float:left><b>PREFERENCE:</b></font> <font style=float:right>Men</font><br>
<font style=float:left><b>STATUS:</b></font> <font style=float:right>Single</font><br>

<center><a class="tooltip" href="https://roleplay.chat/profile.php?user=fortunate" title="Friend here!"><b>★</b></a></center>
</div>

<div class="words">
Naomi comes from an extremely wealthy family, and was spoiled as a child. Despite the fact that she's grown out of her tantrum-throwing-tendencies, she can still be bratty at times. Nao is used to getting what she wants when she wants it. Her impatience has gotten her into many dangerous situations- though, that could also be due to her being part of a crime family, even if she doesn't know it.
</div>