ellana's old profile (tessisamess version)

<body>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title Here</title>
	<link rel="shortcut icon" href="ICOURL" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">

<style>

/*-- COME CLOSER [MAXI] - TESSISAMESS - 2018 --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL */

::selection{background:#ccc;}
::-moz-selection{background:#ccc;}

body{margin:0;padding:0;background:#333 url(https://i.imgur.com/2zzBySA.jpg)center fixed;background-size:cover;font-family:Open Sans,helvetica,arial,sans-serif;font-size:13px;color:#fff;text-align:center;}

a{color:#fff;text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{opacity:0.5;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-weight:normal;margin:0;}


/* NAVIGATION */

nav{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;text-align:right;font-size:11px;letter-spacing:1px;padding:10px 25px 0 25px;}
nav a{display:inline-block;margin-left:15px;}


/* HEADER */

header{height:35vh;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
#header-inner h1{font-size:35px;letter-spacing:2px;}
#header-inner h2{font-size:11px;letter-spacing:5px;}


/* WHOLE CONTAINER */

#container{padding:4vw;background:rgba(0,0,0,0.5);}

#container-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto;}
#container-inner h2{width:100%;text-align:center;letter-spacing:2px;}

.card{width:280px;height:350px;margin:2vw;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

.card-inner{padding:3vw;position:relative;z-index:200;}
.bg-mask{position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}

.card h3{font-size:22px;}
.card h4{font-size:11px;letter-spacing:2px;}
.card h3:after{content:'';display:block;height:2px;background:rgba(255,255,255,0.4);width:5%;margin:5px auto;-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-ms-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out;transition-delay:1s;}

.card-info{font-style:italic;padding-top:700px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}

.j-link{width:50%;margin:20px auto 0 auto;display:block;background:rgba(0,0,0,0.3);padding:3px;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;font-style:normal;}

.card:hover{background-size:150% auto!important;}
.card:hover .bg-mask{background:rgba(0,0,0,0.5);}
.card:hover .card-info{padding-top:20px;}
.card:hover h3:after{width:40%;}


/* FOOTER */

footer{padding:5vw;font-size:9px;text-transform:uppercase;letter-spacing:2px;font-family:Oswald,arial black,sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
footer a{opacity:0.7;}

</style>


</head>

<body>


<nav>
	<a target="_blank" href="https://roleplay.chat/">HOME</a>
</nav>


<header>
	<div id="header-inner">
		<h1> ELLANA LAVELLAN </h1>
		<h2> FORMER INQUISITOR. HOLY STUMP OF ANDRASTE. DRAGON AGE: INQUISITION. </h2>
	</div>
</header>


<article id="container">
<div id="container-inner">


	<section class="card" style="background:url(https://i.imgur.com/VCYLlkU.png)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3>SHAPESHIFTER</h3>
				<h4> SPECIALIZATION </h4>
			</div>
			<div class="card-info">
				Once the First of her Clan, Ellana retains a profound connection to the earth and all that depends on it—one that enhances her senses; reveals paths where most see none; and serves as an anchor for an otherwise unpredictable nature.
				<p> At the Well of Sorrows, she told Morrigan to fuck off and drank from the Well herself.

			</div>
		</div>
	<div class="bg-mask"></div></section>


	<section class="card" style="background:url(https://i.imgur.com/hmhg3GY.png)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3> ACHIEVEMENTS </h3>
				<h4> (FOR BETTER OR WORSE) </h4>
			</div>
			<div class="card-info">
				<br>⚜ Recruited the Mages
				<br>⚜ Supported Leliana as Divine
				<br>⚜ Helped the Grey Wardens rebuild
				<br>⚜ Reconciled Celene and Briala; recruited Florianne
				<br>⚜ Spared the Chargers
				<br>⚜ Defeated the Jaws of Hakkon
				<br>⚜ Drank from the Well
				<br>⚜ Disbanded the Inquisition
				<br>⚜ Vowed to stop Solas
				<br>

			</div>
		</div>
	<div class="bg-mask"></div></section>


	<section class="card" style="background:url(https://i.imgur.com/ZjPdPfw.png)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3> OOC </h3>
				<h4> RULES </h4>
			</div>
			<div class="card-info">
				<b>1.</b> shitposter, mirrorposter, snowballer. pm-friendlyish.
				<br>(don't @ me for smut.)
				<br><br>
				<b>2.</b> open to other inquisitors, OCs, AUs and not being the inquisitor.
				<br><br>
				<b>3.</b> <u><b>smut?</b></u> yes, but I'll smash and dash if I barely know you. ¯\_(ツ)_/¯

			</div>
		</div>
	<div class="bg-mask"></div></section>


</div>
</article>


<footer>
	<br>

	<a id="credit" href="http://tessisamess.insanejournal.com">CODING BY TESSISAMESS</a>
</footer>


</body>