AC_services_website_design/app/Views/pages/index.php

548 lines
33 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- CSS here -->
<?php include 'commonfiles/link.php' ?>
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
</div>
</div>
<!-- preloader end -->
<!-- back to top start -->
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<!-- back to top end -->
<!-- header area start here -->
<?php include 'commonfiles/header.php' ?>
<!-- header area end here -->
<main>
<!-- hero area start here -->
<section class="slider-area fix">
<div class="slider-active swiper-container">
<div class="swiper-wrapper">
<div class="single-slider slider-height d-flex align-items-center swiper-slide" data-swiper-autoplay="5000">
<div class="slide-bg" data-background="assets/img/hero/hero-img-1.jpg"></div>
<div class="custom-container">
<div class="row">
<div class="col-lg-12">
<div class="aslider z-index">
<h2 class="aslider--title mb-30" data-animation="fadeInUp" data-delay=".5s">Provide Quality <br> Repair Service</h2>
<h3 class="aslider--subtitle mb-50" data-animation="fadeInUp" data-delay=".7s">On your fingertips you have been cooling switch </h3>
<div class="aslider--btn" data-animation="fadeInUp" data-delay=".9s">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="single-slider slider-height d-flex align-items-center swiper-slide" data-swiper-autoplay="5000">
<div class="slide-bg" data-background="assets/img/hero/hero-img-2.jpg"></div>
<div class="custom-container">
<div class="row">
<div class="col-lg-12">
<div class="aslider z-index">
<h2 class="aslider--title mb-30" data-animation="fadeInUp" data-delay=".5s">Provide Quality <br> Repair Service</h2>
<h3 class="aslider--subtitle mb-50" data-animation="fadeInUp" data-delay=".7s">On your fingertips you have been cooling switch </h3>
<div class="aslider--btn" data-animation="fadeInUp" data-delay=".9s">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev slide-prev"><i class="far fa-long-arrow-left"></i></div>
<div class="swiper-button-next slide-next"><i class="far fa-long-arrow-right"></i></div>
</div>
</section>
<!-- hero area end here -->
<!-- cta area start here -->
<section class="cta-area wow fadeInUp" data-wow-delay=".3s">
<div class="custom-container">
<div class="cta--wrapper">
<div class="cta--single theme-bg">
<i class="flaticon-snowfall cta--icon"></i>
<h3 class="cta--title">Residential Repair Service</h3>
<div class="cta--link">
<a href="service-details.html" class="cta--link__icon"><i><img src="assets/img/icon/cta-icon-1.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
<div class="cta--single black-soft-bg">
<i class="flaticon-business-and-trade cta--icon"></i>
<h3 class="cta--title">Commercial Repair Service</h3>
<div class="cta--link">
<a href="service-details.html" class="cta--link__icon"><i><img src="assets/img/icon/cta-icon-1.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- cta area end here -->
<!-- about area start here -->
<section class="about-area pt-120">
<div class="custom-container">
<div class="row">
<div class="col-lg-6">
<div class="aabout-img-space">
<div class="row">
<div class="col-md-6">
<div class="aabout-img img-lg mb-30 wow fadeInUp" data-wow-delay=".3s">
<img src="assets/img/about/about-img-1.jpg" class="img-fluid" alt="img">
</div>
</div>
<div class="col-md-6">
<div class="aabout-img mb-30 wow fadeInUp" data-wow-delay=".5s">
<img src="assets/img/about/about-img-2.jpg" class="img-fluid" alt="img">
</div>
<div class="aabout-img_text mb-30 black-soft-bg wow fadeInUp" data-wow-delay=".7s">
<h2 class="aabout-img_text-title">200+ <span>Project Done</span></h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-10">
<div class="aabout-text mr-150 mb-30">
<div class="section-title-wrapper mb-30 wow fadeInUp" data-wow-delay=".3s">
<h6 class="subtitle mb-20"><img src="assets/img/icon/subtitle-icon.png" class="img-fluid" alt="img"> About company</h6>
<h2 class="section-title">We are most popular<br> repair company</h2>
</div>
<p class="mb-40 wow fadeInUp" data-wow-delay="0.6s">Duis nunc sodales conubia ad laoreet aliquet nostra. Eleifend lacinia prasent hendrerit quisque penatibus erat. At pulvinar integer semper ridiculus lectus condimentum obor tise verodar capmtaso morin proin nibh posuere. </p>
<div class="aabout-qoute mb-50 wow fadeInUp" data-wow-delay="0.9s">
<i class="fas fa-quote-right float-bob-x"></i>
<h4 class="z-index">Dont feel heat when there is best air <br>conditioning seat </h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- about area end here -->
<!-- choose us area start here -->
<section class="service-area-2 white-bg pt-120 z-index">
<div class="container">
<div class="row">
<div class="col-xl-6">
<div class="aservice--2 mb-30">
<h6 class="subtitle mb-20"><img src="assets/img/icon/subtitle-icon.png" class="img-fluid" alt="img"> Why Choose Us</h6>
<div class="section-title-wrapper mb-50 wow fadeInUp" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
<h2 class="section-title">Empower lifes forever better living</h2>
</div>
<div class="achoose mb-40 wow fadeInUp" data-wow-delay=".9s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<div class="achoose__icon theme-bg">
<i class="flaticon-technician"></i>
</div>
<div class="achoose__text">
<h4 class="achoose__text--title">Expert Repairman</h4>
<p>Pede nullam nullas it ultricies corne mone molestie erate montes adipiscing leo est magnis imperdiet fermentum auctor hymenae laoreet tempor vestibulum dictumst</p>
</div>
</div>
<div class="achoose mb-40 wow fadeInUp" data-wow-delay="1.2s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
<div class="achoose__icon theme-bg-blue">
<i class="flaticon-satisfaction"></i>
</div>
<div class="achoose__text">
<h4 class="achoose__text--title">Satisfied Services</h4>
<p>Pede nullam nullas it ultricies corne mone molestie erate montes adipiscing leo est magnis imperdiet fermentum auctor hymenae laoreet tempor vestibulum dictumst</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="aservice--img__2 mb-30 wow fadeInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: fadeInUp;">
<img src="assets/img/service/service-img-4.jpg" alt="img">
</div>
</div>
</div>
</div>
</section>
<!-- choose us area end here -->
<!-- fact area start here -->
<section class="fact-area pt-80 pb-70">
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="afact mb-30 wow fadeInUp" data-wow-delay=".3s">
<div class="afact--img mb-20">
<img src="assets/img/icon/fact-icon-1.png" class="img-fluid z-index" alt="img">
</div>
<div class="afact--text">
<div class="afact--text__title">
<h2>80</h2>
</div>
<div class="afact--text__content">
<h4>Member</h4>
<h3>Professional</h3>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="afact mb-30 wow fadeInUp" data-wow-delay=".6s">
<div class="afact--img mb-20">
<img src="assets/img/icon/fact-icon-2.png" class="img-fluid z-index" alt="img">
</div>
<div class="afact--text">
<div class="afact--text__title">
<h2>70</h2>
</div>
<div class="afact--text__content">
<h4>Project</h4>
<h3>Completed</h3>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="afact mb-30 wow fadeInUp" data-wow-delay=".9s">
<div class="afact--img mb-20">
<img src="assets/img/icon/fact-icon-3.png" class="img-fluid z-index" alt="img">
</div>
<div class="afact--text">
<div class="afact--text__title">
<h2>60</h2>
</div>
<div class="afact--text__content">
<h4>Total</h4>
<h3>Branches</h3>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-sm-6">
<div class="afact mb-30 wow fadeInUp" data-wow-delay="1.2s">
<div class="afact--img mb-20">
<img src="assets/img/icon/fact-icon-4.png" class="img-fluid z-index" alt="img">
</div>
<div class="afact--text">
<div class="afact--text__title">
<h2>50</h2>
</div>
<div class="afact--text__content">
<h4>Client</h4>
<h3>Satisfaction</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- fact area end here -->
<!-- service area start here -->
<section class="service-area pt-120 pb-90" data-background="assets/img/service/service-bg.jpg">
<div class="container">
<div class="row align-items-end mb-70">
<div class="col-md-8">
<div class="section-title-wrapper wow fadeInUp" data-wow-delay=".2s">
<h6 class="subtitle mb-20"><img src="assets/img/icon/subtitle-icon.png" class="img-fluid" alt="img"> Featured Services</h6>
<h2 class="section-title">Popular repair service</h2>
</div>
</div>
<div class="col-md-4 text-end">
<div class="service__header__btn wow fadeInUp" data-wow-delay=".2s">
<a href="service.html" class="theme-btn">More Service</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<ul class="nav custom-service-tab" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<div class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">
<div class="aservice-box wow fadeInUp" data-wow-delay=".3s">
<div class="aservice mb-30 ">
<div class="aservice__icon z-index">
<i class="flaticon-technical-support"></i>
</div>
<div class="aservice__text z-index">
<span>Commercial</span>
<h6 class="aservice__text--title"><a href="service-details.html">Quality Testing</a></h6>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" role="presentation">
<div class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">
<div class="aservice-box wow fadeInUp" data-wow-delay=".6s">
<div class="aservice mb-30">
<div class="aservice__icon z-index">
<i class="flaticon-air-conditioner"></i>
</div>
<div class="aservice__text z-index">
<span>Commercial</span>
<h6 class="aservice__text--title"><a href="service-details.html">AC Installation</a></h6>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" role="presentation">
<div class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">
<div class="aservice-box wow fadeInUp" data-wow-delay=".9s">
<div class="aservice mb-30">
<div class="aservice__icon z-index">
<i class="flaticon-vacuum-cleaner"></i>
</div>
<div class="aservice__text z-index">
<span>Commercial</span>
<h6 class="aservice__text--title"><a href="service-details.html">Dust Cleaning</a></h6>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" role="presentation">
<div class="nav-link" id="contact-tab2" data-bs-toggle="tab" data-bs-target="#contact2" role="tab" aria-controls="contact2" aria-selected="false">
<div class="aservice-box wow fadeInUp" data-wow-delay="1.2s">
<div class="aservice mb-30">
<div class="aservice__icon z-index">
<i class="flaticon-heating"></i>
</div>
<div class="aservice__text z-index">
<span>Commercial</span>
<h6 class="aservice__text--title"><a href="service-details.html">HV AC designing</a></h6>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="aservice__img mb-30">
<img src="assets/img/service/service-tab1.jpg" class="img-fluid" alt="img">
<div class="aservice__img--text">
<p>Suscipit Duis arcu iaculis class nullam sociis nibh rutrum aliquam vulputa hendrerit quam pretium and quisque</p>
<a href="service-details.html" class="aservice__img--text__link">Service Details <i><img src="assets/img/icon/contact-arrow.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="aservice__img mb-30">
<img src="assets/img/service/service-img.jpg" class="img-fluid" alt="img">
<div class="aservice__img--text">
<p>Suscipit Duis arcu iaculis class nullam sociis nibh rutrum aliquam vulputa hendrerit quam pretium and quisque</p>
<a href="service-details.html" class="aservice__img--text__link">Service Details <i><img src="assets/img/icon/contact-arrow.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="aservice__img mb-30">
<img src="assets/img/service/service-tab3.jpg" class="img-fluid" alt="img">
<div class="aservice__img--text">
<p>Suscipit Duis arcu iaculis class nullam sociis nibh rutrum aliquam vulputa hendrerit quam pretium and quisque</p>
<a href="service-details.html" class="aservice__img--text__link">Service Details <i><img src="assets/img/icon/contact-arrow.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab2">
<div class="aservice__img mb-30">
<img src="assets/img/service/service-tab4.jpg" class="img-fluid" alt="img">
<div class="aservice__img--text">
<p>Suscipit Duis arcu iaculis class nullam sociis nibh rutrum aliquam vulputa hendrerit quam pretium and quisque</p>
<a href="service-details.html" class="aservice__img--text__link">Service Details <i><img src="assets/img/icon/contact-arrow.png" class="img-fluid" alt="img"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- service area end here -->
<!-- testimonial area start here -->
<section class="testimonial-area" data-background="assets/img/testimonial/testimonial-bg.jpg">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="atestimonial__img wow fadeInUp" data-wow-delay=".5s">
<img src="assets/img/testimonial/testimonial-img-1.png" alt="img">
</div>
</div>
<div class="col-lg-6">
<div class="atestimonial__text wow fadeInUp" data-wow-delay="1s">
<div class="section-title-wrapper mb-20">
<h6 class="subtitle mb-20"><img src="assets/img/icon/subtitle-icon.png" class="img-fluid" alt="img"> Testimonials</h6>
<h2 class="section-title text-white">Happy customer says <br> about airvice</h2>
</div>
<div class="atestimonial-active swiper-container">
<div class="swiper-wrapper">
<div class="atestimonial swiper-slide">
<p class="text-white mb-40">Gravida augue erat nullam id tellus mattis vehicula facilisi aliquet
euismod litora ullamcorper morbi suspendisse vitae vestibulum eros vitae.
pede nullam nullas ultricies corne mone molestie erate montes adipiscing leo
est magnis imperdiet fermentum auctor hymenae laoreet tempo</p>
<div class="atestimonial__client d-flex align-items-center">
<div class="atestimonial__client--img">
<img src="assets/img/testimonial/testimonial-img-2.png" class="img-fluid" alt="img">
</div>
<div class="atestimonial__client--text">
<h4 class="atestimonial__client--text__title">Marben Gillispe</h4>
<span class="text-white">House Holder</span>
</div>
</div>
</div>
<div class="atestimonial swiper-slide">
<p class="text-white mb-40">Gravida augue erat nullam id tellus mattis vehicula facilisi aliquet
euismod litora ullamcorper morbi suspendisse vitae vestibulum eros vitae.
pede nullam nullas ultricies corne mone molestie erate montes adipiscing leo
est magnis imperdiet fermentum auctor hymenae laoreet tempo</p>
<div class="atestimonial__client d-flex align-items-center">
<div class="atestimonial__client--img">
<img src="assets/img/testimonial/testimonial-img-3.png" class="img-fluid" alt="img">
</div>
<div class="atestimonial__client--text">
<h4 class="atestimonial__client--text__title">Glean Maxwell</h4>
<span class="text-white">House Holder</span>
</div>
</div>
</div>
<div class="atestimonial swiper-slide">
<p class="text-white mb-40">Gravida augue erat nullam id tellus mattis vehicula facilisi aliquet
euismod litora ullamcorper morbi suspendisse vitae vestibulum eros vitae.
pede nullam nullas ultricies corne mone molestie erate montes adipiscing leo
est magnis imperdiet fermentum auctor hymenae laoreet tempo</p>
<div class="atestimonial__client d-flex align-items-center">
<div class="atestimonial__client--img">
<img src="assets/img/testimonial/testimonial-img-4.png" class="img-fluid" alt="img">
</div>
<div class="atestimonial__client--text">
<h4 class="atestimonial__client--text__title">Steve Smith</h4>
<span class="text-white">House Holder</span>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<!-- <div class="swiper-pagination"></div> -->
<!-- If we need navigation buttons -->
<div class="swiper-button-prev slide-prev"><i class="far fa-long-arrow-alt-left"></i></div>
<div class="swiper-button-next slide-next"><i class="far fa-long-arrow-alt-right"></i></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial area end here -->
<!-- brand area end here -->
<div class="brand-area grey-bg pt-100 pb-100">
<div class="container">
<div class="brand-active swiper-container">
<div class="swiper-wrapper">
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay=".3s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-1.png" class="img-fluid" alt="img"></a>
</div>
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay=".6s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-2.png" class="img-fluid" alt="img"></a>
</div>
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay=".9s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-3.png" class="img-fluid" alt="img"></a>
</div>
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay="1.2s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-4.png" class="img-fluid" alt="img"></a>
</div>
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay="1.5s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-5.png" class="img-fluid" alt="img"></a>
</div>
<div class="brand-wrapper swiper-slide wow fadeInUp" data-wow-delay="1.8s" data-swiper-autoplay="5000">
<a href="#"><img src="assets/img/brand/brand-1.png" class="img-fluid" alt="img"></a>
</div>
</div>
</div>
</div>
</div>
<!-- brand area start here -->
<!-- contact area start here -->
<section class="contact-area">
<div class="container">
<div class="row">
<div class="col-lg-7">
<div class="acontact__img wow fadeInUp" data-wow-delay=".3s">
<img src="assets/img/contact/contact-img-1.png" class="img-fluid" alt="img">
<div class="acontact__img--text wow fadeInUp" data-wow-delay=".5s">
<h1 class="acontact__img--text__backtitle">25</h1>
<h2 class="z-index"><span>25+Year</span> Working Experience</h2>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="acontact__form wow fadeInUp" data-wow-delay=".8s">
<h3 class="acontact__form--title">Enquiry Form </h3>
<form action="#">
<input type="text" placeholder="Your Name">
<input type="text" placeholder="Phone Number">
<div class="select__field--arrow">
<select>
<option value="">Choose Service</option>
<option value="">Choose Service</option>
<option value="">Choose Service</option>
<option value="">Choose Service</option>
<option value="">Choose Service</option>
<option value="">Choose Service</option>
</select>
</div>
<textarea placeholder="Write Message"></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- contact area end here -->
</main>
<!-- footer area start here -->
<?php include 'commonfiles/footer.php' ?>
<!-- footer area end here -->
<!-- JS here -->
<?php include 'commonfiles/script.php' ?>
</body>
</html>