portfolio / ANCHOR

<!DOCTYPE html>
<head>

<!--


                      anchor portfolio

                         @odeysseus


-->

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<title>portfolio</title>

<style type="text/css">

* { margin:0;padding:0;box-sizing:border-box; }
iframe.tmblr-controls { display:none!important; }

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

.tmblr-iframe { display:none; } /* to hide tumblr controls */

a { text-decoration:none;color:#333;transition:0.15s ease-in;}
a:hover { color:#aaa; }
b,strong { color:#333; /* bold text */ }

body {
    background:#fff;
    font-family:'Georgia',serif; /*font*/
    font-size:12px; /* font size */
    line-height:190%;
    font-weight:300;
    color:#767676; /* text color */
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    animation: fadein 1s;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;

}

section {
    margin:150px;
    width:600px;
}

h1,h2 {
    font-weight:400;
    color:#333;
    margin-bottom:5px;
}

h1 { font-size:20px; }
h2 { font-size:16px; }

article {
    margin-top:40px;
    padding-top:40px;
    border-top:1px solid #eee;
    display:block;
    min-height:140px;
}

article img {
    width:100px;
    height:100px;
    border-radius:100%;
    float:left;
    margin-right:40px;
}

nav { margin-top:5px; }
.content { width:460px;margin-left:140px; }
.anchor { bottom:27px;right:27px;position:fixed; }

</style>
</head>
<body>
    <section>
        <header>
            <h1>portfolio</h1> <!--title-->

            <!--description-->

            this is a page for writing projects, themes, chapbooks &mdash; whatever you create

            <!--end description-->

            <nav><!--links-->
                <a href="link url">home</a> .
                <a href="link url">dash</a> .
                <a href="link url">inbox</a>
            <!--end links--></nav>
        </header>

        <!--example project-->
        <article>
            <img src="image url"/>

            <div class="content">
            <h2>project heading</h2> <!--heading-->

            <!--description -->

            some description text.

            <!--end description-->

            <nav> <!--project links (optional) -->

                <a href="#!">some</a> .
                <a href="#!">relevant</a> .
                <a href="#!">links</a>
            <!--end project links--> </nav>
            </div>
        </article>
        <!--end project-->

        <!--example project-->
        <article>
            <img src="image url"/>

            <div class="content">
            <h2>project heading</h2> <!--heading-->

            <!--description -->

            some description text.

            <!--end description-->

            <nav> <!--project links (optional) -->

                <a href="#!">some</a> .
                <a href="#!">relevant</a> .
                <a href="#!">links</a>
            <!--end project links--> </nav>
            </div>
        </article>
        <!--end project-->
    </section>

<div class="anchor"><a href="http://odeysseus.tumblr.com">O</a></div>
</body>
</html>