Digital Dream (No Java)

<style>

/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: BLINKY// HAKUNO KISHINAMI
There is a Javascript at the base that prevents right click. Do not remove it. If you do not have Java you don't need to worry about it. But please do not remove it. You'll break the code.

THIS IS THE JAVA SCRIPT EDITION!

*/


@import 'https://fonts.googleapis.com/css?family=Pacifico|Oswald:700';


body {
     background-image: url("https://i.imgur.com/1aSFAU3.png");
  background-repeat: repeat;
  background-size: 100% 100%;
  background-position: bottom right;
    width: 100%;
    height: 100%;
  margin: 0px;
  overflow: hidden;
}


#words1{
 position:absolute;
 font-family:'Pacifico', cursive;
font-style:italic;
 font-size: 60px;
 top: 30%;
 left: 12%;
 height: 100px;
 background: #transparent;
 background: url(https://i.imgur.com/eVINNG2.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);.
opacity: 0.70;
filter: alpha(opacity=70);
}

#words2{
 position:absolute;
font-family:'Pacifico', cursive;
font-style:italic;
 font-size: 70px;
 top: 40%;
 left: 12%;
 height: 120px;
 background: #transparent;
 background: url(https://i.imgur.com/eVINNG2.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
opacity: 0.70;
filter: alpha(opacity=70);
}
#words3{
 position:absolute;
font-family:'Pacifico', cursive;
 font-size: 65px;
 bottom: -5%;
 left: 4%;
 height: 120px;
 background: #transparent;
 background: url(https://i.imgur.com/voTvgCF.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
z-index: 1;
-ms-transform: rotate(12deg);
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}

#words4{
 position:absolute;
font-family:'Pacifico', cursive;
font-style:italic;
 font-size: 60px;
 top: 20%;
 left: 12%;
 height: 100px;
 background: #transparent;
 background: url(https://i.imgur.com/U4JZEe7.gif) -20px -20px repeat;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
opacity: 0.70;
filter: alpha(opacity=70);
}


h1{
font-family:'Pacifico', cursive;
font-style:italic;
color: #ffffff;
font-size:20px;
line-height:27px;
padding: 0px 3px 0px 0px;
border-bottom: 1px solid #ffffff;
}

 .right{
position:absolute;
top:-22px;
left:140px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #ffe650;
}

 .spooky{
position:absolute;
top:30px;
left:60px;
width:330px;
height: 250px;
overflow:hidden;
z-index:20;
}

 .far{
width:330px;
height: 300px;
overflow:auto;
}

 .tell{
color:#dfeff1;
font-size:14px;
text-align:justify;
line-height:14px;
font-family:cambria;
letter-spacing:0.3px;
margin: 5px;
}
a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #f77481;
margin-right:12px;
z-index:10;
}

a.gone:hover{
text-shadow:-4px 0px 0px #ffe650;
}

b {
color: #50cfff;
font-weight:bold;
letter-spacing: 1px;
}

i{
color:#ffffff;
font-style:italic;
}

u{
font-style:italic;
text-decoration:noneunderline;
}

a:active, a:link, a:visited{
color:#fff;
text-decoration:none;
}
a:hover{
cursor:all-scroll;
color:#4e3f64;
text-decoration:line-through;
}



::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #D98878;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #D98878;border: 0px ;width: 15px;}


#sparkle{
width:700px;
height: 400px;
background:#17253d;
border-radius: 50px 100px 100px 50px;
z-index: 4;
opacity: 0.70;
filter: alpha(opacity=70);
}


 .brightly{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;


}





.lovely {
position: absolute;
bottom: 0px;
right: 20%;
z-index: 6;

}

.lovely2 {
position: absolute;
bottom: -50px;
left: 10%;
z-index: 6;
opacity: 1.00;
filter: alpha(opacity=100);
}



.you{
position:absolute;
margin:auto;
top: -2%;
left: -2%;
width: 100px;
height: 100px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 97;
}

a.dream:link, a.dream:active, a.dream:visited{
display: block;
float: left;
width: 35px;
height: 35px;
margin: 1px;
background-color:#FFE3D8;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.dream:hover{
background-color:#FFFDCD;
box-shadow: 0px 0px 5px #999;
}

.floating3{
 float: bottom-left;
 -webkit-animation-name: Floatingx;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: ease-in-out;
 -moz-animation-name: Floating;
 -moz-animation-duration: 0.5s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: ease-in-out;
 margin-right: 0px;
 margin-bottom: 100px;
 z-index:343;

}

@-webkit-keyframes Floatingx{
 from {-webkit-transform:translate(0, 0px);}
 65% {-webkit-transform:translate(0, 15px);}
 to {-webkit-transform: translate(0, -0px); }
}

