Majstir Code

@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa');

body{
background-color:#424335;
overflow:hidden;
box-shadow: inset 0px 0px 60px 1px #000 ;


}

::-webkit-scrollbar
{
	width: 0px;
	background-color: transparent;
}



#sword{
background-image:url(https://i.imgur.com/8xhqOyB.png);
background-size:100%;
width:55px;
height:350px;
position:absolute;
top:50%;
left:50%;
margin-top:-175px;
margin-left:-225px;
filter:drop-shadow(0px 0px 5px #000);
animation:sword 8s;
    animation-fill-mode: forwards;
z-index:99;
}

@keyframes sword{
0%{
margin-top:-175px;
margin-left:-225px;
opacity:1;
}
10%{
margin-top:-190px;
margin-left:-225px;
opacity:1;
}
20%{
margin-top:-160px;
margin-left:-225px;
opacity:1;
}
30%{
margin-top:-190px;
margin-left:-225px;
opacity:1;
}
40%{
margin-top:-160px;
margin-left:-225px;
opacity:1;
}
60%{
margin-top:-175px;
margin-left:-225px;
opacity:1;
}
90%{
margin-left:240px;
opacity:1;
}
100%{
margin-left:240px;
opacity:0;
}
}

#backgroundbox{
width:0px;
height:300px;
background-color:#4d3130;
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-150px;
animation:fold 8s;
    animation-fill-mode: forwards;
background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
}

@keyframes fold{

0%{
width:0px;
opacity:0;
box-shadow:0px 0px 5px 0px #000;
}

60%{
width:0px;
opacity:1;
box-shadow:0px 0px 5px 0px #000;
}
90%{
width:450px;
opacity:1;
box-shadow:0px 0px 0px 0px #000;
}

100%{
opacity:1;
width:450px;
box-shadow:0px 0px 5px 0px #000;
}

}

#image{
background-image:url(https://i.imgur.com/OLThc1i.png);
background-size:100%;
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:50px;
opacity:0;
animation:image 8s;
    animation-fill-mode: forwards;
}

@keyframes image{
0%{
opacity:0;
}
95%{
opacity:0;
}
100%{
opacity:1;
}
}

#one{
opacity:0;
width:240px;
height:265px;
padding:5px;
background-color:#4d3130;
border:solid 1px white;
position:absolute;
left:15px;
top:10px;
z-index:10;
box-shadow:0px 0px 10px 0px #000;
animation: one 8s;
animation-fill-mode: forwards;
color:#fff;
background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
transition:1s;
overflow:auto;
color:#fff;
font-size:11pt;
font-family: 'Aref Ruqaa', serif;
text-align:justify;

}

@keyframes one{
0%{
opacity:0;
}

90%{
opacity:0;
}

100%{
opacity:1;
}
}

#one:target{
opacity:1;
z-index:11;
}


 #two, #three, #four, #five{
opacity:0;
width:240px;
height:265px;
padding:5px;
background-color:#4d3130;
border:solid 1px white;
position:absolute;
left:15px;
top:10px;
z-index:9;
color:#fff;
box-shadow:0px 0px 10px 0px #000;
background-image:url(https://www.transparenttextures.com/patterns/arabesque.png);
transition:1s;
font-size:11pt;
font-family: 'Aref Ruqaa', serif;
text-align:left;
overflow:auto;
}

#two:target, #three:target, #four:target, #five:target{
opacity:1;
z-index:11;
}

#navi{
width:50px;
height:125px;
background-color:transparent;
position:absolute;
top:15px;
right:120px;
z-index:99;
float:left;
opacity:0;
animation:navi 8s;
animation-fill-mode: forwards;
}

@keyframes navi{
0%{
opacity:0;
}
90%{
opacity:0;
}
100%{
opacity:1;
}
}

#navi a{
width:15px;
height:15px;
transform:rotate(45deg);
background-color:#4d3130;
border:solid 2px white;
display:block;
margin-left:10px;
margin-top:8px;
transition:1s;
}

#navi a:hover{
background-color:#fff;
}

h1{
color:#fff;
font-size:20pt;
font-weight:500;
text-align:center;
font-family: 'Aref Ruqaa', serif;
margin-top:0px;
margin-bottom:5px;
}

h2{
font-size:50pt;
font-weight:500;
text-align:center;
font-family: 'Aref Ruqaa', serif;
background: url(https://cdn.discordapp.com/attachments/346731406237499393/409808563314098196/tumblr_oyufp9tpMj1wzypxlo1_500.gif) ;
background-size:400px 400px;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
z-index:100;
position:absolute;
bottom:0px;
right:0px;
opacity:0;
margin-bottom:-30px;
margin-right:-30px;
animation:text 8s;
animation-fill-mode: forwards;
}

@keyframes text{
0%{
opacity:0;
}

95%{
opacity:0;
}

100%{
opacity:1;
}
}

a{
text-decoration:none;
color:#dadada;
transition:1s;
}

a:hover{
color:gold;
}


<div id="sword"></div>
<div id="backgroundbox">
<div id="image"></div>
<div id="one">
<h1>Dossier - ملف</h1>
<font style="float:left;">Name</font><font style="float:right;">Long forgotten</font></br>
<font style="float:left;">Alias</font><font style="float:right;">Majstir, Swordmaster</font></br>
<font style="float:left;">Age</font><font style="float:right;">Timeless</font></br>
<font style="float:left;">Gender</font><font style="float:right;">Male</font></br>
<font style="float:left;">Race</font><font style="float:right;"><del>Djinn</del>, Human</font></br>
<font style="float:left;">Height</font><font style="float:right;">6'2"(187cm)</font></br>
<font style="float:left;">Weight</font><font style="float:right;">191lbs(86kg)</font></br>
<font style="float:left;">Skin</font><font style="float:right;">Tanned</font></br>
<font style="float:left;">Eyes</font><font style="float:right;">Crimson</font></br>
<font style="float:left;">Hair</font><font style="float:right;">Moss</font></br>
<font style="float:left;">Orientation</font><font style="float:right;">Female(s)</font></br>
<font style="float:left;">Alignment</font><font style="float:right;">Chaotic Neutral</font></br>
<font style="float:left;">Occupation</font><font style="float:right;">Wandering Swordmaster</font></br>
<font style="float:left;"></font><font style="float:right;">Killer of Gods</font></br>
</div>

<div id="two">
<h1>History - التاريخ</h1>

</div>

<div id="three">
<h1>Abilities - قدرات</h1>
</div>

<div id="four">
<h1>Gallery - صالة عرض</h1>
</div>

<div id="five">
<h1>OOC - من الطابع</h1>
<b>00</b> This profile was coded by me, if you wish to have a similar code, feel free to mail <a href="">Hound of Tindalos</a> for inquiries on prices and custom profiles.<br><br>
<b>01</b> Pm Friendly to an extent<br><br>
<b>02</b> Story heavy character, Romance and smut comes from long term relationships<br><br>
<b>03</b> He is a Freed Genie so I guess he is overpowered, however he does not tend to use his powers and will always choose to look human to those he talks to.<br><br>
<b>04</b> Golden Rule always applies <br><br>
<b>05</b> Art is not mine, it is by the pixiv artist <a target="_blank" href="https://www.pixiv.net/member.php?id=97898">Mochio</a> and will be removed upon request, Face Claim is Ciggma Khint from Bravely Default<br><br>
<b>06</b> Kinks vary, but they always end up falling into the darker scenarios.<br><br>
</div>


<div id="navi">
<a href="#one"></a>
<a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
<a href="#five"></a>
</div>
<h2>سيد السيف</h2>
</div>