Character Pge #03

<!--

  	>> ETHEREAL THEMES // CHARACTER PAGE #02

	   Designed by etherealthemes
 	   etherealthemes.tumblr.com
  	   ⓒ 2016 - 2017

  	>> TERMS OF USE

       Do NOT remove the credit
	   Do NOT claim as your own

	   *You can move the credit, but leave it visible
	   *Edit as much as you'd like
	   *Feel free to ask about basic customization
	   *Theme suggestions always welcomed

  	>> EXTRAS

  	   Fonts by Google Fonts

NOTE:
This page will auto center and auto align the characters. While editing, the characters might be mis-aligned. Once you go to yoururl.tumblr.com/page the characters will auto-fill the screen depending on the screen size that's being used to view.

Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.

To change colors, press CTRL+F and "search for" the original hex code. Then change the color with the "replace with" to change all the associated colors. Then you can go through and tweak individual colors. This just makes it easier to go from light to dark without having to go through each color.

ACCENT COLORS CHEATSHEET:
Pink - Topbar Title - #f3b9cf
Blue - Border - #9bdcf7
Black - Link Hover - #101010


-->

<!DOCTYPE html>
<html>
<title> Page Title </title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href='https://fonts.googleapis.com/css?family=Open+Sans|Fjalla+One' rel='stylesheet' type='text/css'>


<style type="text/css">

/* ---  Body Scrollbar ---  */

::-webkit-scrollbar {width:7px;background-color:#ffffff;}
::-webkit-scrollbar-thumb {background-color:#eeeeee;}

/* ---  Character Scrollbars ---  */

div::-webkit-scrollbar {width:7px;background-color:#ffffff;}
div::-webkit-scrollbar-thumb {background-color:#dfdfdf;}
div::-webkit-scrollbar-corner {background-color:#ffffff;}

/* ---  General ---  */

body {
    margin:0px;
    font-family: 'Open Sans', sans-serif;
    color:#8f8f8f;
    font-size:10px;
    line-height:12px;
    background-color:#ffffff;
}

#et {
    background:transparent;
    color:#000000;
    background:transparent;
    right:0px;
    bottom:0px;
	padding:5px;
    position:fixed;
    letter-spacing:1px;
    opacity:0.4;
}

#et a {
    color:#000000;
    text-decoration:none;
    border:0px;
}

/* ---  Tumblr Controls ---  */

iframe.tmblr-iframe {
    z-index:999999!important;
    top:0px!important;
    right:-10px!important;
    opacity:0.6!important;
    padding-right:10px;
    transform:scale(0.6);
    transform-origin:100% 0;
    -webkit-transform:scale(0.6);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.6);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.6);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.6);
    -ms-transform-origin:100% 0;
}

iframe.tmblr-iframe {
	filter:invert(1);
    -webkit-filter:invert(1);
    -o-filter:invert(1);
    -moz-filter:invert(1);
    -ms-filter:invert(1);
}


/* ---  Topbar ---  */

#topbar {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:90px;
    text-align:center;
    background-color:#ffffff;
    border-bottom:1px solid #eeeeee;
    z-index:3;
}

.topbartitle {
    margin-top:25px;
    margin-bottom:20px;
    font-family: 'Fjalla One', sans-serif;
    font-size:28px;
    text-transform:uppercase;
    font-style:italic;
    letter-spacing:1px;
    color:#f3b9cf;
}

#topbar a {
    background-color:#ffffff;
    padding:5px 10px 5px 10px;
    color:#000000;
    font-size:10px;
    text-transform:uppercase;
    text-decoration:none;
    border:0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

#topbar a:hover {
    background-color:#ffffff;
    color:#000000;
}

/* ---  Containers ---  */

#container {
    margin: 0 auto;
    width:80%;
}

#content {
    width:100%;
    margin: 0 auto;
    margin-top:120px;
    float:center;
}

/* ---  Character Box ---  */

#characters {
    display:inline-block;
    width:450px;
    height:200px;
    margin:0px 20px 35px 20px;
}

#characterimg {
    width:450px;
    height:200px;
    z-index:-1;
}


/* ---  Character Hover Info ---  */

#charimg {
    position:absolute;
    height:145px;
    width:145px;
    margin-top:0px;
    margin-left:0px;
    z-index:2;
}

#character {
    position:absolute;
    margin-top:-186px;
    margin-right:10px;
    margin-left:10px;
    width:400px;
    height:150px;
    padding:10px;
    background-color:#ffffff;
    z-index:1;
    opacity:0;
    -webkit-transition: all 350ms linear;
    -moz-transition: all 350ms linear;
    -ms-transition: all 350ms linear;
    -o-transition: all 350ms linear;
    transition: all 350ms linear;
}

