<div class="container">
<nav>
  <ul>
	<li class="active"><a href="index.html">Home</a></li>
	<li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML<span class="badge color_1">82</span></a></li>
	<li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS<span class="badge color_2">27</span></a></li>
	<li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5<span class="badge color_3">83</span></a></li>
	<li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3<span class="badge color_4">47</span></a></li>
	<li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript<span class="badge color_5">113</span></a></li>
	<li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery<span class="badge color_6">98</span></a></li>
	<li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS<span class="badge">51</span></a></li>
	<li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap<span class="badge color_7">146</span></a></li>
  </ul>
</nav>
</div>
.ftl,
nav {
    text-align: center
}

.ftl a,
nav a {
    text-decoration: none
}

body {
    color: #000;
    background: #F2F2F2
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

.ftl,
nav a {
    font-weight: 700
}

ol,
ul {
    list-style: none
}

.container {
    margin: 50px auto 60px;
    width: 960px
}

nav {
    height: 26px
}

nav ul {
    border-width: 1px;
    border-style: solid;
    border-color: #d5d5d5 #d2d2d2 #cdcdcd;
    border-radius: 3px;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04)
}

nav li {
    float: left;
    border-left: 1px solid #d2d2d2
}

nav li:first-child {
    border-left: 0
}

nav li:first-child a {
    border-radius: 3px 0 0 3px
}

nav li:last-child a {
    border-radius: 0 3px 3px 0
}

nav a {
    display: block;
    position: relative;
    padding: 6px 28px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    text-shadow: 0 1px #fff;
    background: #fafafa;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
    -webkit-box-shadow: inset 0 0 0 1px #fafafa;
    box-shadow: inset 0 0 0 1px #fafafa
}

nav a:hover {
    color: #333;
    z-index: 2;
    -webkit-box-shadow: inset 0 0 0 1px #fafafa, 0 0 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 0 1px #fafafa, 0 0 3px rgba(0, 0, 0, .3)
}

nav a:active,
nav li.active a {
    color: #333;
    background: #fff;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, .1)
}

nav .badge {
    display: block;
    position: absolute;
    top: -15px;
    right: 5px;
    line-height: 25px;
    height: 25px;
    width: 6px;
    padding: 0 20px 0 5px;
    font-family: Arial, sans-serif;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, .25);
    border: 1px solid;
    border-radius: 100px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .08);
    box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .08);
    background: #EC0000
}

nav .badge.color_1 {
    background: #0C3
}

nav .badge.color_2 {
    background: #FC0
}

nav .badge.color_3 {
    background: #F30
}

nav .badge.color_4 {
    background: #06C
}

nav .badge.color_5 {
    background: #FC3
}

nav .badge.color_6 {
    background: #36F
}

nav .badge.color_7 {
    background: #609
}

.clearfix {
    clear: both
}

.ftl {
    font-size: 16px;
    padding: 100px 0;
    margin: 0 auto;
    font-style: italic
}

.ftl a {
    color: #09C
}

.ftl a:hover {
    color: #999
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.