黄色简洁形式pc+wap手机电脑修理企业网站模板代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

12 47 16



模板描述:黄色 简洁形式 pc+wap 手机电脑修理。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用手机电脑修理等行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/plugins/OwlCarousel2-develop/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="stylesheet" href="assets/css/specing.min.css">
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/plugins/OwlCarousel2-develop/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="stylesheet" href="assets/css/specing.min.css">

2. 引入JS

<script src="assets/js/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/OwlCarousel2-develop/dist/owl.carousel.min.js"></script>
<script src="assets/plugins/OwlCarousel2-develop/owlcarousel2-filter.min.js"></script>
<script src="assets/plugins/isotope/isotope.min.js"></script>
<script src="assets/plugins/waypoints-master/lib/jquery.waypoints.min.js"></script>
<script src="assets/js/all.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/OwlCarousel2-develop/dist/owl.carousel.min.js"></script>
<script src="assets/plugins/OwlCarousel2-develop/owlcarousel2-filter.min.js"></script>
<script src="assets/plugins/isotope/isotope.min.js"></script>
<script src="assets/plugins/waypoints-master/lib/jquery.waypoints.min.js"></script>
<script src="assets/js/all.min.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title></title>
    <!-- Favicon -->
    <link href="assets/images/favicon.png" type="image/png" rel="icon">
    <!-- all css files -->
