RP: About Page

<!DOCTYPE html>
<html>
<head>

<!--

✧ * ☾ destinatiia.tumblr.com * ✧

    - you're allowed edit as much as you want, but don't repost and claim as your own afterwards.
    - don't move the credit or put it in another page
    - don't take fragments from this code and paste it on your own.
    - base code made by neonbikethemes as always,,,, absolutely blessed for their existence thank u
    -the icons in the preview were NOT made by me so credit to their rightful owners
    -enjoy !! and if you have any questions and/or problems just hmu

-->

<title>About</title>

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

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


<!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <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:90,
    tip_fade_speed:600,
    attribute:"title"
    });
    });
    })(jQuery);
    </script>


<style type="text/css">

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

/* -------- SELECTION TOOL ------- */

::-moz-selection {
    background: {color:text};
    color: {color:background};
}

::selection {
    background: {color:text};
    color: {color:background};
}

/* -------- SCROLLBAR ------- */

::-webkit-scrollbar {
    width: 9px;
}

/* Track */
::-webkit-scrollbar-track {
    background:{color:background};
}

/* Handle */
::-webkit-scrollbar-thumb {
    background:{color:text};
}
::-webkit-scrollbar-thumb:window-inactive {
	background: transparent;
}

/* ------- TOOLTIPS ------ */

#s-m-t-tooltip {
    max-width:300px;
    margin:10px 0px 0px 10px;
    background-color:{color:bakground};
    font-family:helvetica;
    font-size:12px;
    color:{color:text};
    z-index:999999999999999999999999999999999999;
    }

/* -------- BASICS ------- */

body {
    background: #ccc; /*-- you can change the background color here !! and if you're planning on using a background image, use the following:     background:url('bg url'); --*/
    color: #aaa; /*-- text color --*/
    font-family: helvetica, arial;
    letter-spacing:0.5px;
    text-shadow: 2px 2px 2px #eee;
    font-size: 10px;
    font-family:calibri;
    margin: 0;
    padding: 0;
    overflow-y:hidden;
    overflow-x:auto;
    word-wrap: break-word;
    line-height:150%;
}

h1 {
    font-family:'montserrat', sans serif;
    font-size:24px;
    padding-bottom:15px;
    border-bottom:1px solid #8ecbc4;
    color: #8ecbc4; /*-- change the color of the h1 text here --*/
}


h2 {
    font-family:'montserrat', sans serif;
    font-size:15px;
    font-style:italic;
    color: #ddbfa8; /*-- change the color of the h2 text here --*/
}


a {
    color: #ddbfa8; /*-- change the color of the links here --*/
    text-decoration: none;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    -ms-transition: all .7s;
    transition: all .7s;
}

sup, sub, small {
    color: #ddbfa8; /*-- change the color of the sub n smol text yeh --*/
    font-family:'montserrat', sans serif;
}

b, strong {
    color: #8ecbc4; /*-- change the color of the bold text --*/
    font-family:'montserrat', sans serif;
}

i, em {
    color: #8ecbc4; /*-- change the color of the italic text here --*/
    font-family:'montserrat', sans serif;
}

a:hover{
    color:#f5f5f5; /*-- change the color of the links hover text here --*/
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    -ms-transition: all .7s;
    transition: all .7s;
}

#bigcon{
    width:520px;
    margin-left:auto;
    margin-right:auto;
}

.tabcontent {
    position:static;
    margin-left:auto;
    margin-right:auto;
    width: 500px;
    margin-top:-50px;
    height:500px;
    padding:10px;
    background:#f5f5f5; /*-- this is the tab content bg color,, make sure it's the same as the container div --*/
    overflow:auto;
    text-align:center;
    margin-bottom:150px;
}

#container {
    position:static;
    margin-left:auto;
    margin-right:auto;
    width: 500px;
    margin-top:-50px;
    height:500px;
    padding:10px;
    background:#f5f5f5; /*-- this is the this is the container bg color,, make sure it's the same as the tabcontent div --*/
    overflow:auto;
    text-align:center;
    margin-bottom:150px;
}

#box {
    background:#f5f5f5; /*-- just make sure it's the same color as both the tabcontent and container so it looks neat --*/
    width: 520px;
    margin-top:-50px;
    height:520px;
    position:fixed;
    margin-left:0px;
    z-index:-99;
    box-shadow: 3px 3px 5px #ccc;
}

#topbar{
    position:static;
    margin-top:60px;
    margin-bottom:50px;
    text-align:center;
}

.blogtitle{
    margin-bottom:20px;
    text-transform:uppercase;
    font-size:24px;
    position:fixed;
    z-index:-9999;
    width:500px;
    margin-top:-40px;
    background-color:#fff; /*-- this is the muse page section and has the same color as the navbar div so yeah u got it luv --*/
    height:200px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-top:18px;
    letter-spacing:2px;
    font-weight:bold;
}

#navbar{
    display:inline-block;
    background-color:#fff;
    text-align:center;
}

 #yo {
    color: #fff;
    font-size:7.5px;
    float:right;
    right:0;
    text-shadow:none;
    bottom:0;
    margin-right:10px;
    margin-bottom:10px;
    padding:10px;
    position:fixed;
    font-weight:bold;
    text-align:center;

}


/* ------------------------------ TABS ------------------------------ */

