Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<body>
<header>
<div class="container">
<div id="header_text"><h1>Real Path Of Exile Race Ladders</h1></div>
</div>
</header>
<div class="container ">
<div class="row">
<ul class="nav nav-pills navbar-inverse span8 offset2 nav-justified center">
<li class="disabled">
<a href="#">Season:</a>
</li>
<li class="dropdown seasonsBlock">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<p class="headerText info">Select season</p>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a class="S06" href="#">Six</a></li>
<li><a class="S07" href="#">Seven</a></li>
</ul>
</li>
<li class="disabled">
<a href="#">Race type:</a>
</li>
<li class="dropdown raceBlock">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<p class="headerText">Select race type</p> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="disabled">
<a href="#">Class:</a>
</li>
<li class="dropdown classesBlock">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<p...
CSS
header {
padding: 0;
width: 100%;
background-color: black;
margin: 0;
}
div#header_text {
text-align: center;
font-family: 'Myriad Pro', Helvetica, Arial sans-serif;
font-size: 2em; width: 100%;
}
div#header_text h1 {
text-decoration: none;
font-weight: bold;
color: #ffffff;
text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
position: relative;
-webkit-transition: all 0.2s ease-in; margin: 0 0 5 0; z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.11, rgba(0,0,0,0)), color-stop(0.65, rgba(225,225,225,1))
);
padding: 10px 0;
}
.center {
text-align: center;
float: none;
margin-left: auto;
margin-right: auto; }
.headerText {display: inline-block;}
.selected { background:red;}
.sidebar { background: gray; }
.sidebar ul { float:left; list-style: none; }
.sidebar ul li { display: none; }
.sidebar ul li : hover {
float:left; display: inline-block;
}
.sidebar p {
float:left;
display: inline-block;
}
p.lol {float:left;
display: inline-block;}
div#header_text h1:hover {
text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
}
div#header_text h1:active {
text-shadow: none;
bottom: 555;
text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}
div#header_text h1:before {
position: absolute;
top: 4px;
color: #aaa;
text-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
div#header_text h1:after {
color: #e0e0e0;
position: absolute;
}
div#login {
text-align: center;
}
#login p {
z-index: 2;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.11, rgba(0,0,0,0)), color-stop(0.65, rgba(225,225,225,1))
);
margin: 0; padding: 0;
}
#login p:hover {
z-index: 2;
-webkit-mask-image:
-webkit-gradient(linear, bottom, left top,...