aether — about i

<!DOCTYPE html>
<head>

<!--

    aether — about i
            by divinethemes

               › do not steal any part of this code
               › edit however you want, but only for personal use
               › send any questions to divinethemes.tumblr.com/ask
               › thank you for using! <3


                             — customization —

› ctrl/command + f,  type "#cfe3ed" and replace with desired                      color to change the accent color
› or you can use the up/down buttons and change them each into different colors if you want

-->

<title>about — {Name}</title>
<link rel="shortcut icon" href="{Favicon}">

<!-- tooltips script-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<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>

<!--font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<!--fonts-->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">

<style type="text/css">

@keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
@-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}

/*-- scrollbar --*/
::-webkit-scrollbar-thumb:vertical {
background-color: #eee; /*slider color*/
height: 50px;
}
::-webkit-scrollbar {
height: 0px;
width: 2px;
background-color: #fafafa; /*scrollbar bg color*/
}
/*-- selection --*/
::-moz-selection { background:#eaeaea; color:#222; }
::selection { background:#eaeaea; color:#222; }

/*-- hide tumblr controls --*/
.tmblr-iframe, .iframe-controls–desktop {display:none !important;}

/*-- tooltips --*/
#s-m-t-tooltip {
    position:absolute;
    padding:0px 5px 0px 5px;
    margin-top:30px;
    color:#444;
    background-color:#fafafa;
    font-family:'Fira Sans', sans-serif;
    font-size:9.5px;
    font-style:italic;
    text-transform:lowercase;
    text-align:center;
    border:1px solid #eee;
    letter-spacing:0.5px;
    z-index:999999;
}

/*--general--*/
body {
    background-color:#fff;
    font-family:'Fira Sans', sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:190%;
    text-decoration:none;
    color:#555;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

body, * {
    cursor:auto;
}

a {
    text-decoration:none;
    color:#999; /* link color */
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

a:hover {
    color:#cfe3ed; /* link hover */
    text-decoration:none;
    cursor:pointer;
    -webkit-transition:0.4s ease-in;
    -moz-transition:0.4s ease-in;
    -o-transition:0.4s ease-in;
}

b, strong {
    font-weight:700;
    color:#222;
}

i, em {
    font-style:italic;
}

blockquote {
    padding-left:10px;
    border-left:1px solid #eee;
    margin:0px;
}

/*-- credit // pls don't edit! --*/
.c {
    position:fixed;
    bottom:15px;
    right:20px;
    font-size:10.5px;
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c:hover {
    transform:rotate(540deg);
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c i:hover {
    cursor:pointer;
}

/*-- containers --*/

#container {
    position:fixed;
    background-color:#fff;
    top:45%;
    left:50%;
    width:700px;
    height:400px;
    transform:translate(-50%, -50%);
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
}

#s1 {
    position:relative;
    width:130px;
    height:250px;
    margin-top:50px;
    border-right:1px solid #eee;
    font-family:'Karla', sans-serif;
    font-size:11px;
}

#s1 b:hover {
    color:#cfe3ed;
    transition:0.6s ease;
    -o-transition:0.6s ease;
    -moz-transition:0.6s ease;
    -webkit-transition:0.6s ease;
}

.icon img {
    width:90px;
    height:90px;
    border-radius:10%;
    float:left;
    margin-left:20px;
}


#quote {
    position:absolute;
    width:500px;
    height:20px;
    background-color:#fafafa; /*quote bg color*/
    border:1px solid #cfe3ed; /* quote border color */
    font-style:italic;
    font-size:12px;
    text-align:center;
    text-transform:lowercase;
    padding:10px;
    margin-top:48px;
    top:50px;
    left:130px;
    margin-left:20px;
    max-height:20px;
    overflow:auto;
}

#s2 {
    position:absolute;
    width:502px;
    max-height:230px;
    overflow:auto;
    left:130px;
    top:150px;
    padding:20px;
    padding-top:0px;
    margin-bottom:20px;
    bottom:20px;
}

