Adora Placeholder

<style>


@import url('https://fonts.googleapis.com/css?family=Allura|Cinzel|Liu+Jian+Mao+Cao&display=swap');


::-webkit-scrollbar {
height: 10px;
width: 0px;
background-color: #;
}

body {
background-color: #f1d3ce;
background-image: url("https://www.transparenttextures.com/patterns/debut-light.png");
Overflow: hidden; cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png),
progress !important;
}

.whole {
Position: fixed;
Height: 100%;
Width: 100%;
Top: 0;
Bottom: 0;
transition:0.5s;
}

.main {
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
Height: 550;
Width: 730;
background-color: #ffeef5;
transition:0.5s;
Border-radius: 20px;
Opacity: 0;
}

.for {
Position: absolute;
Left: 0px;
Top: 0px;
Height: 550px;
Width: 200px;
Background: #e0605c;
}

.the {
Position: absolute;
bottom: 0px;
Left: 200px;
Height: 70px;
Width: 300px;
Background: #D83632;
}

.honor {
Position: absolute;
bottom: 0px;
right: 0px;
Height: 220px;
Width: 240px;
Background-color: #f27b80;
background-image: url('https://cdn.vox-cdn.com/thumbor/Re0A0bBInjd5EXx6phSDK4HApnk=/0x0:864x1200/1200x800/filters:focal(379x631:517x769)/cdn.vox-cdn.com/uploads/chorus_image/image/60489473/DifTVWRWsAAEUwp.0.jpg');
Background-size: 200%;
background-position: center center;
Padding: 4px;
Border-Left: solid 5px #DEC4BA;
Border-top: solid 5px #DEC4BA;
}

