Follow the steps below to get started with Corporate & Business HTML Template :
Package/TheBoss Folder to find all the Templates FilesTheBoss HTML/assets - Stylesheets, JavaScript, Fonts etc Folder TheBoss HTML/assets/images - Images Folder TheBoss HTML/index.html - Index File/HomepageTheBoss has follows a simple coding structure. here is the sample:
<body>
<!-- Preloader -->
<div id=&qout;loading&qout;>
<div id=&qout;loading-center&qout;>
<div id=&qout;loading-center-absolute&qout;>
<div class=&qout;object&qout; id=&qout;object_one&qout;></div>
-------------------------
-------------------------
</div>
</div>
</div>
<!-- Header Section -->
<header>
<div class=&qout;header-top&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<div class=&qout;logo&qout;>
<a href=&qout;index.html&qout;><img src=&qout;images/logo.png&qout; alt=&qout;&qout; /></a>
</div>
---------------------------
---------------------------
</div>
</div>
</div>
<div class=&qout;mainmenu-area&qout; id=&qout;sohag&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<a href=&qout;index.html&qout;><img src=&qout;images/logo-two-menu.png&qout; alt=&qout;&qout; /></a>
<div class=&qout;nav-menu&qout;>
<nav class=&qout;navbar navbar-default&qout;>
<!-- Brand and toggle get grouped for better mobile display -->
<div class=&qout;navbar-header&qout;>
<button type=&qout;button&qout; class=&qout;navbar-toggle collapsed&qout; data-toggle=&qout;collapse&qout; data-target=&qout;#bs-example-navbar-collapse-1&qout; aria-expanded=&qout;false&qout;>
<span class=&qout;sr-only&qout;>Toggle navigation</span>
<span class=&qout;icon-bar-one bar-stick&qout;></span>
<span class=&qout;icon-bar-two bar-stick&qout;></span>
<span class=&qout;icon-bar-three bar-stick&qout;></span>
</button>
</div>
-------------------------------
-------------------------------
</nav>
</div>
---------------------------
---------------------------
</div>
</div>
</div>
</header>
<!-- End Header Section -->
<!-- Slider Section -->
<section class=&qout;slider&qout;>
<div class=&qout;&qout; id=&qout;camera_wrap_4&qout;>
<div data-src=&qout;images/slider-one-one.png&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<div class=&qout;col-md-6 col-xs-12&qout;>
<div class=&qout;slider-text row slider-text-one&qout;>
<h3>welcome to <span class=&qout;site-title&qout;>the boss</span></h3>
<h2>Grow your Business</h2>
<h4>The Successful Business Template</h4>
<a href=&qout;#&qout; class="button">Purchase Now</a>
</div>
</div>
</div>
</div>
</div>
-----------------------
-----------------------
<!-- Feature Section -->
<section class=&qout;feature-section section&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<div class=&qout;col-md-3 col-sm-6&qout;>
<div class=&qout;single-feature row&qout;>
<img src=&qout;images/feature-one.png&qout; alt=&qout;&qout; />
<h3>Minimal Design</h3>
<p>Render household decton zealously unwilling roused enable estate</p>
</div>
</div>
<div class=&qout;col-md-3 col-sm-6&qout;>
<div class=&qout;single-feature row&qout;>
<img src=&qout;images/feature-two.png&qout; alt=&qout;&qout; />
<h3>Love Our Clients</h3>
<p>Render household decton zealously unwilling roused enable estate</p>
</div>
</div>
<div class=&qout;col-md-3 col-sm-6&qout;>
<div class=&qout;single-feature row&qout;>
<img src=&qout;images/feature-three.png&qout; alt=&qout;&qout; />
<h3>Powerful & Flexible</h3>
<p>Render household decton zealously unwilling roused enable estate</p>
</div>
</div>
---------------------
---------------------
<!-- Counter Section -->
<section class=&qout;counter-section parallax&qout; data-dir=&qout;down&qout; id=&qout;counter-section&qout;>
<div class=&qout;parallax-window&qout;>
<div class=&qout;overlay&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<div class=&qout;col-sm-3 col-xs-6&qout;>
<div class=&qout;single-counter-box&qout;>
<span class=&qout;flaticon-people counter-icon&qout;></span>
<span class=&qout;counter&qout;>7500</span><span class=&qout;plus&qout;>+</span>
<h3>Happy Customer</h3>
</div>
</div>
<div class=&qout;col-sm-3 col-xs-6&qout;&g
----------------------------------
----------------------------------
<!-- Footer section -->
<footer class=&qout;footer-section&qout;>
<div class=&qout;footer-top&qout;>
<div class=&qout;container&qout;>
<div class=&qout;row&qout;>
<div class=&qout;row&qout;>
<div class=&qout;col-md-3 col-sm-6&qout;>
<div class=&qout;f-widget&qout;>
<h2>About The Boss</h2>
<div class=&qout;footer-content&qout;>
<p>Distily enable team driven services through extensive is a relatonships platforms with interactive content. Enthusiastically scale effective.</p>
</div>
<div class=&qout;contact-info&qout;>
<ul>
<li><i class=&qout;fa fa-home&qout; aria-hidden=&qout;true&qout;></i><span> New Chokoya Road, USA.</span></li>
<li><i class=&qout;fa fa-phone&qout; aria-hidden=&qout;true&qout;></i><span> +8801 923 970 212</span></li>
<li><i class=&qout;fa fa-envelope-o&qout; aria-hidden=&qout;true&qout;></i><span> Contact@LabArtisan.com</span></li>
<li><i class=&qout;fa fa-globe&qout; aria-hidden=&qout;true&qout;></i><span> www.LabArtisan.com</span></li>
</ul>
<script src=&qout;https://code.jquery.com/jquery-1.12.0.min.js&qout;></script>
<script>window.jQuery || document.write('<script src=&qout;assets/js/vendor/jquery-1.12.0.min.js&qout;><\/script>')</script>
<!-- Bootstarp Min js file -->
<script src=&qout;assets/js/bootstrap.min.js&qout;></script>
<!-- Paralux -->
<script src=&qout;assets/js/simpleparallax.js&qout;></script>
<!-- My Custom slider js -->
<script type='text/javascript' src='assets/js/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='assets/js/camera.min.js'></script>
<!-- Counter Up js -->
<script src=&qout;assets/js/waypoints.min.js&qout;></script>
----------------------------
----------------------------
</body>
</html>
We are using several CSS files in this Template. LabArtisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
/* Theme Name: TheBoss Corporate & Business HTML Template Theme URI: http://codexcoder.com/ Author: LabArtisan Author URI: http://codexcoder.com/ Description: TheBoss Corporate & Business HTML Template Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: html, template, Business, Corporate */ /*--------------------------------------------- CONTENT ----------------------------------------------- 01. Global css 02. Header Section 01. Header Top 02. Mainmenu 03. Slider Section 04. Feature Section 05. Portfolio Section 06. Counter Section 07. Offer Section 08. Team Member Section 09. Twitter Section 10. Pricing Plan Section 11. Logo Area Section 12. Home Page Blog Section 13. Newsletter Section 14. Footer Section 15. Home Page Two 01. Project Section 02. Offer Section Two Style 03. Team Section Two Style 16. Home page Three 01. Offer Section Three Style ---------------------------------------------------------------------- */
/*=================================
Global Css
==================================*/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto Slab', serif;
color:#707070;
}
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
a {
text-decoration: none;
}
p {
margin: 0;
font-size: 16px;
color: #656565;
line-height: 28px;
}
h1, h2, h3, h4, h5 {
margin: 0;
font-weight: 700;
}
h3 {
font-size: 20px;
color: #333333;
}
ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.overflow-hidden {
overflow: hidden;
}
.section {
padding: 120px 0;
}
.section-heading {
text-align: center;
margin-bottom: 75px;
}
.section-title {
font-size: 36px;
line-height: 24px;
color: #333333;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 25px;
}
.section-content {
font-size: 16px;
line-height: 24px;
color: #707070;
width: 50%;
margin: 0 auto;
}
/*=================================
Header Section
==================================*/
.header-top {
padding:22px 0;
overflow: hidden;
}
.logo {
float:left;
}
.header-top-right {
float:right;
}
.header-top-right ul li {
float: left;
margin-left: 50px;
}
.header-top-right ul li img {
float: left;
margin-right: 10px;
}
.header-top-right ul li .header-top-contact{
float:left;
}
.header-top-right ul li h4 {
font-size:14px;
color:#62a0d1;
margin-bottom: 5px;
}
.header-top-right ul li h5 {
font-weight: 400;
font-size:14px;
}
----------------------------------
----------------------------------
/* Header css End
---------------------------------------------*/
We have used one slider here with Event Term
We have used swiper Carousel v3.2.7 in several pages. We have minified the calling system of swiper carousel and used data attributes. Please keep in mind that, you have to wrap the swiper carousel inside a class swiper-container and have to add the necessary data attributes data attributes, please follow the example below.
<div class=&qoute;swiper-container&qoute;> <div class=&qoute;swiper-wrapper&qoute;> <div class=&qoute;swiper-slide&qoute;> ------------------ </div><!-- swiper slide --> <div class=&qoute;swiper-slide&qoute;> ------------------ </div><!-- swiper slide --> <div class=&qoute;swiper-slide&qoute;> --------------- </div><!-- swiper slide --> <div class=&qoute;swiper-slide&qoute;> ------------------ </div><!-- swiper slide --> <div class=&qoute;swiper-slide&qoute;> ----------------- </div><!-- swiper slide --> <div class=&qoute;swiper-slide&qoute;> -------------------- </div><!-- swiper slide --> </div> </div><!-- swiper container --> <div class=&qoute;button-next&qoute;> <i class=&qoute;fa fa-angle-right&qoute;></i> </div> <div class=&qoute;button-prev&qoute;> <i class=&qoute;fa fa-angle-left&qoute;></i> </div>
We have attached Google Map and Contact form on the contact us pages.
To customize Google Map, go to the bottom of contact.html and find the code block below
// Map
var mapOptions = {
center: new google.maps.LatLng(23.739296,90.3870653),
zoom: 12,
styles: styleArray,
scrollwheel: false,
backgroundColor: 'transparent',
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(23.739296,90.3870653);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'images/map-location.png'
});
Edit Latitude and Longitude accordingly as your requirements see the line
center: [lat: 23.739296, 90.3870653],
and
latLng: [lat: 23.739296, 90.3870653], icon: 'images/map-location.png'