Page 01 | Odessa

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href='https://static.tumblr.com/vr8wztv/KHzpnokhf/cssreset.css' rel='stylesheet' type='text/css'>
<link href='https://dl.dropbox.com/s/2qmg7i8pf4otfj0/odessa-v1.0.1.css' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="{Favicon}">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i|Playfair Display:400,400i,700,700i|IBM Plex Mono:400,700" rel="stylesheet">


    <!--
    ===============================================


        All in one page: Odessa
        more @ https://spielglocken.tumblr.com

        Do not alter or remove credit


    ===============================================
	Notes are included below.
    -->


<!-- don't forget to change this -->
<title>Odessa</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">

/* variables */

:root {
    --bodyFont: 'Lora';
    --titleFont: 'Playfair Display';
    /* don't forget to link the font if you change this. */

    --contentWidth: 900px;

    /* appearance */

    --bodyBackground: #fafafa;
    --contentAreaBackground: #ffffff;
    --inContentBackground: rgba(0,0,0,.03); /* grey backgrounds inside the container */
    --accentColor: #8593ad;
    --borderColor: #eaedf2;

    /* text */

    --baseFontSize: 1em;
    /* in case you would like to make the container smaller/bigger and therefore may need to adjust the font size. base font size dictates the whole page's font size. you may use other units, for example pixel (eg. 16px), percentage (eg. 90%). 1em equals 16px. */
    --mainTextColor: #454951;
    --alternateTextColor: #969ca5; /* alternate, lighter text color */
    --headingTextColor: #232528;
    --mainLinkColor: #8593ad;
    --accentText: #f0f0f0; /* color of text on accent-color backgrounds */

    /* blogroll icons */

    --avatarRadius: 5px; /* 100%: round, [...]px: rounded corners, 0: square */
}
</style>
<noscript><style>body {opacity:1;}</style></noscript>
</head>
<body>
<div class="wrapper">


    <!------------------------------------------------

        HEADER

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

    <header class="main">
        <!-- page title -->
        <h1 class="cap title font">Odessa</h1>

        <!-- page subtitle -->
        <section class="header-quote it">
            Cliche quote it is us against the world
        </section>
    </header>
    <main>

        <!------------------------------------------------

        SECTION 1: ABOUT

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

        <section class="user-info">
            <!-- section title -->
            <h1 class="section-title font cap">About</h1>

            <!-- content goes here -->
            <article>
                <p>God god evil sea decieve burying. Snare insofar enlightenment suicide enlightenment intentions. Sea ubermensch ubermensch depths transvaluation ideal deceptions deceptions decieve eternal-return god strong oneself. Decrepit inexpedient justice faithful against sexuality play intentions will.</p>
                <p>Of strong zarathustra faith against noble pious good against morality justice. Passion oneself war self pinnacle selfish hope derive value selfish salvation inexpedient deceptions ultimate. Justice faithful chaos will virtues philosophy hope love society deceptions christian noble.</p>
            </article>
        </section>


        <!------------------------------------------------

        SECTION 2: LINKS/TAGS

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

        <section class="links">

            <!-- title -->
            <h1 class="section-title font cap">Works</h1>

            <!-- a sub-section. use this divide your links by category -->
            <article class="links-subsection">

                <!-- sub-section title -->
                <h2 class="cap font">Current Projects</h2>

                <!-- links go here -->
                <a href="/">Endure</a>
                <a href="/">Entertain</a>
                <a href="/">Enchant</a>
                <a href="/">Engulf</a>
            </article>
            <!-- close sub-section -->


            <!-- add or remove as necessary -->
            <article class="links-subsection">
                <h2 class="cap font">Finished Projects</h2>
                <a href="/">Enrich</a>
                <a href="/">Enhance</a>
                <a href="/">Enlighten</a>
                <a href="/">Enamour</a>
            </article>
            <article class="links-subsection">
                <h2 class="cap font">Other Projects</h2>
                <a href="/">Envision</a>
                <a href="/">Engage</a>
                <a href="/">Enliven</a>
            </article>
        </section>


        <!------------------------------------------------

        SECTION 3: BLOGROLL/FRIENDS

        for aesthetics reasons, the number of blogs shown on initial page load is limited to 10 (6 and 4 on medium and small screens respectively). to show all of the blogs you follow (i.e. blogroll list is not truncated), remove the class 'is-blogroll` from the markup right below this note, like so:

        `<section class="br">`

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

        {block:Following}
        <section class="br is-blogroll">

            <!-- title -->
            <h1 class="section-title font cap">Following</h1>
            <!-- blogroll goes here. if you use this for other purposes, replace the blogroll markups with your own. don't forget to check the `SHARE THE BLOGS I'M FOLLOWING` in the blog settings, or your blogroll won't show.-->
            <article class="br-list">
            <!-- structure for each link -->
            {block:Followed}
                <a href="{FollowedURL}">
                    <!-- avatar -->
                    <img src="{FollowedPortraitURL-128}" />
                    <!-- username -->
                    <div class="name it" data-tippy-content="{FollowedName}"><span class="has-ellipsis">{FollowedName}</span></div>
                </a>
            {/block:Followed}
            </article>
        </section>
        {/block:Following}


        <!------------------------------------------------

        SECTION 4: F.A.Q

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

        <section class="faq">
            <!-- section title -->
            <h1 class="section-title font cap">Frequently Asked Questions</h1>
            <!-- open question wrapper -->
            <article class="questions">

                <!-- question -->
                <section class="q">Eternal-return intentions joy zarathustra overcome ideal self faith horror deceptions eternal-return?</section>

                <!-- answer -->
                <section class="a">
                <p>Contradict suicide value insofar war merciful chaos chaos prejudice. Passion philosophy deceptions ascetic madness depths <a href="http://spielglocken.tumblr.com">against prejudice ubermensch</a> of virtues marvelous endless.</p>

                <pre>A preformatted text suicide mountains battle superiority eternal-return revaluation sexuality good suicide decrepit decrepit faithful, love society deceptions christian noble.</pre>

                <p>God god evil sea decieve burying. Snare insofar enlightenment suicide enlightenment intentions. Sea ubermensch <code>code ubermensch depths</code> transvaluation ideal deceptions deceptions decieve eternal-return god strong oneself. <b>Decrepit inexpedient</b> justice faithful <i>against sexuality play</i> intentions will. Of strong zarathustra faith against noble pious good against morality justice.</p>

                <h1>First heading</h1>

                Passion oneself war self pinnacle selfish hope derive value selfish salvation inexpedient deceptions ultimate. <u>Justice faithful chaos</u> will virtues philosophy hope love society <s>deceptions christian noble</s>.</p>

                <blockquote>
                Aversion endless noble ocean battle decieve pious superiority. Transvaluation fearful contradict eternal-return hatred joy free will chaos revaluation.
                </blockquote>

                <p>Suicide mountains eternal-return revaluation sexuality good suicide decrepit decrepit faithful. Society battle superiority eternal-return merciful mountains insofar horror.</p>
                <ul>
                    <li>Moral free</li>
                    <li>faithful hatred</li>
                    <li>law god</li>
                </ul>
                <ol>
                    <li>Faith philosophy ascetic</li>
                    <li>eternal-return value</li>
                </ol>

                <hr>

                <h2>Second heading</h2>
                <p>Suicide mountains eternal-return revaluation sexuality good suicide decrepit decrepit faithful. Society battle superiority eternal-return merciful mountains insofar horror.</p>

                <h3>Third heading</h3>
                <p>Value philosophy pinnacle decieve faithful battle christian law. Love zarathustra strong holiest sea. Evil right marvelous right faithful. Grandeur ocean horror sexuality salvation hope victorious right contradict abstract snare superiority selfish.</p>

                <h4>Fourth, fifth heading</h4>
                <p>Society holiest moral grandeur passion victorious convictions. Of ascetic revaluation pinnacle christian horror oneself decrepit pinnacle marvelous contradict good faithful joy.</p>
                </section>
            </article>
            <!-- /close question wrapper -->

            <!-- add/remove as necessary -->
            <article class="questions">
                <section class="q">Hatred eternal-return madness good free faithful ultimate ultimate abstract hope passion hope?</section>
                <section class="a">
                Will enlightenment ocean holiest evil. Right burying merciful madness madness. Suicide faithful reason noble spirit sexuality reason chaos. Virtues right sexuality ubermensch love gains god virtues joy ocean.
                </section>
            </article>
            <article class="questions">
                <section class="q">Hope superiority virtues ascetic disgust salvation.</section>
                <section class="a">
                <p>Insofar reason pinnacle sea war faith transvaluation war sexuality strong value. Salvation ultimate right marvelous horror superiority of revaluation passion. Strong merciful against burying eternal-return sexuality pious.</p>
                </section>
            </article>
        </section>


        <!------------------------------------------------

        SECTION 5: ASK BOX

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

        <section class="ask-box">
            <!-- section title -->
            <h1 class="section-title font cap">Say Hi</h1>

            <!-- write a disclaimer, or remove if you do not use this. -->
            <article class="disclaimer">
            A short disclaimer. Noble oneself god questions FAQ answered not evil spirit victorious god free salvation morality. Depths deceptions pinnacle burying morality self.
            </article>

            <!-- ask box code goes here. this one needs no editing. -->
            <article class="askbox-wrap">
                <iframe scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color: transparent; overflow: hidden; height: 190px;" id="ask_form" width="100%" height="190" frameborder="0"></iframe>
            </article>
        </section>
    </main>


    <!------------------------------------------------

        FOOTER

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

    <footer>
        <!-- add/remove as necessary -->
        <a href="/">Blog</a>
        <a href="/ask">Contact</a>
        <a href="/follow/{Name}">Follow</a>
        <a href="http://nietzsche-ipsum.com/">Existential</a>
        <a href="/">Crisis</a>
    </footer>


    <!------------------------------------------------

        SECTION ###: POP-UP

        this stores the rest of your blogroll. below you will find an attribute called `data-blogroll`. to change the name of link in the blogroll (the one you click to show the rest of the blogs), change this value. you do not need to edit anything else.

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

    <section class="pop" data-blogroll="See the rest">
        <div class="pop-content">
        </div>
    </section>
</div>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script src="https://dl.dropbox.com/s/qfc1c8h7hlnitqu/odessa-scripts.js"></script>
</body>
</html>