APPKEKO

Apps HTML 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

we have used same structure in all html file, please see below the structure for easily understand.
<!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="Appkeko Web Apps Theme: Appskeko is a modern Apps landing theme for Apps Business" />
    <meta name="keywords" content="Apps Landing, Apps Showcase, Apps Website, Apps Store, Apps Merketing, Web Apps Template, Apps Template,Apps Theme" />
    <meta name="author" content="BDEXPERT" />

    <!--====== TITLE TAG ======-->
    <title>AppKeko</title>

    <!--====== STYLESHEETS ======-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/venobox.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/ico" href="img/favicon.png" />

    <!--====== 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]-->

    <!-- PRE LOADER-->
    <div class="preloader">
        <div class="status">
            <h1 class="preloader-text" data-content="APPKEKO">APPKEKO</h1>
        </div>
    </div>

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

    <!--TOP AREA-->
    <header class="top-area" id="home">
        <div class="top-area-bg"></div>
        <!--MAINMENU AREA-->
        <div class="mainmenu-area">
            <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="#home" class="navbar-brand"><img src="img/logo.png" alt="logo"></a>
                    </div>
                    <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                        <ul id="nav" class="nav navbar-nav cl-effect-11">
                            <li><a href="#home" data-hover="HOME">HOME</a></li>
                            <li><a href="#features" data-hover="FEATURES">FEATURES</a></li>
                            <li><a href="#download" data-hover="DOWNLOAD">DOWNLOAD</a></li>
                            <li><a href="#price" data-hover="PRICING">PRICING</a></li>
                            <li><a href="#testmonial" data-hover="TESTIMONIALS">TESTIMONIALS</a></li>
                            <li><a href="#contact" data-hover="CONTACT-US">CONTACT-US</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <!--END MAINMENU AREA-->
        <div class="welcome-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-6 col-xs-12">
                        <div class="welcome-text">
                            <h1>WELCOME TO APPKEKO</h1>
                            <h3>Software Try 14 Days</h3>
                            <p class="margin-bottom">Download For</p>
                            <div class="os-menu">
                                <ul>
                                    <li>
                                        <a href=""><i class="fa fa-windows"></i></a>
                                        <a href=""><i class="fa fa-apple"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-md-offset-3 col-sm-6 hidden-xs">
                        <div class="welcome-img">
                            <img src="img/welcome_phone.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--END TOP AREA-->

    <!--FEATURES AREA-->
    <section class="features-area section-padding" id="features">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2">
                    <div class="area-title text-center">
                        <h2>APP FEATURES</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere.Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-features text-center">
                        <div class="features-icon"><i class="fa fa-desktop"></i></div>
                        <h3>RESPONSIVE</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-features text-center">
                        <div class="features-icon"><i class="fa fa-envelope"></i></div>
                        <h3>WEBMAIL</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-features text-center">
                        <div class="features-icon"><i class="fa fa-bar-chart"></i></div>
                        <h3>ADMIN</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-features text-center">
                        <div class="features-icon"><i class="fa fa-star"></i></div>
                        <h3>MODERN</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END FEATURES AREA-->

    <!--DOWNLOAD AREA-->
    <section class="download-area section-padding blue-bg" id="download">
        <div class="container">
            <div class="row">
                <div class="col-md-6 hidden-xs hidden-sm">
                    <div class="download-left">
                        <div class="download-image-1" data-wow-duration="2s">
                            <img src="img/download_phone_1.png" alt="">
                        </div>
                        <div class="download-image-2">
                            <img src="img/download_phone_2.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="download-content home-one">
                        <div class="area-title">
                            <h2>Download it for 14 days</h2>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam. Mauris scelerisque ac nulla gravida ultrices. </p>
                        <p>Nulla ultricies ante in diam lobortis, vitae ultrices sapien lobortis. In ultrices, lacus ac fringilla efficitur, ante dolor iaculis dui, scelerisque dictum quam ex ut augue. In iaculis nec sapien ac mattis. Phasellus ac vestibulum augue, eu efficitur urna. </p>
                        <p>Morbi ac mi vel leo vulputate faucibus vitae quis purus. Nullam vehicula tristique quam, non sagittis velit rhoncus eget. Praesent eget ipsum eu turpis facilisis tincidunt. </p>
                        <p>In hac habitasse platea dictumst. Donec hendrerit, massa sit amet tincidunt venenatis, lacus dui blandit felis, in vulputate purus est non libero. Morbi porttitor nibh non nibh interdum facilisis a id nisl. Sed nec fringilla libero...</p>
                        <a href="#" class="download" data-hover="download">Download</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END DOWNLOAD AREA-->

    <!--GALLARY AREA-->
    <section class="gallary-area section-padding" id="gallary">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2">
                    <div class="area-title text-center">
                        <h2>SCREENSHOTS</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere.Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/1.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/1.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/2.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/2.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/3.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/3.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/4.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/4.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/5.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/5.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/6.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/6.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/7.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/7.jpg" alt="gallary"></a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                    <div class="single-gallary-item text-center">
                        <a href="img/gallary/8.jpg" class="venobox" data-gall="screenshot"><img src="img/gallary/8.jpg" alt="gallary"></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END GALLARY AREA-->

    <!--PRICE AREA-->
    <section class="price-area section-padding blue-bg" id="price">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2">
                    <div class="area-title text-center">
                        <h2>PRICING</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere.Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="single-price-table text-center">
                        <h2 class="price-title">Basic</h2>
                        <h2 class="price-rate">29 <small>/ month</small></h2>
                        <div class="price-details">
                            <ul>
                                <li><strong>1</strong> Hosting</li>
                                <li><strong>15</strong> Projects</li>
                                <li><strong>30GB</strong> Storage</li>
                                <li><strong>Unlimited</strong> Usage</li>
                                <li><strong>50GB</strong> Bandwidth</li>
                                <li>More...</li>
                            </ul>
                        </div>
                        <a href="#" class="read-more">Read More</a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="single-price-table active text-center">
                        <h2 class="price-title">Medium</h2>
                        <h2 class="price-rate">49 <small>/ month</small></h2>
                        <div class="price-details">
                            <ul>
                                <li><strong>10</strong> Hosting</li>
                                <li><strong>150</strong> Projects</li>
                                <li><strong>300GB</strong> Storage</li>
                                <li><strong>Unlimited</strong> Usage</li>
                                <li><strong>500GB</strong> Bandwidth</li>
                                <li>More...</li>
                            </ul>
                        </div>
                        <a href="#" class="read-more">Read More</a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="single-price-table text-center">
                        <h2 class="price-title">Expert</h2>
                        <h2 class="price-rate">99 <small>/ month</small></h2>
                        <div class="price-details">
                            <ul>
                                <li><strong>100</strong> Hosting</li>
                                <li><strong>300</strong> Projects</li>
                                <li><strong>500GB</strong> Storage</li>
                                <li><strong>Unlimited</strong> Usage</li>
                                <li><strong>1TB</strong> Bandwidth</li>
                                <li>More...</li>
                            </ul>
                        </div>
                        <a href="#" class="read-more">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END PRICE AREA-->

    <!--TESTMONIAL AREA-->
    <section class="testmonial-area section-padding" id="testmonial">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2">
                    <div class="area-title text-center">
                        <h2>TESTMONIALS</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere.Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 col-md-10 col-md-offset-1 col-lg-offset-1 col-sm-12 col-xs-12">
                    <div class="testmonial-list">
                        <div class="single-testmonial">
                            <div class="testmonial-member"><img src="img/testmonial/member-1.jpg" alt=""></div>
                            <div class="testmonial-details">
                                <h4>Jessie Smith <span>Designer</span></h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam. Mauris scelerisque ac null gravida ultrices. Nulla ultricies ante in diam lobortis, vitae ultrices sapien lobortis. In ultrices, lacus ac fringilla efficitur, ante dolor iaculis dui.</p>
                            </div>
                        </div>
                        <div class="single-testmonial">
                            <div class="testmonial-member"><img src="img/testmonial/member-1.jpg" alt=""></div>
                            <div class="testmonial-details">
                                <h4>Jessie Smith <span>Designer</span></h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam. Mauris scelerisque ac null gravida ultrices. Nulla ultricies ante in diam lobortis, vitae ultrices sapien lobortis. In ultrices, lacus ac fringilla efficitur, ante dolor iaculis dui.</p>
                            </div>
                        </div>
                        <div class="single-testmonial">
                            <div class="testmonial-member"><img src="img/testmonial/member-1.jpg" alt=""></div>
                            <div class="testmonial-details">
                                <h4>Jessie Smith <span>Designer</span></h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere. Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam. Mauris scelerisque ac null gravida ultrices. Nulla ultricies ante in diam lobortis, vitae ultrices sapien lobortis. In ultrices, lacus ac fringilla efficitur, ante dolor iaculis dui.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END TESTMONIAL AREA-->

    <!--CLIENT AREA-->
    <div class="client-area section-padding blue-bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-12 col-sm-12-col-xs-12">
                    <div class="client-list">
                        <div class="single-client">
                            <img src="img/client/client-1.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-2.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-3.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-4.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-5.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-6.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-1.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-2.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-3.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-4.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-5.png" alt="">
                        </div>
                        <div class="single-client">
                            <img src="img/client/client-6.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--END CLIENT AREA-->

    <!--CONTACT AREA-->
    <section class="contact-area section-padding" id="contact">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2">
                    <div class="area-title text-center">
                        <h2>Contact Us</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in purus bibendum nunc bibendum posuere.Vestibulum nibh augue, consequat ac dui ac, feugiat elementum diam.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12">
                    <div class="contact-form">
                        <form action="process.php" id="contact-form" role="form" method="post">
                            <div class="form-group" id="name-field">
                                <div class="form-input">
                                    <input type="text" class="form-control" id="form-name" name="form-name" placeholder="Name" required>
                                </div>
                            </div>
                            <div class="form-group" id="email-field">
                                <div class="form-input">
                                    <input type="email" class="form-control" id="form-email" name="form-email" placeholder="Email" required>
                                </div>
                            </div>
                            <div class="form-group" id="phone-field">
                                <div class="form-input">
                                    <input type="text" class="form-control" id="form-phone" name="form-phone" placeholder="Phone">
                                </div>
                            </div>
                            <div class="form-group" id="message-field">
                                <div class="form-input">
                                    <textarea class="form-control" rows="6" id="form-message" name="form-message" placeholder="Message" required></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                    <button type="submit">SUBMIT NOW</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12">
                    <div class="google-map">
                        <div id="map" style="height:370px; width:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--END CONTACT AREA-->

    <!--FOOTER AREA-->
    <footer class="footer-area">
        <div class="footer-top section-padding blue-bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                        <div class="footer-social-area text-center">
                            <h3>Follow Us !</h3>
                            <ul class="social-bookmark">
                                <li><a data-toggle="tooltip" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a data-toggle="tooltip" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a data-toggle="tooltip" title="Google-Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
                                <li><a data-toggle="tooltip" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom black-bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                        <div class="footer-copyright text-center">
                            <p>Copyright 2016 <a href="http://themeforest.net/user/bdexpert">BDEXPERT</a> Designed by <a href="http://themeforest.net/user/JeriTeam">JeriTeam</a>. All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!--END FOOTER AREA-->

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

    <!--====== PLUGINS======-->
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/venobox.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="js/maps.active.js"></script>

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

