OWL

HTML5 Website Template V-1.0

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML Structure

Basic HTML File Structure

All the HTML file is similarly coded, please follow the sttucture below.


<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->

<head>
    <!--====== USEFULL META ======-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Owl Restaurant is a simple video landing website" />
    <meta name="keywords" content="Video, youtube, vimeo" />

    <!--====== TITLE TAG ======-->
    <title>Home Owl Restaurant</title>

    <!--====== STYLESHEETS =======-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/pogo-slider.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/datepicker.css">
    <link rel="stylesheet" href="css/timepicker.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!--====== MAIN STYLESHEETS ======-->
    <link href="style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <!--[if lt IE 9]>
        <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!--- PRELOADER -->
    <div class="preeloader">
        <div class="preloader-spinner"><i class="fa fa-cutlery"></i></div>
    </div>

    <!--SCROLL TO TOP-->
    <a href="#home" class="scrolltotop"><i class="fa fa-long-arrow-up"></i></a>

    <!--START TOP AREA-->
    <header class="top-area" id="home">
        <div class="header-top-area">
            <div class="top-bar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7 col-lg-6 col-sm-8">
                            <div class="call-to-action">
                                <p><i class="fa fa-phone"></i>Email: <a href="#">info@Owl Restaurant.com</a></p>
                                <p><i class="fa fa-envelope-o"></i>Telephone: <a href="#">+1 800 234 5678</a></p>
                            </div>
                        </div>
                        <div class="col-md-5 col-lg-6 col-sm-4">
                            <div class="book-table-popup">
                                <a href="reservation.html">Book a table</a>
                            </div>
                            <div class="top-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-feed"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--MAINMENU AREA-->
            <div class="mainmenu-area" id="mainmenu-area">
                <div class="mainmenu-area-bg"></div>
                <nav class="navbar">
                    <div class="container">
                        <div class="navbar-header">
                            <button class="collapsed navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a href="index.html" class="navbar-brand"><img src="img/main_logo_black.png" alt="logo"></a>
                            <a href="index.html" class="navbar-brand white"><img src="img/main_logo.png" alt="logo"></a>
                        </div>
                        <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                            <div class="search-form-area">
                                <div class="search-form-overlay"></div>
                                <a class="search-form-trigger" href="#search-form">Search<span></span></a>
                                <div id="search-form" class="search-form">
                                    <form>
                                        <input type="search" placeholder="Search...">
                                    </form>
                                </div>
                            </div>
                            <ul id="nav" class="nav navbar-nav cl-effect-11">
                                <li class="active"><a class="at-drop-down" href="index.html">Home <i class="hidden-md hidden-lg fa fa-angle-down"></i></a>
                                    <ul class="sub-menu">
                                        <li class="active"><a href="index.html">Home Deafult 1</a></li>
                                        <li><a href="index-2.html">Home Version 2</a></li>
                                        <li><a href="index-3.html">Home Version 3</a></li>
                                        <li><a href="index-onepage.html">Onepage Version</a></li>
                                    </ul>
                                </li>
                                <li><a href="about-us.html">about us</a></li>
                                <li><a class="at-drop-down" href="blog.html">Pages <i class="hidden-md hidden-lg fa fa-angle-down"></i></a>
                                    <ul class="sub-menu">
                                        <li><a href="blog.html">Blog Classic</a></li>
                                        <li><a href="single-blog.html">Single Post</a></li>
                                        <li><a href="events.html">Classic Events</a></li>
                                        <li><a href="single-event.html">Events Details</a></li>
                                        <li><a href="404.html">404 Error</a></li>
                                    </ul>
                                </li>
                                <li><a href="reservation.html">Reservation</a></li>
                                <li><a href="events.html">Events</a></li>
                                <li><a href="menu.html">Menu</a></li>
                                <li><a href="blog.html">blog</a></li>
                                <li><a href="contact-us.html">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <!--END MAINMENU AREA END-->
        </div>

        <!--HHOME SLIDER AREA-->
        <div class="slider-area">
            <div class="pogoSlider">
                <div class="pogoSlider-slide" data-transition="fade" data-duration="1500" style="background:url(img/slider/slide_1.jpg) no-repeat scroll 0 0 / cover;">
                    <h2 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="700">Welcome to</h2>
                    <h1 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="1500"><span>OWL</span> Coffe & Restaurant</h1>
                    <h3 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="2300"><a href="reservation.html">Reservation Now</a></h3>
                </div>
                <div class="pogoSlider-slide" data-transition="fade" style="background:url(img/slider/slide_2.jpg) no-repeat scroll 0 0 / cover;">
                    <h2 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="700">Our menus</h2>
                    <h1 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="1500">See What's <span>new</span> today</h1>
                    <h3 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="2300"><a href="#menu">Todays Menu</a></h3>
                </div>
                <div class="pogoSlider-slide" data-transition="fade" style="background:url(img/slider/slide_3.jpg) no-repeat scroll 0 0 / cover;">
                    <h2 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="700">Get ready</h2>
                    <h1 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="1500">to <span>Join</span> with us</h1>
                    <h3 class="pogoSlider-slide-element" data-in="expand" data-out="expand" data-duration="2300"><a href="reservation.html">Book A Table</a></h3>
                </div>
            </div>
        </div>
        <!--HOME SLIDER AREA END-->

    </header>
    <!--END TOP AREA-->

    <!--ABOUT AREA-->
    <section class="about-area section-padding">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-5 col-lg-5 col-sm-12 col-xs-12">
                    <div class="area-title">
                        <h2>Our <span>Story</span></h2>
                    </div>
                    <div class="about-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
                        <a href="#" class="read-more">Read more</a>
                    </div>
                </div>
                <div class="col-md-7 col-lg-7 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="about-img">
                                <img src="img/about/about_one.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                            <div class="about-img">
                                <img src="img/about/about_two.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--ABOUT AREA END-->

    <!--PROMOTIONS AREA-->
    <section class="promotions-area section-padding">
        <div class="promotion-area-bg"></div>
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h2>Specials</h2>
                        <h3>Specials Promotion</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                    <div class="single-promotions text-center">
                        <div class="promotions-img">
                            <img src="img/promotions/promo_1.jpg" alt="">
                            <div class="pakage-rate">
                                <p>Form <span>$15</span></p>
                            </div>
                        </div>
                        <div class="promotions-details">
                            <h4>Special Breakfast</h4>
                            <a href="#" class="read-more">Order now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                    <div class="single-promotions text-center">
                        <div class="promotions-img">
                            <img src="img/promotions/promo_2.jpg" alt="">
                            <div class="pakage-rate">
                                <p>Form <span>$25</span></p>
                            </div>
                        </div>
                        <div class="promotions-details">
                            <h4>Special Lunch</h4>
                            <a href="#" class="read-more">Order now</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
                    <div class="single-promotions text-center">
                        <div class="promotions-img">
                            <img src="img/promotions/promo_3.jpg" alt="">
                            <div class="pakage-rate">
                                <p>Form <span>$35</span></p>
                            </div>
                        </div>
                        <div class="promotions-details">
                            <h4>Special Dinner</h4>
                            <a href="#" class="read-more">Order now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--PROMOTIONS AREA END-->

    <!--MENUS AREA-->
    <section class="menus-area section-padding" id="menu">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h2>Delicius</h2>
                        <h3>Today’s menu</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="food-menu-list-menu">
                        <ul>
                            <li class="filter active" data-filter="all">All</li>
                            <li class="filter" data-filter=".breakfast">Breakfast</li>
                            <li class="filter" data-filter=".lunch">Lunch</li>
                            <li class="filter" data-filter=".dinner">Dinner</li>
                            <li class="filter" data-filter=".coffee">Coffe</li>
                            <li class="filter" data-filter=".snacks">Snacks</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row food-menu-list">
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu breakfast coffee snacks">
                    <a href="img/menu/menu_1.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_1.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu dinner snacks">
                    <div class="food-menu-img">
                        <a href="img/menu/menu_2.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_2.jpg" alt=""></a>
                    </div>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu breakfast">
                    <a href="img/menu/menu_3.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_3.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu dinner lunch breakfast snacks">
                    <a href="img/menu/menu_4.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_4.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu lunch coffee">
                    <a href="img/menu/menu_5.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_5.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu breakfast">
                    <a href="img/menu/menu_6.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_6.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu lunch dinner">
                    <a href="img/menu/menu_7.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_7.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
                <div class="mix col-md-3 col-lg-3 col-sm-6 col-xs-12 single-menu lunch dinner">
                    <a href="img/menu/menu_8.jpg" class="menu-popup" data-effect="mfp-zoom-out"><img src="img/menu/menu_8.jpg" alt=""></a>
                    <div class="food-menu-details">
                        <h4>Cupcake Recipes</h4>
                        <p class="menu-price">$120.00</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--MENUS AREA END-->

    <!--EVENT AREA-->
    <section class="event-area section-padding">
        <div class="event-area-bg"></div>
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h2>Events</h2>
                        <h3>Next Comeing</h3>
                    </div>
                </div>
            </div>
            <div class="row event-list">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="single-event">
                        <div class="event-img">
                            <img src="img/event/event_1.jpg" alt="">
                        </div>
                        <div class="event-content">
                            <div class="event-date">
                                <p><span>22</span>December</p>
                            </div>
                            <div class="event-details">
                                <h3><a href="single-event.html">Ktherine Ryan to host Event Awards 2016</a></h3>
                                <p class="event-meta"><a href="#">29 September 2016 </a>- 196 Manhattan, MY, USA</p>
                                <p>Comedian Katherine Ryan will present this year's Event Awards on 13 October at the iconic Eventim Apollo in Hammersmith, London.</p>
                            </div>
                        </div>
                    </div>
                    <div class="single-event">
                        <div class="event-img">
                            <img src="img/event/event_2.jpg" alt="">
                        </div>
                        <div class="event-content">
                            <div class="event-date">
                                <p><span>22</span>December</p>
                            </div>
                            <div class="event-details">
                                <h3><a href="single-event.html">Ktherine Ryan to host Event Awards 2016</a></h3>
                                <p class="event-meta"><a href="#">29 September 2016 </a>- 196 Manhattan, MY, USA</p>
                                <p>Comedian Katherine Ryan will present this year's Event Awards on 13 October at the iconic Eventim Apollo in Hammersmith, London.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--EVENT AREA END-->

    <!--TEAM AREA-->
    <section class="team-area section-padding">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h2>Delicius</h2>
                        <h3>Awesome chefs</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 team-slider">
                    <div class="single-team-member text-center">
                        <div class="team-member-img ">
                            <img src="img/team/team-1.jpg" alt="">
                            <div class="member-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="member-details">
                            <h3>Mark Angelila</h3>
                            <p>Cras senunc massa quisque tempor dolor sit amet </p>
                        </div>
                    </div>
                    <div class="single-team-member text-center">
                        <div class="team-member-img ">
                            <img src="img/team/team-2.jpg" alt="">
                            <div class="member-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="member-details">
                            <h3>Angel Meskat</h3>
                            <p>Cras senunc massa quisque tempor dolor sit amet </p>
                        </div>
                    </div>
                    <div class="single-team-member text-center">
                        <div class="team-member-img ">
                            <img src="img/team/team-3.jpg" alt="">
                            <div class="member-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="member-details">
                            <h3>Jon Doe</h3>
                            <p>Cras senunc massa quisque tempor dolor sit amet </p>
                        </div>
                    </div>
                    <div class="single-team-member text-center">
                        <div class="team-member-img ">
                            <img src="img/team/team-4.jpg" alt="">
                            <div class="member-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="member-details">
                            <h3>Angel Di Maria</h3>
                            <p>Cras senunc massa quisque tempor dolor sit amet </p>
                        </div>
                    </div>
                    <div class="single-team-member text-center">
                        <div class="team-member-img ">
                            <img src="img/team/team-5.jpg" alt="">
                            <div class="member-social-bookmark">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-behance"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="member-details">
                            <h3>Park Ji Sung</h3>
                            <p>Cras senunc massa quisque tempor dolor sit amet </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--TEAM AREA END-->

    <!--BLOG AREA-->
    <section class="blog-area section-padding">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h2>News</h2>
                        <h3>Form The Blog</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="single-post text-center">
                        <div class="blog-post-img ">
                            <img src="img/blog/blog-1.jpg" alt="">
                        </div>
                        <div class="post-details">
                            <a href="#" class="post-meta-button">Life style</a>
                            <h3><a href="single-blog.html">Gravida posure quam eraseno seque rutrume rigular </a></h3>
                            <p class="post-meta"><a href="#">24 February, 2016</a> - <a href="#">5 Comments</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="single-post text-center">
                        <div class="blog-post-img ">
                            <img src="img/blog/blog-2.jpg" alt="">
                        </div>
                        <div class="post-details">
                            <a href="#" class="post-meta-button">events</a>
                            <h3><a href="single-blog.html">Gravida posure quam eraseno seque rutrume rigular </a></h3>
                            <p class="post-meta"><a href="#">24 February, 2016</a> - <a href="#">5 Comments</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--BLOG AREA END-->

    <!--INSTAGRAM FEED-->
    <section class="instagram-area section-padding">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="area-title text-center">
                        <h4>Follow us on Instagram <a href="#">@OWLTheme</a></h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="instagram-feed-content text-center">
                        <ul class="instagram-feed"></ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--INSTAGRAM FEED END-->

    <!--FOOER AREA-->
    <div class="footer-area">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                    <div class="footer-top section-padding text-center">
                        <div class="footer-logo">
                            <a href="#"><img src="img/footer_white_logo.png" alt=""></a>
                        </div>
                        <div class="footer-address">
                            <p>20,floor,Queenslad Victoria Building. 60 california street california USA</p>
                            <p><a href="mailto:mehedidb@gmail.com">Hellow@OwlTheme.com</a></p>
                            <p><a href="callto:+8800000001111">+88 000 0000 1111</a></p>
                        </div>
                        <div class="footer-social-bookmark">
                            <ul>
                                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                <li><a href="#"><i class="fa fa-skype"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="footer-menu">
                        <ul>
                            <li><a href="#">Teams of use</a></li>
                            <li><a href="#">Privicy Policy</a></li>
                            <li><a href="#">SiteMap</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">
                    <div class="footer-copyright">
                        <p>&copy; 2016 <a href="#">Owl Restaurant</a> All Right Reserved. Coded by <a href="http://themeforest.net/user/bdexpert">BDEXPERT</a>.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--FOOER AREA END-->


    <!--====== SCRIPTS JS ======-->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>

    <!--====== PLUGINS JS ======-->
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery.pogo-slider.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script src="js/spectragram.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/datepicker.min.js"></script>
    <script src="js/timepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/jquery.sticky.js"></script>

    <!--===== ACTIVE JS=====-->
    <script src="js/main.js"></script>
