ICONS PAGE #4 // selenapastel

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

<!----

             theme made for selenapastel
             please, don't copy

---->


 <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" type="text/css" href="http://goo.gl/F6c7pZ">
<title>{Title}</title>
<Link rel="shortcut icon" href="{Favicon}" />
<script type="text/javascript">
function changeNavigation(id) {document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>

<style type="text/css">

body {
Background-color: #fdfdfd;
Text-transform:lowercase;
font-family:Open Sans;
font-size:10px;
font-weight:300;
color:#555555;
Background-attachment:fixed;
Background-position:top left;
Background-image: url("");}

a {color: #555555;
Text-decoration: none;
transition:all 1s ease;}
a:hover {color:#555555;}

::-webkit-scrollbar-thumb {background-color: #ccb2b2;
border: 7px solid #fff;
height:auto;
border-radius:100px;}
::-webkit-scrollbar {height:10px;
width:15px;
border-radius:100px;
background-color: #fff;
border:4px solid #fff;}

::-moz-selection {Background-color:#fff;}
::selection {Background-color:#fff;color:#555555;}

#credits {
position:fixed;
right:10px;
bottom:10px;}
#credits a {letter-spacing:0px;
Text-transform:uppercase;
font-size: 7px;
color:#d4d4d4;}

#sidebar {margin-top:135px;
width:658px;
background:#f5f5f5;
padding:0px;
border-left:1px solid#e5e5e5;
border-right:1px solid#e5e5e5;
margin-left:350px;
position:relative;}

#sidebar img {z-index:999999999999999999999999;
width:50px;
padding:10px;
border-radius:100%;
margin-top:0px;
margin-bottom:0px;
margin-left:10px;}

#links { margin-left:530px;
margin-top:30px;
z-index:999999999999999999999999999999999999999;
position:absolute;
text-align:center;}

#links a {padding:0px;
display: inline;
color:#d0d0d0;
text-align:center;
cursor:pointer;
font-size:10px;
padding:7px;
text-transform:Capitalize;}

#links a:hover {color:#fff}

#content {width:680px;
margin-left:350px;
margin-top:10px;
position:absolute;}

#content img {width:50px;
padding:5px;
border-radius:10px;
margin:10px 10px 10px 0px;
border:1px solid#eee;}

</style>
</head>

<body>

<div id="credits">
<a href="http://selenapastel.tumblr.com/">@</a>
</div>

<div id="links">

<a onClick="changeNavigation('l01')">TOPIC 1</a>

<a onClick="changeNavigation('l02')">TOPIC 2</a>

<a href="/" title="LINK 1"><i class="fa fa-circle-o" aria-hidden="true"></i> </a>
<a href="/" title="LINK 2"><i class="fa fa-envelope-o" aria-hidden="true"></i>  </a>
<a href="/" title="LINK 3"><i class="fa fa-calendar-o" aria-hidden="true"></i> </a>
<a href="/" title="LINK 4"><i class="fa fa-folder-o" aria-hidden="true"></i> </a>
<a href="/" title="LINK 5"><i class="fa fa-heart-o" aria-hidden="true"></i></a>

<a onClick="changeNavigation('l03')">TOPIC 3</a>

<a onClick="changeNavigation('l04')">TOPIC 4</a>
</div>

<div id="sidebar">


<img src="SIDEBAR IMAGE">
</div>

<div id="li-frame">

<div id="content">

<!----  THE FIST CONTENT  --->

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

</div>

</body>


<div id="l01" style="display:none;">

<!----  TOPIC 1  --->

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">


</div>

<div id="l02" style="display:none;">

<!----  TOPIC 2  --->

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

</div>

<div id="l03" style="display:none;">

<!----  TOPIC 3  --->

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

</div>

<div id="l04" style="display:none;">

<!----  TOPIC 4  --->

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

</div>

</div>

</html>