network / ANCHOR

<!DOCTYPE html>
<head>

<!--


                       anchor network

                         @odeysseus


-->

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


<title>network</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:14px; }

header { margin-bottom:40px; }

article {
    width:300px;
    padding:40px 20px;
    border-top:1px solid #eee;
    float:left;
    position:relative;
    height:180px;
}


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

nav { margin-top:5px; }

.content {
    width:120px;
    margin-left:140px;
    height:110px;
    padding-bottom:8px;
    overflow-y:auto;
    position:relative;
}

article:before {
  content:'';
  width:120px;
  height:110px;
  position:absolute;
  left:160px;
  bottom:29px;
  background:linear-gradient(transparent 95px, white);
  z-index:2;
  pointer-events:none;
}

article:last-of-type { margin-bottom:110px; }
.anchor { bottom:27px;right:27px;position:fixed; }

</style>
</head>
<body>
    <section>
        <header> <!--header-->
            <h1>network</h1> <!--heading-->

            <!--description-->

            description if you want it !

            <!--end description-->

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

<!--example member, copy and paste as needed-->
<article>
<img src="image url"/>
<div class="content">
        <h2><a href="link url">ella . odeysseus</a></h2> <!--name & url-->
        description here <!--description-->
</div>
</article>
<!--end member-->

<!--example member-->
<article>
<img src="image url"/>
<div class="content">
        <h2><a href="link url">ella . odeysseus</a></h2> <!--name & url-->
        description here <!--description-->
</div>
</article>
<!--end member-->

</section>

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