About Page 01

<head>

<link rel="shortcut icon" href="{Favicon}"/>
<title>About</title>
<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>

<!---------------------------------------------------------------------
----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
-------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
---------------------------------------------------------------------->

<style type="text/css">

::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #8b8a8b;
}

::-webkit-scrollbar {
    height:9px;
    width:2px;
    background-color: #fff;
}

#header {
    width:500px;
    height:150px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    text-align:center;
}

    #header img {
        width:500px;
        height:150px;
    }

#title {
    width:550px;
    font-family: 'Karla', sans-serif;
    text-transform:uppercase;
    background-color:#e0e0e0;
    margin-top:-150px;
    margin-left:-25px;
    opacity:0.8;
    color:black;
    padding:2px 0px 2px 0px;
    letter-spacing:1px;
    font-size:15px;
}

#description {
    width:150px;
    margin-top:10px;
    margin-left:175px;
    background-color:#ffffff;
    opacity:0.8;
    color:#4c4c4c;
    padding:2px 2px 2px 2px;
    font-size:8px;
    font-family:calibri;
    text-align:center;
    letter-spacing:1px;
    text-transform:uppercase;
}

#links {
    width:auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    padding-bottom:5px;
    border-bottom:1px solid #667371;
}

    #links a {
        display:inline-block;
        width:70px;
        padding:1px 0px 1px 0px;
        background-color:#ffffff;
        color:gray;
        font-size:10px;
        font-family:calibri;
        text-align:center;
        letter-spacing:1px;
        margin-left:2px;
        margin-right:2px;
        text-transform:uppercase;
        text-decoration:none;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

    #links a:hover {
        background-color:#667371;
        color:#ffffff;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
    }

#container {
    width:500px;
    height:350px;
    display:block;
    margin-top:60px;
    margin-left:auto;
    margin-right:auto;
}

#about {
    width:305px;
    height:350px;
    float:left;
    display:block;
    overflow:scroll;
    padding:10px;
    border:1px solid #D8D8D8;
}

    #about h1 {
        margin-top:5px;
        text-decoration:none;
        font-family: 'Karla', sans-serif;
        font-size:16px;
        letter-spacing:1px;
        color:#333333;
        text-transform:uppercase;
        font-weight:normal;
    }

    #about h1:first-letter {
        color:#75817F;
    }

    #about p {
        font-family:calibri;
        font-size:11px;
        text-align:justify;
        color:#5C5C5C;
    }

#picture {
    float:right;
    display:block;
    padding:5px;
    border:1px solid #D8D8D8;
}

    #picture img {
        width:150px;
        height:185px;
    }

#snapshot {
    margin-top:13px;
    float:right;
    display:block;
    width:150px;
    height:150px;
    padding:5px;
    border:1px solid #D8D8D8;
}

    #snapshot h1 {
        margin-top:3px;
        text-align:left;
        display:block;
        text-decoration:none;
        font-family: 'Karla', sans-serif;
        font-size:11px;
        letter-spacing:1px;
        color:#333333;
        text-transform:uppercase;
        font-weight:normal;
        border-bottom:1px solid #E0E3E3;
    }

    #snapshot p {
        margin-top:-5px;
        text-align:right;
        display:block;
        font-family:calibri;
        font-size:10px;
        text-transform:uppercase;
        color:#5C5C5C;
        margin-bottom:2px;
    }

#credit {
    font-size:9px;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-style:italic;
    letter-spacing:1px;
}

    #credit a {
        background-color:#fff;
        padding:5px;
        border-top:1px solid #e9e9e9;
        border-bottom:1px solid #e9e9e9;
        position:fixed;
        right:15px;
        bottom:10px;
        text-decoration:none;
        color:gray;
        -moz-transition-duration:1s;
        -webkit-transition-duration:1s;
        -o-transition-duration:1s;
    }

        #credit a:hover {
            color:#fff;
            background-color:#747474;
            -moz-transition-duration:1s;
            -webkit-transition-duration:1s;
            -o-transition-duration:1s;
        }

</style>

<body>

<!------------------------------------
     HEADER
------------------------------------->

<div id="header">
    <img src="https://24.media.tumblr.com/fcabfe205b232886996566431cbd7cb4/tumblr_myvbq3xh5l1rv5n8go1_500.png">
    <div id="links">
        <a href="/">HOME</a>
        <a href="/ask">ASK</a>
        <a href="/tagged/answered">ANSWERED</a>
        <a href="http://tumblr.com/dashboard">DASH</a>
    </div>
    <div id="title">TITLE GOES HERE</div>
    <div id="description">Your description will go here. You'll want to keep it fairly short or it will run off of the header. Hope you like!! :)</div>
</div>

<!------------------------------------
     CONTENT
------------------------------------->

<div id="container">
<div id="about">
<!--------- TEXT BOX BEGINS --------->
    <h1>Biography</h1>
    <p>Just a humble theme maker who really loves art. Actually, that's a lie - I have absolutely no knowledge of art history whatsoever. It bores me to tears. But the painting is pretty, no? And yes, that is a selfie of Claude Monet. Don't judge.</p>
    <h1>Theme Info</h1>
    <p>Ok onto the serious stuff. To add a title to your about description, just put it in a &#60;h1&#62; tag and close it with a &#60;/h1&#62;, like you'll see in the code. For the body paragraphs, just put them in between &#60;p&#62;these tags&#60;/p&#62;.</p>
    <p>If you go over the box height allowed (350px), a scrollbar will appear to accomodate the extra text!</p>
    <p>I don't know why on earth you would want to do this, but to replace the gorgeous Monet selfie with your own, just locate the link below in an &#60;img&#62; tag and replace it with a direct link of your picture. It will be automatically resized to 150 x 185px.</p>
    <p>The little snapshot info on the right (name, age, etc.) should be easy enough to edit - just a matter of replacing my text with your own. Let me know if you have any questions! Hope you like :D</p>
<!---------- TEXT BOX ENDS ---------->
</div>
<div id="picture"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQeaATRmjCBIxKWOCjhdmr-yYBR8-8pyRY1llWLVXyZw6iFdG1Vww"></div>
<div id="snapshot">
    <h1>Name:</h1>
    <p>Elizabeth</p>
    <h1>Age:</h1>
    <p>Twenty</p>
    <h1>Location:</h1>
    <p>America</p>
    <h1>Hobbies:</h1>
    <p>HTML, Science, Music, Fandoms, & General nerdiness</p>
</div>
</div>

<!--------------------------------------------
    CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
 --------------------------------------------->

<div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</a></div>

</body>