<div class="container">
<header>
	<div id="ftl">
			<!--nav-->
				<nav>
					<ul>
						<li class="current"><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">Backend <i class="fa fa-caret-down f16"></i></a>
							<ul style="display: none;" class="sub_menu">
								<li class="arrow_top"></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>
						</li>
						<li>
							<a href="http://www.freetimelearning.com">Examples <i class="fa fa-caret-down f16"></i></a>
							<ul style="display: none;" class="sub_menu">
								<li class="arrow_top"></li>
								<li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML Examples</a></li>
								<li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5 Examples</a></li>
								<li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS Examples</a></li>
								<li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3 Examples</a></li>
								<li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript Examples</a></li>
								<li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery Examples</a></li>
								<li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap Examples</a></li>
								<li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS Examples</a></li>
							</ul>
						</li>
						<li><a href="http://www.freetimelearning.com/contact-us.php">contact</a></li>
					</ul>
				</nav>
	</div>
</header>

</div>

<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-11/js/jquery-1.7.2.min.js"></script>
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
	height: 100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
/* General Demo Style */
body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	color: #3a2127;
	background:#FFF;
	overflow-y: scroll;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	width: 100%;
	height: 100%;
	position: relative;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 20px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	position: relative;
	color: #498ea5;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	padding: 0px 0px 5px 0px;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h1 span{
	font-family: 'Alegreya SC', Georgia, serif;
	font-size: 20px;
	line-height: 20px;
	display: block;
	font-weight: 400;
	font-style: italic;
	color: #719dab;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.container > header h2{
	font-size: 16px;
	font-style: italic;
	color: #2d6277;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Header Style */
.freetimelearning-top{
	line-height: 24px;
	font-size: 11px;
	background: rgba(0, 0, 0, 0.05);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.freetimelearning-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
	display: block;
	float: left;
}
.freetimelearning-top a:hover{
	background: #fff;
}
.freetimelearning-top span.right{
	float: right;
}
.freetimelearning-top span.right a{
	float: left;
	display: block;
}
.freetimelearning-demos{
    text-align:center;
	display: block;
	line-height: 30px;
	padding: 20px 0px;
}
.freetimelearning-demos a{
    display: inline-block;
	margin: 0px 4px;
	padding: 0px 4px;
	color: #fff;
	line-height: 20px;	
	font-style: italic;
	font-size: 13px;
	border-radius: 3px;
	background: rgba(41,77,95,0.1);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.freetimelearning-demos a:hover{
	background: rgba(41,77,95,0.3);
}
.freetimelearning-demos a.current,
.freetimelearning-demos a.current:hover{
	background: rgba(41,77,95,0.3);
}
.clearfix{ clear:both;} 
.ftl{ font-size:16px; font-style:italic; padding:150px 0px 50px; font-weight:bold; margin:0px auto; text-align:center;} 
.ftl a{ color:#09C; text-decoration:none;} 
.ftl a:hover{ color:#999;}
#ftl nav select {
	display:none;
}
#ftl nav ul {
	display:block;
	z-index:999999;
}
#ftl nav ul li {
	display:inline-block;
	padding:20px 3px 10px;
	margin-left:30px;
	position:relative;
}
#ftl nav ul li a:link, #ftl nav ul li a:visited {
	color:#444;
	font:normal 14px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	display:inline-block;
	position:relative;
}
#ftl nav ul li a:hover, #ftl nav ul li a:active {
	color:#EC0076;
	text-decoration:none;
}
#ftl nav ul li span {
	position:absolute;
	right:-12px;
	bottom:15px;
	width:10px;
	height:8px;
	margin:0 0 0 3px;
	float:right;
	display:block;
	font:0/0 a;
}
#ftl nav ul li.current {
	border-bottom:2px solid #EC0076;
}
#ftl nav ul li.current a {
	color:#EC0076;
	cursor: default;
}
#ftl nav ul li.current ul li a {
	cursor:pointer;
}
.f16{ font-size:16px; padding-left:7px !important;}
/** sub_menu **/
#ftl nav ul li ul.sub_menu {
	position:absolute;
	top:50px;
	left:0;
	margin:0;
	padding:0;
	background:#fff;
	border:1px solid #EC0076;
	border-top:5px solid #EC0076;
	display:none;
	z-index:999999;
    -moz-box-shadow: 0px 2px 5px #121012;
    -webkit-box-shadow: 0px 2px 5px #121012;
    box-shadow: 0px 2px 5px #121012;
}
#ftl nav ul li ul.sub_menu li.arrow_top {
	position:absolute;
	top:-12px;
	left:12px;
	width:13px;
	height:8px;
	display:block;
	border:none;
	background:url('../images/arrow_top.png') no-repeat left top;
}
#ftl nav ul li ul.sub_menu li {
	float:none;
	margin:0;
	padding:0;
	border-bottom:1px solid #EC0076;
}
#ftl nav ul li ul.sub_menu li a {
	white-space: nowrap;
	width: 150px;
	padding:12px;
	font:13px Arial, tahoma, sans-serif;
	text-transform:capitalize;
	color:#777;
}
#ftl nav ul li ul.sub_menu li a:hover {
	background:#f9f9f9;
	color:#333;
}
#ftl nav ul li ul.sub_menu li a.subCurrent {
	color:#e25d29;
	cursor:default;
}
#ftl nav ul li ul.sub_menu li a.subCurrent:hover {
	background:none;
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
		/* nav */
		#ftl nav ul li{
			margin-left:12px;
		}
}
@media only screen and (max-width: 767px) {

		/* nav menu ul & select */
		#ftl nav ul {
			display:none;
		}
		#ftl nav select {
			width:100%;
			display:block;
			margin-bottom:30px;
			cursor:pointer;
			padding:6px;
			background:#f9f9f9;
			border:1px solid #e3e3e3;
			color:#777;
		}
}
$(function(){
        // building select menu
        $('<select />').appendTo('nav');
    
        // building an option for select menu
        $('<option />', {
            'selected': 'selected',
            'value' : '',
            'text': 'MENU'
        }).appendTo('nav select');
    
        $('nav ul li a').each(function(){
            var target = $(this);
    
            $('<option />', {
                'value' : target.attr('href'),
                'text': target.text()
            }).appendTo('nav select');
    
        });
        $('nav select').on('change',function(){
            window.location = $(this).find('option:selected').val();
        });
    });
    $(function(){
        $('nav ul li').hover(
            function () {
                //show its submenu
                $('ul', this).slideDown(150);
            }, 
            function () {
                //hide its submenu
                $('ul', this).slideUp(150);			
            }
        );
    });

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.