Fuggin Alecks

<style>

.pfor { display: none;}
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');

#profile {background-color: transparent; border: transparent;}

body {background-image: url(https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_960_720.jpg); background-size: 100% 100%; background-repeat:no-repeat; }

 .circle{border-radius:150px; border:5px; box-shadow: 1px 1px 60px #962E2E, 0px 1px 0px #AD2626, -1px 0px 0px #AD2626, 0px -1px 0px #AD2626,0px 0px 20px #AD2626;}

::-webkit-scrollbar {width: 12px;}

::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}

::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}


#bar { position: fixed; bottom: 55px; left: 550px; height: 50px; width: 440px; border: 1px #000 solid; background-color: #333333; overflow: auto; opacity: 0.9; z-index: -3; border-radius:100px; z-index:-999; }



#imgBox{height: 270px; width: 240px; left:500; top:150; margin: auto;}

#imgBox img{ height: 400px; width: 340px; left:590; top:250; border-radius:150px; border:5px; box-shadow: 1px 1px 20px #C3A318, 0px 1px 0px #AD2626, -1px 0px 0px #AD2626, 0px -1px 0px #AD2626,0px 0px 2px #AD2626; transition:opacity 1s ease-in-out; position:absolute;}

#imgBox img.top:hover{opacity:0;}


#altImageBox{height: 210px; width: 90px; left:590; top:150; margin: auto;}


h1 { Color: #036FFC; font-family: 'Potta One', cursive; font-size:30px; text-align: center; Text-Shadow: #AD2626 2px 1px 1px; Margin-top: 3px;}

#title {vertical-align: center; text-transform: none; color:#036FFC; font-size:70px; font-family:'Potta One', cursive; text-align: center; position: absolute; left: 560px;top: 10px; margin: 1px; text-shadow: 1px 1px 20px #C3A318, 0px 1px 0px #AD2626, -1px 0px 0px #AD2626, 0px -1px 0px #AD2626,0px 0px 5px #AD2626;}

#title2 {vertical-align: center; text-transform: none; color: #AD5C57; font-size: 12px; font-family: Harrington; text-align: center; position: absolute; right: 50px; bottom: 8px; margin: 1px; z-index: 1;}

.navbar1 a {display: block; width: 2.5%; margin-top: 2px; padding-top: 2px; padding-bottom: 2px; color: #cccccc; text-decoration: none; font-family: Rockwell; Font-size: 10px; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;}

.abox {background-color:#7D0F0F; opacity: .9; color: #D57719; font-size: 16px; font-family: 'Potta One', cursive; text-align: justify; position: absolute; width:230; height:300; left: 50; top:170; letter-spacing:0px; line-height: 18px; padding: 50px; margin: 1px; overflow:auto; border-radius:150px; box-shadow: 1px 1px 20px #C3A318, 0px 1px 0px #AD2626, -1px 0px 0px #AD2626, 0px -1px 0px #AD2626,0px 0px 50px #AD2626;}

.navbar { Position: absolute; Height: 50px; Width: 99.4%; Left: 0; Top: 0; padding: 4px; z-index: 100;}

.link1 {Position: absolute; top: 690px; left: 600px; background-color:#036FFC; border-radius:50px; box-shadow: 1px 1px 60px #C3A318, 0px 1px 0px #, -1px 0px 0px #, 0px -1px 0px #,0px 0px 20px #; Border: outset 2px #C3A318; Height: 30px; Width: 40px;}

.link2 {Position: absolute; top: 690px; left: 700px; background-color:#036FFC; border-radius:50px; box-shadow: 1px 1px 60px #AD2626, 0px 1px 0px #, -1px 0px 0px #, 0px -1px 0px #,0px 0px 20px #; Border: outset 2px #C3A318; Height: 30px; Width: 40px; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.link3 {Position: absolute; top: 690px; left: 800px; background-color:#036FFC; border-radius:50px; box-shadow: 1px 1px 60px #AD2626, 0px 1px 0px #, -1px 0px 0px #, 0px -1px 0px #,0px 0px 20px #; Border: outset 2px #C3A318; Height: 30px; Width: 40px; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.link4 {Position: absolute; top: 690px; left: 900px; background-color:#036FFC; border-radius:50px; box-shadow: 1px 1px 60px #AD2626, 0px 1px 0px #, -1px 0px 0px #, 0px -1px 0px #,0px 0px 20px #; Border: outset 2px #C3A318; Height: 30px; Width: 40px; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}


.link1:hover {Background-color: #A03615; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
.link2:hover {Background-color: #A03615; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
.link3:hover {Background-color: #A03615; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
.link4:hover {Background-color: #A03615; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}





.slide {Position: fixed; Height: 555555; Width: 555555; Top: -20px; Left: 50; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

.slide:target {left: 125px; opacity: 1; Z-index: 1; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}

</style>



<div id="imgBox">
<img class= "bottom" src="https://cdn.discordapp.com/attachments/565379284919910401/801003656919908372/image0.jpg" height="400" class="circle"/>
<img class= "top" src= "https://media.discordapp.net/attachments/565379284919910401/801005892853301308/unknown.png" height="400" class="circle"/>
</div>

<div id="title">
Alex Dragoon
</div>

<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
<a class="link4" href="#4"></a>
<a class="link5" href="#5"></a>
<a class="link6" href="#6"></a>
</div>


<div id="1" class="slide">
<div class="abox">

<h1>Stats</h1>
Name. <font style=float:right>HERE</font><br>
Species. <font style=float:right>HERE</font><br>
Age. <font style=float:right>HERE</font><br>
Gender. <font style=float:right>HERE</font><br>
Height. <font style=float:right>HERE</font><br>
Weight. <font style=float:right>HERE</font><br>
Hair Color. <font style=float:right>HERE</font><br>
Eye Color. <font style=float:right>HERE</font><br>
Orientaion. <font style=float:right>HERE</font><br>
Mated Status. <font style=float:right>HERE</font><br>
Residence. <font style=float:right>HERE</font><br><p>

<center><a target="_blank" href="URL">X</a>
<a target="_blank" href="URL">X</a>
<a target="_blank" href="URL">X</a>



</div></div>


<div id="2" class="slide">
<div class="abox">
<h1>Personality</h1><br>

</div></div>



<div id="3" class="slide">
<div class="abox">
<h1>Out of Character</h1><br>







</div></div>

<div id="Title2">
Coded by<a target="_blank" href="https://pastebin.com/u/Toxicandii"><img src="https://cdn.discordapp.com/attachments/330082590650531841/745418150736298034/2OqxI1e.png" height="25" width="25">Toxicandii</a>
</div>


<div id="bar"></div>