Dustfeather > Profile Layout

<!- // Coding (c) Owly 2014 // -!>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<style type="text/css">
#header, #search, #main-navbar, #sidebar, #sidetabs, #alerts, #navigation, #chatroom_mini,#chatroom, #chatroom_closed, #footer_bg, #breadcrumbs, #footer_bg, .wrapper{display: none;}div.wraper{ background:none;
}

body{
background:url(http://static.tumblr.com/rqhjqxm/Mo6n8scvq/stardust.png);
overflow:hidden;
}

#content{
font-family: 'Ubuntu', sans-serif;
font-size:12.5px;
color:#ccc;
}

#content #body{
background:transparent;
position:fixed;
top:100px;
left:180px;
}

#content td, th{
border:none;
}

#content table{
border:none;
background:#313135;
font-size:12.5px;
}

#content a:link, a:visited{
color:#ccc;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#content a:hover, a:active{
text-decoration:none;
color:#fff;
}

#b-cont{
overflow:hidden;
border-bottom:5px solid #444349;
width:602px;
height:20px;
top:80px;
position:fixed;
background:#313135;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

b{
font-weight:bold;
letter-spacing:1px;
}

i{
color:#9e5656;
}

u{
color:#737373;
}

.one, .two, .three, .art{
margin:25px;
width:552px;
height:370px;
position:relative;
overflow:auto;
background:#444349;
margin-bottom:300px;
}

#b-cont:hover{
height:494px;
}

.lbox1, .lbox2, .lbox3, .lbox4{
margin:10px 25px;
}

.lbox1 a, a:visited, .lbox2 a, a:visited, .lbox3 a, a:visited, .lbox4 a, a:visited{
border-bottom:5px solid #444349;
text-align:center;
width:112px;
margin-bottom:15px;
text-decoration:none;
padding:13px;
float:left;
display:block;
background:#444349;
color:#ccc;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.lbox1 a:hover, .lbox2 a:hover, .lbox3 a:hover, .lbox4 a:hover, .lbox1 a:active, .lbox2 a:active, .lbox3 a:active, .lbox4 a:active{
color:#ccc;
letter-spacing:5px;
background:#9e5656;
text-decoration:none;
border-bottom:5px solid #ccc;
}

.text{
margin:25px;
text-align:center;
}

