Page06: Network Theme 03

<!---- theme made by nialljhoren ---->
<!---- do not use as base code, remove credit, or claim as your own --->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">

::-webkit-scrollbar {width:7px; height:6px;}

::-webkit-scrollbar-track {border-right:3px solid #fff; border-left:3px solid #fff; background-color:#000;}

::-webkit-scrollbar-thumb {border:1px solid #fff; background-color:#000;}

@font-face { font-family: "stars"; src: url('http://static.tumblr.com/ykhxonh/4ohmawvnx/i_m_fashionista__demo-version.ttf'); }

body {
    background-color:#ffffff;
    font-size:12px;
    font-family:cambria;
}

a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color:#fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a:hover {
    color:#696969; /*--link hover color--*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/*--position of the boxes--*/
#iconcontainer {
    z-index:1;
    width:750px;
    position:absolute;
    margin-top:95px;
    margin-left:230px;
    text-align:left;
}

/*--whole box--*/
#people {
    margin-left:105px;
    margin-right:62px;
    margin-bottom:170px;
    margin-top:5px;
    display:inline-block;
}

#icons img{
    position:absolute;
    margin-top:50px;
    border:5px solid #000;
    height:125px;
    width:125px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
}

#names {
    position:absolute;
    margin-left:0px;
    margin-top:190px;
    width:129px;
    text-transform:uppercase;
    text-align:center;
    font-size:10px;
    letter-spacing:1px;
    color:#fff;
    background-color:#000;
    padding:3px 3px 4px 3px;
    opacity:1;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
}

#aname {
    position:absolute;
    font-size:18px;
    margin-top:-30px;
    margin-left:3px;
    width:100px;
    padding:2px;
    text-align:center;
    font-family:stars;
}

#desc {
    z-index:9;
    position:absolute;
    margin-top:100px;
    margin-left:45px;
    background-color:#000;
    font-size:11px;
    color:#e2e3e4;
    text-align:center;
    height:10px;
    width:20px;
    padding:30px 6px 6px 6px;
    opacity:0;
    border:4px double #e2e3e4;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

#people:hover #desc {
    opacity:.9;
    margin-top:55px;
    margin-left:5px;
    height:81px;
    width:105px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

/*--sidebar--*/
#sbar {
    position:fixed;
    border-right:80px solid #000;
    border-left:80px solid #000;
    height:100%;
    width:700px;
    margin-left:230px;
    letter-spacing:2px;
    margin-top:-8px;
}

#sbar2 {
    z-index:9999999999999;
    position:fixed;
    height:80px;
    width:103%;
    margin-left:-240px;
    letter-spacing:2px;
    margin-top:-51px;
    background-color:#000;
}

#title {
    font-size:28px;
    position:fixed;
    letter-spacing:-1px;
    text-transform:uppercase;
    margin-top:10px;
    margin-left:325px;
    font-weight:100;
    color:#e2e3e4;
}

#slinks {
    position:fixed;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-top:45px;
    margin-left:340px;
    color:#e2e3e4;
    display:inline-block;
}

#slinks a {
    display:inline-block;
    margin-right:5px;
}

#sbarbg {
    position:fixed;
    z-index:99999999;
    background-color:#fff;
    width:680px;
    height:140px;
    margin-left:82px;
    margin-top:-110px;
}


#heyo {
    position:fixed;
    text-align:center;
    bottom:2px;
    right:7px;
    text-transform:uppercase;
    font-size:7.5px;
    display:block;
    background-color:#fff;
    letter-spacing:1px;
}

#heyo a{
    color:#b3b2b1;
    border: 1px solid #e4e3e2;
    padding: 2px 4px 5px 4px;
    background-color:#fff;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}

#heyo a:hover{
    color:#fff;
    background-color:#2E2D2E;
    border:1px solid #1F1F1F;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
</style></head><body>

<div id="sbar"></div>

<div id="iconcontainer">

<div id="sbarbg"></div>

<div id="sbar2">
    <div id="title">enter a title here</div>
    <div id="slinks">
    subtitle or
    <a href="http://url.tumblr.com">links</a>here
        </div>
</div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>


<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>


<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>


<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://25.media.tumblr.com/0a049264fba0072a818f733a6c533578/tumblr_mqvlz4t5FK1qcnibxo1_500.png"></div>
<div id="names"><a href="http://url.tumblr.com">name</a></div>
<div id="desc">
<div id="aname">name</div>
description
</div></div>

<div id="heyo"><a href="http://nialljhoren.tumblr.com">njh</a></div>

</div></body></html>