Thank you for choosing our Portfolio template - Boots4. If you have any questions please feel free to submit a ticket in our website here.
Unzip the downloaded folder and find out the assets. There are all the template files in this folder. You can open the following files for viewing in browser.
In index.html file . HTML structure of the preloading Section. This code placed just after the
<body>
<div id="preloader" style="display: none;">
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
In index.html file . HTML structure of the Home Screen Section
<div class="home-page">
<!-- Introduction -->
<div class="introduction">
<!-- <div class="mask">
</div> -->
<div class="intro-content">
<!-- <h1>HELLO<br>
I'M <span>JOHN</span> DOE</h1> -->
<h1>
Hi, We are
</h1>
<span>boots</span><span class="number">4</span>
<p class="slogan-text text-capitalize">leading creative tech company</p>
<div class="social-media hidden-xs">
<a href="#" class="fa fa-facebook" data-toggle="tooltip" title="Facebook"></a>
<a href="#" class="fa fa-twitter" data-toggle="tooltip" title="Twitter"></a>
<a href="#" class="fa fa-plus" data-toggle="tooltip" title="Google+"></a>
<a href="#" class="fa fa-linkedin" data-toggle="tooltip" title="Linkedin"></a>
<a href="#" class="fa fa-behance" data-toggle="tooltip" title="Behance"></a>
<a href="#" class="fa fa-flickr" data-toggle="tooltip" title="Flicker"></a>
<a href="#" class="fa fa-instagram" data-toggle="tooltip" title="Instagram"></a>
</div>
</div>
<!-- Social Media Icons [ END ] -->
</div>
<!-- Navigation Menu -->
<div class="menu">
<div data-url_target="about_us" class="profile-btn menu_button">
<img alt="" src="assets/img/about.jpg" style="width:100%; height:100%;">
<div class="mask">
</div>
<div class="heading">
<i class="ion-ios-people-outline hidden-xs"></i>
<h2>About Us</h2>
</div>
</div>
<!-- Single Navigation Menu Button -->
<div data-url_target="portfolio" class="portfolio-btn menu_button">
<img alt="" src="assets/img/portfolio.jpg">
<div class="mask">
</div>
<div class="heading">
<i class="ion-ios-briefcase-outline hidden-xs"></i>
<h2>Portfolio</h2>
</div>
</div>
<!-- Single Navigation Menu Button [ END ] -->
<div data-url_target="service" class="service-btn menu_button">
<img alt="" src="assets/img/service.jpg">
<div class="mask">
</div>
<div class="heading">
<i class="ion-ios-lightbulb-outline hidden-xs"></i>
<h2>Services</h2>
</div>
</div>
<!-- Single Navigation Menu Button [ END ] -->
<div data-url_target="contact" class="contact-btn menu_button">
<img alt="" src="assets/img/contact.jpg">
<div class="mask">
</div>
<div class="heading">
<i class="ion-ios-chatboxes-outline hidden-xs"></i>
<h2>Contact</h2>
</div>
</div>
<!-- Single Navigation Menu Button [ END ] -->
</div>
</div>
In index.html file. This code placed just under the end of Home Screen Section. This button shows on every section to close this section and back to theHomescreen Section
<div class="close-btn"></div>
In index.html file. HTML structure of the About Section
<div id="about_us" class="profile-page container-fluid page">
<div class="row">
<!--( a ) Profile Page Fixed Image Portion -->
<div class="image-container col-md-3 col-sm-12">
<div class="mask">
</div>
<div class="main-heading">
<h1>About us</h1>
</div>
</div>
<!--( b ) Profile Page Content -->
<div class="content-container col-md-9 col-sm-12">
<!--( A ) Story of Glory -->
<div class="clearfix">
<h2 class="small-heading">LEARN ABOUT US</h2>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="video embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qTSDL94_Y7M" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="about-us-desc">
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor
</p>
<p>
Faliquam hendrerit a augue in suscipit. Pellen tesque id erat quis sapien a dignissim sollicitu din. Nulla B-4 mattis tortor sit amet lorem dolor amer sollicitudin aliquam dignissim so much.
Ut cursus massa at urnaac assin got pressed hadrtits lis estie. Sed aliquamellus tae ultrices condimentum, the Bootstrap 4 leo massa mollis estiegittis miristum nu endrerit a augue in su cipit.Pe lla eo massa mlli joss mama.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--( B ) What Can I Do -->
<div class="clearfix">
<h2 class="small-heading">OUR FUN FACTS</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="services col-md-4 col-xs-12">
<div class="facts">
<div class="facts-overlay">
<i class="fa fa-code fa-3x"></i>
<p class="count">1956628</p>
<p class="text-capitalize">lines of code</p>
</div>
</div>
</div>
<!-- Single Service Item [ END ] -->
<div class="services col-md-4 col-xs-12">
<div class="facts">
<div class="facts-overlay">
<i class="fa fa-coffee fa-3x"></i>
<p class="count">1473</p>
<p class="text-capitalize">cups of coffee</p>
</div>
</div>
</div>
<!-- Single Service Item [ END ] -->
<div class="services col-md-4 col-xs-12">
<div class="facts">
<div class="facts-overlay">
<i class="fa fa-cubes fa-3x"></i>
<p class="count">500</p>
<p class="text-capitalize">projects delivered</p>
</div>
</div>
</div>
<!-- Single Service Item [ END ] -->
</div>
</div>
</div>
</div>
<div class="clearfix full-height">
<h2 class="small-heading">MEET THE TEAM</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="team-member-box center-block text-center">
<img src="assets/img/team_member1.jpg" class="img-responsive">
<h4 class="text-capitalize">loras tyrel</h4>
<p class="text-uppercase">founder and ceo</p>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="team-member-box center-block text-center">
<img src="assets/img/team_member2.jpg" class="img-responsive">
<h4 class="text-capitalize">john snow</h4>
<p class="text-uppercase">head of attorney</p>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="team-member-box center-block text-center">
<img src="assets/img/team_member3.jpg" class="img-responsive">
<h4 class="text-capitalize">sansa stark</h4>
<p class="text-uppercase">creative coder</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--( D ) Footer -->
<div class="footer clearfix">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="copyright">Copyright © 2015
<a href="#">Your Company</a>
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="author">
Theme by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In index.html file. HTML structure of the Portfolio Section
<div id="portfolio" class="portfolio-page container-fluid page" style="display: block;">
<div class="row">
<!--( a ) Portfolio Page Fixed Image Portion -->
<div class="image-container col-md-3 col-sm-12">
<div class="mask">
</div>
<div class="main-heading">
<h1>Portfolio</h1>
</div>
</div>
<!--( b ) Portfolio Page Content -->
<div class="content-container col-md-9 col-sm-12">
<!--( A ) Portfolio -->
<div class="portfolio clearfix full-height">
<h2 class="small-heading">PORTFOLIO</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="project-container">
<div class="row">
<div class="project-controls">
<button class="filter active" data-filter="all">All</button>
<button class="filter" data-filter=".graphic-design">Graphic Design</button>
<button class="filter" data-filter=".web-design">Web Designs</button>
<button class="filter" data-filter=".app-development">App Development</button>
</div>
<!-- Portfolio Control Buttons [ END ] -->
<div id="projects" class="projet-items clearfix">
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix graphic-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_1.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-1" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-1">
<img alt="" src="assets/img/portfolio/image_1.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix web-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_2.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-2" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-2">
<img alt="" src="assets/img/portfolio/image_2.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix app-development" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_3.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-3" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-3">
<img alt="" src="assets/img/portfolio/image_3.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix graphic-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_4.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-4" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-4">
<img alt="" src="assets/img/portfolio/image_4.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix web-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_5.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-5" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-5">
<img alt="" src="assets/img/portfolio/image_5.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix app-development" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_6.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-6" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-6">
<img alt="" src="assets/img/portfolio/image_6.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix web-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_7.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-7" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-7">
<img alt="" src="assets/img/portfolio/image_7.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix graphic-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_8.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-8" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-8">
<img alt="" src="assets/img/portfolio/image_8.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix app-development" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_9.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-9" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-9">
<img alt="" src="assets/img/portfolio/image_9.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
<!-- Portfolio Image -->
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-6 mix web-design" style="display: inline-block;">
<div class="project">
<img src="assets/img/portfolio/thumbs/image_10.jpg" alt="">
<div class="ovrly">
</div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#portfolio-10" class="fa fa-search show-popup"></a>
</div>
</div>
</div>
<!-- Popup Content -->
<div class="pop-up-box" id="portfolio-10">
<img alt="" src="assets/img/portfolio/image_10.jpg" class=" hidden-xs">
<div class="popup-content">
<h3>PROJECT NAME</h3>
<p>
Quisque in tempor sapien, et cursus neque. Nunc pulvinar diam ac dapibus mollis. Etiam id iaculis lorem. Donec bibendum volutpat ante, eu consequat nisi suscipit at. Etiam interdum augue dolor, id auctor felis volutpat sed. Phasellus id ex ultrices, tempus leo eget, volutpat diam. In sit amet magna faucibus, molestie nisi in, hendrerit libero. Morbi auctor velit sagittis, elementum lorem eget, imperdiet nisl.
</p>
<a href="#">PREVIEW</a>
</div>
</div>
<!-- Single Portfolio Item [ END ] -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In index.html HTML structure of Services section.
<div id="service" class="service-page container-fluid page" style="display: block;">
<div class="row">
<!--( a ) Portfolio Page Fixed Image Portion -->
<div class="image-container col-md-3 col-sm-12">
<div class="mask">
</div>
<div class="main-heading">
<h1>Service</h1>
</div>
</div>
<!--( b ) Portfolio Page Content -->
<div class="content-container col-md-9 col-sm-12">
<!--( A ) Portfolio -->
<div class="clearfix">
<h2 class="small-heading">WHAT WE DO BEST</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="faq-desc-item">
<div class="flip-container text-center" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<i class="fa fa-mobile"></i>
<h5>Applications</h5>
</div>
<div class="back">
<h5>Applications</h5>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="faq-desc-item">
<div class="flip-container text-center" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<i class="fa fa-lightbulb-o"></i>
<h5>Productions</h5>
</div>
<div class="back">
<!-- <i class="fa fa-lightbulb-o fa-fw"></i> -->
<h5>Productions</h5>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="faq-desc-item">
<div class="flip-container text-center" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<i class="fa fa-paint-brush"></i>
<h5>Web Designing</h5>
</div>
<div class="back">
<!-- <i class="fa fa-paint-brush fa-fw"></i> -->
<h5>Web Designing</h5>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix">
<h2 class="small-heading">CHOSSE YOUR PLAN</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 price-catagory">
<div class="price-box">
<p class="pricing-catagory-name">Basic</p>
<p><span class="price">$19</span>/Month</p>
<ul>
<li>15 Projects</li>
<li>30 GB Storage</li>
<li class="unavailabe">Unlimited Data Transfer</li>
<li class="unavailabe">50 GB Bandwith</li>
<li class="unavailabe">Enhanced Security</li>
</ul>
<a href="#" class="btn">learn more</a>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 price-catagory">
<div class="price-box">
<p class="pricing-catagory-name">Business</p>
<p><span class="price">$29</span>/Month</p>
<ul>
<li>15 Projects</li>
<li>30 GB Storage</li>
<li>Unlimited Data Transfer</li>
<li class="unavailabe">50 GB Bandwith</li>
<li class="unavailabe">Enhanced Security</li>
</ul>
<a href="#" class="btn">learn more</a>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 price-catagory">
<div class="price-box">
<p class="pricing-catagory-name">Premium</p>
<p><span class="price">$39</span>/Month</p>
<ul>
<li>15 Projects</li>
<li>30 GB Storage</li>
<li>Unlimited Data Transfer</li>
<li>50 GB Bandwith</li>
<li class="unavailabe">Enhanced Security</li>
</ul>
<a href="#" class="btn">learn more</a>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 price-catagory">
<div class="price-box">
<p class="pricing-catagory-name">Ultimate</p>
<p><span class="price">$49</span>/Month</p>
<ul>
<li>15 Projects</li>
<li>30 GB Storage</li>
<li>Unlimited Data Transfer</li>
<li>50 GB Bandwith</li>
<li>Enhanced Security</li>
</ul>
<a href="#" class="btn">learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: pricing section -->
<div class="clearfix full-height">
<h2 class="small-heading">OUR VALUABLE CLIENTS</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div id="sponsor-list" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4740px; left: 0px; display: block; transition: all 1000ms ease; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor1.png" alt="sponsor1" class="center-block" style="width: 165px; height: 127px;">
</div></div><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor2.png" alt="sponsor2" class="center-block" style="width: 165px; height: 127px;">
</div></div><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor3.png" alt="sponsor3" class="center-block" style="width: 165px; height: 127px;">
</div></div><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor4.png" alt="sponsor4" class="center-block" style="width: 165px; height: 127px;">
</div></div><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor5.png" alt="sponsor5" class="center-block" style="width: 165px; height: 127px;">
</div></div><div class="owl-item" style="width: 395px;"><div class="item">
<img src="assets/img/sponsor6.png" alt="sponsor6" class="center-block" style="width: 165px; height: 127px;">
</div></div></div></div>
<div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div> <!-- / #sponsor-list /.owl-carousel -->
</div>
</div>
</div>
<!-- end: valuable clients -->
</div>
</div>
</div>
To change the Map location please open assets/js/script.js and change the following line:
center: new google.maps.LatLng(24.909439, 91.833800),
with your location latitute and langitude.
In index.html file. HTML structure of the Contact Section
<div id="contact" class="contact-page container-fluid page" style="display: block;">
<div class="row">
<!--( a ) Contact Page Fixed Image Portion -->
<div class="image-container col-md-3 col-sm-12">
<div class="mask">
</div>
<div class="main-heading">
<h1>contact</h1>
</div>
</div>
<!--( b ) Contact Page Content -->
<div class="content-container col-md-9 col-sm-12">
<!--( A ) Contact Form -->
<div class="clearfix full-height">
<h2 class="small-heading">COME IN TOUCH</h2>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="contact-info">
<div class="row">
<div class="col-md-6">
<div class="data">
<i class="fa fa-map-marker"></i>
<span>
House -3, Road-2, Block - F, <br>
Akhalia Ghat R/A, Sylhet. <br>
</span>
</div>
<div class="data">
<i class="fa fa-envelope"></i>
<span>
hello@boots4.com
</span>
</div>
<div class="data">
<i class="fa fa-phone"></i>
<span>
+880 12345 - 67890
</span>
</div>
</div>
<div class="col-md-6">
<div id="map-canvas" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"><div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") 8 8, default;"><div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: -213px; top: -98px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 43px; top: -98px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 43px; top: 158px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 299px; top: -98px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 299px; top: 158px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: -213px; top: 158px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 555px; top: -98px;"></div><div style="width: 256px; height: 256px; transform: translateZ(0px); position: absolute; left: 555px; top: 158px;"></div></div></div></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: -1;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: -213px; top: -98px;"><canvas draggable="false" height="256" width="256" style="-webkit-user-select: none; position: absolute; left: 0px; top: 0px; height: 256px; width: 256px;"></canvas></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 43px; top: -98px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 43px; top: 158px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 299px; top: -98px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 299px; top: 158px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: -213px; top: 158px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 555px; top: -98px;"></div><div style="width: 256px; height: 256px; overflow: hidden; transform: translateZ(0px); position: absolute; left: 555px; top: 158px;"></div></div></div></div><div style="position: absolute; z-index: 0; transform: translateZ(0px); left: 0px; top: 0px;"><div style="overflow: hidden;"></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"><div style="transform: translateZ(0px); position: absolute; left: -213px; top: -98px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49485!3i28083!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=108912" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 43px; top: -98px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49486!3i28083!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=69191" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 43px; top: 158px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49486!3i28084!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=105212" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 299px; top: -98px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49487!3i28083!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=29470" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 299px; top: 158px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49487!3i28084!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=65491" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: -213px; top: 158px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49485!3i28084!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=13862" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 555px; top: -98px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49488!3i28083!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=120820" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div style="transform: translateZ(0px); position: absolute; left: 555px; top: 158px; transition: opacity 200ms ease-out;"><img src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i16!2i49488!3i28084!4i256!2m3!1e0!2sm!3i335000000!3m9!2sen-GB!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=25770" draggable="false" alt="" style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div><div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);"><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div><div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div></div></div><div style="padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 256px; height: 148px; position: absolute; left: 142px; top: 35px; background-color: white;"><div style="padding: 0px 0px 10px; font-size: 16px;">Map Data</div><div style="font-size: 13px;">Map data ©2016 Google</div><div style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 12px; z-index: 10000; cursor: pointer;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png" draggable="false" style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div><div class="gmnoprint" style="z-index: 1000001; position: absolute; right: 72px; bottom: 0px; width: 122px;"><div draggable="false" class="gm-style-cc" style="-webkit-user-select: none; height: 14px; line-height: 14px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a style="color: rgb(68, 68, 68); text-decoration: none; cursor: pointer; display: none;">Map Data</a><span>Map data ©2016 Google</span></div></div></div><div class="gmnoscreen" style="position: absolute; right: 0px; bottom: 0px;"><div style="font-family: Roboto, Arial, sans-serif; font-size: 11px; color: rgb(68, 68, 68); direction: ltr; text-align: right; background-color: rgb(245, 245, 245);">Map data ©2016 Google</div></div><div class="gmnoprint gm-style-cc" draggable="false" style="z-index: 1000001; -webkit-user-select: none; height: 14px; line-height: 14px; position: absolute; right: 0px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a href="https://www.google.com/intl/en-GB_US/help/terms_maps.html" target="_blank" style="text-decoration: none; cursor: pointer; color: rgb(68, 68, 68);">Terms of Use</a></div></div><div draggable="false" class="gm-style-cc" style="-webkit-user-select: none; height: 14px; line-height: 14px; display: none; position: absolute; right: 0px; bottom: 0px;"><div style="opacity: 0.7; width: 100%; height: 100%; position: absolute;"><div style="width: 1px;"></div><div style="width: auto; height: 100%; margin-left: 1px; background-color: rgb(245, 245, 245);"></div></div><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"><a target="_new" title="Report errors in the road map or imagery to Google" href="https://www.google.com/maps/@24.9070063,91.8400549,16z/data=!10m1!1e1!12b1?source=apiv3&rapsrc=apiv3" style="font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); text-decoration: none; position: relative;">Report a map error</a></div></div><div class="gmnoprint" draggable="false" controlwidth="28" controlheight="93" style="margin: 10px; -webkit-user-select: none; position: absolute; bottom: 107px; right: 28px;"><div class="gmnoprint" controlwidth="28" controlheight="55" style="position: absolute; left: 0px; top: 38px;"><div draggable="false" style="-webkit-user-select: none; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; cursor: pointer; width: 28px; height: 55px; background-color: rgb(255, 255, 255);"><div title="Zoom in" style="position: relative; width: 28px; height: 27px; left: 0px; top: 0px;"><div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/tmapctrl.png" draggable="false" style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;"></div></div><div style="position: relative; overflow: hidden; width: 67%; height: 1px; left: 16%; top: 0px; background-color: rgb(230, 230, 230);"></div><div title="Zoom out" style="position: relative; width: 28px; height: 27px; left: 0px; top: 0px;"><div style="overflow: hidden; position: absolute; width: 15px; height: 15px; left: 7px; top: 6px;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/tmapctrl.png" draggable="false" style="position: absolute; left: 0px; top: -15px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 120px; height: 54px;"></div></div></div></div><div controlwidth="28" controlheight="28" style="box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; width: 28px; height: 28px; cursor: url("https://maps.gstatic.com/mapfiles/openhand_8_8.cur") 8 8, default; position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255);"><div style="position: absolute; left: 1px; top: 1px;"></div><div style="position: absolute; left: 1px; top: 1px;"><div aria-label="Street View Pegman Control" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -26px; width: 215px; height: 835px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div aria-label="Pegman is on top of the Map" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -52px; width: 215px; height: 835px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div aria-label="Street View Pegman Control" style="width: 26px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px; visibility: hidden;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/cb_scout5.png" draggable="false" style="position: absolute; left: -147px; top: -78px; width: 215px; height: 835px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div><div class="gmnoprint" controlwidth="28" controlheight="0" style="display: none; position: absolute;"><div title="Rotate map 90 degrees" style="width: 28px; height: 28px; overflow: hidden; position: absolute; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; cursor: pointer; display: none; background-color: rgb(255, 255, 255);"><img src="https://maps.gstatic.com/mapfiles/api-3/images/tmapctrl4.png" draggable="false" style="position: absolute; left: -141px; top: 6px; width: 170px; height: 54px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div><div class="gm-tilt" style="width: 28px; height: 28px; overflow: hidden; position: absolute; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; top: 0px; cursor: pointer; background-color: rgb(255, 255, 255);"><img src="https://maps.gstatic.com/mapfiles/api-3/images/tmapctrl4.png" draggable="false" style="position: absolute; left: -141px; top: -13px; width: 170px; height: 54px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div></div></div><div class="gmnoprint" style="margin: 10px; z-index: 0; position: absolute; cursor: pointer; left: 0px; top: 0px;"><div class="gm-style-mtc" style="float: left;"><div draggable="false" title="Show street map" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 8px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; font-weight: 500; background-color: rgb(255, 255, 255); background-clip: padding-box;">Map</div><div style="z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; position: absolute; left: 0px; top: 0px; text-align: left; display: none; background-color: white;"><div draggable="false" title="Show street map with terrain" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap; background-color: rgb(255, 255, 255);"><span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle; background-color: rgb(255, 255, 255);"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden; display: none;"><img src="https://maps.gstatic.com/mapfiles/mv/imgs8.png" draggable="false" style="position: absolute; left: -52px; top: -44px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Terrain</label></div></div></div><div class="gm-style-mtc" style="float: left;"><div draggable="false" title="Show satellite imagery" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 8px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-left-width: 0px; background-color: rgb(255, 255, 255); background-clip: padding-box;">Satellite</div><div style="z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; position: absolute; right: 0px; top: 0px; text-align: left; display: none; background-color: white;"><div draggable="false" title="Show imagery with street names" style="color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 6px 8px 6px 6px; direction: ltr; text-align: left; white-space: nowrap; background-color: rgb(255, 255, 255);"><span role="checkbox" style="box-sizing: border-box; position: relative; line-height: 0; font-size: 0px; margin: 0px 5px 0px 0px; display: inline-block; border: 1px solid rgb(198, 198, 198); border-radius: 1px; width: 13px; height: 13px; vertical-align: middle; background-color: rgb(255, 255, 255);"><div style="position: absolute; left: 1px; top: -2px; width: 13px; height: 11px; overflow: hidden;"><img src="https://maps.gstatic.com/mapfiles/mv/imgs8.png" draggable="false" style="position: absolute; left: -52px; top: -44px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none; width: 68px; height: 67px;"></div></span><label style="vertical-align: middle; cursor: pointer;">Labels</label></div></div></div></div><div style="margin-left: 5px; margin-right: 5px; z-index: 1000000; position: absolute; left: 0px; bottom: 0px;"><a target="_blank" href="https://maps.google.com/maps?ll=24.907006,91.840055&z=16&t=m&hl=en-GB&gl=US&mapclient=apiv3" title="Click to see this area on Google Maps" style="position: static; overflow: visible; float: none; display: inline;"><div style="width: 66px; height: 26px; cursor: pointer;"><img src="https://maps.gstatic.com/mapfiles/api-3/images/google4.png" draggable="false" style="position: absolute; left: 0px; top: 0px; width: 66px; height: 26px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;"></div></a></div></div></div>
</div>
</div>
</div>
<div class="row">
<form id="contactForm" class="contact-form" method="post" action="php/contact.php">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" required="required" placeholder=" Name">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input name="email" type="email" class="form-control" id="email" required="required" placeholder=" Email">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea name="massage" type="text" class="form-control" id="message" rows="5" required="required" placeholder=" Message"></textarea>
</div>
<div class="col-md-4 col-xs-12">
<input type="submit" id="cfsubmit" class="btn btn-send" value="Say Hello">
</div>
<div id="contactFormResponse" class="col-md-8 col-xs-12"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Open the file contact-form.php and in line 46 and 47 enter your data:
// Your email
$to = 'info@themewagon.com';
$subject = 'Contact Form : Women Entrepreneur - Youtube Marketer Responsive HTML5 Template';
You need to check is PHP mail() function working.
Contact your host and ask them to check PHP mail() setting.
In index.html , HTML structure of the Footer Section. This code placed just before the Javascript code and link.
<!-- Footer -->
<div class="footer clearfix">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="copyright">Copyright © 2015
<a href="#">Your Company</a>
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<p class="author">
Theme by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!--End Of Footer -->
<!-- Javascript files -->
<!-- jQuery -->
Following libraries and plugins are used in Women Entrepreneur template:
Version 1.2
- Safari, chrome Mobile browser issue fixed
Version 1.1
- Fix relative urls - Added Documentation
Version 1.0
- Initial Release