Mordred

<style>
@import url('https://fonts.googleapis.com/css?family=Allura|Euphoria+Script|Italianno|Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant|Cormorant+SC&display=swap');
::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


body{
background: linear-gradient(#4f0000, #a62e11, #4d0d05);
}


#intro{
position: fixed;
background: #000;
z-index: 0;
height: 100vh;
width: 100vw;
top: 0vh;
left: 0vw;
animation: intro 5s 1;
animation-delay: 12s;
animation-fill-mode: both;
}

@keyframes quote{
0%{opacity: 0;}
50%{opacity: 1;}
70%{opacity: 1;}
90%{opacity: 0;}
100%{opacity: 0;}
}
@keyframes quoteshort{
0%{opacity: 0;}
50%{opacity: 1;}
90%{opacity: 0;}
100%{opacity: 0;}
}

@keyframes intro{
from{opacity: 1;}
to{opacity:0;}
}

#introquote1, #introquote2, #introquote3, #introquote4, #introquote5, #introquote6{
position: fixed;
text-align: center;
opacity: 0;
z-index: 1;
height: 15vh;
width: 50vw;
font-family: 'Allura';
font-size: 3.5vh;
color: #fff;
text-shadow: 0vh 0vh 1vh #fff;
}

#introquote1{
top: 20vh;
left: 10vw;
animation: quote 6s 1;
}
#introquote2{
top: 35vh;
left: 5vw;
animation: quoteshort 3s 1;
animation-delay: 4s;
}
#introquote3{
top: 35vh;
left: 25vw;
animation: quoteshort 3s 1;
animation-delay: 6s;
}
#introquote4{
top: 35vh;
left: 50vw;
animation: quoteshort 3s 1;
animation-delay: 8s;
}
#introquote5{
top: 50vh;
left: 25vw;
animation: quote 4s 1;
animation-delay: 11s;
}
#introquote6{
top: 60vh;
left: 50vw;
animation: quote 4s 1;
animation-delay: 13s;
}


@keyframes image{
from{right: -50vw;}
to{right: 5vw;}
}

#image{
position: fixed;
bottom: 1.5vh;
z-index: 10;
filter: drop-shadow(0 0 1vh #fff);
animation: image 3s 1;
animation-delay: 15s;
animation-fill-mode: both;
}

#image img{
height: 100vh;
}

@keyframes info{
from{left: -75vw;}
to{left: 5vw;}
}


#info1, #info2, #info3{
position: fixed;
z-index: 10;
padding: .5%;
background: #170401;
border: .25vh #bfbfbf solid;
font-family: 'Coromorant';
font-size: 1.75vh;
color: #fff;
animation: info 3s 1;
animation-delay: 15s;
animation-fill-mode: both;
overflow: auto;
}

h1{
font-family: 'Cormorant SC';
font-size: 4vh;
font-weight: lighter;
border-bottom: .15vh #fff solid;
}

h2{
font-family: 'Cormorant SC';
font-size: 2.75vh;
font-weight: lighter;
}

#info1, #info2{
height: 19vh;
width: 25vw;
}

#info1{bottom: 55vh;}
#info2{bottom: 32.5vh;}

#info3{
height: 19vh;
width: 45vw;
bottom: 10vh;
}

@keyframes gif{
from{left: -48.5vw;}
to{left: 31.5vw;}
}

#gif1, #gif2, #gif3{
position: fixed;
z-index: 10;
padding: .5%;
border: .25vh #FADF9C solid;
height: 11.5vh;
width: 18.5vw;
animation: gif 3s 1;
animation-delay: 15s;
animation-fill-mode: both;
}

#gif1{
position: fixed;
background: url(https://i.imgur.com/1Q4ZzfU.gif);
background-size: cover;
background-position: center;
bottom: 32.5vh;
}

#gif2{
position: fixed;
background: url(https://i.imgur.com/sm0ZSIW.gif);
background-size: cover;
background-position: center;
bottom: 47.6vh;
}

#gif3{
position: fixed;
background: url(https://i.imgur.com/q9zZv1C.gif);
background-size: cover;
background-position: center;
bottom: 62.5vh;
}


#title{
position: fixed;
height: 15vh;
top: 4vw;
text-align: left;
z-index: 11;
width: 65vw;
animation: info 3s 1;
animation-delay: 15s;
animation-fill-mode: both;
}
 t{
 font-family:'Great Vibes';
 font-size:16vh;
 background: url(https://i.imgur.com/HkgZf5a.gif);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 0 1vh #fff);
 }

.r{float: right;}

a{
color: #fff;
transiton; 0.3s;}
a:hover{
transition: 0.3s;
text-shadow: 0 0 1vh #fff;
}



</style>
<div id="intro"></div>
<div id="introquote1">Before the boy who lived, there was another story.</div>
<div id="introquote2">One of a monster inside of a man.</div>
<div id="introquote3">One of a hero inside of a child.</div>
<div id="introquote4">One of a traitor inside of a friend....</div>
<div id="introquote5">...And one of an angel inside of a demon.</div>
<div id="introquote6"> - Mordred Pendragon</div>

<div id="image"><img src="https://i.imgur.com/17pTsaY.png"></div>
<div id="gif1"></div>
<div id="gif2"></div>
<div id="gif3"></div>

<div id="title"><t>Mordred Pendragon</t></div>
<div id="info1">
<h1>Dossier</h1>
True Name:<div class="r">Stat</div><br>
Also Known As:<div class="r">Stat</div><br>
Gender:<div class="r">Stat</div><br>
Race:<div class="r">Stat</div><br>
Class:<div class="r">Stat</div><br>
Origin:<div class="r">Stat</div><br>
Master:<div class="r">Stat</div><br>
<br>
Height:<div class="r">Stat</div><br>
Weight:<div class="r">Stat</div><br>
Preference:<div class="r">Stat</div><br>
Marital:<div class="r">Stat</div><br>
Status:<div class="r">Stat</div><br>
</div>

<div id="info2">
<h1>Description</h1>
Ruler's True Name is Jeanne d'Arc, the Saint of Orleans. A Catholic saint born in Domrémy, France, and the heroine of France who liberated Orléans in the Hundred Years' War.
<h2>Life</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Laoreet non curabitur gravida arcu. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Tincidunt id aliquet risus feugiat in. Donec enim diam vulputate ut pharetra sit amet. Diam maecenas sed enim ut sem viverra aliquet eget sit. Varius sit amet mattis vulputate enim nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Vel elit scelerisque mauris pellentesque. Neque viverra justo nec ultrices dui sapien eget mi proin. Dolor sit amet consectetur adipiscing. Id faucibus nisl tincidunt eget nullam non. Nunc faucibus a pellentesque sit amet porttitor eget. Iaculis eu non diam phasellus. Massa vitae tortor condimentum lacinia.</p>

<p>Dolor sit amet consectetur adipiscing. In est ante in nibh mauris cursus mattis molestie a. Urna nec tincidunt praesent semper feugiat nibh. Nibh mauris cursus mattis molestie. Pretium quam vulputate dignissim suspendisse in est ante. Ligula ullamcorper malesuada proin libero nunc consequat. Accumsan in nisl nisi scelerisque eu ultrices vitae. Sit amet risus nullam eget felis eget nunc lobortis mattis. Non quam lacus suspendisse faucibus interdum posuere lorem. Nec ultrices dui sapien eget mi. Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Nisl purus in mollis nunc sed id semper risus in. In metus vulputate eu scelerisque felis imperdiet. Feugiat pretium nibh ipsum consequat nisl vel. Turpis massa sed elementum tempus egestas sed sed risus pretium. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Lacinia quis vel eros donec ac odio tempor. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Placerat duis ultricies lacus sed. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar.</p>

<p>Pellentesque habitant morbi tristique senectus. Quis risus sed vulputate odio ut. Lobortis scelerisque fermentum dui faucibus in ornare quam. Commodo ullamcorper a lacus vestibulum sed arcu non. Pretium nibh ipsum consequat nisl vel pretium. Non curabitur gravida arcu ac tortor. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Et tortor at risus viverra adipiscing at. Orci eu lobortis elementum nibh tellus molestie nunc non. Facilisis volutpat est velit egestas dui id ornare arcu odio.</p>

<p>Egestas egestas fringilla phasellus faucibus. Sem et tortor consequat id porta. A condimentum vitae sapien pellentesque habitant morbi tristique. Tristique nulla aliquet enim tortor. Pretium vulputate sapien nec sagittis. Eu facilisis sed odio morbi quis commodo odio aenean. Nulla porttitor massa id neque aliquam vestibulum morbi. Cras tincidunt lobortis feugiat vivamus at augue eget. Nam at lectus urna duis convallis convallis. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Duis ultricies lacus sed turpis tincidunt id aliquet risus. Sit amet volutpat consequat mauris. Lobortis scelerisque fermentum dui faucibus. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Sapien eget mi proin sed libero enim sed faucibus. Aliquet nibh praesent tristique magna sit. Sed arcu non odio euismod lacinia at quis. Imperdiet massa tincidunt nunc pulvinar sapien. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Pretium vulputate sapien nec sagittis.</p>

<p>Turpis egestas pretium aenean pharetra. Vestibulum lorem sed risus ultricies tristique. Neque aliquam vestibulum morbi blandit cursus risus. Platea dictumst quisque sagittis purus sit. Quis risus sed vulputate odio ut. A diam maecenas sed enim ut sem viverra. Ultricies mi quis hendrerit dolor magna eget est. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Ultricies integer quis auctor elit sed vulputate mi sit. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur adipiscing. Neque convallis a cras semper auctor neque vitae tempus quam.
</p>
</div>

<div id="info3">
<h1>OOC</h1>
<ol>
<li>OOC</li>
<li>OOC</li>
<li>OOC</li>
<li>OOC</li>
<li>This layout was constructed for <a target="_blank" href="https://roleplay.chat/editpro.php?user=.Knight of Red">Mordred Pendragon's</a> use by <a target="_blank" href="https://roleplay.chat/profile.php?user=From%20Shadows%20Codes">From Shadows.</a> Please do not steal or appropriate.</li>
</div>