<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-2/js/jquery-1.9.1.min.js"></script>
<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-2/js/modernizr.custom.js"></script>
<div id="wrapper">
<div id="main">
<div class="container">
<div id="nav-trigger">
<span> F T L Menu</span>
</div>
<nav id="nav-main">
<ul>
<li><a href="http://www.freetimelearning.com/">HOME</a></li>
<li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
<li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>
<li><a href="http://www.freetimelearning.com/javascript-tutorial.php">JAVASCRIPT</a></li>
<li><a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a></li>
<li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a></li>
<li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">ANGULARJS</a></li>
<li><a href="http://www.freetimelearning.com/java-tutorial.php">JAVA</a></li>
<li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
<li><a href="http://www.freetimelearning.com/python-tutorial.php">PYTHON</a></li>
</ul>
</nav>
<nav id="nav-mobile"></nav>
</div>
</div>
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline; }
body {
line-height: 1; }
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal; }
ol, ul {
list-style: none; }
blockquote {
quotes: none; }
blockquote:before, blockquote:after {
content: '';
content: none; }
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0; }
a img {
border: none; }
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
color: #505050;
font-family:Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.8;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
font-weight: 300; }
a {
text-decoration: none;
color: #c80032; }
a:hover {
color: #7c001f; }
/* Template */
#wrapper {
width: 100%;
margin: 0 auto; }
#main {
background-color: #fff;
padding: 10px 0px;
}
.container {
width: 98%;
margin: 0 auto;
padding: 0 20px; }
.clearfix{clear:both}
.ftl{font-size:16px;font-style:italic;padding:100px 0;font-weight:700;margin:0 auto;text-align:center}
.ftl a{color:#900;text-decoration:none}
.ftl a:hover{color:#590000;}
/* Navbar */
#nav-trigger {
display: none;
text-align: center; }
#nav-trigger span {
display: inline-block;
padding: 7px 15px;
background-color: #900;
color: white;
cursor: pointer;
text-transform: uppercase; }
#nav-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 10px;
content: "";
border-left: solid 10px transparent;
border-top: solid 10px #fff;
border-right: solid 10px transparent; }
#nav-trigger span:hover {
background-color: #900; }
#nav-trigger span.open:after {
border-left: solid 10px transparent;
border-top: none;
border-bottom: solid 10px #fff;
border-right: solid 10px transparent; }
nav {
margin-bottom: 30px; }
nav#nav-main {
background-color: #900;
padding: 6px 0px;
border-radius:3px;
}
nav#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center; }
nav#nav-main li {
display: inline-block;
border-right: solid 1px #6C0000;
padding: 0 5px;
}
nav#nav-main li:last-child {
border-right: none; }
nav#nav-main a {
display: block;
color: white;
padding: 7px 15px; }
nav#nav-main a:hover {
background-color:#600;
color: #fff;
border-radius:3px;
}
nav#nav-mobile {
position: relative;
display: none; }
nav#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #900; }
nav#nav-mobile li {
display: block;
padding: 5px 0;
margin: 0 5px;
border-bottom: solid 1px #600; }
nav#nav-mobile li:last-child {
border-bottom: none; }
nav#nav-mobile a {
display: block;
color: white;
padding: 10px 30px; }
nav#nav-mobile a:hover {
background-color: #6A0000;
color: #fff; }
/* Sections */
section h1 {
margin-bottom: 10px; }
section p {
margin-bottom: 30px; }
section p:last-child {
margin-bottom: 0; }
/* Media Queries */
@media all and (max-width: 900px) {
#nav-trigger {
display: block; }
nav#nav-main {
display: none; }
nav#nav-mobile {
display: block; } }
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
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.