</head>
<body id="top">
    <!-- start preloader -->
    <div class="preloader-wrapper">
        <div class="preloader-inner">
            <div class="sk-chase">
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
                <div class="sk-chase-dot"></div>
            </div>
        </div>
    </div>
    <!-- end preloader -->
    <!-- START search-wrapper -->
    <div class="search-wrapper position-fixed d-flex align-items-center justify-content-center z-index-1">
        <div class="search-close-wrap">
            <p class="search-close-btn text-center rounded-circle" role="button"><span class="fas fa-times"></span></p>
        </div>
        <form action="#">
            <div class="form-group d-flex m-0">
                <input class="form-control shadow-none border-0 bg-transparent" type="search" placeholder="Type here">
                <button type="submit" class="btn btn-primary p-0 border-0 text-white"><span class="fas fa-search"></span></button>
            </div>
        </form>
    </div>
    <!-- END search-wrapper -->
    <!-- start header -->
    <header class="cm-header">
        <div class="header-top bg-blue">
            <div class="container">
                <div class="row">
                    <div class="col-xl-10">
                        <div class="d-block d-md-flex justify-content-center justify-content-xl-start">
                            <div class="block text-gray mr-35">
                                <span class="icon text-primary fas fa-phone-alt mr-15"></span>
                                0 (143) 456 7897
                            </div>
                            <div class="block text-gray mr-35">
                                <span class="icon text-primary fas fa-envelope mr-15"></span>
                                [email protected]
                            </div>
                            <div class="block text-gray">
                                <span class="icon text-primary fas fa-home mr-15"></span>
                                11 Deneside, Seghill",NE23 7ER
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 d-none d-xl-block">
                        <div class="block d-flex justify-content-end">
                            <a href="#!" class="text-primary"><span class="icon fab fa-facebook-f border-right-0"></span></a>
                            <a href="#!" class="text-primary"><span class="icon fab fa-twitter border-right-0"></span></a>
                            <a href="#!" class="text-primary"><span class="icon fab fa-linkedin-in"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="container h-100">
                <div class="row h-100 align-content-center">
                    <div class="col-md-12">
                        <nav class="navbar navbar-expand-lg navbar-light px-0">
                            <a class="navbar-brand" href="index-2.html">
                                <img src="assets/images/logo.png" alt="logo">
                                <!-- logo -->
                            </a>
                            <button class="navbar-toggler border-0 p-0" type="button" data-toggle="collapse" data-target="#navLinks" aria-controls="navLinks" aria-expanded="false">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navLinks">
                                <ul class="navbar-nav ml-auto align-items-center">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="index-2.html">Home</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services <span class="text-primary">+</span></a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a class="dropdown-item" href="service-details.html">Service Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog <span class="text-primary">+</span></a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a class="dropdown-item" href="blog-details.html">Blog Details</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages <span class="text-primary">+</span></a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                            <li><a class="dropdown-item" href="index-2.html">Home 02</a></li>
                                            <li><a class="dropdown-item" href="shop.html">Shop</a></li>
                                            <li><a class="dropdown-item" href="shop-single.html">Shop Single</a></li>
                                            <li><a class="dropdown-item" href="cart.html">Cart</a></li>
                                        </ul>
                                    </li>
                                    <div class="block d-flex mt-3 mt-lg-0">
                                        <span class="icon fas fa-share-alt text-dark" role="button"></span>
                                        <span class="icon fas fa-search text-dark search-toggle" role="button"></span>
                                        <a class="icon pr-0 pt-0 pb-0 text-dark" href="cart.html">
                                            <span class="fas fa-shopping-bag"></span>
                                        </a>
                                    </div>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- end header -->
    <!-- start of banner -->
    <div class="cm-banner overlay bg-cover" style="background-image: url(assets/images/bg-banner.jpg);">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-xl-6 col-lg-7">
                    <div class="block text-white">
                        <h3 class="mb-15">Mobile & Computer</h3>
                        <h2 class="display-3">Repair Service</h2>
                        <p class="lead mt-25 mb-35">Instrument cultivated alteration any favourable expression law far nor. Both new like tore but yaer. </p>
                        <a class="btn btn-primary mt-10 mr-3 mr-md-4" href="#!">Appointment</a>
                        <a class="btn btn-light mt-10" href="#!">get a quote</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end of banner -->
    <!-- start of features -->
    <div class="cm-features">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-4 col-md-6">
                    <div class="block d-flex align-items-center">
                        <span class="icon bg-primary">
                            <img src="assets/images/features/01.png" alt="">
                        </span>
                        <div>
                            <h4 class="text-dark mb-10">Low Price Guarantee</h4>
                            <p>John draw real poor</p>
                        </div>
                    </div>
                    <!-- features item -->
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="block d-flex align-items-center">
                        <span class="icon bg-primary">
                            <img src="assets/images/features/02.png" alt="">
                        </span>
                        <div>
                            <h4 class="text-dark mb-10">Trust Our Experience</h4>
                            <p>John draw real poor</p>
                        </div>
                    </div>
                    <!-- features item -->
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="block d-flex align-items-center">
                        <span class="icon bg-primary">
                            <img src="assets/images/features/03.png" alt="">
                        </span>
                        <div>
                            <h4 class="text-dark mb-10">1 Year Warranty</h4>
                            <p>John draw real poor</p>
                        </div>
                    </div>
                    <!-- features item -->
                </div>
            </div>
        </div>
    </div>
    <!-- end of features -->
    <!-- start of about-us -->
    <section class="section cm-about-us pt-80">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-lg-6 col-md-8">
                    <div class="pr-0 pr-lg-5">
                        <img class="img-fluid" src="assets/images/about-image.jpg" alt="about-image">
                    </div>
                </div>
                <div class="col-lg-6 col-md-10">
                    <div class="block text-center mt-5 mt-lg-0">
                        <h2 class="h1 text-dark">Successfully Providing the Best Computer and Mobile Services from 20 years</h2>
                        <p class="mt-25">Do commanded an shameless we disposing do. Indulgence ten remarkably nor are impression out.</p>
                        <p class="mt-25">Power is lived means oh every in we quiet. Remainder provision an in intention. Saw supported too joy promotion engrosse. Want eyes by neat so just must. Past draw tall up face show rent oh mr.</p>
                        <a href="#!" class="btn btn-primary mt-30">learn more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of about-us -->
    <!-- start of how-can-help -->
    <section class="section cm-how-can-help bg-light-gray bg-cover" style="background-image: url(assets/images/bg-help.png);">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-30 text-center">
                        <h2 class="section-heading h1 text-dark">Here's How We Can Help You</h2>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/01.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">On-Site Support</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block active bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/02.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">Remote Support</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/03.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">Fast Service</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/04.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">Cut Costs</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/05.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">Have a Backup Plan</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="block bg-cover mt-30" style="background-image: url(assets/images/bg-help-item.jpg);">
                        <div class="context">
                            <div class="icon">
                                <img src="assets/images/help/06.png" alt="">
                            </div>
                            <h4 class="text-dark font-w-700">Remote Workforce</h4>
                            <p class="mt-15">Continual delighted as elsewhere am convinced unfeeling. Introduced stimulated attachment.</p>
                        </div>
                    </div>
                    <!-- how-can-help item -->
                </div>
            </div>
        </div>
    </section>
    <!-- end of how-can-help -->
    <!-- start of services -->
    <section class="section cm-services bg-cover overlay-dark" style="background-image: url(assets/images/bg-services.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 mb-5 mb-lg-0">
                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <a class="nav-link rounded-0 text-white text-left active" data-toggle="pill" href="#one" role="tab" aria-selected="true">PC Laptop Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#two" role="tab" aria-selected="false">Mac Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#three" role="tab" aria-selected="false">PC Desktop Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#four" role="tab" aria-selected="false">iPhone Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#five" role="tab" aria-selected="false">iPad Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#six" role="tab" aria-selected="false">Smartphone Repair</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#seven" role="tab" aria-selected="false">Data Recovery</a>
                        <a class="nav-link rounded-0 text-white text-left" data-toggle="pill" href="#eight" role="tab" aria-selected="false">Software Update</a>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="one" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">PC Laptop Repair</h2>
                                    </div>
                                    <div class="col-md-7 order-1 order-md-0">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5 col-sm-8 order-0 order-md-1 my-1 mb-4 my-md-0">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="two" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">Mac Repair</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="three" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">PC Desktop Repair</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="four" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">iPhone Repair</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="five" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">iPad Repair</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="six" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">Smartphone Repair</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="seven" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">Data Recovery</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                        <div class="tab-pane fade" id="eight" role="tabpanel">
                            <div class="service-item">
                                <div class="row">
                                    <div class="col-md-12">
                                        <h2 class="h1 text-white mb-25">Software Update</h2>
                                    </div>
                                    <div class="col-md-7">
                                        <p class="text-gray">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken.</p>
                                        <ul class="check-list mt-30 text-gray">
                                            <li>On-site computer repair and upgrades.</li>
                                            <li>Virus and firewall protection.</li>
                                            <li>Home and office network installation.</li>
                                            <li>Wireless network installation and troubleshooting.</li>
                                            <li>Spyware/adware removal.</li>
                                            <li>Data transfer and data backup.</li>
                                        </ul>
                                        <a href="#!" class="btn btn-primary mt-35">Reed More</a>
                                    </div>
                                    <div class="col-md-5">
                                        <img class="img-fluid" src="assets/images/service-tab-img.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- service-item -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of services -->
    <!-- start why-choose-us -->
    <section class="section why-choose-us">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="pr-0 pr-lg-2">
                        <h2 class="section-heading h1 text-dark">Why Choose Us</h2>
                        <p class="mt-30">Do commanded an shameless we disposing do. Indulgence ten remarkably nor are impression out.</p>
                        <p class="mt-20">His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural.Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss.</p>
                        <div class="row text-center">
                            <div class="col-md-5 col-sm-6 mt-30">
                                <img src="assets/images/why-choose-us/01.png" alt="">
                                <h4 class="text-dark mt-15">After Sales Support</h4>
                            </div>
                            <div class="col-md-5 col-sm-6 mt-30">
                                <img src="assets/images/why-choose-us/02.png" alt="">
                                <h4 class="text-dark mt-15">Client Satisfaction</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mt-4 mt-lg-0">
                    <div class="row masonry">
                        <div class="col-sm-6">
                            <div class="block text-center">
                                <div class="icon">
                                    <img src="assets/images/why-choose-us/03.png" alt="">
                                </div>
                                <h4 class="mt-25 text-dark">Skill</h4>
                                <p class="mt-20">Ever man are put down his very. And marry may table him avoid.</p>
                            </div>
                            <!-- why choose us item -->
                        </div>
                        <div class="col-sm-6">
                            <div class="block text-center mt-30">
                                <div class="icon">
                                    <img src="assets/images/why-choose-us/04.png" alt="">
                                </div>
                                <h4 class="mt-25 text-dark">Experience</h4>
                                <p class="mt-20">Ever man are put down his very. And marry may table him avoid.</p>
                            </div>
                            <!-- why choose us item -->
                        </div>
                        <div class="col-sm-6">
                            <div class="block text-center mt-30">
                                <div class="icon">
                                    <img src="assets/images/why-choose-us/05.png" alt="">
                                </div>
                                <h4 class="mt-25 text-dark">Quality</h4>
                                <p class="mt-20">Ever man are put down his very. And marry may table him avoid.</p>
                            </div>
                            <!-- why choose us item -->
                        </div>
                        <div class="col-sm-6">
                            <div class="block text-center mt-30">
                                <div class="icon">
                                    <img src="assets/images/why-choose-us/06.png" alt="">
                                </div>
                                <h4 class="mt-25 text-dark">Guarantees</h4>
                                <p class="mt-20">Ever man are put down his very. And marry may table him avoid.</p>
                            </div>
                            <!-- why choose us item -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end why-choose-us -->
    <!-- start of products -->
    <section class="section bg-light-gray">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 text-center">
                    <h2 class="section-heading h1 text-dark mb-30">Our Recent Products</h2>
                    <p class="mb-40">Do commanded an shameless we disposing do. Indulgence ten remarkably nor are impression out.</p>
                </div>
            </div>
        </div>
        <div class="carousel-fluid">
            <div class="row no-gutters justify-content-center">
                <div class="col-xl-9 text-center mb-40">
                    <div class="btn-group product-filter-buttons">
                        <button type="button" class="btn active" data-owl-filter="*">All items</button>
                        <button type="button" class="btn" data-owl-filter=".computer">Computer</button>
                        <button type="button" class="btn" data-owl-filter=".laptop">Laptop</button>
                        <button type="button" class="btn" data-owl-filter=".mobile">Mobile</button>
                        <button type="button" class="btn" data-owl-filter=".screen-pro">Screen protector</button>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="owl-carousel fluid-carousel">
                        <div class="card computer border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/01.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card laptop border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/02.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card mobile border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/03.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card screen-pro border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/04.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card computer border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/05.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card mobile border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/06.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card mobile border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/03.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                        <div class="card screen-pro border-0 product-item">
                            <img class="card-img-top border-bottom" src="assets/images/products/04.jpg" alt="">
                            <div class="card-body">
                                <div class="show-on-hover">
                                    <a href="#!" class="btn btn-primary rounded-pill">Add to Cart <span class="fas fa-cart-plus"></span></a>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <small class="text-uppercase font-w-600">computer products</small>
                                    <div class="rating small text-primary d-flex">
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                        <span class="fas fa-star"></span>
                                    </div>
                                </div>
                                <h5 class="text-dark font-w-600 mt-10 mb-10">Our Recent Products</h5>
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="font-w-700 text-dark font-secondery">$245.00</h5>
                                    <a href="#!" class="text-primary font-w-600 text-uppercase">Add to cart +</a>
                                </div>
                            </div>
                        </div>
                        <!-- product-item -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of products -->
    <!-- start of team -->
    <section class="section cm-team">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="section-heading h1 text-dark mb-50">Our Team Member</h2>
                </div>
                <div class="col-md-12">
                    <div class="owl-carousel team-carousel">
                        <div class="team-item">
                            <div class="row align-items-center">
                                <div class="col-sm-6">
                                    <img class="team-img img-fluid" src="assets/images/team/01.jpg" alt="">
                                </div>
                                <div class="col-sm-6 mt-4 mt-md-0">
                                    <h5 class="text-dark font-w-600">Lucinda Banfield</h5>
                                    <p class="small text-primary text-uppercase font-w-600 mt-1">Repair Technician</p>
                                    <p class="mt-15">PC Repair Technician, installs, evaluates, & troubleshoots.</p>
                                    <div class="barWrapper">
                                        <span class="progress-text">Softer Bag Fix</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="95">
                                                <span class="skill-percent">95</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Computer Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="85">
                                                <span class="skill-percent">85</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Smartphone Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="92">
                                                <span class="skill-percent">92</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                </div>
                            </div>
                        </div>
                        <!-- team item -->
                        <div class="team-item">
                            <div class="row align-items-center">
                                <div class="col-sm-6">
                                    <img class="team-img img-fluid" src="assets/images/team/02.jpg" alt="">
                                </div>
                                <div class="col-sm-6 mt-4 mt-md-0">
                                    <h5 class="text-dark font-w-600">Lucinda Banfield</h5>
                                    <p class="small text-primary text-uppercase font-w-600 mt-1">Repair Technician</p>
                                    <p class="mt-15">PC Repair Technician, installs, evaluates, & troubleshoots.</p>
                                    <div class="barWrapper">
                                        <span class="progress-text">Softer Bag Fix</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="90">
                                                <span class="skill-percent">90</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Computer Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="97">
                                                <span class="skill-percent">97</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Smartphone Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="81">
                                                <span class="skill-percent">81</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                </div>
                            </div>
                        </div>
                        <!-- team item -->
                        <div class="team-item">
                            <div class="row align-items-center">
                                <div class="col-sm-6">
                                    <img class="team-img img-fluid" src="assets/images/team/01.jpg" alt="">
                                </div>
                                <div class="col-sm-6 mt-4 mt-md-0">
                                    <h5 class="text-dark font-w-600">Lucinda Banfield</h5>
                                    <p class="small text-primary text-uppercase font-w-600 mt-1">Repair Technician</p>
                                    <p class="mt-15">PC Repair Technician, installs, evaluates, & troubleshoots.</p>
                                    <div class="barWrapper">
                                        <span class="progress-text">Softer Bag Fix</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="95">
                                                <span class="skill-percent">95</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Computer Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="85">
                                                <span class="skill-percent">85</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                    <div class="barWrapper">
                                        <span class="progress-text">Smartphone Repair</span>
                                        <div class="progress">
                                            <div class="progress-bar" data-value="92">
                                                <span class="skill-percent">92</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- skill bar -->
                                </div>
                            </div>
                        </div>
                        <!-- team item -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of team -->
    <!-- start of products -->
    <section class="section cm-cta bg-cover overlay-light" style="background-image: url(assets/images/bg-cta.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-xl-5 col-lg-6 col-md-8">
                    <div class="text-dark">
                        <h3 class="mb-30">Just Give Us a Call at</h3>
                        <h2 class="h1 mb-20">Express Repair and Services Every Time!</h2>
                        <h4 class="mb-30">0123-456-789 for Immediate Tech Support</h4>
                    </div>
                    <a href="#!" class="btn btn-primary">Appointment</a>
                </div>
            </div>
        </div>
    </section>
    <!-- end of products -->
    <!-- start of testimonials -->
    <section class="section cm-testimonials">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-8">
                    <div class="pr-0 pr-lg-5">
                        <h2 class="section-heading h1 text-dark">Happy Client Quote After Servicing</h2>
                        <p class="mt-25">Do commanded an shameless we disposing do. Indulgence ten remarkably nor are impression out.</p>
                        <img class="img-fluid mt-40" src="assets/images/clients/01.jpg" alt="client-image">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="block mt-5 mt-lg-0">
                        <div class="testimonial-item">
                            <p class="mb-15">Article evident arrived express highest men did boy. Mistres sensible entirely am so. Quick can manor smart money hopes worth produce husband boy her had hearing.</p>
                            <div class="d-block d-md-flex justify-content-between">
                                <div class="d-flex align-items-center">
                                    <img class="img-fluid mr-3" src="assets/images/clients/02.jpg" alt="">
                                    <div>
                                        <h5 class="text-dark font-w-600 mb-1">Miranda Austin</h5>
                                        <p class="small text-primary text-uppercase font-w-600">Miranda Austin</p>
                                    </div>
                                </div>
                                <div class="font-w-600 mt-3 mt-md-0">
                                    <span class="fas fa-calendar-alt text-primary mr-1"></span>
                                    21-May-2020
                                </div>
                            </div>
                        </div>
                        <!-- testimonial-item -->
                        <div class="testimonial-item mt-30">
                            <p class="mb-15">Article evident arrived express highest men did boy. Mistres sensible entirely am so. Quick can manor smart money hopes worth produce husband boy her had hearing.</p>
                            <div class="d-block d-md-flex justify-content-between">
                                <div class="d-flex align-items-center">
                                    <img class="img-fluid mr-3" src="assets/images/clients/03.jpg" alt="">
                                    <div>
                                        <h5 class="text-dark font-w-600 mb-1">Miranda Austin</h5>
                                        <p class="small text-primary text-uppercase font-w-600">Miranda Austin</p>
                                    </div>
                                </div>
                                <div class="font-w-600 mt-3 mt-md-0">
                                    <span class="fas fa-calendar-alt text-primary mr-1"></span>
                                    21-May-2020
                                </div>
                            </div>
                        </div>
                        <!-- testimonial-item -->
                        <div class="testimonial-item mt-30">
                            <p class="mb-15">Article evident arrived express highest men did boy. Mistres sensible entirely am so. Quick can manor smart money hopes worth produce husband boy her had hearing.</p>
                            <div class="d-block d-md-flex justify-content-between">
                                <div class="d-flex align-items-center">
                                    <img class="img-fluid mr-3" src="assets/images/clients/04.jpg" alt="">
                                    <div>
                                        <h5 class="text-dark font-w-600 mb-1">Miranda Austin</h5>
                                        <p class="small text-primary text-uppercase font-w-600">Miranda Austin</p>
                                    </div>
                                </div>
                                <div class="font-w-600 mt-3 mt-md-0">
                                    <span class="fas fa-calendar-alt text-primary mr-1"></span>
                                    21-May-2020
                                </div>
                            </div>
                        </div>
                        <!-- testimonial-item -->
                        <a href="#!" class="text-dark font-w-600 float-right text-uppercase mt-30">View All <span class="fas fa-long-arrow-alt-right text-primary"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of testimonials -->
    <!-- start of blogs -->
    <section class="section cm-blogs bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="section-heading h1 text-dark mb-15">From Our Blog</h2>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="blog-item card border-0 mt-30">
                        <a href="blog-details.html"><img class="card-img-top" src="assets/images/blogs/01.jpg" alt=""></a>
                        <div class="card-body">
                            <div class="blog-meta small">
                                <span class="font-w-600 mr-3"><span class="fas fa-calendar-alt text-primary mr-2"></span>21-May-2020</span>
                                <span class="font-w-600"><span class="fas fa-comment-dots text-primary mr-2"></span>Comment</span>
                            </div>
                            <a href="blog-details.html" class="h4 mt-10 font-w-400 text-dark line-h-1-5">Resources Exquisite Set Arranging Moonlight Him</a>
                            <a href="blog-details.html" class="text-dark font-w-600 text-uppercase mt-15">Read More <span class="fas fa-long-arrow-alt-right text-primary"></span></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="blog-item card border-0 mt-30">
                        <a href="blog-details.html"><img class="card-img-top" src="assets/images/blogs/02.jpg" alt=""></a>
                        <div class="card-body">
                            <div class="blog-meta small">
                                <span class="font-w-600 mr-3"><span class="fas fa-calendar-alt text-primary mr-2"></span>21-May-2020</span>
                                <span class="font-w-600"><span class="fas fa-comment-dots text-primary mr-2"></span>Comment</span>
                            </div>
                            <a href="blog-details.html" class="h4 mt-10 font-w-400 text-dark line-h-1-5">Barton Did Feebly Change Man She Afford Square</a>
                            <a href="blog-details.html" class="text-dark font-w-600 text-uppercase mt-15">Read More <span class="fas fa-long-arrow-alt-right text-primary"></span></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="blog-item card border-0 mt-30">
                        <a href="blog-details.html"><img class="card-img-top" src="assets/images/blogs/03.jpg" alt=""></a>
                        <div class="card-body">
                            <div class="blog-meta small">
                                <span class="font-w-600 mr-3"><span class="fas fa-calendar-alt text-primary mr-2"></span>21-May-2020</span>
                                <span class="font-w-600"><span class="fas fa-comment-dots text-primary mr-2"></span>Comment</span>
                            </div>
                            <a href="blog-details.html" class="h4 mt-10 font-w-400 text-dark line-h-1-5">Village Did Removed Enjoyed Explain Saw Calling Talking.</a>
                            <a href="blog-details.html" class="text-dark font-w-600 text-uppercase mt-15">Read More <span class="fas fa-long-arrow-alt-right text-primary"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of blogs -->
    <!-- start of brands -->
    <section class="section cm-brands">
        <div class="container">
            <div class="row">
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/01.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/02.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/03.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/04.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/05.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/06.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/07.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/08.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/09.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/10.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/02.jpg" alt="">
                </div>
                <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                    <img class="img-fluid mt-40" src="assets/images/brands/03.jpg" alt="">
                </div>
            </div>
        </div>
    </section>
    <!-- end of brands -->
    <!-- start footer -->
    <footer class="footer section bg-cover overlay-dark pt-60" style="background-image: url(assets/images/bg-footer.jpg);">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-xl-3 col-md-6 mt-40">
                    <img class="mb-25" src="assets/images/logo-light.png" alt="">
                    <p class="text-gray">Ye to misery wisdom plenty polite to as. Prepared interest proposal it he exercise.</p>
                    <ul class="social-links list-unstyled mt-25">
                        <li><a href="#!"><span class="fab fa-facebook-f"></span></a></li>
                        <li><a href="#!"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="#!"><span class="fab fa-linkedin-in"></span></a></li>
                    </ul>
                </div>
                <div class="col-xl-3 col-md-6 mt-40">
                    <h4 class="font-w-600 text-white mb-10">Quick Links</h4>
                    <ul class="footer-links list-unstyled text-uppercase">
                        <li><a href="#!">Web design</a></li>
                        <li><a href="#!">Web development</a></li>
                        <li><a href="#!">Graphics</a></li>
                        <li><a href="#!">SEO</a></li>
                        <li><a href="#!">Contact</a></li>
                    </ul>
                </div>
                <div class="col-xl-3 col-md-6 mt-40">
                    <h4 class="font-w-600 text-white mb-10">Quick Links</h4>
                    <ul class="footer-links list-unstyled text-uppercase">
                        <li><a href="#!">About Us</a></li>
                        <li><a href="#!">Blog</a></li>
                        <li><a href="#!">Contact Us</a></li>
                        <li><a href="#!">Sign in</a></li>
                        <li><a href="#!">My account</a></li>
                    </ul>
                </div>
                <div class="col-xl-3 col-md-6 mt-40">
                    <h4 class="font-w-600 text-white mb-10">Get in touch</h4>
                    <div class="text-gray mt-20">
                        <span class="icon text-primary fas fa-phone-alt mr-2"></span>
                        0 (143) 456 7897
                    </div>
                    <div class="text-gray mt-20">
                        <span class="icon text-primary fas fa-envelope mr-2"></span>
                        [email protected]
                    </div>
                    <div class="text-gray mt-20">
                        <span class="icon text-primary fas fa-home mr-2"></span>
                        11 Deneside, Seghill",NE23
                    </div>
                    <form class="mt-25" action="#!" method="post">
                        <div class="input-group input-group-primary">
                            <input type="email" class="form-control text-white px-3 bg-transparent shadow-none border-0" placeholder="Mail address">
                            <div class="input-group-apend">
                                <button class="btn btn-primary rounded-circle" type="submit">
                                    <span class="fas fa-chevron-right"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </footer>
    <div class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>Copyright &copy; 2020.Company name All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- end footer -->
    <a href="#top" class="scroll-to-top">
        <span class="fas fa-chevron-up"></span>
    </a>
    <!-- scroll to top -->
	<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	Collect from <a href="http://www.51qianduan.com/"  title="网站模板">模板之家</a>
	<a href="https://www.51qianduan.com/"  title="查字典">查字典</a>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 宽屏全屏 游戏 黑色 IT网络科技 蓝色 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到