</html>

CSS Structure

We are using plantey of CSS files across template in comments (<!-- -->) describe the linked stylesheet bellow. We separated styles for improving convenience to edit this template. If you're going to use this template in production I'd recommend you to merge all stylesheets in one file (for decreasing http queries).
    <!--====== STYLESHEETS ======-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/venobox.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" type="image/ico" href="img/favicon.png" />

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

jQuery Structure

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

    <!--====== PLUGINS======-->
    <script src="js/vendor/jquery.easing.1.3.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/venobox.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="js/maps.active.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 resouce 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 slideing client list.
     
  5. vinobx.min.js is a jQuery plugin used for image open a popup window.
     
  6. contact-form.js is a jQuery plugin used for contact form data validation.
     
  7. maps.active.js is a jQuery used for active google maps.
     
  8. 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. Arimo
  2. Lato
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 
    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

Change Icons

We have used  font ICON ( Font Awesome ) 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 Font Awesome Icon

Change Google Map

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": "#444444"
                    }]
                }, {
                    "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": "#360581"
                    }, {
                        "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: 'APPKEKO!'
            });
        }

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
    Facebook

 

Credits:

  1.  
  2. jQuery v1.12.0 jquery.com
     
  3. Bootstrap bootstrap.com
     
  4. Owl Carousel owlcarousel.owlgraphic.com/
     
  5. Vinobox lab.veno.it/venobox
     
  6. Images from pixels.com
     
  7. Images from pixabay
     
  8. Font-Awesome fontawesome.github.io