.head{
background:url(http://static.tumblr.com/rqhjqxm/Mo6n8scvq/stardust.png);
}

.anchor{
  display: block;
  height: 25px; /*same height as header*/

  visibility: hidden;
}
</style>
<div id="b-cont">
<span class="anchor" id="one"></span>
<div class="lbox1"><a href="#one">one</a><a href="#two">two</a><a href="#three">three</a>
<a href="#art">art</a></div>
<div class="one"><div class="text">beep bop what a nice looking box. perhaps you should put text in it hmm ?? ? who knows, maybe a magical scrollbar will appear once you've added enough text to it 0: !! (just a thought)
<br><br><b>bold</b> <i>italic</i> <u>underline</u>
<br><br> Nam a dolor ac augue pretium semper sit amet nec urna. Nulla a nisl tempor, laoreet eros eget, fermentum augue. Aenean sit amet magna facilisis, egestas neque quis, ullamcorper velit. Duis sed diam nisl. Vestibulum sodales auctor porta. Nullam tortor risus, imperdiet sed viverra non, sagittis vel ipsum. Ut a est nec urna adipiscing elementum. Duis varius eu urna vitae sodales. Praesent pulvinar tincidunt tristique. Duis elementum cursus lobortis. Aenean quis ligula non odio auctor ultricies id quis enim. Duis malesuada iaculis tortor quis consequat. Pellentesque vitae mi ac nulla tempor posuere. Nulla condimentum interdum tincidunt. Suspendisse at pharetra ante.
<br><br>
Sed venenatis nisi tortor. Donec gravida neque eget nibh aliquam pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquam libero at aliquet congue. Suspendisse bibendum leo tellus. Aenean tristique ante eget tempor fermentum. Vivamus eleifend odio vel ante sagittis congue. In eget vestibulum erat.</div></div>

<span class="anchor" id="two"></span>
<div class="lbox2"><a href="#one">one</a><a href="#two">two</a><a href="#three">three</a>
<a href="#art">art</a></div>
<div class="two"><div class="text">
some informative text!<br><br><b>bold</b> <i>italic</i> <u>underline</u>
<br><br> Nam a dolor ac augue pretium semper sit amet nec urna. Nulla a nisl tempor, laoreet eros eget, fermentum augue. Aenean sit amet magna facilisis, egestas neque quis, ullamcorper velit. Duis sed diam nisl. Vestibulum sodales auctor porta. Nullam tortor risus, imperdiet sed viverra non, sagittis vel ipsum. Ut a est nec urna adipiscing elementum. Duis varius eu urna vitae sodales. Praesent pulvinar tincidunt tristique. Duis elementum cursus lobortis. Aenean quis ligula non odio auctor ultricies id quis enim. Duis malesuada iaculis tortor quis consequat. Pellentesque vitae mi ac nulla tempor posuere. Nulla condimentum interdum tincidunt. Suspendisse at pharetra ante.
<br><br>
Sed venenatis nisi tortor. Donec gravida neque eget nibh aliquam pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquam libero at aliquet congue. Suspendisse bibendum leo tellus. Aenean tristique ante eget tempor fermentum. Vivamus eleifend odio vel ante sagittis congue. In eget vestibulum erat.</div></div>
<span class="anchor" id="three"></span>
<div class="lbox3"><a href="#one">one</a><a href="#two">two</a><a href="#three">three</a>
<a href="#art">art</a></div>
<div class="three"><div class="text">
yet more insightful knowledge<br><br><b>bold</b> <i>italic</i> <u>underline</u>
<br><br> Nam a dolor ac augue pretium semper sit amet nec urna. Nulla a nisl tempor, laoreet eros eget, fermentum augue. Aenean sit amet magna facilisis, egestas neque quis, ullamcorper velit. Duis sed diam nisl. Vestibulum sodales auctor porta. Nullam tortor risus, imperdiet sed viverra non, sagittis vel ipsum. Ut a est nec urna adipiscing elementum. Duis varius eu urna vitae sodales. Praesent pulvinar tincidunt tristique. Duis elementum cursus lobortis. Aenean quis ligula non odio auctor ultricies id quis enim. Duis malesuada iaculis tortor quis consequat. Pellentesque vitae mi ac nulla tempor posuere. Nulla condimentum interdum tincidunt. Suspendisse at pharetra ante.
<br><br>
Sed venenatis nisi tortor. Donec gravida neque eget nibh aliquam pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquam libero at aliquet congue. Suspendisse bibendum leo tellus. Aenean tristique ante eget tempor fermentum. Vivamus eleifend odio vel ante sagittis congue. In eget vestibulum erat.</div></div>

<span class="anchor" id="art"></span>
<div class="lbox4"><a href="#one">one</a><a href="#two">two</a><a href="#three">three</a>
<a href="#art">art</a></div>
<div class="art"><div class="text">
artses and whatnotses<br><br><b>bold</b> <i>italic</i> <u>underline</u>
<br><br> Nam a dolor ac augue pretium semper sit amet nec urna. Nulla a nisl tempor, laoreet eros eget, fermentum augue. Aenean sit amet magna facilisis, egestas neque quis, ullamcorper velit. Duis sed diam nisl. Vestibulum sodales auctor porta. Nullam tortor risus, imperdiet sed viverra non, sagittis vel ipsum. Ut a est nec urna adipiscing elementum. Duis varius eu urna vitae sodales. Praesent pulvinar tincidunt tristique. Duis elementum cursus lobortis. Aenean quis ligula non odio auctor ultricies id quis enim. Duis malesuada iaculis tortor quis consequat. Pellentesque vitae mi ac nulla tempor posuere. Nulla condimentum interdum tincidunt. Suspendisse at pharetra ante.
<br><br>
Sed venenatis nisi tortor. Donec gravida neque eget nibh aliquam pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque aliquam libero at aliquet congue. Suspendisse bibendum leo tellus. Aenean tristique ante eget tempor fermentum. Vivamus eleifend odio vel ante sagittis congue. In eget vestibulum erat.</div></div>
</div>