Page 01 (Network): Per Volar Sunata

<!DOCTYPE html>
<head>

<!--

NETWORK PAGE THEME BY FOUNDCAS/CAPECODING
- If you have any questions send a message to capecoding.tumblr.com/ask
- Do not remove the credit
- Do not use this as a base code

-->

<title>page title</title>

<link rel="shortcut icon" href="http://media.tumblr.com/2b148019c54956fd0d919edc585ced6c/tumblr_inline_njt9fvTvu31solj92.png"> <!--you can replace the url here with an icon image that you want-->

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.title').click(function(){
            $('.panel').slideToggle();
        });
    });
</script>


<style type="text/css">
::-webkit-scrollbar{
    width:4px;
    height:auto;
}

::-webkit-scrollbar-thumb{
    width:4px;
    height:auto;
    background:#475d62; /*scrollbar color*/
}

::selection{
    background:#b3eaf7; /*selection background*/
    color:#475d62; /*selection color*/
}

a{
    text-decoration:none;
    color:#333; /*color of links*/
    cursor:help;
}

body{
    color:#333; /*color of text*/
    cursor:crosshair;
    background:#f2f2f2; /*background color*/
    line-height:100%;
    word-wrap:break-word;
}

.con{
    position:fixed;
    top:-75px;
    width:500px;
    left: 50%;
    margin-left:-490px;
}

.mem{
    position:fixed;
    padding:0px 6px;
    width:100px;
    background:rgba(244,143,118,.4);  /*background color of pictures*/
}

.name{
    font-style:italic;
    font-size:13px;
    padding:4px;
    text-align:center;
}

.name a{
    color:#ee8888; /*color of member name*/
}

.desc{
    color:#ff6655; /*color of member description*/
    font-size:11px;
    text-align:center;
    margin-top:-30px;
    opacity:0;
    -moz-transition:.7s ease;
    -webkit-transition:.7s ease;
    -o-transition:.7s ease;
    -ms-transition:.7s ease;
    transition:.7s ease;
}

.mem:hover .desc{
    margin-top:0px;
    opacity:1;
    -moz-transition:.7s ease;
    -webkit-transition:.7s ease;
    -o-transition:.7s ease;
    -ms-transition:.7s ease;
    transition:.7s ease;
}

.ph img{
    width:100px;
    height:100px;
}

.panel{
    position:fixed;
    top:5%;
    left:-5px;
    background:rgba(244,143,118,.3); /*background of link menu*/
    width:200px;
    height:auto;
    padding:30px;
}

.title{
    position:fixed;
    cursor:help;
    top:0%;
    left:0%;
    font-size:20px;
    font-style:italic;
    line-height:25px;
    width:255px;
    height:5%;
    text-align:center;
    text-decoration:underline;
    background:rgba(244,143,118,.5); /*background of title*/
    z-index:9;
}

.mdesc{
    text-align:center;
    max-height:90px;
    padding:5px;
    overflow-y:auto;
}

li{
    list-style-type:none;
    text-align:center;
    padding:20px;
}

li a{
    padding:15px 25px;
    font-size:15px;
    -moz-transition:.7s ease;
    -webkit-transition:.7s ease;
    -o-transition:.7s ease;
    -ms-transition:.7s ease;
    transition:.7s ease;
}

li a:hover{
    color:rgba(244,143,118,.7); /*color of menu link on hover*/
    background:#fff; /*background of menu link on hover*/
    -moz-transition:.7s ease;
    -webkit-transition:.7s ease;
    -o-transition:.7s ease;
    -ms-transition:.7s ease;
    transition:.7s ease;
}

</style>
</head>
<body>


<div class="title">
    per volar sunata <!--This is your title-->
</div>

<div class="panel" style="display:none">


<div class="mdesc">
    parvis imbutus tentabis grandia tutus
</div>
<nav>
    <li><a href="/">back</a></li> <!--Back to Blog Link -->
    <li><a href="http://tumblr.com/dashboard">dash</a></li> <!--Dashboard Link-->
    <!--if you want more links just copy + paste these-->
    <li><a href="http://">link</a></li> <!--Link, just add url after http://-->
    <li><a href="http://">link</a></li> <!--Link, just add url after http://-->


    <li><a href="http://capecoding.tumblr.com">credit</a></li> <!--Credit, do not remove-->
</nav>
</div>


<table class="con" border="0" cellpadding="15" cellspacing="150">

 <!--BEGIN ROW ONE, copy and paste this if you'd like more rows-->
<tr>


<!--for more pictures on each row copy and paste this section from here-->
    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">socrates</a> <!--name of person + blog link here-->
            </div>
            <img class="ph" src="http://media.tumblr.com/be7045abe93edbf01d47a46d64420891/tumblr_inline_njtaaoO1tH1solj92.png"> <!--image url here-->
        <div class="desc">
            credo quia absurdum est <!--description here, this should be kept short-->
        </div>
        </div>
    </td>
<!--to here-->


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">plato</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/2b148019c54956fd0d919edc585ced6c/tumblr_inline_njt9fvTvu31solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">aristotle</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/e6d059d008f382be3b65b586f1668936/tumblr_inline_njt9w94Fe21solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>

    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">lamprocles</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/69ef2e301a4203a8778346507360cd55/tumblr_inline_njt9c4KecM1solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>

</tr>
<!--END ROW ONE-->


<!--BEGIN ROW TWO-->

<tr>

    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">dante</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/be7045abe93edbf01d47a46d64420891/tumblr_inline_njtaaoO1tH1solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">eurhipides</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/2b148019c54956fd0d919edc585ced6c/tumblr_inline_njt9fvTvu31solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">sophocles</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/e6d059d008f382be3b65b586f1668936/tumblr_inline_njt9w94Fe21solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">archimedes</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/69ef2e301a4203a8778346507360cd55/tumblr_inline_njt9c4KecM1solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>

</tr>
<!--END ROW TWO-->


<!--BEGIN ROW THREE-->

<tr>

    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">achilles</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/be7045abe93edbf01d47a46d64420891/tumblr_inline_njtaaoO1tH1solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">hippocrates</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/2b148019c54956fd0d919edc585ced6c/tumblr_inline_njt9fvTvu31solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>


    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">aristophanes</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/e6d059d008f382be3b65b586f1668936/tumblr_inline_njt9w94Fe21solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>

    <td>
        <div class="mem">
            <div class="name">
                <a href="http://bloglink.tumblr.com">erasmus</a>
            </div>
            <img class="ph" src="http://media.tumblr.com/69ef2e301a4203a8778346507360cd55/tumblr_inline_njt9c4KecM1solj92.png">
        <div class="desc">
            credo quia absurdum est
        </div>
        </div>
    </td>

</tr>
<!--END ROW THREE-->


</table>


</body>
</html>