table {
 margin-top:-9px;
 width: 100%;
 margin-left:-2px;
 background-color: transparent;
 border-collapse: collapse;}

td {
 font-size: 11px;
 letter-spacing: 1px;
 height: 100px;
 overflow: auto;}

#rel img {
 margin:8px;
 border:5px solid #fff; /* relationships icon border color */
 width:50px;
 height:50px;
 padding:4px;
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

#rel:hover img {
 border:5px solid #529ecc; /* relationships icon border hover color */
 -webkit-transition:all 0.3s ease-out;
 -moz-transition:all 0.3s ease-out;
 transition:all 0.3s ease-out;}

::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #ffe763;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #ffe763;border: 0px ;width: 12px;}

</style>

<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 //Disable full page
 $("body").on("contextmenu",function(e){
 return false;
 });

 //Disable part of page
 $("#id").on("contextmenu",function(e){
 return false;
 });
});
</script>
<script type="text/javascript">
$(document).ready(function () {
 //Disable cut copy paste
 $('body').bind('cut copy paste', function (e) {
 e.preventDefault();
 });

 //Disable mouse right click
 $("body").on("contextmenu",function(e){
 return false;
 });
});
</script>



<div id="container"></div>

 <div class="lovely">
<img src="https://i.imgur.com/BuvNSJO.png" width="400px" class="floating3"></div>



<div id="sparkle" class="brightly">

<div class="you">
<a href="#we" class="dream"></a>
<a href="#have" class="dream"></a>
<a href="#noticed" class="dream"></a>
<a href="#youtoo" class="dream"></a>
</div>
<div class="spooky">
<div id="we" class="far"><div class="tell">

<h1>Stats</h1>

<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>➽Stat</b></font>
<font style="float:right">Stat</font><br>

<h1>About</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae pharetra risus. Duis eget nisl nulla. Suspendisse non nunc vulputate, cursus orci non, iaculis dui. Sed fermentum iaculis sem. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend vehicula egestas. Cras elementum nulla eget tellus pellentesque semper. Cras scelerisque erat vel elit posuere, ac vulputate sapien rutrum. Nullam a fringilla enim. Cras sodales nunc magna, vitae sollicitudin dui feugiat non. Aliquam a aliquet dolor.</p>

<br><br>

<BR><br><br>

</div></div>
<div id="have" class="far"><div class="tell">
<h1>Mage Craft</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae pharetra risus. Duis eget nisl nulla. Suspendisse non nunc vulputate, cursus orci non, iaculis dui. Sed fermentum iaculis sem. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend vehicula egestas. Cras elementum nulla eget tellus pellentesque semper. Cras scelerisque erat vel elit posuere, ac vulputate sapien rutrum. Nullam a fringilla enim. Cras sodales nunc magna, vitae sollicitudin dui feugiat non. Aliquam a aliquet dolor.</p>

<br><br>
</div></div>
<div id="noticed" class="far"><div class="tell">
<h1>Friends</h1>
<div id="rel"><a href="/"><img src="https://i.imgur.com/KUMPAmP.png" /></a></div><div id="rel"><a href="/"><img src="https://i.imgur.com/KUMPAmP.png" /></a></div>
</div></div>




<div id="youtoo" class="far"><div class="tell">
<h1>Rules</h1>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
♠ Rules<br>
<Br><br><Br>
</div></div></div>

<div id="words3">
Ines Anastas
</div><div class="lovely2">
<a target="_blank" href="https://i.imgur.com/pMWZuYv.png" target="_blank" title="Pidge Phone hoooome."><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/ZyjW2oL.png" target="_blank" title=" "><img src="https://i.imgur.com/jySgQCd.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/YcSyPTB.png" target="_blank" title=" ."><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/xhf9F5j.png" target="_blank" title=" "><img src="https://i.imgur.com/jySgQCd.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/Teyf67w.png" target="_blank" title=""><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/plYwhl0.png" target="_blank" title=" ."><img src="https://i.imgur.com/jySgQCd.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
<a target="_blank" href="https://i.imgur.com/VsyEyF8.png" target="_blank" title="."><img src="https://i.imgur.com/6zqFVlW.png" class="circle" width="40" height="40" border="1px solid #000000" ></a>
</div>
</div>
</div>


<div style="position: fixed; bottom: 20px; left: 0px; background-color: transparent;">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Hakuno+Kishinami" target="_blank" title="Code was created by Blinky/Hakuno Kishinami. Do NOT touch. Please! If you are interested in a code, please Shoot her a message or Mail! "><img src="https://i.imgur.com/uP9E5Pz.png" height="10%"></a></div>