</body>

</html>

CSS Structure

We are using few CSS files in our template mentioned in  comments section(<!-- -->) to  describe the linked for each stylesheet bellow. To  make things easiar for you we have used separate stylesheet. If you want to load the page more frequesnt and fast then i would love to suggest to use compressed stylesheet (for decreasing HTTP queries).
    <!--====== STYLESHEETS =======-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/pogo-slider.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/datepicker.css">
    <link rel="stylesheet" href="css/timepicker.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">

    <!--====== MAIN STYLESHEETS ======-->
    <link href="style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

jQuery Structure

    <!--====== SCRIPTS JS ======-->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>

    <!--====== PLUGINS JS ======-->
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery.pogo-slider.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script src="js/spectragram.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/datepicker.min.js"></script>
    <script src="js/timepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/jquery.sticky.js"></script>

    <!--===== ACTIVE JS=====-->
    <script src="js/main.js"></script>

 

There are all jQuery files including necessary plugins, all of them be found in jsfolder of home directory. Let's see what each file for:
 
  1. jquery.1.12.4.min.js is stayable version of jQuery which is required to place upon all scripts otherwise none of jquery code will work.
     
  2. bootstrat.min.js  is used as the core of this template. It is widely used resource in today's era. Used to make this template responsive and providing all main classes for ui and also provides scripts which helped to form these templates.
     
  3. jquery.easing.1.3.js is a jQuery plugin used for scrolling effect.
     
  4. owl-carousel.min.js is a jQuery plugin used for sliding client list.
     
  5. jquery.mixitup.min.js used for filtering menu option.
     
  6. spectragram.js used for instagram feed images.
     
  7. jquery.magnific-popup.min.js used for open images an popup.
     
  8. datepicker.min.js used for select automatic date select.
     
  9. jquery.counterup.min.js used for counting text animation.
     
  10. timepicker.min.js used for select automatic time select.
     
  11. maps.active.js used for active google map and location.
     
  12. wow.min.js used for on scrolling animation.
     
  13. jquery.sticky.js used for stick menu top on scrolling.
     
  14. contact-form.js is a jQuery plugin used for contact form data validation.
     
  15. main.js is a custom jQuery used for active all jQuery file.

 

