<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Tembang Bootstarp Website Template | Home :: w3layouts</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!-- web-font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700italic,400italic,300,900,700,900italic,300italic' rel='stylesheet' type='text/css'>
<!-- web-font -->
<!-- js -->
<script src="./js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- js -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- header -->
<div id="home" class="header">
<!-- container -->
<div class="container">
<div class="header-logo">
<h1><a href="#">TEMBANG <span>Jawa</span></a></h1>
</div>
<div class="top-nav">
<p>You are not Logged in, <a class="Signup play-icon popup-with-zoom-anim" href="#small-dialog3">Log in here </a> or<span> <a class="Signup play-icon popup-with-zoom-anim" href="#small-dialog2">Register</a></P>
</div>
<div class="clearfix"> </div>
<!-- banner Slider starts Here -->
<script src="./js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--//End-slider-script -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="header-info">
<p>LIVE PERMORMANCE</p>
<p>BY<span>TEMBANG</span><span class="sub-text">Jawa</span></p>
<p> AT GOR SATRIA PURWOKERTO</p>
<div class="red">20 SEPTEMBER 2014</div>
<div class="button"><a href="#">View Here</a></div>
</div>
</li>
<li>
<div class="header-info">
<p>LIVE TELECAST</p>
<p>BY<span>TEMBANG</span><span class="sub-text">Jawa</span></p>
<p> AT WASHINGTON DC</p>
<div class="red">24 OCTOMER 2014</div>
<div class="button"><a href="#">View Here</a></div>
</div>
</li>
<li>
<div class="header-info">
<p>LIVE DANCE SHOW</p>
<p>BY<span>TEMBANG</span><span class="sub-text">Jawa</span></p>
<p> AT NEW YORK</p>
<div class="red">15 JANUARY 2013</div>
<div class="button"><a href="#">View Here</a></div>
</div>
</li>
<li>
<div class="header-info">
<p>LIVE TELECAST</p>
<p>BY<span>TEMBANG</span><span class="sub-text">Jawa</span></p>
<p> AT WASHINGTON DC</p>
<div class="red">24 OCTOMER 2014</div>
<div class="button"><a href="#">View Here</a></div>
</div>
</li>
<li>
<div class="header-info">
<p>LIVE DANCE SHOW</p>
<p>BY<span>TEMBANG</span><span class="sub-text">Jawa</span></p>
<p> AT NEW YORK</p>
<div class="red">15 JANUARY 2013</div>
<div class="button"><a href="#">View Here</a></div>
</div>
</li>
</ul>
<div class="clearfix"> </div>
<!-- banner Slider Ends Here -->
</div>
</div>
<!-- container -->
</div>
<!-- header -->
<!-- sticky -->
<div class="sticky">
<!-- container -->
<div class="container">
<div class="top-header">
<div class="fixed-header">
<div class="sticky-logo">
<h1><a class="scroll" href="#home">TEMBANG <span>Jawa</a> </span></h1>
</div>
<div class="sticky-nav">
<ul>
<li><a class="scroll active" href="#about">About</a></li>
<li><a class="scroll" href="#event">Event</a></li>
<li><a class="scroll" href="#contact">Contact</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- container -->
</div>
<!-- sticky -->
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".top-header").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".top-header").addClass("fixed");
}else{
$(".top-header").removeClass("fixed");
}
});
});
</script>
<!-- /script-for sticky-nav -->
<!-- banner -->
<div class="banner">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><span> </span></a>
<!-- pop-up-box -->
<script type="text/javascript" src="./js/modernizr.custom.min.js"></script>
<link href="./css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="./js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box-->
<div id="small-dialog" class="mfp-hide">
<iframe src="http://player.vimeo.com/video/64701045" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="small-dialog3" class="mfp-hide">
<div class="login">
<h3>Login</h3>
<p>Enter your account details to login</p>
<input type="text" maxlength="20" value="EMAIL" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
<input type="text" maxlength="10" value="PASSWORD" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'PASSWORD';}">
<input type="submit" value="Submit"/>
</div>
</div>
<div id="small-dialog2" class="mfp-hide">
<div class="signup">
<h3>Register</h3>
<h4>Please Enter Your Details</h4>
<input type="text" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}" />
<input type="text" value="Second Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Second Name';}" />
<input type="text" class="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" />
<input type="text" class="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"/>
<input type="text" class="email" value="Confirm password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Confirm password';}" />
<input type="submit" value="Submit"/>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnifi