Amalyss

<style>

@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Josefin+Sans');

body{
 overflow:hidden;
}


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


@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(http://i.imgur.com/E1QZbHT.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://i.imgur.com/qHEkoy6.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(http://i.imgur.com/3S8dyLp.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}
#f1_container {
  position: absolute;
  width: 300px;
  height: 600px;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:-150px;
  z-index: 10;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all .5s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
}

#f2_container {
  position: absolute;
  width: 250px;
  height: 550px;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:200px;
  z-index: 10;
}

#f2_container:hover #f1_card {
  transform: rotateY(180deg);
}

#f3_container {
  position: absolute;
width: 250px;
  height: 550px;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:-450px;
  z-index: 10;
}

#f3_container:hover #f1_card {
  transform: rotateY(180deg);
}

#f4_container {
  position: absolute;
  width: 250px;
  height: 550px;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:-750px;
  z-index: 10;
}

#f4_container:hover #f1_card {
  transform: rotateY(180deg);
}

#f5_container {
  position: absolute;
 width: 250px;
  height: 550px;
  top:50%;
  left:50%;
  margin-top:-300px;
  margin-left:500px;
  z-index: 10;
}

#f5_container:hover #f1_card {
  transform: rotateY(180deg);
}

#textbox{
  background-color:transparent;
  width:210px;
  height:430px;
  border:solid 1px #ca3765;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-280px;
  margin-left:-115px;
  opacity:0;
  transition:1s ease-in;
  padding:10px;
  color:#ffc6a5;
  text-align:justify;
  font-family: 'Amatic SC', cursive;
	font-size:13pt;
  font-weight:400;
  overflow:auto;
}

a{
text-decoration:none;
color:#999999;
font-weight: italics;
transition:1s;
}

a:hover{
 color:#dadada;
}

h1{
font-family: 'Amatic SC', cursive;
	font-size:30pt;
  font-weight:400;
color:#fff;
text-shadow: 2px 2px #9a2eb3;
position:absolute;
  top:50%;
  left:50%;
margin-top:200px;
margin-left:-130px

}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: transparent;
  background-image:url('http://i.picpar.com/OnXb.jpg');
background-size:contain;
background-repeat:no-repeat;
width:100%;
height:600px;
}

.face.back2 {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: transparent;
  background-image:url('http://i.imgur.com/ti1eo75.png');
background-size:contain;
background-repeat:no-repeat;
width:100%;
height:580px;
transition:1s ease-in;
}

.face.back2:hover{
  background-image:url('http://i.imgur.com/0jjaRu9.png');
  transition-delay:100ms;
  transition:1s ease-in;
}

.face.back2:hover>#textbox{
  opacity:1;
   transition:1s ease-in;
}

.face.back3 {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: transparent;
  background-image:url('http://i.imgur.com/Fj7e2lO.png');
background-size:contain;
background-repeat:no-repeat;
width:100%;
height:580px;
transition:1s ease-in;
}

.face.back3:hover{
 background-image:url('http://i.imgur.com/QvgSABP.png');
  transition-delay:100ms;
  transition:1s ease-in;

}

.face.back3:hover>#textbox{
  opacity:1;
   transition:1s ease-in;
}

.face.back4 {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: transparent;
  background-image:url('http://i.imgur.com/tMp2XdL.png');
background-size:contain;
background-repeat:no-repeat;
width:100%;
height:580px;
transition:1s ease-in;
}

.face.back4:hover{

 background-image:url('http://i.imgur.com/Q87u4ko.png');
  transition-delay:100ms;
  transition:1s ease-in;

}

.face.back4:hover>#textbox{
  opacity:1;
   transition:1s ease-in;
}

.face.back5 {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: transparent;
  background-image:url('http://i.imgur.com/TAqkjjv.png');
background-size:contain;
background-repeat:no-repeat;
width:100%;
height:580px;
transition:1s ease-in;
}

.face.back5:hover{
   background-image:url('http://i.imgur.com/jbHw8QM.png');
  transition-delay:100ms;
  transition:1s ease-in;

}

.face.back5:hover>#textbox{
  opacity:1;
   transition:1s ease-in;
}
</style>
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
<div id="amalyss"></div>

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://i.imgur.com/lL9ikgD.png"width="300" height="580"/>
  </div>
  <div class="back face center">
  </div>
</div>
</div>

<div id="f2_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://i.imgur.com/lL9ikgD.png"width="250" height="480"/>
  </div>
  <div class="back2 face center">
  <h1>Personality/Appearance</h1>
  <div id="textbox">
Personality: Amalyss is more of a shut in, she prefers quiet situations. Sitting in the Underground in one of her fathers grand Library. But when she is above the surface she, well no. She still prefers to have her time alone, anywhere she can stick her nose in one of her books she can and will. Amalyss can become hyper aggressive when provoked, she tends to be provoked when others touch her. She'll keep herself calm and give plenty of warnings to get away from her before she explodes on someone.
<br><br>Appearance: The drow tends to wear her normal robes, a skirt that falls to her ankles to reveal those bare feet of hers, a enchanted belt that gives her extra intelligence, and holds her glass orbs full of potions, -Mana, Health, Poisons, ect.- and then her top piece tends to have leather straps to keep her entire equipment load light for best agility. <a target="_blank" href="http://i.picpar.com/qrXb.jpg" title="Armour"></a> <a target="_blank" href="http://i.picpar.com/qrXb.jpg">{ARMOUR}</a> While above the surface and in a more modern environment with a pair of black skinny jeans, tank top, and hoodie -Depending on the time of day.- and Sunglasses. She gets tired of people staring at her red eyes and sees no reason to keep people looking at her so she hides them away instead.


</div>
  </div>
</div>
</div>

<div id="f3_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://i.imgur.com/lL9ikgD.png"width="250" height="480"/>
  </div>
  <div class="back3 face center">
<h1>Dossier</h1>
    <div id="textbox">
      <span style="float: left;">Name: </span> <span style="float: right;">Amalyss</span><br>
<span style="float: left;">Nicknames:</span> <span style="float: right;"><a href="#" class="del" title="Her father calls her Lyssy, but if anyone above the surface dared to call her that to her face she'd probably sucker punch them.">Doesn't have many.</a> </span><br>
<span style="float: left;">Age:</span> <span style="float: right;">Appears 23</span><br>
<span style="float: left;">Gender: </span>  <span style="float: right;">Female</span> <br>
<span style="float: left;">Sexual Preference:</span><span style="float: right;">Men </span><br>
<span style="float: left;">Relationship Status:</span><span style="float: right;">Single </span><br>
<span style="float: right;"><a href="http://www.thiscrush.com/~amalyss">Why?</a> </span><br>
<span style="float: left;">Race:</span> <span style="float: right;">Drow </span><br>
<span style="float: left;">Status:</span> <span style="float: right;">Daughter to the Emperor </span><br>
<span style="float: left;">Title:</span> <span style="float: right;"><a href="#" class="del" title="- Won't admit it above the surface."> Princess </a>  </span><br>
<span style="float: left;">Class:</span> <span style="float: right;">Witch </span><br>
<span style="float: left;">Familiar:</span> <span style="float: right;">None as of yet. </span><br>
<span style="float: left;">Alignment:</span> <span style="float: right;">Chaotic Neutral </span><br>
<span style="float: left;">Height:</span> <span style="float: right;">5'6 </span><br>
<span style="float: left;">Weight:</span> <span style="float: right;">120lbs </span><br>
<span style="float: left;">Skin: </span> <span style="float: right;"> <a href="#" class="del" title="Her skin is pigmented a dark grey hue. ">Drow</a></span><br>
<span style="float: left;">Eyes: </span> <span style="float: right;"><a href="#" class="del" title="Ruby filled optics with without pupils.">Ethereal</a> </span><br>
<span style="float: left;">Hair:</span>  <span style="float: right;"> <a href="#" class="del" title="white tresses that fall to her mid-back, and on her right side it is pulled back and braided.">Long.</a> </span>  <br>
<span style="float: left;">Tongues:</span> <span style="float: right;"> <a href="#" class="del" title="Undercommon, Elven, Abyssal, Aklo, Aquan, Common, Draconic, Drow Sign Language (Will randomly stop speaking and simply start signing), Gnome, and Goblin.">Many. </a></span> <br>
<span style="float: left;">Companion:</span> <span style="float: right;">None yet.</span>
    </div>
  </div>
</div>
</div>

<div id="f4_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://i.imgur.com/lL9ikgD.png"width="250" height="480"/>
  </div>
  <div class="back4 face center">
<h1>OOC</h1>
    <div id="textbox">
<span style="float: left; font-weight:bold;">00: This profile was made by <a href="https://roleplay.chat/profile.php?user=Hound+of+Tindalos"> The  hound of Tindalos</a>, contact him for information on commissions and code help.</span>
</div>
  </div>
</div>
</div>


<div id="f5_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://i.imgur.com/lL9ikgD.png"width="250" height="480"/>
  </div>
  <div class="back5 face center">
<h1>Traits/Spells</h1>
    <div id="textbox">
Traits:<br>
<b>Ambitious Schemer:</b> Seduction and treachery are tools for advancement in drow society, even for the martially inclined.
<br><b>Ancestral Grudge</b> The enmity between the drow and elves and dwarves is long-standing and deeply entrenched.
<br><b>Blasphemous Covenant:</b> Since their twisted beginnings, the drow have consorted with demons. Some drow have strong ties with these creatures and may call upon ancient and obscene associations to sway demonic cooperation.
<br><b>Champion of Dark Powers: </b>Some drow offer themselves to dark patrons, particularly demon lords. Drow with this racial trait apply their spell resistance only against spells with the good or healing descriptor or against spells cast by a divine spellcaster who worships a good-aligned deity.
<br><b>Poison Minion:</b> Drow sometimes augment their slaves and frontline warriors by making them toxic, causing their bodies to internally produce mawbane poison. The resulting poisonous creature makes a potent weapon in the effort to discourage neighboring monsters. Any creature that hits such a character with a bite attack is immediately exposed to its poison.
<br><b>Seducer:</b> Certain drow possess an innate understanding of the darkest desires that lurk in every heart.
<br><b>Stalker:</b> The lands outside of drow cities, from rough-hewn tunnels to rocky caverns, are treacherous to navigate. Drow with this racial trait may move through difficult terrain without penalty while underground.
<br><b>Sure Step:</b> Adventurers can spend their whole careers in the alleys and sewers of large cities or the tunnels of the Underworld. Characters with this trait suffer no movement penalties when blinded or moving in darkness.
<br><b>Surface Infiltrator:</b> Some drow dwell close to the surface lands, either because they serve drow causes or they were exiled. Drow with this racial trait gain low-light vision, allowing them to see twice as far as humans in conditions of dim light.
<br><br>

Spells:
<br><b>Calm Animals:</b> Calms the mind of animals.
<br><b>Charm Animal:</b> Makes one animal your friend.
<br><b>Entangle:</b> Plants entangle everyone in 40-ft.-radius.
<br><b>Goodberry:</b> Little Berries that cure little bits of health - Max eight in one day or poisoned.
<br><b>Faerie Fire:</b> Outlines subjects with light, canceling blur, concealment, and the like.
<br><b>Animal Messenger:</b> Sends a Tiny animal to a specific place.
<br><b>Animal Trance:</b> Fascinates animals within an area.
<br><b>Fire Trap:</b> When cast on a closed object, once opened object explodes and deals fire damage who being who opened it.
<br><b>Hold Animal:</b> Paralyzes one animal for a short duration.
<br><b>Summon Swarm:</b> Summons swarm of bats, rats, or spiders.
<br><b>Wood Shape:</b> Rearranges wooden objects to suit you.
<br><b>Call Lightning:</b> Calls down lightning bolts from sky.
<br><b>Snare:</b> Creates a magic booby trap.
<br><b>Stone Shape:</b> Sculpts stone into any shape.
<br><b>Summon Nature's Ally:</b> Calls creature to fight - Summon Duration can summon different creatures.
<br><b>Air Bubble:</b> Creates a small pocket of air around your head or an object.
<br><b>Aphasia:</b> Prevent a target from understanding language.
<br><b>Blood Money:</b> Use your blood to create material components for spells.
<br><b>Darting Duplicate: </b>You create an illusory duplicate of yourself that opponents might waste an time and distract them to give a means of escape.
<br><b>Adjustable Polymorph: </b>Change your form into any animal.
<br><b>Touch of Combustion:</b> Cause the touched target to ignite in a violent burst of flame.
<br><b>Transfer Tattoo:</b> Move a magic tattoo from one creature to another.
<br><b>Unseen Servant</b> Invisible force obeys your commands.
<br><b>Ancestral Regression:</b> Drow target temporarily transforms into a surface elf and is protected as by undetectable alignment.
<br><b>Anonymous Interaction:</b> Creatures forget details about you and conversations with you.
<br><b>Arcane Disruption:</b> This spell makes it difficult for the subject to cast arcane spells, use spell-like abilities, and use some abilities granted by arcane spellcasting classes.
<br><b>Beastspeak:</b> Speak normally while in animal form.
<br><b>Blood Armor: </b>Your blood hardens when you are wounded, increasing your AC.
<br><b>Bone Fists: </b>The bones of your targets' joints grow thick and sharp, protruding painfully through the skin at the knuckles, elbows, shoulders, spine, and knees.
<br><b>Compulsive Liar:</b> Prevent target from speaking the truth.
<br><b>Dark Whispers:</b> Whisper through the shadows.
<br><b>Aura of Cannibalism: </b>You emanate an aura that saps the strength of others of your kind and channels their energy into you.
<br><b>Claim Identity:</b> You steal the target’s face, transforming yourself into a flawless imitation of it. All of the target’s facial features, vocal cues, and identifying physical traits change, transforming it into an unremarkable member of its race and gender.
<br><b>Polymorph Familiar:</b> Give your familiar the shape of another animal.
<br><b>Baleful Polymorph:</b> Turns subject into harmless animal.
<br><b>Teleport: </b>Instantly transports you.
<br><b>Ice Crystal Teleport:</b> Target is frozen, then teleported.
<br><b>Fairy Ring Retreat:</b> Toadstool circle leads to an extradimensional meadow.
<br><b>Trap the Soul: </b>Imprisons subject within gem.
<br><b>Astral Projection:</b> Projects you and others onto Astral Plane.
<br><b>Impenetrable Veil:</b> Enchant a target so it is nearly impossible to detect by both magical and mundane means, granting it multiple benefits.
<br><b>Scribe’s Binding:</b> This spell binds a single creature into a prepared book, sustaining it in suspended animation and filling the book with its experience and knowledge.
<br><b>Soul Bind: </b>Traps newly dead soul to prevent resurrection.
<br><b>Storm of Vengeance: </b>Storm rains acid, lightning, and hail.






  </div>
</div>
</div>