Maid Bootstrap

by Nibin George

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Portfolio template</title>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container "> 
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myDefaultNavbar1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="#">Brand</a> </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right" id="myDefaultNavbar1">
          <ul class="nav navbar-nav navbar-right">
              <li class="active" > <a href="#home" class="smoothScroll">Home</a></li>
              <li> <a href="#about" class="smoothScroll"> About</a></li>
              <li> <a href="#search" class="smoothScroll"> Search</a></li>
              <li> <a href="#booking" class="smoothScroll"> Booking</a></li>
              <li> <a href="#contact" class="smoothScroll"> Contact</a></li>
              <li> <a class="loginModal" href="javascript:void(0)" class="smoothScroll"> Login</a></li>
            </ul>
    </div>
        <!-- /.navbar-collapse --> 
      </div>
      <!-- /.container-fluid --> 
    </nav>
<section id="home"  class="background_change">
  <div>
    <div class="container">
      <div class="row">
        <div class="col-xs12">
          <h1>Lorem ipsum dolor sit.</h1>
         ...

CSS

@font-face {
    font-family: LatoRegular;
    src: url(../fonts/Lato-Regular.ttf);
}

body{
	font-family: LatoRegular;
	font-size:16px;
}

section img{
	max-width: 100%;
    height: auto;
}

.navbar-default {
    background-color: #fff;
    padding: 12px 0;
    box-shadow: 0 0 3px #ccc;
    font-weight: 500;
}

.navbar-default:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
	width:100%;
    background: -webkit-linear-gradient(180deg, #eef0f3 10%, #b8c3e9 40%, #eb5055 70%, #eb5055 90%);
    background: linear-gradient(-90deg, #eef0f3 10%, #b8c3e9 40%, #eb5055 70%, #eb5055 90%);
}

.navbar-default .navbar-nav > li > a {
    color: #555;
}

.eveSec{
	color:#000;
}

#home {
    padding-top: 70px;
    text-align: center;
    padding-bottom: 100px;
    margin-top: 70px;
}

#about {
    background: #fff;
    padding-top: 80px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 60px;
}

.background_change{
	background-image:url(../img/background.png);
	color:#fff;
	background-position: center center;
	width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	  background-attachment: relative;
  
}

.centered {
    text-align: center;
}
#search .form-wrapper {
    width: 85%;
	max-width:630px;
    padding: 8px;
    margin: 100px auto;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    border-radius: 10px;    
    background-color: #f6f6f6;
    background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

#search .form-wrapper #searchbox {
    width: calc(95% - 160px);
	margin: 0% 3%;
    height: 42px;
    padding: 10px 5px;
    float:...

JavaScript

http://demo.qodeinteractive.com/eden/wp-content/themes/eden/css/img/button-bg-px.png
http://rubix304.sketchpixy.com/imgs/homepage/background.png
$(document).ready(function () {

    $("html").niceScroll();
	
	$(".cd-switcher li").on("click",function(){
			var index = $(this).index();
			$(".cd-switcher li a").removeClass("selected");
			$(this).find("a").addClass("selected");
			$(".maidBlock").removeClass("is-selected").eq(index).addClass("is-selected");
	});
	
	$(".loginModal").on("click",function(){
		$(".navbar-collapse").removeClass("in");
		$(".cd-user-modal").toggleClass("is-visible");
	})
	

	$('.cd-user-modal').on('click', function(event){
		var $form_modal = $('.cd-user-modal');
		if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
			$form_modal.removeClass('is-visible');
		}	
	});

    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - 60
        }, 500, 'swing', function () {
            window.location.hash = target;
            //$(document).on("scroll", onScroll);
        });
    });


    var sections = $('section'),
        nav = $('.navbar-collapse'),
        nav_height = nav.outerHeight();

    $(window).on('scroll', function () {
        var cur_pos = $(this).scrollTop();
        sections.each(function () {
            var top = $(this).offset().top - nav_height,
                bottom = top + $(this).outerHeight();

            if (cur_pos + 70 >= top && cur_pos <= bottom) {
                nav.find('a').parent().removeClass('active');
                sections.removeClass('active');

                $(this).parent().addClass('active');
               ...