network theme

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--Please do not remove credits. Page by Pohroro-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>SWAGGIN IT OUT</title>
<link rel="shortcut icon" href="http://static.tumblr.com/ssqfxic/xp1mxmas6/favicon.png">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
        <style type="text/css">

            html, body
            {
                margin: 0;
                padding: 0;
            }

            body
            {
                background: url(http://i.imgur.com/ciB41Rh.png?1); /*change your body background image or color over here*/
                font-family: Libre Baskerville;
                font-size: 10px;
                color: white; /*change your body font color here*/
                width: 100%;
            }

            a
            {
                text-decoration: none;
                color: white; /*change your link color over here*/
            }

            a:hover
            {
                color: #0282C2; /*change your hover link color here*/
            }

            #mainContainer
            {
                width: auto;
                height: auto;
                overflow-x: hidden;
                overflow-y: hidden;
                display: inline-block;
            }

            #bar
            {
                width: 100%;
                height: 110px;
                bottom: 0px;
                text-align: center;
                position: fixed;
            }

            #title
            {
                font-family: Oswald;
                letter-spacing: 10px;
                font-size: 36px;
                text-transform: uppercase;
            }

            #subtitle
            {
                font-family: Libre Baskerville;
                font-style: italic;
                font-size: 14px;
                letter-spacing: 1px;
                line-height: 0px;
                padding-bottom: 15px;
                border-bottom: 1px solid white;
                width: 300px;
                margin: 0 auto;
            }

            #navigation
            {
                font-family: Oswald;
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 7px;
                margin-top: 7px;
            }


            table
            {
                position: absolute;
                margin-left: 0px;
                margin-top: 60px;
                text-align: center;
            }

            td
            {
                width: 180px;
                padding-left: 0px;
                padding-right: 0px;
                text-align: center;
            }

            .name
            {
                font-family: Oswald;
                font-size: 20px;
                letter-spacing: 5px;
                text-transform: uppercase;
                line-height: 10px;
            }
           #thing {
               width:188px;
               height:390px;
           }


           #thing:hover img{
               -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
           }

            .url
            {
                font-family: Libre Baskerville;
                font-style: italic;
                letter-spacing: 3px;
                text-transform: lowercase;
                line-height: 20px;
            }

            img
            {
                -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
                border: 7px solid white;
                width: 188px;
                height: 350px;
            }

         #thing:hover .description{
             opacity:0.8;
             height:50px;
             margin-left:5px;
             -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
         }

            .description
            {
                width: 180px;
                height: 0px;
                position: absolute;
                background: white;
                padding:5px;

                opacity:0;
                padding-top:0px;
                color: #606060; /*change the color of your description font here*/
                margin-top: -360px;
                margin-left: 5px;
                text-align: center;
                padding-right: 5px;
                font-family: 'helvetica neue';
                letter-spacing: 1px;
                z-index: 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;
            }

            .description a
            {
                color: black;
            }

            .description a:hover
            {
                background: yellow;
            }
            .links
            {
                margin-top: 10px;
                font-size: 12px;
                color: gray;
            }

            .links a
            {
                font-family: Oswald;
                text-transform: uppercase;
                font-size: 10px;
                letter-spacing: 2px;
            }

            ::-webkit-scrollbar
            {
                height: 5px;
                width: 3px;
                background: white;
            }

            ::-webkit-scrollbar-thumb
            {
                background: #606060; /*change the color of the scrollbar here*/
            }
        </style>
</head>
<body>
    <div id="mainContainer">

    <table>
        <tr>

            <!--start of member 1-->
            <td>
            <div class="name">name here</div>
            <div class="url"><a href="http://URL HERE.tumblr.com">url here</a></div>
            <div id="thing">
            <a href="http://URL HERE.tumblr.com">
            <img src="IMAGE URL - SIZE IS 188 X 350px"><!--change your member image here--></a>

    <div class="descriptionBack"><div class="description">
            <p><!--edit your member description from here-->description
        </div></div>
        <div class="links"><a href="http://URL HERE.tumblr.com">go to blog</a></div></td></div>
            <!--end of member 1-->


            <!--start of member, copy and past this whole thing-->
            <td><div class="name">you?</div>
            <div class="url">url</div>
            <div id="thing"><a href="http://url.tumblr.com/">
            <img src="http://static.tumblr.com/ssqfxic/PBfmzr0q3/nisaf.jpg"></a><!--change your member image here-->
        <div class="descriptionBack"><div class="description">
            <p><!--edit your member description from here-->
               descrippppp
            </div></div>
        <div class="links"><!--edit the links over here--><a href="http://url.tumblr.com">go to blog</a></div></td></div>
            <!--end of member-->

        </tr>
    </table>

    </div>

    <div id="bar">
        <div id="title">swagulars!</div>
        <div id="subtitle">the swagulars promo/friend group.</div>
        <div id="navigation">
            <a href="/">Home</a> - <a href="/message">Message</a> - <a href="/apply">join</a> - <a href="http://pohroro.tumblr.com" title="Page by Pohroro">&#169;</a>
        </div>
    </div>
</body>
</html>