<!--
author: W3layouts
author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Service Business Category Flat Bootstrap Responsive Web Template | Home :: w3layouts</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="Service Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- css files -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
<link href="css/style.css" rel='stylesheet' type='text/css' /><!-- custom css -->
<link href="css/font-awesome.min.css" rel="stylesheet"><!-- fontawesome css -->
<!-- //css files -->
<!-- google fonts -->
<link href="//fonts.googleapis.com/css?family=Rosario:400,400i,700,700i" rel="stylesheet">
<!-- //google fonts -->
</head>
<body>
<!-- //header -->
<header>
<div class="container">
<!-- nav -->
<nav class="py-4 d-lg-flex">
<div id="logo">
<h1> <a href="index.html"><span class="fa fa-clone"></span> Service</a></h1>
</div>
<label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
<input type="checkbox" id="drop" />
<ul class="menu mt-md-2 ml-auto">
<li class="mr-lg-4 mr-2 active"><a href="index.html">Home</a></li>
<li class="mr-lg-4 mr-2"><a href="#about">About Us</a></li>
<li class="mr-lg-4 mr-2"><a href="#services">Services</a></li>
<li class="mr-lg-4 mr-2"><a href="#how">How we work</a></li>
<li class="mr-lg-4 mr-2"><a href="#team">Team</a></li>
<li class="mr-lg-4 mr-2"><a href="#contact">Contact</a></li>
</ul>
<div class="login-icon mt-2">
<a class="user" href="#popup-register">Sign Up</a>
</div>
</nav>
<!-- //nav -->
</div>
</header>
<!-- //header -->
<!-- banner -->
<section class="banner w3pvt-banner" id="home">
<div class="container">
<div class="banner-text">
<div class="slider-info">
<div class="w3pvt-logo mt-lg-5">
<h2>The World's Best Customer Relationship Platform</h2>
<p class="mt-3"> Always Available, Online Support, Easy Solutions.</p>
<a class="btn mt-sm-5 mt-4 mr-2" href="#popup-register">Sign Up </a>
<a class="btn mt-sm-5 mt-4 mr-2" href="#popup1">Know More </a>
</div>
</div>
</div>
</div>
</section>
<!-- //banner -->
<!-- about -->
<section class="about py-5" id="about">
<div class="container py-md-5">
<div class="row">
<div class="col-lg-3 about-left">
<span>The Best Choice</span>
<h3 class="heading mb-lg-5 mb-4">About Us</h3>
</div>
<div class="col-lg-9 about-text">
<p class="mt-lg-2">Integer pulvinar leo id viverra feugiat.<strong class="text-capitalize"> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit.</strong> Sed porttitor orci vel fermentum elit maximus. Curabitur ut turpis massa in condimentum libero. Pellentesque maximus Pellentesque libero justo Nulla uter sollicitudin velit. Sed porttitor orci vel ferm semper at vel, ultrices in ligula semper at vel.</p>
<p class="mt-3"><strong class="text-capitalize">Integer pulvinar leo id viverra feugiat.</strong> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit. Sed porttitor orci vel ferm semper at vel, ultrices in ligula.</p>
</div>
</div>
<div class="row mt-5 about-grids">
<div class="col-lg-4 col-md-6 about-icon">
<div class="row">
<div class="col-md-3 col-sm-2">
<span class="fa fa-cogs" aria-hidden="true"></span>
</div>
<div class="col-md-9 col-sm-10">
<h3 class="mt-2">Integer pulvinar leo id viverra feugiat</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 about-icon1 mt-md-0 mt-4">
<div class="row">
<div class="col-md-3 col-sm-2">
<span class="fa fa-headphones" aria-hidden="true"></span>
</div>
<div class="col-md-9 col-sm-10">
<h3 class="mt-2">Integer pulvinar leo id viverra feugiat</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 about-icon2 mt-lg-0 mt-4">
<div class="row">
<div class="col-md-3 col-sm-2">
<span class="fa fa-calendar" aria-hidden="true"></span>
</div>
<div class="col-md-9 col-sm-10">
<h3 class="mt-2">Integer pulvinar leo id viverra feugiat</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //about -->
<!-- services -->
<section class="services py-5 w3layouts-services" id="services">
<div class="container py-md-5">
<div class="row">
<div class="col-lg-2 col-sm-4 px-1 grid1-margin w3-grid">
<div class="serv-grids icon1-color">
<span class="fa fa-free-code-camp" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
<div class="serv-grids mt-2 icon2-color">
<span class="fa fa-calendar-check-o" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
</div>
<div class="col-lg-2 col-sm-4 px-1 grid2-margin w3-grid">
<div class="serv-grids icon3-color">
<span class="fa fa-commenting" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
<div class="serv-grids mt-2 icon4-color">
<span class="fa fa-cubes" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
</div>
<div class="col-lg-2 col-sm-4 px-1 grid3-margin w3-grid">
<div class="serv-grids icon5-color">
<span class="fa fa-external-link" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
<div class="serv-grids mt-2 icon6-color">
<span class="fa fa-file-photo-o" aria-hidden="true"></span>
<h3 class="mt-2">Integer pulvinar leo.</h3>
</div>
</div>
<div class="col-lg-5 offset-lg-1 serv-right mt-lg-0 mt-5 w3-grid">
<h3 class="heading mb-4">Our Services</h3>
<h4 class="mb-3">Integer pulvinar leo Pellentesque led libero justo Nulla uter ipsum sed.</h4>
<p class="">Integer pulvinar leo id viverra feugiat. Pellentesque led libero justo, semper at tempus vel, ultrices in sed ipsu ligula. Nulla uter sollicitudin velit. Sed porttitor orciid vel fermentum elit maximus. Curabitur ut turpis.</p>
<p class="mt-2">Integer pulvinar leo id viverra feugiat. Pellentesque led libero justo, semper at tempus vel, ultrices in sed ipsu ligula. Nulla uter sollicitudin velit.</p>
</div>
</div>
</div>
</section>
<!-- //services -->
<!-- how we work -->
<section class="how py-5 w3layouts-sec" id="how">
<div class="container py-md-5">
<div class="row">
<div class="col-lg-4 about-left">
<span class="pl-0">Step by step</span>
<h3 class="heading mb-lg-5 mb-4">How We Work</h3>
</div>
<div class="col-lg-8 about-text">
<p class="mt-lg-2">Integer pulvinar leo id viverra feugiat.<strong class="text-capitalize"> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit.</strong> Sed porttitor orci vel fermentum elit maximus. Curabitur ut turpis massa in condimentum libero.</p>
</div>
<div class="col-lg-3 col-md-6 how-icon mt-4 w3layout-grid">
<span class="fa fa-cogs" aria-hidden="true"></span>
<div class=" how-grid">
<h3 class="mt-2">Integer pulvinar leo id viverra elit ipsum</h