about #01: helium

<!DOCTYPE html>
<head>

<!--
                     about page by andrea @nymphthemes

            please keep the credit! thats all i ask, and this
                    page is yours to use for free!


             To begin customizing the colors, etc. press ctrl+f or cmd+f
                  and type ' e:' (with the space before the e).
-->


<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<title>about</title> <!-- e: title-->

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Source+Sans+Pro" rel="stylesheet">

<link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">

<style type="text/css">

.tmblr-iframe { display:none; }


body {
    font-family:'Source Sans Pro', sans-serif;
background:#fcfcfc; /* e: page background color */
color:#555; /* e: text color */
font-size:11.5px;
line-height:15px;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased; }

a {
color:#000; /* e: links color */
text-decoration:none;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;}

a:hover { text-decoration:none;
transition:all .4s ease;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
color:#c4cfe6; /* e: links hover color */  }

h1 { font-size:16px;font-weight:normal; font-family:'Inconsolata';text-transform:capitalize;}

h1:after {
    content:"";
    display:block;
    margin:5px -1px;
    height:2px;
    width:70px;
    background:#deeaeb; /* e: title underline color */}

h2 { font-size:16px;font-weight:normal; font-family:'Inconsolata';text-transform:capitalize; }
h2:after {
    content:"";
    display:block;
    margin:5px 10px;
    height:2px;
    width:40px;
    text-align:left!important;
    background:#deeaeb; /* e: title underline color */}


/* scrollbar */
::-webkit-scrollbar{height:3px;width:2px;background:inherit;}
::-webkit-scrollbar-thumb {background-color:#deeaeb; /* e: scrollbar color */}
::-webkit-scrollbar-track {background:inherit;}

    /* tooltips */
  #s-m-t-tooltip{ position:absolute;font-family:calibri;margin:15px;font-size:9px;color:#444;max-width:250px;text-transform:uppercase;letter-spacing:1px;z-index:999999999999;background:#fff;border:1px solid #eee;padding:2px 5px 2px 5px;  }


.nm { background-color:#fff;font-size:12px;position:fixed!important;bottom:25px;right:25px;z-index:10;text-align:center;padding:4px; width:17px; height:17px;text-decoration:none; color:#000;}
.nm a { color:#000; text-decoration:none;}
.nm a:hover { color:#aaa; text-decoration:none; border-bottom:1px solid #abcdef;}


#box, #this { width:400px; margin:0px auto;  overflow-y:scroll; background-color:#fff /* e:about box background*/; padding:10px;line-height:170%; border-bottom:1px solid #efefef;}
#box {  padding-bottom:10px;max-height:300px; min-height:300px; }
#this { min-height:100px; max-height:200px; overflow-y:scroll;margin-top:10px;}
section { margin:50px auto; width:400px;}

#this img { border-radius:100%; height:70px; width:70px; display:block;margin-bottom:10px;}

#box img { height:110px; padding-right:15px; padding-bottom:10px;}

.qa label { font-size:12px; text-transform:capitalize; font-family:'Inconsolata'; color:#c4cfe6 /* e: questions color*/;}
.qa label:after { content:":"; padding-left:1px; padding-right:4px;}
.qa { color:#aaa/* e: answers color */;text-transform:capitalize;}

#this a { display:inline; padding:0px 2.5px 0px 2.5px;}
#this a:after { content:"•"; color: #cadfeb;  padding-left:5px;}
#this a:last-child:after { content:"";}
#this center { width:200px; margin:0 auto;}

.back a { color:#888 /* e: return link color */; font-size:10px; padding:20px 10px 10px 10px}
.back a:hover { color:#cadfeb;}

</style>
</head>
<body>

<div class="back">
    <a href="/"><i class="fa fa-angle-left"></i> &nbsp;&nbsp;BACK TO BLOG</a>
</div>

<section>
<div id="box">
    <h1>about the blogger</h1>
    <img src="image url" align="left">
    <div class="qa">
<!-- feel free to add/delete labels! -->
    <label>name</label> ?
    <br><label>location</label> ?
    <br><label>Birthday</label> ?
    <br><label>pronouns</label> ?
    <br><label>nationality</label> ?
    <br><label>status</label> ?
    </div>
    <br>
    This is your about! Add this tag: </p> for a big line break, or you can just use <br><br>
	Write anything you want.

</div>

    <div id="this">
    <center>
        <img src="image url"><!-- square image is reccomended (ie, icon)-->
            <h2>social media</h2>
            <a href="url">instagram</a>
            <a href="url">twitter</a>
            <a href="url">goodreads</a>
            <a href="url">facebook</a>
            <a href="url">pinterest</a>
            <a href="url">ao3</a>
        <br>
    </center>
    </div>


</section>

<a href="http://nymphthemes.tumblr.com" title="theme &copy;" class="nm">N.</a>


<!-- tooltips -->
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

</body>
</html>