playing with fire by astraeawrites

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">


<!----------------✧ ☾ ☆ ☄ ⁛ THEMES BY ASTRAEAWRITES ⁛ ☄ ☾ ✧
                          DO NOT STEAL OR CLAIM AS YOURS!
              report problems or questions @ astraeawrites.tumblr.com----------->

<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">

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

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

<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla|Open+Sans|Playfair+Display|Source+Sans+Pro|Roboto" rel="stylesheet">

<style type="text/css">




/*---------------BASIC STYLING---------------*/

::-webkit-scrollbar-thumb:vertical {
    display:none;
}

::-webkit-scrollbar-thumb:horizontal {
    display:none;
}

::-webkit-scrollbar {
    display:none;
}

::selection {
    background-color:black;
    color: #fff;
}

a{
    text-decoration:none;
    color:black;
}

body{
    background-color:white;
    background-image:url('https://i.imgur.com/9K4bcBm.jpg');
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-attachment:fixed;
    font-family:"open sans";
    font-size:10px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/*---------------BOX STYLING---------------*/

#everything{
    top:50%;
    margin-top:-240px;
    left:50%;
    margin-left:-395px;
    position:fixed;
}

#whole{
    width:700px;
    height:400px;
    opacity:0.95 !important;
    position:absolute;
    margin-left:20px;
    margin-top:20px;
    border:30px solid #1d1a1a;
}



/*---------------NAVIGATION STYLING---------------*/

.navigate{
    font-size:17px;
    position:absolute;
    z-index:999999;
    right:10px;
    top:2px;
}

.navigate a{
    display:inline-block;
    font-weight:500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family:"crimson text";
    color:black;
    font-style:italic;
    margin-left:5px;
    margin-right:5px;
}



/*---------------INNER RIGHT STYLING---------------*/