#s2 a {
    color:#555;
    border-bottom:1px solid #cfe3ed; /* text section link border color */
    padding-bottom:1px;
}

#s2 a:hover {
    color:#cfe3ed; /* text section link hover color */
}


/*-- top --*/


#top {
    position:relative;
    height:25px;
    width:100%;
    border-bottom:1px solid #eee;
    padding-bottom:20px;
}

.title {
    text-transform:lowercase;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    float:left;
    padding-bottom:10px;
    margin-top:15px;
    font-family:'Playfair Display', serif;
}

.links {
    text-transform:lowercase;
    font-size:13px;
    letter-spacing:0px;
    float:right;
    padding-bottom:10px;
    margin-top:15px;
    font-style:italic;
    font-family:'Karla', sans-serif;
}

.links a {
    color:#c0c0c0;
    display:inline-block;
    margin-right:10px;
}

.links a:hover {
    color:#cfe3ed;
}

.links a:after {
    content:".";
}


.basics {
    background-color:transparent;
    width:200px;
    max-height:150px;
    overflow:auto;
    text-align:left !important;
    margin-left:20px;
    padding-top:20px;
    max-height:200px;
    overflow:auto;
}

.stitle {
    font-size:14px; /* subtitle font size */
    font-style:italic;
    font-weight:700;
    color:#cfe3ed; /* subtitle color */
    text-transform:lowercase;
    margin-bottom:2px;
    padding-bottom:2px;
    margin-top:5px;
    text-align:left;
    font-family:'Karla', sans-serif;
}



</style>
</head>

<body>

<div id="container">

<!-- top bar -->
<div id="top">


<!-- title -->
<div class="title">about</div>

<!-- top links -->
<div class="links"> <!-- you can add more with <a href="url">link</a> -->
<A href="/">index</A>
<a href="/ask">ask</a>
<a href="">link</a> <!-- if it's not on your blog you must add 'http://' in the front -->
<a href="http://divinethemes.tumblr.com">credit</a> <!-- you can delete this one if you want -->
</div>

</div>
<!--end top bar -->

<!-- section 1 -->
<div id="s1">

<!--icon-->
<div class="icon">
<img src="{PortraitURL-96}"/> <!-- replace {PortraitURL-96} with an image URL if you want a custom icon or it'll just be your default icon -->
</div>

<!-- basics // fontawesome.com/icons for more icons -->
<div class="basics">
<b><i title="name" class="fas fa-user"></i></b> &nbsp;name <br>
<b><i title="age" class="fas fa-calendar"></i></b> &nbsp;age <br>
<b><i title="pronouns" class="fas fa-venus"></i></b> &nbsp;prounouns <br>
<b><i title="location" class="fas fa-map-marker"></i></b> &nbsp;location <Br>
<b><i title="personality" class="fas fa-leaf"></i></b> &nbsp;mbti <Br>
<b><i title="star sign" class="fas fa-star"></i></b> &nbsp;star sign <Br>
<b><i title="birthday" class="fas fa-birthday-cake"></i></b> &nbsp;birthday <Br>
</div>

</div>
<!-- end section 1 -->

<!-- quote -->
<div id="quote">
put a short quote here!
</div>
<!-- end quote -->

<!-- text section start -->
<div id="s2">

thanks for using this ilu<br>
hope ur having a great day & don't be afraid to ask questions if u have any!  <br>
<b>bold</b>, <i>italic</i>, <small>small</small>, <s>strikethrough</s>, <a title="link title" href="/">link</a> <Br>
<blockquote>blockquote</blockquote>

<div class="stitle">here's a subtitle if u want</div>

<p>this is a paragraph</p>

<p>put as much as you want - it scrolls automatically!</p>

</div>
<!-- text section end -->


</div>
<!-- end container -->

<!-- credit // pls don't edit! -->
<div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
</div>



</html>