#character:hover{
    opacity:1;
}

#characters:hover #character {
    opacity:1;
}

#characterinfo {
    position:absolute;
    overflow:scroll;
    margin-top:0px;
    margin-left:155px;
    width:245px;
    height:145px;
    height:160px;
}

.charname {
    font-family: 'Fjalla One', sans-serif;
    font-size:16px;
    text-transform:uppercase;
    text-align:center;
    font-style:italic;
    color:#9bdcf7;
    margin:10px 0 10px 0;
}

.charinfo {
    color:#000000;
    text-align:center;
    letter-spacing:1px;
}

#characterinfo a {
    border:0px;
    text-decoration:none;
    color:#000000;
    font-style:italic;
    -webkit-transition: all 10ms linear;
    -moz-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    transition: all 100ms linear;
}

#characterinfo a:hover {color:#949494;}

</style>

</head>
<body>


<!-- Start Topbar -->
<div id="topbar">
    <div class="topbartitle">Character Page</div>

    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>

</div></div>
<!-- End Topbar -->


<div id="container">
   <div id="content">
   <center>


<!-- Start Example Character -->
<div id="characters">
<div id="characterimg">
<img src="http://68.media.tumblr.com/e2cb29dc880466c9a0298ad7f88c53c5/tumblr_odixvbDkVK1ucjeiho1_500.jpg" /><!-- Character image 450X200 -->
    </div>

<div id="character">
<div id="charimg">
<img src="http://68.media.tumblr.com/490b87f64bff8e9b6ffe9edfe45f01cd/tumblr_odj6x20dXb1ucjeiho3_250.gif" />
                            <!-- Character hover image 145X145-->
</div>

<div id="characterinfo">
<div class="charname">Paul</div><!-- Character Name -->
<div class="charinfo">
personality type ; 24 ; Male <!-- Character Stats -->

<p><!-- This adds a space between lines -->

<a href="#">Link</a> ; <a href="#">Link</a> ; <a href="#">Link</a>
<!-- Character Links -->

<p><!-- This adds a space between lines -->

Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
<p><!-- This adds a space between lines -->
lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.


</div></div></div>
</div>
<!-- End Example Character -->


<!-- Start Character -->
<div id="characters">
<div id="characterimg">
<img src="http://placehold.it/450X200" /><!-- Character image 450X200 -->
    </div>

<div id="character">
<div id="charimg">
<img src="http://placehold.it/145X145" /><!-- Character hover image 145X145-->
</div>

<div id="characterinfo">
<div class="charname">Character Name</div><!-- Character Name -->
<div class="charinfo">
personality type ; age ; gender <!-- Character Stats -->

<p><!-- This adds a space between lines -->

<a href="#">Link</a> ; <a href="#">Link</a> ; <a href="#">Link</a>
<!-- Character Links -->

<p><!-- This adds a space between lines -->

Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
<p><!-- This adds a space between lines -->
lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.


</div></div></div>
</div>
<!-- End Character -->


<!-- Start Character -->
<div id="characters">
<div id="characterimg">
<img src="http://placehold.it/450X200" /><!-- Character image 450X200 -->
    </div>

<div id="character">
<div id="charimg">
<img src="http://placehold.it/145X145" /><!-- Character hover image 145X145-->
</div>

<div id="characterinfo">
<div class="charname">Character Name</div><!-- Character Name -->
<div class="charinfo">
personality type ; age ; gender <!-- Character Stats -->

<p><!-- This adds a space between lines -->

<a href="#">Link</a> ; <a href="#">Link</a> ; <a href="#">Link</a>
<!-- Character Links -->

<p><!-- This adds a space between lines -->

Character bio goes here. Lorem ipsum dolor sit amet, nunc quam id sed aliquet volutpat, praesent eu habitant eu eget voluptatibus, qui mauris et dapibus risus nulla, condimentum in tincidunt. Sed at, dignissim est rhoncus blandit erat sit tempus, sodales volutpat nibh sit suscipit, quis metus phasellus sit quis. Tincidunt ornare condimentum dignissim, non eu vel proin vitae, faucibus ut porta, purus feugiat elementum consequat et. Bibendum faucibus justo.
<p><!-- This adds a space between lines -->
lorem odio ut nibh, natoque magna adipiscing nec. Et dui et voluptatem, diam auctor augue id sed quis mattis, enim tellus enim, suscipit felis mollis ornare hymenaeos sem eros. Libero mollis ut fusce nulla, quis cras sem praesent consequat proin id, libero consequat mauris vestibulum donec.


</div></div></div>
</div>
<!-- End Character -->


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

<div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>

</div>
</div>

</body></html>