.innerwhole{
    width:380px;
    height:380px;
    background:#e6e6e6;
    position:absolute;
    right:0px;
    padding:10px;
    opacity:1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



/*---------------INNER LEFT STYLING---------------*/

.profileimg{
    width:300px;
    height:400px;
    position:fixed;
}

.profileimg img{
    width:100%;
    height:100%;
}

.profileimg h1{
    position:absolute;
    margin:30px;
    bottom:0px;
    font-weight:900;
    color:white;
    font-family:"source sans pro";
    font-size:40px;
    font-style:italic;
    text-transform:uppercase;
}

.innerimg{
    width:260px;
    height:360px;
    border:20px solid black;
    position:fixed;
    z-index:10;
    opacity: 0.4;
}

.innerimg:before{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    border:1px solid white;
}



/*---------------INNER RIGHT HEADER STYLING---------------*/

.header{
    width:100%;
    height:27px;
}

.head{
    float:right;
    width:100%;
    height:1px;
    margin-top:3.7%;
    background:white;
}

.title {
    background:#e6e6e6;
    text-align: justify;
    font-family:"crimson text";
    text-transform:lowecase;
    font-weight:100;
    width:auto;
    padding-right:15px;
    padding-left:5px;
    font-size:30px;
    top:17.5px;
    margin:0px;
    line-height:10px;
    height:15px;
    color:black;
    position:absolute;
    font-style:italic;
}



/*---------------TOP SECTION RIGTHT QUOTE STYLING---------------*/

.topsec{
    width:357.5px;
    height:100px;
    position:absolute;
    margin:5px;
    padding:5px;
    padding-bottom:12.5px;
    margin-left:7.5px;
    margin-top:-5px;
    border-bottom:1px solid #fff;
}

.wrap {
    border-radius: 50%;
    border:5px solid #fff;
    height:90px;
    width:90px;
    float: right;
    shape-outside: inset(1% round 50%);
    margin-left: 10px;
    position:relative;
}

.topsec b{
    font-size:40px;
    margin-top:-2.5px;
    margin-left:-7.5px;
    color:#b6b6b6;
    position:absolute;
}

.topsec article{
    width:100%;
    height:auto;
    margin:10px 10px 10px 15px;
    text-align:justify;
}

.topsec article p{
    height:100%;
    width:70%;
    text-align:center;
    font-size:13.5px;
    font-family:"crimson text";
    font-style:italic;
    line-height:12.5px;
    bottom:0px;
}

.topsec article quotesource{
    font-family:"karla";
    font-size:10px;
    text-transform:uppercase;
    font-weight:100;
    float:right;
    position:relative;
    margin-top:-5px;
    background:#875c53;
    color:white;
    padding:2px 8px 2px 8px;
    border-radius:2px;
}



/*---------------STATS SECTIONG RIGHT INNER STYLING---------------*/

.stats{
    width:140px;
    height:215px;
    padding:5px 15px 5px 7.5px;
    margin-top:125px;
    border-right:1px solid #fff;
    position:absolute;
    overflow:hidden;
}

.stats h1{
    font-family:"crimson text";
    font-size:20px;
    font-style:italic;
    text-align:center;
    font-weight:100;
    line-height:15px;
    margin:0px;
    padding:0px;
    background:#875c53;
    color:white;
    margin-bottom:20.5px;
    padding:3px 8px 6px 8px;
    border-radius:2px;
}

.stats p{
    font-size:10px;
    font-family:"roboto";
    line-height:10.5px;
    border-bottom:1px solid #fff;
    padding-bottom:9.5px;
    padding-left:10px;
    padding-right:10px;
}

.stats p:last-child{
    border-bottom:none;
}

.stats span{
    float:right;
}

.stats b{
    font-size:9.5;
    font-family:"karla";
    text-transform:uppercase;
}



/*---------------ABOUT SECTION RIGHT SIDE STYLING---------------*/

.about{
    position:absolute;
    width:195px;
    height:225px;
    right:15px;
    margin-top:125px;
    padding:0px;
    overflow:auto;
    line-height:12.5px;
}

.about p{
    padding-top:2.5px;
    padding-bottom:2.5px;
    text-indent:0.9em;
}

.about p:first-child{
    padding-top:0px;
    margin-top:0px;
}

.about p:last-child{
    padding-bottom:0px;
    margin-bottom:0px;
}

.about h1{
    font-family:"karla";
    text-transform:uppercase;
    font-weight:100;
    color:white;
    background:#875c53;
    text-align:center;
    font-size:13px;
    padding:3px 2px 3px 2px;
    border-radius:2px;
}

.about h2{
    font-family:"karla";
    text-transform:uppercase;
    font-weight:100;
    color:white;
    background:#875c53;
    text-align:center;
    font-size:11px;
    padding:3px 2px 3px 2px;
    border-radius:2px;
}

.about ul, .about ol{
    margin-left:10px;
    padding-left:5px;
}



/*---------------CREDIT, DO NOT MOVE OR MAKE LESS VISIBLE!!---------------*/

.credit a{
     font-size:12px;
     position:fixed;
     font-family:"karla";
     font-weight:900;
     text-align:right;
     right:20px;
     bottom:20px;
     color:black;
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
}

.credit a:hover{
    color:#000;
    text-decoration:none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}




{CustomCSS}
</style>
</head>
<body>



<!---------------BODY------------------>

<div id="everything">

<div id="whole">



<!---------------LEFT PROFILE------------------>

    <div class="profileimg">

       <div class="innerimg"></div>

       <h1>playing with fire.</h1>

       <img src="https://i.imgur.com/rDRtf4b.png">

    </div>



<!---------------RIGHT PROFILE------------------>

    <div class="innerwhole">

<!---------------NAVIGATION------------------>

    <div class="navigate">
        <a href="/">001.</a>
        <a href="/">002.</a>
        <a href="/">003.</a>
        <a href="/">004.</a>
    </div>

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

        <div class="header">

            <div class="title">about astra.</div>

        <div class="head"></div>

        </div>

<!---------------TOP SECTION QUOTE------------------>

        <div class="topsec">

        <img class="wrap" src="https://i.imgur.com/VnAQtTB.png">

            <b>❝</b>

            <article>

            <p>I am glad it cannot happen twice, the fever of first love. For it is a fever, and a burden, too, whatever the poets may say. They are not brave, the days when we are twenty-one.</p>

            <quotesource>— Daphne du Maurier</quotesource>

            </article>

        </div>

<!---------------STATISTICS SECTION------------------>

        <div class="stats">

            <h1>important stats.</h1>

            <p><b>alias:</b> <span>astra / emiko</span></p>
            <p><b>d.o.b:</b> <span>nov 12, 1999</span></p>
            <p><b>age:</b> <span>seventeen</span></p>
            <p><b>timezone:</b> <span>pst</span></p>
            <p><b>sun sign:</b> <span>scorpio</span></p>
            <p><b>moon sign:</b> <span>capricorn</span></p>

        </div>

<!---------------ABOUT SECTION------------------>

        <div class="about">

            <p>Vivamus quis risus at enim consectetur lobortis. Sed vitae est nunc. Nulla egestas tristique sem, ut iaculis augue ultrices eget. Suspendisse hendrerit lectus porta, maximus arcu at, posuere eros.</p>

            <h1>this is an h1 title</h1>
            <h2>this is an h2 title</h2>

            <ul>
                <li>Sed facilisis neque ut sem lobortis, vel varius lacus facilisis.</li>
                <li>Fusce commodo augue non nibh auctor vulputate.</li>
            </ul>

            <ol>
                <li>Quisque fringilla ac augue sed consequat.</li>
                <li>Aliquam neque justo, varius nec ante sed, dictum iaculis ante.</li>
            </ol>

            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
        </div>

    </div>

</div>
</div>

<!---------------CREDIT // DO NOT REMOVE OR ALTER PLS !! ------------------>

<div class="credit"><a href="https://astraeacodes.tumblr.com/">AW</a></div>


</body>
</html>