<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");
		}
	});
});

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.