asteria

<!DOCTYPE html>
<head>

<!---------------------------------------------------------------------
    ASTERIA - ABOUT PAGE I
       by stardusthms

              - don't steal any part of this code
              - DON'T TOUCH THE CREDIT
              - i added instructions about the customization throughout the code
              - if you have problems with the code or any questions about it,
                contact me at stardusthms.tumblr.com

    thank you for using!! ♡♡

    CREDITS:
       - fixed tumblr controls by @cyantists
       - icon in the header by @themehive

----------------------------------------------------------------------->

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><link href="https://fonts.googleapis.com/css?family=Karla:400,700|Muli|Questrial|Raleway" rel="stylesheet">
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

::selection {background:#b1b1b1; color:#fff;}

::-moz-selection{background:#b1b1b1; color:#fff;}

::-webkit-scrollbar {width:1px; height:2px;}

::-webkit-scrollbar-thumb {background-color:#adadad;}

#s-m-t-tooltip {background-color:#fff; color:#959595; font-size:9px; font-family:'Raleway', sans-serif; letter-spacing:1px; text-align:center; border: 1px solid #d1d1d1; position:absolute; padding:5px; margin-top:30px; text-transform:uppercase; z-index:99999999;}

/*--- tumblr controls from cyantists ---*/
iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:-2px!important;
    right:0!important;
    opacity:0;
    padding-right:38px;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;}

iframe.tmblr-iframe:hover {opacity:0.6!important;}

.hcontrols {position:fixed; top:0; right:0; z-index:999999999;}

.hcontrols svg {width:14px; height:14px; padding:9px;}

.hcontrols svg path {fill:#888888;/* change this to change the color of the icon */}

/*------------GENERAL---------*/

body {color:#636363; /*color of the text*/
      background-color:#fcfcfc; /*color of the background*/
font-style:normal; font-family:'Raleway', 'Karla', sans-serif; font-size:10px; font-weight:400; text-decoration:none; letter-spacing:0.15em;}

a {text-decoration:none; word-spacing:normal;
    color:#636363;/*color of the links, if you want to change the color of icon links find .icons a and change the colos*/
    font-size:10px;transition: 0.25s ease-out; transition-delay: 0.25s;}

a:hover {text-decoration:none; color:#e3e3e3; -transition: 0.25s ease-out; -webkit-transition:0.25s ease-out; -moz-transition:0.25s ease-out;-o-transition:0.25s ease-out;}

blockquote {text-align:left;border-left:1px solid #e8e8e8;padding-left:10px;}

.header, .info, .social, .about, .sideblogs, .surls, .links, .osocial
     {background:#fff;} /*color of the boxes*/

/*----------------HEADER-----------------*/

.header {width:820px; height:50px; margin:0 auto; border:1px solid #e8e8e8; position:relative; top:75px; bottom:10px;}

.dandh {float:left; margin-left:10px;}

.th-diamond-o {position:absolute; left:2px; padding:13px; font-size:20px; color:#edbdd6;}

h1 {font-size:20px; font-weight:500; position:absolute; left:40px; color:#636363;}

.hlinks {float:right; position:relative; top:20px; right:10px;}

.hlinks a {display:inline; text-transform:uppercase; padding:2px;}

/*--------------END HEADER------------*/

/*---------------------CONTAINER---------------*/
.container {width:820px; margin:0 auto;}

#column1, #column2, #column3 {position:absolute; top:72px;}

#column2 {left:215px;}

#column3 {left:630px;}

/*-----------INFO-----------*/
.info, .social, .links, .osocial {
    width:200px; height:100%; border:1px solid #e8e8e8; margin-bottom:15px;}

.infoh {float:center;
    margin-bottom:10px;
    border-bottom:1px solid #f2f2f2;
}

.info img {width:24px;height:24px;position:absolute; top:3px; border-radius:50%; padding:10px;
    margin-left:50px; /*decrease size here along with h2 left if your name is longer, decrease them by the same amount*/}

h2 {text-transform:uppercase; position:relative; /*--*/left:90px;/*--*/top:3px;}

.infoi {float:center; text-align:left; position:relative; font-size:11px; line-height:22px; padding:5px 10px 5px 12px; word-wrap:break-word; bottom:5px;}

.infoi b {font-weight:600;}
/*----------END INFO--------*/

/*------------SOCIAL--------*/
h3 {font-weight:500; padding:5px; text-transform:uppercase; border-bottom:1px solid #d8d8d8; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;}

.icons {text-align:center; padding:5px; margin-bottom:5px;}

.icons a {color:#edbdd6}

.icons a:hover {text-decoration:none; color:#e3e3e3; -transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s;}

.lnr-diamond {font-size:20px; padding:0px 2px;}
/*-----------END SOCIAL----------*/

/*------------ABOUT----------------*/
.about {width:400px; height:340px; border:1px solid #e8e8e8; text-align:center; margin-bottom:15px;}

.abouttext {padding:10px; padding-bottom:5px; height:310px; overflow:scroll;}

h4 {padding:5px; border-bottom:1px solid #d8d8d8; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content;}
/*-----------END ABOUT-------------*/

/*----------SIDEBLOGS---------*/
.sideblogs {border:1px solid #e8e8e8; width:180px; color:#636363;}

.sideblogs a {display:inline-block; text-transform:uppercase; padding:3px; font-weight:500; font-size:9.5px;}

table {text-align:center; margin:0px -10px 2px -10px; padding-bottom:4px;}
/*--------END SIDEBLOGS-------*/

/*---------SAVED URLS----------*/
.surls {position:relative; left:195px; top:-121px; width:200px; height:112px; overflow:scroll; padding:3px; border:1px solid #e8e8e8;}

.surls th {font-weight:300;}
/*--------END SAVED URLS-------*/

/*----------LINKS--------*/
.links {float:center; text-transform:uppercase; font-weight:normal; line-height:20px; width:190px;}

.links ol {margin-left:35px;}

.links a:hover {letter-spacing:0.3em; -transition-duration:0.5s; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration:0.5s;}
/*---------------END LINKS----------*/

/*-----------OTHER SOCIAL---------*/
.osocial {width:190px;}
/*--------END OTHER SOCIAL--------*/

/*--------------CREDIT---------*/
.credit {position:fixed; bottom:12px; right:12px;}
.lnr-star {font-size:12px;}
/*----------END CREDIT-----------*/


</style>

</head>

<body>

<!-------------------------HEADER------------------->
<div class="header">
       <div class="dandh"><span class="th th-diamond-o">

<!---if you want to change this icon, go to http://themehive.co/honeybee and pick the one you want. then past the icon name where th th-diamond-o is and with CTRL + F on your keyboard find .th-diamond-o and replace it with .th-your-icon---->

       <h1>ABOUT</h1><!---title--->
       </div>
       <div class="hlinks"><!----links---->
          <a href="/">home</a>
          <a href="/ask">message</a>
       </div></div>
<!-------------------END HEADER------------------->

<div class="container">
<div id="column1">

<!-----------------INFO------------->
<div id="column1">
     <div class="info">

    <div class="infoh"><img src="{PortraitURL-24}" /> <!---replace {PortraitURL-24} with the url of other image, if you don't want your icon as this picture--->
    <h2>anna</h2><!----your name---->
    <!---if your name is longer go to .info img and h2 in css to adjust it, i've       explained how :)---->
    </div>
    <div class="infoi">
     <b>AGE:</b> nineteen<br>
     <b>PRONOUNS:</b> she/her<br>
     <b>BIRTHDAY:</b> june 17th<br>
     <b>LOCATION:</b> croatia<br>
     <b>PERSONALITY:</b> infp<br>
     <b>MORAL ALIGNMENT:</b> neutral good<br>
     <b>HOROSCOPE:</b> gemini<br>
     <b>HOGWARTS HOUSE:</b> ravenclaw<br>
     <b>ILVERMORNY HOUSE:</b> pukwudgie<br>
     <b>WESTEROS HOUSE:</b> targaryen<br>
         </div></div>
<!--------------END INFO----------->

<!-------------SOCIAL------------>
<div class="social">
        <center><h3>social</h3></center><!----title------>

<!-----if you want to change these icons, go to https://linearicons.com/free and pick the icon you want, once you've done that, replace the <span class="lnr lnr-diamond"></span> with <span class="your icon"></span>. then with CTRL + F on your keyboard find .lnr-diamond and add it there like this .lnr-diamond, .lnr-your-icon ------->
         <div class="icons">
         <!----------insert links here------->
          <a href="YOUR LINK" title="link 1"><span class="lnr lnr-diamond"></span></a>
          <a href="" title="link 2"><span class="lnr lnr-diamond"></span></a>
          <a href="" title="link 3"><span class="lnr lnr-diamond"></span></a>
          <a href="" title="link 4"><span class="lnr lnr-diamond"></span></a>
          <a href="" title="link 5"><span class="lnr lnr-diamond"></span></a>
         </div>
     </div>
<!-----------END SOCIAL---------->

</div>

<div id="column2">

<!-------------ABOUT-------------->
<div class="about">
    <div class="abouttext"><br><span class="lnr lnr-star"></span>
    <i>there's a universe inside your head</i><!----quote---->
    <span class="lnr lnr-star"></span>
    <center><h4>title</h4></center><!----subtitle---->

    <!--------to add paragraphs, write your text inside <p></p>------>

    <p>You can use <b>bold</b>, <i>italic</i>, <small>small</small>, <big>big</big>, <s>strikethroughs</s>, <u>underlines</u> <br> <blockquote>blockquotes</blockquote></p>
    <p>You can write as much as you want</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices massa ullamcorper vestibulum gravida. Sed blandit, augue quis facilisis tincidunt, quam tortor laoreet ante, ut tincidunt quam dui quis lacus. Integer est diam, tristique at magna non, vulputate cursus eros. Donec dictum ac felis sed condimentum. Sed sed augue lectus. </p>

    <center><h4>title</h4></center><!----subtitle---->

   <p> Quisque sagittis dolor sem, non venenatis ante ultricies nec. Quisque porta, justo nec ullamcorper pulvinar, turpis ex blandit quam, quis varius urna nibh eu nisl. Quisque efficitur posuere tortor id mattis.</p>

   <p>Morbi eget luctus ipsum. Quisque dui velit, auctor vitae velit vitae, tristique semper tortor. Nam accumsan ut odio sit amet blandit. Cras tincidunt risus quis enim dapibus iaculis. Sed rutrum metus sollicitudin leo iaculis, id aliquet ligula volutpat. Sed tortor nunc, pulvinar et dignissim eget, lobortis sit amet mauris. Cras dignissim quis mauris id commodo. Etiam vitae dapibus mi.</p>
   <p>Duis auctor nulla diam, sed viverra felis viverra non. Mauris dapibus, metus sed interdum ultricies, odio mauris auctor sapien, in faucibus massa diam vel lacus. Nullam dui est, condimentum ac dui posuere, blandit ultricies elit.</p>
   <p>Duis neque orci, iaculis sed pharetra eget, blandit nec nunc. Morbi at sem interdum, mattis erat nec, viverra ex.</p>
    </div>
</div>
<!-------------END ABOUT------------->

<!------------SIDEBLOGS------------->
<div class="sideblogs">
     <center><h3>sideblogs</h3></center> <!----title----->
     <center><table>
     <tr> <!----first tow---->
      <th style="text-align:left;">  <a href="YOUR LINK">SIDEBLOG 1</a>
      <th style="text-align:right;"> <a href="">SIDEBLOG 2</a>
     </tr>
     <tr><!----second row----->
      <th style="text-align:left;">  <a href="">SIDEBLOG 3</a>
      <th style="text-align:right;"> <a href="">SIDEBLOG 4</a>
     </tr>
     <tr><!----third row----->
      <th style="text-align:left;">  <a href="">SIDEBLOG 5</a>
      <th style="text-align:right;"> <a href="">SIDEBLOG 6</a>
     </tr></table></center>
     </div>
<!-----------END SIDEBLOGS---------->

<!----------SAVED URLS------------->
<div class="surls">
     <center><h3>saved urls</h3></center><!----title----->
     <center><table>

     <!-------EXAMPLE ROW--------->
     <!--------you can add as many as you want-----
     <tr>
        <th style="text-align:left;"> text 1
        <th style="text-align:right;"> text 2
     </tr>-------->

     <tr><!----first row---->
        <th style="text-align:left;"> text 1
        <th style="text-align:right;"> text 2
     </tr>
     <tr><!-----second row----->
        <th style="text-align:left;"> text 3
        <th style="text-align:right;"> text 4
     </tr>
     <tr><!-----third row---->
         <th style="text-align:left;"> text 5
         <th style="text-align:right;"> text 6
     </tr>
     <tr><!------forth row----->
          <th style="text-align:left;"> text 7
          <th style="text-align:right;"> text 8
     </tr>
     </table></center></div>
<!--------END SAVED URL---------->
</div>

<div id="column3">

<!-------------LINKS----------->
     <div class="links">
     <center><h3>links</h3></center><!----title----->
     <ol type="i">
     <!------you can add as many as you want or delete some---->
     <!----if your links are too long and aren't positioned nicely in the box find (with CTRL + F on your keyboard) .links ol and
        decrease the number of left until you're satisfied with how it looks---->
         <li><a href="YOUR LINK">link 1</a>
         <li><a href="">link 2</a>
         <li><a href="">link 3</a>
         <li><a href="">link 4</a>
         <li><a href="">link 5</a>
         <li><a href="">link 6</a>
         <li><a href="">link 7</a>
         <li><a href="">link 8</a>
     </ol>
     </div>
<!--------END LINKS--------->

<!--------OTHER SOCIALS--------->
<div class="osocial">

        <center><h3>friends</h3></center><!-----title---->
         <div class="icons">
         <!----insert <br> after every 5th link if you are adding more---->
             <a href="YOUR LINK" title="LINK 1"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 2"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 3"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 4"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 5"><span class="lnr lnr-diamond"></span></a>
         </div>

         <center><h3>families</h3></center><!---title 2----->
         <div class="icons">
             <a href="YOUR LINK" title="LINK 1"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 2"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 3"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 4"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 5"><span class="lnr lnr-diamond"></span></a>
         </div>

         <center><h3>networks</h3></center><!----title 3---->
         <div class="icons">
             <a href="YOUR LINK" title="LINK 1"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 2"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 3"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 4"><span class="lnr lnr-diamond"></span></a>
             <a href="" title="LINK 5"><span class="lnr lnr-diamond"></span></a>
         </div></div>
<!--------END OTHER SOCIALS--------------->

</div></div>
<!----------------END CONTAINER--------------->

<!------------CREDIT---DON'T TUOCH------------>
<div class="credit"><a href="http://stardusthms.tumblr.com" title="stardusthms"><span class="lnr lnr-star"></span></a></div>
<!---------END CREDIT------------->

<div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
</body>
</html>