.of {
Position: absolute;
Right: 50px;
Top: -10px;
font-family: 'allura', cursive;
font-size: 150px;
Color: #e9d730;
filter:drop-shadow(0px 0px 5px #e9d730);
}

.grayskull {
Position: absolute;
Right: 50px;
Top: 140px;
font-family: 'cinzel', cursive;
font-size: 20px;
Color: #fff;
filter:drop-shadow(0px 0px 2px #40C6A9);
}

.adorable {
Position: absolute;
Right: 340px;
bottom: 15px;
font-family: 'cinzel', cursive;
font-size: 30px;
Color: #fff;
}

.adora {
position: fixed;
margin: auto;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
Background: url('https://i.imgur.com/H5Qzoee.png');
Background-repeat: no-repeat;
Height: 500px;
Width: 500px;
Text-align: center;
z-index: 8;
Opacity: 1;
transition:0.5s;
}

.transformy {
Position: absolute;
Top: 400px;
Left: -200px;
Width: 900px;
Color: #fff;
font-family: 'allura', cursive;
font-weight: bold;
font-size: 70px;
}

.whole:hover .transformy {
filter:drop-shadow(0px 0px 10px #e9d730);
transition:0.5s;
}

.whole:hover .adora {
Opacity: 0;
z-index: -10;
transition:0.5s;
transition-delay: 1s;
}

.whole:hover .main {
Opacity: 1;
transition:0.5s;
transition-delay: 2s;
}

.navt1, .navt2, .navt3, .navt4, .navt5, .navt6 {
position: absolute;
font-family: lucida console;
font-size: 13px;
letter-spacing: 1px;
left:580px;
top:490px;
background-color: #ffffff;
color: #535353;
text-transform: uppercase;
text-align: center;
padding: 3px 5px;
opacity: 0;
 transition: 0.8s;
 Z-index:-4;
}

.navt1 {Margin-left: -14px;}
.navt2 {Margin-left: -20px;}
.navt3 {Margin-left: -70px;}
.navt4 {Margin-left: -60px;}
.navt5 {Margin-left: -30px;}
.navt6 {Margin-left: -75px;}

#nav1:hover .navt1, #nav2:hover .navt2, #nav3:hover .navt3, #nav4:hover .navt4, #nav5:hover .navt5, #nav6:hover .navt6  { opacity: 1; Z-index: 5;}


.c1, .c2, .c3, .c4, .c5, .c6 {
z-index: 2;
position: absolute;
left: 490px;
top: 170px;
width: 60px;
height: 60px;
background-color: #D83632;
background-image: url('https://www.stickpng.com/assets/images/584a78ba7ec3445d9da286a6.png');
Background-size: 35%;
Background-repeat: no-repeat;
Background-position: center center;
Border-radius: 100%;
transition: 0.8s;
}

.c2 {
margin: 70px 0 0 0px;
 }

.c3 {
margin: 0px 0 0 80px;
 }

.c4 {
 margin: 70px 0 0 80px;
 }
.c5 {
 margin: 70px 0 0 160px;
 }
.c6 {
margin: 0px 0 0 160px;
}

.ooc {
Position: absolute;
Height: 300px;
Width: 217px;
Bottom: 100px;
Left: 225px;
Background: #fff;
Padding: 5px;
font-size: 10px;
Color: #000;
overflow: auto;
Text-align: center;
}

.queen {
position: absolute;
left: 20px;
top: 15px;
width: 160px;
height: 160px;
background-color: #D83632;
background-image: url('https://i.imgur.com/IMKLJ1s.png');
Background-size: 100%;
Border-radius: 100%;
transition: 0.8s;
Border: 4px dashed #e9d730;
z-index:3;
}

.peace {
position: absolute;
left: 20px;
top: 190px;
width: 160px;
height: 160px;
background-color: #D83632;
background-image: url('https://cdn.discordapp.com/attachments/285576866302263297/642588749854933011/1c48b06a523e34900638c32e1934b61a.png');
Background-size: 105%;
Background-repeat: no-repeat;
Background-position: center center;
Border-radius: 100%;
transition: 0.8s;
Border: 4px dashed #e9d730;
z-index:3;
}

.princess {
position: absolute;
left: 20px;
top: 365px;
width: 160px;
height: 160px;
background-color: #D83632;
background-image: url('https://i.imgur.com/gVJdn3j.png');
Background-size: 125%;
background-position: center;
Border-radius: 100%;
transition: 0.8s;
Border: 4px dashed #e9d730;
z-index:3;
}

.power {
}

.queen:hover, .princess:hover, .peace:hover {
border: 4px solid #fff;
transition: 0.5s;
}

h1 {
Color: #fff;
Font-size: 17;
Background: url(https://j.gifs.com/KeLbkp.gif);
background-size: 100%;
background-position: bottom center;
text-align: center;
font-family: 'Bangers', cursive;
}


h2 {
Color: #fff;
Font-size: 17;
Background: url(https://media.giphy.com/media/ox7IX1lrMzaaA/giphy.gif);
background-size: 30%;
background-position: bottom center;
text-align: center;
font-family: 'Bangers', cursive;
}

Strike {
Color: #40C6A9;
text-decoration: none;
Border-bottom: 1px dotted #e9d730;
}

U {
Color: #fff;
background: #e9d730;
text-decoration: none;
}


B{
font-size: 11px;
color: #f61b1b;
font-family: 'cinzel', curive;
text-shadow: 1px 1px #e9d730;
}

I{
Color: #d90b0b;
text-shadow: 1px 1px 5px #e9d730;
letter-spacing: 1px;
font-family: 'Liu Jian Mao Cao', cursive;
font-size: 13px;
}


a {
color: #ea0000;
Text-decoration: none;
}

a:hover {
Cursor: url(http://31.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif), progress !important;
}

</style>
<div class="whole">
<div class="adora"><div class="transformy">For The Honor of Grayskull!</div></div>
<div class="main">
<a href="#2" class="queen"></a>
<a href="#3" class="peace"></a>
<a href="#4" class="princess"></a>
 <div id="nav1"><div class="navt1">What's Up</div><a href="https://cdn.discordapp.com/attachments/285576866302263297/642594864239738890/67440472_379683406055415_4113512318136078496_n.png" target="_blank"><div class="c1"></div></a></div>
 <div id="nav2"><div class="navt2">"HeY aDoRa"</div><a href="https://cdn.discordapp.com/attachments/285576866302263297/642575054567374869/tumblr_pwjxrrmWyb1u5vlkpo1_1280.png" target="_blank"><div class="c2"></div></a></div>
 <div id="nav3"><div class="navt3">**gay sparkles intensify**</div><a href="https://www.youtube.com/watch?v=Z6_2Cb5iu-I" target="_blank"><div class="c3"></div></a></div>

 <div id="nav4"><div class="navt4">look at my horse<br>
my horse is amazing</div><a href="https://66.media.tumblr.com/22eec36f48c82beea62609b445d252b7/tumblr_pifbm3H46u1twcs7i_1280.jpg" Target="_blank"><div class="c4"></div></a></div>
 <div id="nav6"><div class="navt6">You're driving me away</div><a href="https://www.youtube.com/watch?v=O7mXXqfVeGc" target="_blank"><div class="c6"></div></a></div>
 <div id="nav5"><div class="navt5">Savior Complex<br> [s2 spoilers]</div><a href="https://www.youtube.com/watch?v=HvXDkb91zfk" target="_blank"><div class="c5"></div></a></div>
<div class="for"></div>
<div class="the"></div>
<div class="honor"></div>
<div class="of">She-Ra</div>
<div class="grayskull">Princess of Power</div>
<div class="adorable">Adora</div>
<div class="ooc">
<b>Use Arrows To Scroll</b><br><br>
<b>1</b> This code was made by <a href="/profile.php?user=Catra" Target="_blank"><i>a stupid cat</i></a>. She's <u>not</u> nice and will <strike>claw your eyes out </strike> if you take it.<br><Br>
<b>2</b> Adora is a canon character from <u>She-Ra: Princesses of Power</u>. Player is still <i>learning</i> the role. She's absolutely <b>adorable</b> in her efforts.<br><br>
<b>3</b> My <strike>word count</strike> is  <i>superior</i> to <b>yours.</b> <br><br>
<b>4</b> Don't blur <i>OOC</i>. I might be a <strike>literal goddess</strike> in and out of character. But <b>either way</b> I'm out of your league.<br><br>
<b>5</b> Spekaing of <strike>League</strike>,  this player is a <i>super nerd</i> and plays <b>a lot of it</b>.<br><br>
<b>7</b> If you <i>haven't</i> noticed by now, this is actually <strike>Catra</strike> filling this shit out. But I'm <u>100% cooler</u> than Adora anyway, <i>so it's not really a loss.</i> <br><br>
<b>8</b> I <u>guess</u> you can delete all this. But you <i>better</i> say something <strike>incredibly nice</strike> about your <b>favorite kitty cat</b><br><br><br><br>
<a href="https://www.youtube.com/watch?v=psxBizrPIxg" target="_blank"><i>please call me back omg</i></a>

</div>