Page05: Network 2 V2

<!---- 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;}

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:800px;
    position:absolute;
    margin-top:95px;
    margin-left:230px;
    text-align:left;
}

/*--whole box--*/
#people {
    margin-left:100px;
    margin-right:50px;
    margin-bottom:164px;
    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:180px;
    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;
}

#name2 {
    position:absolute;
    margin-left:0px;
    margin-top:166px;
    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;
}

#people:hover #names {
    margin-top:50px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
}

#desc {
    z-index:9;
    position:absolute;
    margin-top:130px;
    margin-left:5px;
    background-color:#000;
    font-size:10px;
    color:#e2e3e4;
    text-align:center;
    height:1px;
    width:123px;
    padding:1px;
    opacity:0;
    border-top:3px 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:1;
    margin-top:68px;
    height:124px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
}

#people:hover #icons img {
    height:139px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

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

#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:15px;
    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:100%;
    height:140px;
    margin-left:82px;
    margin-top:-110px;
}

</style></head><body>


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

<div id="iconcontainer">

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

<div id="sbar2">
    <div id="title">{title}</div>
    <div id="slinks">
        <a href="http://tumblr.com">link</a>
        <a href="http://tumblr.com">link</a>
        <a href="http://nialljhoren.tumblr.com">credit</a><!---DO NOT REMOVE-->
        </div>
</div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description wey hey up the lads had some great craic last night hey
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!--person-->
<div id="people">
<div id="icons"><img src="http://media.tumblr.com/tumblr_mab627cckV1qhfgy1.gif"></div>
<div id="names"><a href="http://.tumblr.com">name</a></div>
<div id="desc">
description
</div></div>

<!---copy and paste each "box code" to add more--->

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