.tabs {
    width:100%;
    margin-left:0px;
    display:inline-block;
}

    /*----- Tab Links -----*/

    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        margin-right:5px;
        display:inline-block;
        list-style:none;
        text-transform:uppercase;
    }

        .tab-links a {
            padding:7px;
            display:inline-block;
        width:1px;
        box-shadow: 3px 3px 5px #999;
        background:#ddd; /*-- this is the lil circle's bg color --*/
        height:1px;
        border-radius:15px;
        border: 3px solid #ddd;  /*-- this is the lil circle's border color when it's active --*/
            transition:all linear 0.15s;
        }

        .tab-links a:hover {  /*-- if u want it to look the same as the preview just copy the settings you put before--*/
            text-decoration:none;
        width:-1px;
        height:-1px;
        border-radius:15px;
        background-color:#ddd;
        border: 3px solid #ddd;
        }

    li.active a, li.active a:hover {
        background-color:transparent;
        border-radius:15px;
        -webkit-transition: all .7s;
        -moz-transition: all .7s;
        -o-transition: all .7s;
        -ms-transition: all .7s;
        transition: all .7s;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }

/* ----- muse css ----- */

.icons {
    width:auto;
    z-index:999999999;
    height:200px;
    font-family:'montserrat', sans serif;
    font-size:24px;
    line-height:40px;
    float:left;
    text-align:center;
    color: #8ecbc4; /* -- you can change the name color here ! --*/
    padding:10px;
    margin-left:8px;
}

.header {
    background-color:#fff;
    width:480px;
    height:180px;
    padding:10px;
    box-shadow: 3px 3px 5px #ccc;
    margin-top:0px;
    margin-left:0px;
}

.mdesc {
    width:200px;
    z-index:9999999999;
    height:140px;
    overflow:auto;
    float:right;
    padding:10px;
    font-size:11px;
    text-align:justify;
    margin-left:73px;
    margin-top:-215px;
}

.label {
    position:fixed;
    background-color:#fff;
    width:197px;
    padding:20px;
    box-shadow: 3px 3px 5px #ccc;
    text-align:center;
    font-weight:bold;
    z-index:99999;
    color:#8ecbc4; /*-- change the label text color here ! --*/
    font-family:'montserrat', sans serif;
    font-size:14px;
    height:auto;
    margin-top:20px;
    position:fixed;
}

.stats {
    position:fixed;
    background:#fff;
    text-align:justify;
    overflow:auto;
    height:195px;
    padding:15px;
    font-size:10px;
    width:207px;
    box-shadow: 3px 3px 5px #ccc;
    margin-top:85px;
}

.bio {
    width:213px;
    z-index:99;
    height:250px;
    position:fixed;
    overflow:auto;
    padding:20px;
    font-size:11px;
    text-align:justify;
    margin-top:20px;
    background-color:#fff;
    margin-left:248px;
    box-shadow: 3px 3px 5px #ccc;
}

.iconlinks {
    margin-top:236px;
    text-shadow: 3px 3px #fff;
}


/* --------------------------- Custom CSS -------------------------- */
</style>
</head>
<body>


<div id="bigcon">


<!--TOPBAR-->

<div id="topbar">

    <div class="blogtitle">
        <a href="/"style="font-family:'montserrat', sans serif;">About</a>
    </div>

    <div id="navbar">
        <div class="tabs">
            <ul class="tab-links">
                <li class="active" style="margin-left:-30px">
                <a href="#tab1"></a></li>
            </ul>
        </div>
    </div>

</div>

<!-- --------------------------- TABS -------------------------- -->
<div id="box"></div>

<div class="tabs">

<!-- --------------------------- TAB 1 -------------------------- -->

<div class="tab-content">
<div id="tab1" class="tab active">
<div id="container">


      <div class="header">
    <div class="icons">

            Elena Harland

            <br><img src="x" style="border-radius:50px;box-shadow: 3px 3px #999;" />&nbsp;
            <img src="x" style="border-radius:50px;box-shadow: 3px 3px #999;" />

        </div>

        <div class="mdesc"> <!-- you can put wtv you want here tbh,, i'd suggest you to not exceed the text, however, it overflows automatically so its ok though -->
<p>x</p>
<p></p>


     </div></div>


         <div style="margin-top:-10px;">
         <div class="label">THE xx</div>
         <div class="stats">
             <h1>Stats</h1>
<p><b>Full name:</b> xx</p>
<p><b>Age:</b> 21</p>
<p><b>Birthday:</b> 22/5</p>
<p><b>Gender:</b> Cisfemale, she/her</p>
<p><b>Residence:</b> xx</p>
<p><b>Langauges:</b> English</p>
<p><b>Orientation:</b> Heterosexual</p>
<p><b>Faceclaim:</b> x</p>
 <br><br>

         </div>


             <div class="bio">
             <h1>Biography</h1>

<center><b>BACKSTORY</b></center>
<p> xxxxx </p>


            </p>

    </div></div>


 </div>
</div>


    </div>
</div>


<!-- END OF TABS -->

</div>
</div>
</div>
</div>
</div>
<!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->

<script>
$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});
</script>

<script>
$(document).ready(function() {
  $('#filterOptions li a').click(function() {
    // fetch the class of the clicked item
    var ourClass = $(this).attr('class');

    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
      // show all our items
      $('#ourHolder').children('div.item').show();
    }
    else {
      // hide all elements that don't share ourClass
      $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
      // show all elements that do share ourClass
      $('#ourHolder').children('div.' + ourClass).show();
    }
    return false;
  });
});
</script>

<!--dont remove !!-->
 <div id="yo">
<a href="http://destinatiia.tumblr.com/"target="_blank"> <i class="fa fa-paint-brush fa-4x"style="color:#fff;"></i>  </a>
</div>


</body>
</html>