Used Fonts

We have used only two type font throughout the template
  1. Lato
  2. Herr Von Muellerhoff
All of the fonts are available on Google Fonts. You can choose other fonts from google directory. We have linked them at head part in index.html 
@import url('https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff|Lato:100,300,400,400i,700,900');

Change Icons

We have used  font ICON ( FontAwesome) sets in these templates there are total of 1000+ icons you can see their class to use , just need to difine their classes for use any icon.
Click Here For IcoFont Icon

Google Map Location Change

Find themaps.active.js form js directory folder, then  find your google Latitude and Longitude on this link MAP LINKS and simply replace.

Please see below for easily Understand
 


 


                // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 11,
                scrollwheel: false,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(40.6700, -73.9400), // Replace latitude and longitude for your palce.

                styles: [{
                    "featureType": "administrative",
                    "elementType": "labels.text.fill",
                    "stylers": [{
                        "color": "#d0963e"
                    }]
                }, {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [{
                        "color": "#f2f2f2"
                    }]
                }, {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [{
                        "saturation": -100
                    }, {
                        "lightness": 45
                    }]
                }, {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "simplified"
                    }]
                }, {
                    "featureType": "road.arterial",
                    "elementType": "labels.icon",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [{
                        "color": "#A5CAFF"
                    }, {
                        "visibility": "on"
                    }]
                }]
            };

            // Get the HTML DOM element that will contain your map
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('map');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let's also add a marker while we're at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.6700, -73.9400),
                map: map,
                icon: 'img/map-marker.png',
                title: 'OWL RESTAURENT!'
            });
        }

