Follow the steps below to get started with Plumber Zone - Creative HTML5 Template :
Package/PlumberZone Folder to find all the Templates FilesPlumber/assets - Stylesheets, JavaScript, Fonts etc Folder Plumber/assets/images - Images Folder Plumber/index.html - Index File/HomepageDemand has follows a simple coding structure. here is the sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plumber - Creative HTML5 Template</title>
<!-- Meta -->
<meta name="description" content="Plumber Zone is a Creative Multipurpose HTML5 Template">
<meta name="keywords" content="Plumber, HTML5, Multipurpose, Template">
<meta name="author" content="CodexCoder">
<!-- Framework Styles -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"/>
<!-- Fonts Styles -->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/flat-icon/MyIcons/flaticon.css"/>
<!-- Plugins Styles -->
<link rel="stylesheet" href="assets/css/animate.css"/>
<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css"/>
<link rel="stylesheet" href="assets/css/jquery.fs.boxer.min.css"/>
<link rel="stylesheet" href="assets/css/flexslider.css"/>
<link rel="stylesheet" href="assets/css/swiper.min.css"/>
<link rel="stylesheet" href="assets/css/screen.css"/>
<link rel="stylesheet" href="assets/css/ninja-slider.css"/>
<link rel="stylesheet" href="assets/css/thumbnail-slider.css"/>
<!-- Home slider style -->
<link rel="stylesheet" href="assets/css/slider.css"/>
<!-- Project Styles -->
<link rel="stylesheet" href="assets/css/style.css"/>
<!-- Responsive Styles -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css" />
</head>
<body>
<!-- start header -->
<header id="header">
...
</header>
<!-- start main content -->
<div id="content">
<div class="home-slider-area">
........
</div>
<!-- start service section -->
<div id="service">
........
</div>
<!-- start project section -->
<div id="project">
........
</div>
<!-- start news-testimonial section -->
<div id="news-testimonial">
........
</div>
<!-- countdown section -->
<div id="countdown">
........
</div>
<!-- start expert plumbers section -->
<div id="expert">
........
</div>
</div>
<!-- our-client section start -->
<div id="client">
........
</div>
<footer>
...
</footer>
<!-- jquery include -->
<script type="text/javascript" src='assets/js/plugins.js'></script>
<script type="text/javascript" src="javascripts/sleekslider.min.js"></script>
<script type="text/javascript" src="javascripts/app.js"></script>
<script type="text/javascript" src="assets/js/ninja-slider.js"></script>
<script type="text/javascript" src="assets/js/thumbnail-slider.js"></script>
...
<script type="text/javascript" src="assets/js/functions.js"></script>
</body>
</html>
We are using several CSS files in this Template. CodexCoder 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
/* Table of contents ---------------------------------------------------------------------- / 1. Import Google Fonts 2. Reset Styles 3. Global Styles 4. Header Style 4.1 menu 4.2 dropdown menu 5. Service section 6. Project Section 7. news-testimonial section 8. Countdown section 9. Expert section 10. Client section ... ... ---------------------------------------------------------------------- */
/*-----------------------------------------------
1 import Google font
------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Poppins:400,700|Montserrat:400,700);
/*-----------------------------------------------
2 reset Styles
------------------------------------------------*/
body {
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6, ul, li, ol, p {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
color: #363636;
}
p, a, button {
font-family: 'Montserrat', sans-serif;
color: #707070;
}
a:hover, a:focus, a:active {
text-decoration: none;
}
/*-----------------------------------------------
3 # Global Styles
------------------------------------------------*/
.section-title {
margin-bottom: 50px;
}
.title span {
font-size: 34px;
font-weight: 700;
margin-bottom: 5px;
text-transform: uppercase;
}
.title-desc {
font-size: 18px;
line-height: 24px;
color: #959595;
}
..........
..........
..........
/* 3.1 page header */
.page-header {
text-align: center;
background-image: url(../../images/blog/page-header-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 300px;
margin: 0px 0px 0px 0px;
}
.page-header-shop {
text-align: center;
background-image: url(../../images/blog/page-header-bg2.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 300px;
margin: 0;
}
.page-header-shop .overlay,
.page-header .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.page-header-content {
position: absolute;
left: 0;
top: 50%;
margin-top: -40px;
width: 100%;
height: auto;
}
............
............
............
/*-----------------------------------------------
4 # header Styles
------------------------------------------------*/
#header {
}
#header .header-top>.container>.row {
border-bottom: 2px solid #ebebeb;
}
#header .logo {
width: 20%;
float: left;
padding: 25px 0;
}
#header .contact-place {
width: 60%;
float: left;
text-align: center;
padding: 23px 0;
}
#header .contact-place .cp-01 {
width: 300px;
display: inline-block;
border: 1px solid #ebebeb;
border-radius: 3px;
background: #fafafa;
text-align: center;
padding: 7px 0;
margin-right: 5px;
}
.cp-inner {
display: inline-block;
}
#header .contact-place .cp-01 .icon {
float: left;
display: inline-block;
color: #ffc527;
}
.flaticon-email19:before,
.flaticon-phone41:before {
font-size: 35px;
margin-left: 0;
}
..................
..................
We have used 4slider here with Plumber. Here is some description of them
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 selected class and have to add the necessary data attributes data attributes, please follow the example below.
<div class="best-service-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="div post-item">
<div class="post-thumb">
<a href="single.html"><img src="images/service/01.jpg" alt="Thumb"></a>
</div>
<div class="content">
<h3 class="title"><a href="#">Bathroom Plumbing</a></h3>
<div class="excerpt">Intrinsic impact quality with cross media service. Compelling provide for very low tailers via maintainable.</div>
<a href="single.html" class="custom-btn">Learn More</a>
</div>
</div><!-- /.div post-item -->
</div><!-- /.swiper-slide -->
We have used sleekslider in two pages. We have minified the calling system of sleekslider and used data attributes. Please keep in mind that, you have to wrap the sleekslider inside a class selected class and have to add the necessary data attributes data attributes, please follow the example below.
<div class="sleekslider">
<!-- Slider Pages -->
<div class="slide active bg-1">
<div class="slide-container item-one">
<div class="image-one animated slideInLeft">
<img src="images/home-slider/item-one/man.png" alt="images">
</div>
<div class="image-two animated bounceInUp">
<img src="images/home-slider/item-one/image-area.png" alt="images">
</div>
<div class="text">
<h2 class="animated slideInRight">we are expert</h2>
<h1 class="animated slideInRight">Plumbers</h1>
</div>
</div>
</div>
We have used Flexslider in two pages. We have minified the calling system of sleekslider and used data attributes. Please keep in mind that, you have to wrap the sleekslider inside a class selected class and have to add the necessary data attributes data attributes, please follow the example below.
<div class="flexslider">
<ul class="slides">
<li data-thumb="images/home1/thumb/testimonial-thumb1.jpg">
<div class="testimonial-content">
<p class="description">Distinctively brand an expanded array of leadership without next-generation catalyst for change. Enthusiastically to generates user-centric imperatives via holistic intellectual capital. Unique and fabricate emerging action item.</p>
<h3 class="client-name">Jafor Ali</h3>
<strong class="designation">Customer</strong>
</div>
</li>
.......................
......................
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
<script type='text/javascript'>
map = new GMaps({
el: '#map',
lat: 23.7398225,
lng: 90.3925087,
zoomControl : false,
scrollwheel: false,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
map.addMarker({
lat: 23.739220,
lng: 90.389080,
title: 'WebCode',
icon: "images/mapicon.png"
});
</script>
Edit Latitude and Longitude accordingly as your requirements see the line
center: [23.739220, 90.389080],
and
latLng: [23.709921, 90.407143],
options: { icon: 'assets/images/mapicon.png' }