exodus (about page)

<!DOCTYPE html>

<head>





    <!--page EXODUS by iristhms

    please do not copy anything or remove credit!

    thx for using. enjoy!!! -->





<link rel="shortcut icon" href="{Favicon}" />



<!-- tooltips script -->

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

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

<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>



<script>

(function($){

$(document).ready(function(){

$("[title]").style_my_tooltips({

tip_follows_cursor:false,

tip_delay_time:200,

tip_fade_speed:300

});

});

})(jQuery);

</script>







<!--fonts-->

<link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>



<!--icons-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



<!--title = the text that shows up on the browser tab-->

<title>info</title>



<style type="text/css">



/* tumblr controls */

.tmblr-iframe.iframe-controls--desktop {

  top:0%!important;

  right:0%!important;

  position:fixed!important;

  z-index:999999999!important;

}



.tmblr-iframe--desktop-logged-in-controls {

  -webkit-filter:invert(100%);

  -moz-filter:invert(100%);

  -o-filter:invert(100%);

  -ms-filter:invert(100%);

  filter:invert(100%);

  opacity:0.3;

  }



/* tooltips */

s-m-t-tooltip {

    max-width:300px;

    padding:5px;

    padding-top:3px;

    padding-bottom:3px;

    margin:5px 0px 0px 10px;

    background-color:#fff;

    font-family: 'karla', sans-serif;

    font-size:8px;

    font-weight:normal;

    letter-spacing:1px;

    line-height:8px;

    text-transform:uppercase;

    color:#a1a1a1;

    z-index:2147483647;

}



/* scrollbar */

::-webkit-scrollbar {

    width:15px;

    height:17px;

    background-color:#fff;

}

::-webkit-scrollbar-track {

    border:7px solid #fff;

    background-color:#fff;

}

::-webkit-scrollbar-thumb {

    border:7px solid #fff;

    background-color:#eee;

}



/* general */



body {

    background:#F7F7F7;

    color:000;

    font-family:'karla',sans-serif;

    line-height:15px;

    font-size:10px;

    margin:0;

    text-align:left;

}



.title {

    position:absolute;

    font-size:22px;

    font-weight:bold;

    left:40px;

    top:30px;

    padding-right:10px;

}



.navi {

    position:fixed;

    left:40px;

    top:63px;

    color:#A1A1A1;

    word-spacing:8px;

    font-size:12px;

    letter-spacing:1.5px;

    text-transform:uppercase;

}





a:hover {

    color:#000;

}



a {

    text-decoration:none;

    -webkit-transition:0.6s all;

    -moz-transition:0.6s all;

    -o-transition:0.6s all;

    transition:0.6s all;

    color:#a1a1a1;

}



h1 {

    font-size:13px;

    font-weight:bold;

    text-transform:uppercase;

    letter-spacing:1.5px;

    display:inline;

}



i {

    font-size:13px;

    letter-spacing:1px;

}





/* rectangle 1 */



.rectangle1 {

    position:fixed;

    width:250px;

    background:#ffffff;

    height:400px;

    left:35%;

    top:50%;

    transform: translate(-50%, -50%);

    box-shadow:1px 1px 2px 0px #e6e6e6;

    letter-spacing:0.5px;

}



.rectangle1-text {

    width:180px;

    position:absolute;

    height:auto;

    font-size:12px;

    margin-top:70px;

    letter-spacing:0.5px;

    display:inline;

    padding-left:60px;

}



.image {

    width:250px;

    position:relative;

    height:auto;

    left:65px;

    top:35px;

}



.image img{

    width:120px;

    height:120px;

    border-radius:150px;

}





/* icons */



.icon {

    padding-left:25px;

    display:inline;

    margin-top:70px;

    position:absolute;

}



i {

   width:10px;

   text-align:center;

}



/* rectangle 2 */



.rectangle2 {

    position:fixed;

    width:250px;

    background:#ffffff;

    height:400px;

    left:60%;

    top:50%;

    transform: translate(-50%, -50%);

    box-shadow:1px 1px 2px 0px #e6e6e6;

    letter-spacing:0.5px;

    overflow:scroll;

}



.rectangle2-text{

    position:absolute;

    padding:30px;

    margin-top:20px;

    height:auto;

    max-height:380px;

    font-size:12px;

    letter-spacing:0.5px;

    top:50%;

    transform: translate(-0%, -50%);

}





/* credit - DO NOT REMOVE!! */

.credit{

    position:fixed;

    font-size:12px;

    bottom:20px;

    right:20px;

    font-weight:bold;

    background:#fff;

    height:15px;

    width:15px;

    text-align:center;

    border:1px solid #e6e6e6;

}







</style>

</head>







<body>



<div class="title">info</div>



<div class="navi">

    <a href="/">Index</a>

    |

    <a href="/ask">Ask</a>

    |

    <a href="/archive">Archive</a>

    |

    <a href="/link1url">Link</a>



</div>



<div class="rectangle1">

    <div class="image"><img src="https://lh3.googleusercontent.com/-1eI5YFb4LPU/AAAAAAAAAAI/AAAAAAAAFHw/L5TDThqbQOI/s640-p-no/photo.jpg"/></div>

    <div class="icon"><h1><i class="fa fa-user-circle-o" aria-hidden="true"></i></h1></div>

    <div class="rectangle1-text">

        <h1>Basics</h1><br>

        <i>Name:</i> Iris <br>

        <i>Age:</i> 15</div>

    <br><br><br><br><br>

    <div class="icon"><h1><i class="fa fa-map-marker" aria-hidden="true"></i></h1></div>

    <div class="rectangle1-text">

        <i>Location:</i> Seattle

    </div>

    <br><br><br>

    <div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></div>

    <div class="rectangle1-text">

        <h1>Contact</h1><br>

        <i><a href="/">Email</a></i>

        <br>

        <i><a href="instagram.com">Instagram</a></i>

    </div>

    <br>

</div>



<div class="rectangle2">

    <div class="rectangle2-text">

        <h1>Exodus</h1><p>

        You hid <u>thorns</u> behind that <b>beauty</b> and I can't wake up from this <i>dream</i>

        <p>

        A dream, the most cruel queen, leaving me entranced. Your words echo and fill my entire world.<p>

        <i>She's so <b>dangerous.</b></i>

        <p> to start a new paragraph.

        <br> for a line break.

        <u>underline</u> <i>italic</i> <b>bold</b>.

    </div>

</div>



<div class="credit">

        <a href="http://iristhms.tumblr.com" title="theme">i</a>

</div>







</body>