/home/hdwebsolution/www/karamboring/service.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Builderz - Construction Company Website Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Construction Company Website Template" name="keywords">
<meta content="Construction Company Website Template" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/flaticon/font/flaticon.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<link href="lib/slick/slick.css" rel="stylesheet">
<link href="lib/slick/slick-theme.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Top Bar Start -->
<div class="top-bar">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-4 col-md-12">
<div class="logo">
<a href="index.html">
<h1>Builderz</h1>
<!-- <img src="img/logo.jpg" alt="Logo"> -->
</a>
</div>
</div>
<div class="col-lg-8 col-md-7 d-none d-lg-block">
<div class="row">
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-calendar"></i>
</div>
<div class="top-bar-text">
<h3>Opening Hour</h3>
<p>Mon - Fri, 8:00 - 9:00</p>
</div>
</div>
</div>
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-call"></i>
</div>
<div class="top-bar-text">
<h3>Call Us</h3>
<p>+012 345 6789</p>
</div>
</div>
</div>
<div class="col-4">
<div class="top-bar-item">
<div class="top-bar-icon">
<i class="flaticon-send-mail"></i>
</div>
<div class="top-bar-text">
<h3>Email Us</h3>
<p>info@example.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Top Bar End -->
<!-- Nav Bar Start -->
<div class="nav-bar">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<a href="#" class="navbar-brand">MENU</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav mr-auto">
<a href="index.html" class="nav-item nav-link">Home</a>
<a href="about.html" class="nav-item nav-link">About</a>
<a href="service.html" class="nav-item nav-link active">Service</a>
<a href="team.html" class="nav-item nav-link">Team</a>
<a href="portfolio.html" class="nav-item nav-link">Project</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pages</a>
<div class="dropdown-menu">
<a href="blog.html" class="dropdown-item">Blog Page</a>
<a href="single.html" class="dropdown-item">Single Page</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contact</a>
</div>
<div class="ml-auto">
<a class="btn" href="https://htmlcodex.com/construction-company-html-template">Download Pro Version</a>
</div>
</div>
</nav>
</div>
</div>
<!-- Nav Bar End -->
<!-- Page Header Start -->
<div class="page-header">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Our Services</h2>
</div>
<div class="col-12">
<a href="">Home</a>
<a href="">Our Services</a>
</div>
</div>
</div>
</div>
<!-- Page Header End -->
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header text-center">
<p>Our Services</p>
<h2>We Provide Services</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
<div class="service-item">
<div class="service-img">
<img src="img/service-1.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>Building Construction</h3>
<a class="btn" href="img/service-1.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="service-item">
<div class="service-img">
<img src="img/service-2.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>House Renovation</h3>
<a class="btn" href="img/service-2.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
<div class="service-item">
<div class="service-img">
<img src="img/service-3.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>Architecture Design</h3>
<a class="btn" href="img/service-3.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-item">
<div class="service-img">
<img src="img/service-4.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>Interior Design</h3>
<a class="btn" href="img/service-4.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
<div class="service-item">
<div class="service-img">
<img src="img/service-5.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>Fixing & Support</h3>
<a class="btn" href="img/service-5.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
<div class="service-item">
<div class="service-img">
<img src="img/service-6.jpg" alt="Image">
<div class="service-overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
</div>
</div>
<div class="service-text">
<h3>Painting</h3>
<a class="btn" href="img/service-6.jpg" data-lightbox="service">+</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Service End -->
<!-- FAQs Start -->
<div class="faqs">
<div class="container">
<div class="section-header text-center">
<p>Frequently Asked Question</p>
<h2>You May Ask</h2>
</div>
<div class="row">
<div class="col-md-6">
<div id="accordion-1">
<div class="card wow fadeInLeft" data-wow-delay="0.1s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseOne">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion-1">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInLeft" data-wow-delay="0.2s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseTwo">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion-1">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInLeft" data-wow-delay="0.3s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseThree">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion-1">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInLeft" data-wow-delay="0.4s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseFour">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseFour" class="collapse" data-parent="#accordion-1">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInLeft" data-wow-delay="0.5s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseFive">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseFive" class="collapse" data-parent="#accordion-1">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div id="accordion-2">
<div class="card wow fadeInRight" data-wow-delay="0.1s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseSix">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseSix" class="collapse" data-parent="#accordion-2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInRight" data-wow-delay="0.2s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseSeven">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseSeven" class="collapse" data-parent="#accordion-2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInRight" data-wow-delay="0.3s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseEight">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseEight" class="collapse" data-parent="#accordion-2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInRight" data-wow-delay="0.4s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseNine">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseNine" class="collapse" data-parent="#accordion-2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
<div class="card wow fadeInRight" data-wow-delay="0.5s">
<div class="card-header">
<a class="card-link collapsed" data-toggle="collapse" href="#collapseTen">
Lorem ipsum dolor sit amet?
</a>
</div>
<div id="collapseTen" class="collapse" data-parent="#accordion-2">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FAQs End -->
<!-- Footer Start -->
<div class="footer wow fadeIn" data-wow-delay="0.3s">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="footer-contact">
<h2>Office Contact</h2>
<p><i class="fa fa-map-marker-alt"></i>123 Street, New York, USA</p>
<p><i class="fa fa-phone-alt"></i>+012 345 67890</p>
<p><i class="fa fa-envelope"></i>info@example.com</p>
<div class="footer-social">
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-youtube"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="footer-link">
<h2>Services Areas</h2>
<a href="">Building Construction</a>
<a href="">House Renovation</a>
<a href="">Architecture Design</a>
<a href="">Interior Design</a>
<a href="">Painting</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="footer-link">
<h2>Useful Pages</h2>
<a href="">About Us</a>
<a href="">Contact Us</a>
<a href="">Our Team</a>
<a href="">Projects</a>
<a href="">Testimonial</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="newsletter">
<h2>Newsletter</h2>
<p>
Lorem ipsum dolor sit amet elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulpu
</p>
<div class="form">
<input class="form-control" placeholder="Email here">
<button class="btn">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="container footer-menu">
<div class="f-menu">
<a href="">Terms of use</a>
<a href="">Privacy policy</a>
<a href="">Cookies</a>
<a href="">Help</a>
<a href="">FQAs</a>
</div>
</div>
<div class="container copyright">
<div class="row">
<div class="col-md-6">
<p>© <a href="#">Your Site Name</a>, All Right Reserved.</p>
</div>
<!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
<div class="col-md-6">
<p>Designed By <a href="https://htmlcodex.com">HTML Codex</a></p>
</div>
</div>
</div>
</div>
<!-- Footer End -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
</div>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/wow/wow.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/isotope/isotope.pkgd.min.js"></script>
<script src="lib/lightbox/js/lightbox.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/slick/slick.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>
