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>
<section id="top"></section>
<div class="container">
<div class="row row-fluid">
<div class="header span12">
<h1>Real Path Of Exile Race Ladders</h1>
</div>
</div>
<div class="row row-fluid center">
<ul class="nav nav-pills">
<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="#">Solo race type:</a>
</li>
<li class="dropdown soloRacesBlock">
<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="#">Party race type:</a>
</li>
<li class="dropdown partyRacesBlock">
<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 class="headerText">Select character</p> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"...
CSS
.nav.nav-pills {display: inline-block;}
body {
}
.header {
padding: 0;
width: 100%;
background-color: #ffffff;
margin: 0;
text-align: center;
font-family: 'Myriad Pro', Helvetica, Arial sans-serif;
font-size: 2em;
}
.header h1 {
text-decoration: none;
font-weight: bold;
color: #558188;
text-shadow: 0 0 75px #2d2d2d;
position: relative;
padding: 10px 0;
}
.center { text-align: center; float: none; margin-left: auto; margin-right: auto; }
.headerText { display: inline-block; }
.selected { background:red; }
.container {
width: 1300px !important;
margin: 0 auto;
}
table {
margin-left:auto; margin-right:auto;
}
table th {
border-style: groove; border-width: 2px; border-color:black;
}
table tr:first-child{
font-size: 26px; background-color: white;
}
table tr:first-child:hover{
background-color: black; color:white;
-o-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
table tr {
background-color: #B5B5B5;
}
table tr:hover {
background-color: #878787;
-o-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;
}
table tr p {
text-decoration: none; list-style:none; display:inline; font-size: 24px; text-shadow: 2px 5px 55px #606060;
}
table tr a {
color:black; text-decoration: underline; list-style:none; display:inline; font-size: 24px;
text-shadow: 2px 5px 8px white;
}
table tr a:hover {
color: red; opacity: 0.8;
text-shadow: 2px 5px 25px white;
-o-transition: all 2s ease 0s;
-ms-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
-webkit-transition: all 2s ease 0s;
transition: all 2s ease 0s;
}
footer {
padding: 0; padding-left: 2.5%; padding-right: 2.5%; width: 95%; margin:0; text-align: center;
}
footer p {
text-decoration:...