master

分支 (1)

管理

管理

master

cms
/
test.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Triball - Corporate Agency Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Vendor CSS (Icon Font) -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css" />
<link rel="stylesheet" href="assets/css/vendor/icofont.min.css" />
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css" />
-->

    <!-- Plugins CSS (All Plugins Files) -->

    <!--
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/plugins/animate.min.css" />
<link rel="stylesheet" href="assets/css/plugins/aos.min.css" />
<link rel="stylesheet" href="assets/css/plugins/nice-select.min.css" />
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css" />
<link rel="stylesheet" href="assets/css/plugins/magnific-popup-min.css" />
-->

    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">


    <!-- Main Style CSS -->

    <!-- <link rel="stylesheet" href="assets/css/style.css" /> -->


</head>

<body>

    <!-- Header Section Start -->
    <div class="header">
        <div class="sticky-header">
            <div class="header-container container-fluid">
                <div class="header-wrapper">

                    <!-- Header Logo Start -->
                    <div class="header-logo">
                        <a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo"></a>
                    </div>
                    <!-- Header Logo End -->

                    <!-- Header Menu Start -->
                    <div class="main-menu d-none d-lg-flex">
                        <ul>
                            <li><a class="active" href="index.html">Home</a></li>
                            <li><a href="about.html">About Us</a></li>
                            <li class="has-children">
                                <a href="#/">Service</a>
                                <ul class="sub-menu">
                                    <li><a href="service.html">Service</a></li>
                                    <li><a href="service-details.html">Service Details</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#/">Portfolio</a>
                                <ul class="sub-menu">
                                    <li><a href="portfolio.html">Portfolio</a></li>
                                    <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog</a>
                                <ul class="sub-menu">
                                    <li><a href="blog-grid.html">Blog Grid</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                    <!-- Header Menu End -->

                    <!-- Header Social Actions Start -->
                    <div class="header-social-actions">
                        <div class="header-social d-none d-lg-block">
                            <ul>
                                <li>
                                    <a href="#/"><i class="fa fa-facebook-f"></i></a>
                                </li>
                                <li>
                                    <a href="#/"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#/"><i class="fa fa-pinterest-p"></i></a>
                                </li>
                            </ul>
                        </div>

                        <div class="header-actions">
                            <!-- Mobile Menu Hambarger Action Button Start -->
                            <a class="header-action-btn header-action-search d-flex" href="#/">
                                <i class="fa fa-search"></i>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button End -->
                            <!-- Mobile Menu Hambarger Action Button Start -->
                            <a class="header-action-btn header-action-btn-menu d-flex" href="#/">
                                <span></span>
                                <span></span>
                                <span></span>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button End -->
                        </div>

                    </div>
                    <!-- Header Social Actions End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Header Section End -->

    <!-- Slider Section Start -->
    <div class="section slider-section">

        <!-- Swiper Container Start -->
        <div class="slider-container swiper-container animation-style-01">
            <div class="swiper-wrapper">

                <div class="swiper-slide">
                    <!-- Single Slider Start -->
                    <div class="slingle-slider overlay" data-bg-color="#000" data-bg-image="assets/images/slider/slide-1.jpg">

                        <!-- Slider Content Start -->
                        <div class="slider-content">
                            <h1 class="title">Triball Creative Agency</h1>
                            <a href="service-details.html" class="btn btn-outline-whited btn-outline-hover-primary">Let's Start </a>
                        </div>
                        <!-- Slider Content End -->

                    </div>
                    <!-- Single Slider End -->
                </div>

                <div class="swiper-slide">
                    <!-- Single Slider Start -->
                    <div class="slingle-slider overlay" data-bg-color="#000" data-bg-image="assets/images/slider/slide-2.jpg">

                        <!-- Slider Content Start -->
                        <div class="slider-content">
                            <h2 class="title">Triball Creative Agency</h2>
                            <a href="service-details.html" class="btn btn-outline-whited btn-outline-hover-primary">Let's Start </a>
                        </div>
                        <!-- Slider Content End -->

                    </div>
                    <!-- Single Slider End -->
                </div>

            </div>
        </div>
        <!-- Swiper Container End -->

    </div>
    <!-- Slider Section End -->

    <!-- Content Analysis Section Start -->
    <div class="section analysis-section bg-name-gray">
        <div class="container">
            <div class="row m-b-n30">
                <div class="col-12 col-md-6 col-lg-4 m-b-30" data-aos="fade-up" data-aos-duration="1100">

                    <!-- Single Analysis Start -->
                    <!-- Single Analysis End -->
                    <div class="single-analysis">
                        <div class="analysis-number">
                            <span>01</span>
                        </div>
                        <div class="analysis-content">
                            <h4 class="title">Content Research</h4>
                            <p>Phasellus facilisis lorem quis lacinia faucibus. Ut congue auctor tristique. phasellus facilisis lorem.</p>
                        </div>
                    </div>
                    <!-- Single Analysis End -->

                </div>
                <div class="col-12 col-md-6 col-lg-4 m-b-30" data-aos="fade-up" data-aos-duration="1300">

                    <!-- Single Analysis Start -->
                    <div class="single-analysis">
                        <div class="analysis-number">
                            <span>02</span>
                        </div>
                        <div class="analysis-content">
                            <h4 class="title">Design Layout</h4>
                            <p>Phasellus facilisis lorem quis lacinia faucibus. Ut congue auctor tristique. phasellus facilisis lorem.</p>
                        </div>
                    </div>
                    <!-- Single Analysis End -->

                </div>
                <div class="col-12 col-md-6 col-lg-4 m-b-30" data-aos="fade-up" data-aos-duration="1500">

                    <!-- Single Analysis Start -->
                    <div class="single-analysis">
                        <div class="analysis-number">
                            <span>03</span>
                        </div>
                        <div class="analysis-content">
                            <h4 class="title">Backend & Test</h4>
                            <p>Phasellus facilisis lorem quis lacinia faucibus. Ut congue auctor tristique. phasellus facilisis lorem.</p>
                        </div>
                    </div>
                    <!-- Single Analysis End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Content Analysis Section End -->

    <!-- About Section Start -->
    <div class="section section-margin">
        <div class="container">
            <div class="row m-b-n30">
                <div class="col-lg-6 align-self-center m-b-30" data-aos="fade-up" data-aos-duration="1100">
                    <div class="about-content">
                        <h2 class="title">We combine Design, Thinking & Technical.</h2>
                        <span></span>
                        <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisq uam est, qui dolorem ipsum quia dolor sit amet, consectetur, </p>
                        <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro</p>
                        <a href="about.html" class="btn btn-dark btn-hover-primary m-t-20">Explore Now</a>
                    </div>
                </div>
                <div class="col-lg-6 order-first order-lg-last m-b-30" data-aos="fade-up" data-aos-duration="1800">
                    <div class="about-image ms-auto">
                        <img src="assets/images/about/about-1.png" alt="About Image">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About Section End -->

    <!-- Service Section Start -->
    <div class="section section-margin-bottom">
        <div class="container">
            <div class="row">
                <div class="col-12" data-aos="fade-up" data-aos-duration="1100">
                    <div class="section-title text-center">
                        <h2 class="title">What We Do</h2>
                        <span class="d-flex justify-content-center"></span>
                        <p class="m-auto">Vivamus faucibus massa id risus elementum facilisis. Integer iaculis sapien vitae auctor tristque. Ut sit amet bibendum risus, ac cursus neque.</p>
                    </div>
                </div>
            </div>
            <div class="row m-b-n40">
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1100">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-1.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Web Design</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1200">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-2.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Photography</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1300">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-3.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Digital Marketing</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1400">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-4.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Business Management</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1500">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-5.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Branding & Identity</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1600">
                    <!-- Single Service Start -->
                    <div class="single-service">
                        <div class="service-icon">
                            <img src="assets/images/icon/service-6.png" alt="Service Icon">
                        </div>
                        <h4 class="title">Interior Design</h4>
                        <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                        <a href="service-details.html" class="btn-link">Explore Now</a>
                    </div>
                    <!-- Single Service End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Service Section End -->

    <!-- Testimonial Section Start -->
    <div class="section section-padding overlay" data-bg-image="assets/images/banner/testimonial-banner.jpg" data-aos="fade-up" data-aos-duration="1100">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="swiper-container testimonial-carousel">
                        <div class="swiper-wrapper">

                            <div class="swiper-slide">

                                <!-- Single Testimonial wrapper Start -->
                                <div class="single-testimonial-wrapper">
                                    <div class="testimonial-thumb">
                                        <img src="assets/images/icon/testimonial.png" alt="Testimonial Image">
                                    </div>
                                    <div class="testimonial-content">
                                        <p>Eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus</p>
                                        <span>Ethan Smith</span>
                                    </div>
                                </div>
                                <!-- Single Testimonial wrapper End -->

                            </div>

                            <div class="swiper-slide">

                                <!-- Single Testimonial wrapper Start -->
                                <div class="single-testimonial-wrapper">
                                    <div class="testimonial-thumb">
                                        <img src="assets/images/icon/testimonial.png" alt="Testimonial Image">
                                    </div>
                                    <div class="testimonial-content">
                                        <p>Eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus</p>
                                        <span>Jhon Cristal</span>
                                    </div>
                                </div>
                                <!-- Single Testimonial wrapper End -->

                            </div>

                            <div class="swiper-slide">

                                <!-- Single Testimonial wrapper Start -->
                                <div class="single-testimonial-wrapper">
                                    <div class="testimonial-thumb">
                                        <img src="assets/images/icon/testimonial.png" alt="Testimonial Image">
                                    </div>
                                    <div class="testimonial-content">
                                        <p>Eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus</p>
                                        <span>Catherin Batty</span>
                                    </div>
                                </div>
                                <!-- Single Testimonial wrapper End -->

                            </div>

                        </div>

                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Testimonial Section End -->

    <!-- Features Section Start -->
    <div class="section section-margin feature-section">
        <div class="container">
            <div class="row m-b-n40">
                <div class="col-xl-5 col-lg-6 m-b-40" data-aos="fade-up" data-aos-duration="1100">
                    <div class="feature-image-wrapper">
                        <span class="background-shape"></span>
                        <span class="background-layer">
								<img src="assets/images/feature/feature-layer.png" alt="Feature Image">
							</span>
                        <div class="feature-image">
                            <img src="assets/images/feature/feature-image.png" alt="Feature Image">
                        </div>
                    </div>
                </div>
                <div class=" col-lg-6 col-xl-6 offset-xl-1 align-self-center m-b-40">
                    <div class="section-title text-start" data-aos="fade-up" data-aos-duration="1100">
                        <h2 class="title m-b-30">Why you should choose us</h2>
                        <p class="m-auto">Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolores eos qui ratione voluptatem sequi nesciunt porro quisq</p>
                    </div>
                    <div class="row m-b-n40">
                        <div class="col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1300">
                            <!-- Single Service Start -->
                            <div class="single-service">
                                <div class="service-icon">
                                    <img src="assets/images/icon/service-7.png" alt="Service Icon">
                                </div>
                                <h4 class="title">Powerful Web Builder</h4>
                                <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                            </div>
                            <!-- Single Service End -->
                        </div>
                        <div class="col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1500">
                            <!-- Single Service Start -->
                            <div class="single-service">
                                <div class="service-icon">
                                    <img src="assets/images/icon/service-1.png" alt="Service Icon">
                                </div>
                                <h4 class="title">Unique Design</h4>
                                <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                            </div>
                            <!-- Single Service End -->
                        </div>
                        <div class="col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1700">
                            <!-- Single Service Start -->
                            <div class="single-service">
                                <div class="service-icon">
                                    <img src="assets/images/icon/service-8.png" alt="Service Icon">
                                </div>
                                <h4 class="title">Reasonable Pricing</h4>
                                <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                            </div>
                            <!-- Single Service End -->
                        </div>
                        <div class="col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1900">
                            <!-- Single Service Start -->
                            <div class="single-service">
                                <div class="service-icon">
                                    <img src="assets/images/icon/service-9.png" alt="Service Icon">
                                </div>
                                <h4 class="title">Intime Delivery</h4>
                                <p>Phasellus facilis lorem quis lacinia faucibus congue auctor tristique</p>
                            </div>
                            <!-- Single Service End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Features Section End -->

    <!-- Gallery Section Start -->
    <div class="section gallery-section">
        <div class="container">
            <div class="row">
                <div class="section-title text-center" data-aos="fade-up" data-aos-duration="1100">
                    <h2 class="title m-b-30">Latest Works</h2>
                    <span class="thick-border pb-0 d-flex justify-content-center"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-12" data-aos="fade-up" data-aos-duration="1500">
                    <div class="gallery-filter-nav bg-name-seashell">
                        <button class="filter-button active" data-filter="*">All</button>
                        <button class="filter-button" data-filter=".item1">Design</button>
                        <button class="filter-button" data-filter=".item2">Branding</button>
                        <button class="filter-button" data-filter=".item3">Typography</button>
                        <button class="filter-button" data-filter=".item4">Digital Art</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12" data-aos="fade-up" data-aos-duration="1800">
                    <div class="row gallery-filter-wrapper m-b-n50">
                        <div class="col-md-6 col-lg-4 m-b-50 filter-item item2 item3 item4">
                            <!-- Single Gallery Start -->
                            <div class="single-gallery">
                                <div class="gallery-thumb">
                                    <a href="portfolio-details.html">
                                        <img class="fit-image" src="assets/images/portfolio/1.png" alt="Gallery Image">
                                    </a>
                                </div>
                            </div>
                            <!-- Single Gallery End -->
                        </div>
                        <div class="col-md-6 col-lg-4 m-b-50 filter-item item1 item3">
                            <!-- Single Gallery Start -->
                            <div class="single-gallery">
                                <div class="gallery-thumb">
                                    <a href="portfolio-details.html">
                                        <img class="fit-image" src="assets/images/portfolio/2.png" alt="Gallery Image">
                                    </a>
                                </div>
                            </div>
                            <!-- Single Gallery End -->
                        </div>
                        <div class="col-md-6 col-lg-4 m-b-50 filter-item item1 item2 item3 item4">
                            <!-- Single Gallery Start -->
                            <div class="single-gallery">
                                <div class="gallery-thumb">
                                    <a href="portfolio-details.html">
                                        <img class="fit-image" src="assets/images/portfolio/3.png" alt="Gallery Image">
                                    </a>
                                </div>
                            </div>
                            <!-- Single Gallery End -->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Gallery Section End -->

    <!-- Video Banner Section Start -->
    <div class="section section-padding section-margin overlay" data-bg-image="assets/images/banner/video-banner.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!-- Video Banner wrapper Start -->
                    <div class="video-banner-wrapper">
                        <div class="video-banner-content" data-aos="fade-up" data-aos-duration="1100">
                            <p>Cumque nihil impedit quo minus id quod maxime possimus, omnis voluptas assumenda est</p>
                        </div>
                        <div class="video-btn" data-aos="fade-up" data-aos-duration="1600">
                            <a href="" class="btn-play btn-video-popup video-popup">
                                <img src="assets/images/icon/video-icon.png" alt="Video Icon">
                            </a>
                        </div>
                    </div>
                    <!-- Video Banner wrapper End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Video Banner Section End -->

    <!-- Blog Section Start -->
    <div class="section section-margin-bottom">
        <div class="container">
            <div class="row m-b-n40">
                <div class="col-lg-4 m-b-40 align-self-center" data-aos="fade-up" data-aos-duration="1100">
                    <div class="about-content">
                        <h2 class="title">Latest Blog <br> post</h2>
                        <span></span>
                        <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolores eos qui ratio ne voluptatem sequi nesciunt. Neque porro </p>
                        <a href="blog-details.html" class="btn btn-dark btn-hover-primary m-t-20">Explore Now</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="1500">
                    <!-- Single Blog Wrapper Start -->
                    <div class="single-blog-wrapper blog-box">
                        <div class="single-blog-thumb">
                            <a class="image" href="blog-details.html"><img src="assets/images/blog/blog-medium/1.png" alt="Blog Image"></a>
                        </div>
                        <div class="single-blog-content">
                            <div class="blog-meta">
                                <span>By John Smith, 20 May, 2021 / <a class="active" href="blog-details.html">Business</a></span>
                            </div>
                            <h4 class="title"><a href="blog-details.html">Design is inherently optimistic...</a></h4>
                            <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolor</p>
                        </div>
                    </div>
                    <!-- Single Blog Wrapper End -->
                </div>
                <div class="col-lg-4 col-sm-6 m-b-40" data-aos="fade-up" data-aos-duration="2000">
                    <!-- Single Blog Wrapper Start -->
                    <div class="single-blog-wrapper blog-box">
                        <div class="single-blog-thumb">
                            <a class="image" href="blog-details.html"><img src="assets/images/blog/blog-medium/2.png" alt="Blog Image"></a>
                        </div>
                        <div class="single-blog-content">
                            <div class="blog-meta">
                                <span class="blog-meta">By Jems Bond, 15 June, 2021 / <a href="blog-details.html">Corporate</a></span>
                            </div>
                            <h4 class="title"><a href="blog-details.html">Business Management System</a></h4>
                            <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolor</p>
                        </div>
                    </div>
                    <!-- Single Blog Wrapper End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Section End -->

    <!-- Begin Brand Area -->
    <div class="section section-margin-bottom">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" data-aos="fade-up" data-aos-duration="1100">
                    <div class="swiper-container brand-slider">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-1.png" alt="Brand Image">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-2.png" alt="Brand Image">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-3.png" alt="Brand Image">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-4.png" alt="Brand Image">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-5.png" alt="Brand Image">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a class="brand-item" href="#/">
                                    <img src="assets/images/brand/1-3.png" alt="Brand Image">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Brand Area End Here -->

    <!-- Contact Banner section Start -->
    <div class="section contact-banner-section">
        <div class="contact-banner-wrapper" data-bg-image="assets/images/banner/contact-banner.jpg">
            <!-- <img src="assets/images/banner/contact-banner.jpg" alt="Contact Banner Image"> -->
        </div>
        <div class="container-fluid contact-banner-container">
            <div class="row">
                <div class="col-md-12 col-lg-9">
                    <div class="section-title m-b-20 pb-0" data-aos="fade-up" data-aos-duration="1100">
                        <h2 class="title">Contact Us</h2>
                        <span class="thick-border"></span>
                        <p>Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur mag ni dolores eos qui ratio ne voluptatem sequi nesciunt. Neque porro </p>
                    </div>
                    <div class="contact-form">
                        <form action="#/">
                            <div class="row m-b-n30">
                                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1100">
                                    <input type="text" placeholder="Name *" name="name">
                                </div>
                                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1300">
                                    <input type="email" placeholder="Email *" name="email">
                                </div>
                                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1500">
                                    <input type="text" placeholder="Subject *" name="subject">
                                </div>
                                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1700">
                                    <input type="text" placeholder="Phone *" name="Phone">
                                </div>
                                <div class="col-12 m-b-30" data-aos="fade-up" data-aos-duration="1900">
                                    <textarea name="message" placeholder="Message"></textarea>
                                </div>
                                <div class="col-12 text-start m-b-30" data-aos="fade-up" data-aos-duration="2100">
                                    <button class="btn btn-dark btn-hover-primary">Send Now</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact Banner section End -->

    <!--== Start Footer Area Wrapper ==-->
    <footer class="section footer-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!--== Start Footer Widget Area ==-->
                    <div class="footer-widget-area">
                        <div class="row m-b-n40">
                            <div class="col-sm-6 col-md-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="1100">
                                <div class="widget-item pb-sm-20">
                                    <h4 class="widget-title">WE ARE CREATIVE AGENCY</h4>
                                    <div class="about-widget">
                                        <p>Nunc ut vehicula ante. Donec cursus felis diam, at vulputate ligula sollicitudin at. Vivamus massa lorem Lorem Ipsum is simple.</p>
                                        <div class="social-icons">
                                            <a href="#/"><i class="fa fa-facebook"></i></a>
                                            <a href="#/"><i class="fa fa-twitter"></i></a>
                                            <a href="#/"><i class="fa fa-pinterest-p"></i></a>
                                            <a href="#/"><i class="fa fa-dribbble"></i></a>
                                            <a href="#/"><i class="fa fa-behance"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-3 d-flex justify-content-start justify-content-lg-center m-b-40" data-aos="fade-up" data-aos-duration="1500">
                                <div class="widget-item">
                                    <h4 class="widget-title">COMPANY</h4>
                                    <ul class="widget-list">
                                        <li><a href="about.html">About Us</a></li>
                                        <li><a href="contact.html">Jobs</a></li>
                                        <li><a href="contact.html">Press</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                        <li><a href="blog-details.html">Blog</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="2000">
                                <div class="widget-item">
                                    <h4 class="widget-title">RECENT POST</h4>
                                    <ul class="widget-post">
                                        <li><a href="blog-details.html">Multi-purpose Creative Template</a></li>
                                        <li><a href="blog-details.html">Design is inherently optimistic. that is its power.</a></li>
                                        <li><a href="blog-details.html">I wish someone would ask me to design a cathedral</a></li>
                                        <li><a href="blog-details.html">We help the elderly use the internet</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-3 m-b-40" data-aos="fade-up" data-aos-duration="2500">
                                <div class="widget-item">
                                    <h4 class="widget-title">REFOLLOW US INSTAGRAM</h4>
                                    <ul class="widget-instagram">
                                        <li><a href="#/"><img class="fit-image" src="assets/images/instagram/2.jpg" alt="Image-HasTech"></a></li>
                                        <li><a href="#/"><img class="fit-image" src="assets/images/instagram/3.jpg" alt="Image-HasTech"></a></li>
                                        <li><a href="#/"><img class="fit-image" src="assets/images/instagram/1.jpg" alt="Image-HasTech"></a></li>
                                        <li><a href="#/"><img class="fit-image" src="assets/images/instagram/4.jpg" alt="Image-HasTech"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--== End Footer Widget Area ==-->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!--== End Footer Area Wrapper ==-->

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top show" id="scroll-top">
        <i class="arrow-top icofont-bubble-up"></i>
        <i class="arrow-bottom icofont-bubble-up"></i>
    </a>
    <!-- Scroll Top End -->

    <!-- Mobile Menu Start -->
    <div class="mobile-menu-wrapper">
        <div class="offcanvas-overlay"></div>

        <!-- Mobile Menu Inner Start -->
        <div class="mobile-menu-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="icofont-close-line"></i>
            </div>
            <!-- Button Close End -->

            <!-- Mobile Menu Inner Wrapper Start -->
            <div class="mobile-menu-inner-wrapper">

                <!-- Mobile Menu Start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="about.html">About Us</a></li>
                            <li class="has-children">
                                <a href="#">Service <i class="icofont-dotted-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="service.html">Service</a></li>
                                    <li><a href="service-details.html">Service Details</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Portfolio <i class="icofont-dotted-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="portfolio.html">Portfolio</a></li>
                                    <li><a href="portfolio-details.html">Portfolio Details</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="icofont-dotted-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog-grid.html">Blog Grid</a></li>
                                    <li><a href="blog-details.html">Blog Details Fullwidth</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- Mobile Menu End -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto bottom-0">

                    <!-- Contact Links Start -->
                    <ul class="contact-links">
                        <li><i class="icofont-phone"></i><a href="tel:+0123456789"> +012 3456 789</a></li>
                        <li><i class="icofont-envelope-open"></i><a href="mailto:info@example.com"> info@example.com</a></li>
                        <li><i class="icofont-wall-clock"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Links End -->

                    <div class="header-social">
                        <ul>
                            <li>
                                <a href="#/"><i class="fa fa-facebook-f"></i></a>
                            </li>
                            <li>
                                <a href="#/"><i class="fa fa-twitter"></i></a>
                            </li>
                            <li>
                                <a href="#/"><i class="fa fa-pinterest-p"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- Contact Links/Social Links End -->
            </div>
            <!-- Mobile Menu Inner Wrapper End -->

        </div>
        <!-- Mobile Menu Inner End -->
    </div>
    <!-- Mobile Menu End -->

    <!-- Offcanvas Search Start -->
    <div class="offcanvas-search">
        <div class="offcanvas-search-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="icofont-close-line"></i>
            </div>
            <!-- Button Close End -->

            <!-- Offcanvas Search Form Start -->
            <form class="offcanvas-search-form" action="#">
                <input type="text" placeholder="Search Here" class="offcanvas-search-input">
            </form>
            <!-- Offcanvas Search Form End -->

        </div>
    </div>
    <!-- Offcanvas Search End -->

    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->

    <!--
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.2.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    -->

    <!-- Plugins JS -->

    <!--
    <script src="assets/js/plugins/aos.min.js"></script>
    <script src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script src="assets/js/plugins/jquery-ui.min.js"></script>
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <script src="assets/js/plugins/isotope.pkgd.min.js"></script>
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.magnific-popup.min.js"></script>
    -->

    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>


    <!--Main JS-->
    <script src="assets/js/main.js"></script>

</body>

</html>