Contact Form Setup

Contact form will use php to send emails. you need to a change, So just openprocess.phpfile. Change the current email mehedidb@gmail.comto your email address. Your form is ready!

NOTE: Email form require web server to send email. Emails can go to your spam / junk folder.
Please see below for easily Understand

 

<?php
// Configure your Subject Prefix and Recipient here
$subjectPrefix = '[Contact via website]';
$emailTo       = '<mehedidb@gmail.com>';
$errors = array(); // array to hold validation errors
$data   = array(); // array to pass back data
if($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name    = stripslashes(trim($_POST['name']));
    $email   = stripslashes(trim($_POST['email']));
    $phone = stripslashes(trim($_POST['phone']));
    $message = stripslashes(trim($_POST['message']));
    if (empty($name)) {
        $errors['name'] = 'Name is required.';
    }
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Email is invalid.';
    }
    if (empty($phone)) {
        $errors['phone'] = 'Phone is required.';
    }
    if (empty($message)) {
        $errors['message'] = 'Message is required.';
    }
    // if there are any errors in our errors array, return a success boolean or false
    if (!empty($errors)) {
        $data['success'] = false;
        $data['errors']  = $errors;
    } else {
        $subject = "$subjectPrefix $subject";
        $body    = '
            <strong>Name: </strong>'.$name.'<br />
            <strong>Email: </strong>'.$email.'<br />
            <strong>Phone: </strong>'.$phone.'<br />
            <strong>Message: </strong>'.nl2br($message).'<br />
        ';
        $headers  = "MIME-Version: 1.1" . PHP_EOL;
        $headers .= "Content-type: text/html; charset=utf-8" . PHP_EOL;
        $headers .= "Content-Transfer-Encoding: 8bit" . PHP_EOL;
        $headers .= "Date: " . date('r', $_SERVER['REQUEST_TIME']) . PHP_EOL;
        $headers .= "Message-ID: <" . $_SERVER['REQUEST_TIME'] . md5($_SERVER['REQUEST_TIME']) . '@' . $_SERVER['SERVER_NAME'] . '>' . PHP_EOL;
        $headers .= "From: " . "=?UTF-8?B?".base64_encode($name)."?=" . "<$email>" . PHP_EOL;
        $headers .= "Return-Path: $emailTo" . PHP_EOL;
        $headers .= "Reply-To: $email" . PHP_EOL;
        $headers .= "X-Mailer: PHP/". phpversion() . PHP_EOL;
        $headers .= "X-Originating-IP: " . $_SERVER['SERVER_ADDR'] . PHP_EOL;
        mail($emailTo, "=?utf-8?B?" . base64_encode($subject) . "?=", $body, $headers);
        $data['success'] = true;
        $data['message'] = 'Congratulations. Your message has been sent successfully';
    }
    // return all our data to an AJAX call
    echo json_encode($data);
}

Support And Credits


   If you need any help. Feel free to contact us anytime. We will reply within 24 hours.
 

   
    Email: mehedidb@gmail.com

 

Credits:

  1.  
  2. jQuery v1.12.0 jquery.com
     
  3. Bootstrap bootstrap.com
     
  4. Owl Carousel owlcarousel.owlgraphic.com/
     
  5. Magnific popup magnific-popup/
     
  6. Images from unsplah.com
     
  7. Images from pixabay
     
  8. Images from shutterstock
     
  9. FontAwesome icofont