<link href='http://fonts.googleapis.com/css?family=Abril+Fatface' rel='stylesheet' type='text/css'>
<style type="text/css">
#addie-container {
width: 500px;
height: 350px;
margin: 30px auto;
position: relative;
}
.addie-picture {
width: 245px;
height: 350px;
float: left;
}
.addie-info {
width: 245px;
height: 350px;
background-color: #ecf0cc;
float: right;
margin-left: 5px;
}
.addie-name {
font: normal normal normal 50px/100% 'Abril Fatface';
width: 500px;
text-align: center;
color: #504554;
letter-spacing: -2px;
word-spacing: 8px;
}
.addie-name a:link,
.addie-name a:active,
.addie-name a:visited,
.addie-name a:hover {
font: normal normal normal 50px/100% 'Abril Fatface';
width: 500px;
text-align: center;
color: #504554;
letter-spacing: -2px;
word-spacing: 8px;
text-decoration: none;
text-transform: none;
}
#addie-slide {
width: 245px;
height: 350px;
position: relative;
overflow: hidden;
}
.addie-hov {
width: 245px;
height: 350px;
position: relative;
overflow: hidden;
z-index:5;
background-color: transparent;
}
.addie-slidehov {
position: absolute;
left: 0px;
bottom: -350px;
width: 245px;
height: 350px;
z-index:5;
transition: 0.7s linear;
-moz-transition: 0.7s linear;
-webkit-transition: 0.7s linear;
-o-transition: 0.7s linear;
-ms-transition: 0.7s linear;
}
#addie-slide:hover .addie-slidehov {
transition: 0.7s linear;
-moz-transition: 0.7s linear;
-webkit-transition: 0.7s linear;
-o-transition: 0.7s linear;
-ms-transition: 0.7s linear;
bottom: 0px;
}
.addie-traits {
width: 180px;
height: 45px;
background-color: #f2f2ed;
font: normal normal normal 25px/180% 'Abril Fatface';
color: #a9b588;
text-align: center;
padding: 10px 10px 10px 10px;
outline: 3px #f2f2ed double;
position: relative;
top: 25px;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: -3px;
}
.addie-textbox {
width: 205px;
height: 310px;
background-color: #fff;
margin-top: 20px;
outline: 3px #504554 double;
outline-offset: -15px;
}
.addie-text {
width: 155px;
height: 270px;
overflow: auto;
font: normal normal normal 11px/90% 'times new roman';
color: #504554;
text-align: justify;
padding: 0px 10px 0px 10px;
position: relative;
top: 20px;
}
.addie-textbox h1 {
font: normal normal normal 25px/15% 'Abril Fatface';
color: #a9b588;
text-align: center;
}
</style>
<center>
<div id="addie-container">
<div class="addie-picture">
<div id="addie-slide"><img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1466508563_98.jpg">
<div class="addie-slidehov">
<div class="addie-hov">
<div class="addie-traits">age</div>
<div class="addie-traits">occupation</div>
<div class="addie-traits">membergroup</div>
<div class="addie-traits">relationship </div>
</div>
</div>
</div>
</div>
<div class="addie-info">
<div class="addie-textbox">
<div class="addie-text"><h1>about</h1>
blurb about character
<h1>friends</h1>
blurb about friends
<h1>enemies</h1>
blurb about enemies
<h1>lovers</h1>
blurb about lovers
<h1>ships</h1>
relationships go here!
</div></div>
</div>
</div>
</center>
AJÁNLOM AZ OLDALT
Sg
Archvum
ARCHVUM
