View file Agrul/source/index-2.html

File size: 58.01Kb
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Agrul - Organic Farm Agriculture Template">

    <!-- ========== Page Title ========== -->
    <title>Agrul - Organic Farm Agriculture Template</title>

    <!-- ========== Favicon Icon ========== -->
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- ========== Start Stylesheet ========== -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/elegant-icons.css" rel="stylesheet">
    <link href="assets/css/flaticon-set.css" rel="stylesheet">
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <link href="assets/css/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/validnavs.css" rel="stylesheet">
    <link href="assets/css/helper.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/unit-test.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <!-- ========== End Stylesheet ========== -->

</head>

<body>

    <!--[if lte IE 9]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->

    <!-- Preloader Start -->
    <div class="se-pre-con"></div>
    <!-- Preloader Ends -->

    <!-- Start Header Top 
    ============================================= -->
    <div class="top-bar top-style-one bg-dark text-light">
        <div class="container">
            <div class="row align-center">
                <div class="col-xl-4 col-lg-4 col-md-4 info">
                    <ul>
                        <li>
                            <div class="icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="content">
                                <span>Call Anytime</span>
                                <a href="tel:+4733378901">+4733378901</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 logo">
                    <a href="#"><img src="assets/img/logo-mix.png" alt="Logo"></a>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 text-end info">
                    <ul>
                        <li>
                            <div class="icon">
                                <i class="fas fa-comments-alt-dollar"></i>
                            </div>
                            <div class="content">
                                <span>Write Email</span>
                                <a href="mailto:info@agrul.com">info@agrul.com</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Header Top -->

    <!-- Header 
    ============================================= -->
    <header>
        <!-- Start Navigation -->
        <nav class="navbar mobile-sidenav less-logo navbar-common navbar-default validnavs navbar-sticky">

            <!-- Start Top Search -->
            <div class="top-search">
                <div class="container-xl">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-addon close-search"><i class="fa fa-times"></i></span>
                    </div>
                </div>
            </div>
            <!-- End Top Search -->

            <div class="container d-flex justify-content-between align-items-center">            
                

                <!-- Start Header Navigation -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" class="logo" alt="Logo"></a>
                </div>
                <!-- End Header Navigation -->

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbar-menu">

                    <img src="assets/img/logo.png" alt="Logo">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                        <i class="fa fa-times"></i>
                    </button>
                    
                    <ul class="nav navbar-nav navbar-left" data-in="fadeInDown" data-out="fadeOutUp">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Home</a>
                            <ul class="dropdown-menu">
                                <li><a href="index.html">Agriculture</a></li>
                                <li><a href="index-3.html">Farm Shop</a></li>
                                <li><a href="index-2.html">Organic Farm</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Pages</a>
                            <ul class="dropdown-menu">
                                <li><a href="about-us.html">About Us</a></li>
                                <li><a href="team.html">Team</a></li>
                                <li><a href="team-details.html">Team Details</a></li>
                                <li><a href="contact-us.html">Contact Us</a></li>
                                <li><a href="faq.html">Faq</a></li>
                                <li><a href="404.html">Error Page</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="project.html" class="dropdown-toggle" data-toggle="dropdown" >Projects</a>
                            <ul class="dropdown-menu">
                                <li><a href="project.html">Project</a></li>
                                <li><a href="project-details.html">Project Details</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Services</a>
                            <ul class="dropdown-menu">
                                <li><a href="services.html">Services Version One</a></li>
                                <li><a href="services-2.html">Services Version Two</a></li>
                                <li><a href="services-details.html">Services Details</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Blog</a>
                            <ul class="dropdown-menu">
                                <li><a href="blog-standard.html">Blog Standard</a></li>
                                <li><a href="blog-with-sidebar.html">Blog With Sidebar</a></li>
                                <li><a href="blog-2-colum.html">Blog Grid Two Colum</a></li>
                                <li><a href="blog-3-colum.html">Blog Grid Three Colum</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-single-with-sidebar.html">Blog Single With Sidebar</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >Shop</a>
                            <ul class="dropdown-menu">
                                <li><a href="shop.html">Shop</a></li>
                                <li><a href="shop-single.html">Shop Single</a></li>
                                <li><a href="shop-single-thumb-only.html">Shop Single Two</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->

                <div class="attr-right">
                    <!-- Start Atribute Navigation -->
                    <div class="attr-nav">
                        <ul>
                            <li class="opening-hours">
                                <div class="call">
                                    <div class="info">
                                        <p>Opening hours</p>
                                        <h5>Sun - Fri 9:30 - 17:00</h5>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- End Atribute Navigation -->

                </div>

            </div>  

            <!-- Overlay screen for menu -->
            <div class="overlay-screen"></div>
            <!-- End Overlay screen for menu -->

        </nav>
        <!-- End Navigation -->
    </header>
    <!-- End Header -->

    <!-- Start Banner Area 
    ============================================= -->
    <div class="banner-area banner-style-two text-center navigation-custom-large zoom-effect overflow-hidden text-light">
        <!-- Slider main container -->
        <div class="banner-fade">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">

                <!-- Single Item -->
                <div class="swiper-slide banner-style-two">
                    <div class="banner-thumb bg-cover shadow dark" style="background: url(assets/img/2440x1578.png);"></div>
                    <div class="container">
                        <div class="row align-center">
                            <div class="col-lg-8 offset-lg-2">
                                <div class="content">
                                    <h2>Farm <strong>Company</strong></h2>
                                    <p>
                                        Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded.
                                    </p>
                                    <div class="button">
                                        <a class="animated-btn" href="#"><i class="fas fa-angle-right"></i> Discover More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shape-animation">
                        <div class="item">
                            <img src="assets/img/shape/v1.png" alt="Image Not Found">
                        </div>
                        <div class="item">
                            <img src="assets/img/shape/v2.png" alt="Image Not Found">
                        </div>
                        <div class="item">
                            <img src="assets/img/shape/v3.png" alt="Image Not Found">
                        </div>
                    </div>
                </div>
                <!-- End Single Item -->

                <!-- Single Item -->
                <div class="swiper-slide banner-style-two">
                    <div class="banner-thumb bg-cover shadow dark" style="background: url(assets/img/2440x1578.png);"></div>
                    <div class="container">
                        <div class="row align-center">
                            <div class="col-lg-8 offset-lg-2">
                                <div class="content">
                                    <h2>Best <strong>harvest</strong></h2>
                                    <p>
                                        Coming merits and was talent enough far. Sir joy northward sportsmen education. Discovery incommode earnestly no he commanded.
                                    </p>
                                    <div class="button">
                                        <a class="animated-btn" href="#"><i class="fas fa-angle-right"></i> Discover More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shape-animation">
                        <div class="item">
                            <img src="assets/img/shape/v1.png" alt="Image Not Found">
                        </div>
                        <div class="item">
                            <img src="assets/img/shape/v2.png" alt="Image Not Found">
                        </div>
                        <div class="item">
                            <img src="assets/img/shape/v3.png" alt="Image Not Found">
                        </div>
                    </div>
                </div>
                <!-- End Single Item -->

            </div>

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

        </div>        
    </div>
    <!-- End Main -->

    <!-- Start Services 
    ============================================= -->
    <div class="services-style-two-area bottom-less text-center default-padding-top">
        <div class="shape-leaf">
            <img src="assets/img/shape/30.png" alt="Image Not Found">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="site-heading text-center">
                        <h5 class="sub-title">What we do</h5>
                        <h2 class="title">Providing Fresh Organic Food</h2>
                        <div class="devider"></div>
                        <p>
                            Everything melancholy uncommonly but solicitude inhabiting <br> projection off. Connection stimulated estimating.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="services-style-two-box relative">
                <div class="shape-box-right-top-animated">
                    <img src="assets/img/shape/leaf-4.png" alt="Image not found">
                </div>
                <div class="row">
                    <!-- Single Item -->
                    <div class="services-style-two col-xl-3 col-md-6">
                        <div class="services-style-two-item">
                            <div class="info">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                </div>
                                <p>
                                    Continue indulged speaking technical maximum horrible domestic position  seeing.
                                </p>
                            </div>
                            <h5 class="title">
                                <a href="#"><i class="flaticon-vegetable"></i> Fresh Vegetables</a>
                            </h5>
                        </div>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="services-style-two col-xl-3 col-md-6">
                        <div class="services-style-two-item">
                            <div class="info">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                </div>
                                <p>
                                    Recenting indulged speaking technical maximum horrible domestic position  seeing.
                                </p>
                            </div>
                            <h5 class="title">
                                <a href="#"><i class="flaticon-corn"></i> Agricultural</a>
                            </h5>
                        </div>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="services-style-two col-xl-3 col-md-6">
                        <div class="services-style-two-item">
                            <div class="info">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                </div>
                                <p>
                                    Continue indulged speaking technical maximum horrible domestic position  seeing.
                                </p>
                            </div>
                            <h5 class="title">
                                <a href="#"><i class="flaticon-bees"></i> Organic Products</a>
                            </h5>
                        </div>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="services-style-two col-xl-3 col-md-6">
                        <div class="services-style-two-item">
                            <div class="info">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                </div>
                                <p>
                                    Maximum indulged speaking technical maximum horrible domestic position  seeing.
                                </p>
                            </div>
                            <h5 class="title">
                                <a href="#"><i class="flaticon-cow-3"></i> Dairy Production</a>
                            </h5>
                        </div>
                    </div>
                    <!-- End Single Item -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Services -->

    <!-- Start About Area 
    ============================================= -->
    <div class="about-style-two-area default-padding" style="background-image: url(assets/img/shape/33.png);">
        <div class="container">
            <div class="row">
                <div class="about-style-two col-lg-2">
                    <div class="info">
                        <h2 class="title">Be Healthy With <br>Organic Vagetables</h2>
                        <p>
                            Happen active county. Winding morning ambition shyness evident to poor. Because elderly new.
                        </p>
                        <ul>
                            <li>Best Quality Standards</li>
                            <li>Natural Healthy Products</li>
                        </ul>
                        <a class="btn btn-theme mt-30 secondary btn-md radius animation" href="#">Discover More</a>
                    </div>
                </div>
                <div class="about-style-two col-lg-8">
                    <div class="thumb">
                        <img src="assets/img/2440x1578.png" alt="Image Not Found">
                    </div>
                </div>
                <div class="about-style-two col-lg-2">
                    <ul class="counter-list">
                        <li>
                            <div class="fun-fact">
                                <div class="counter">
                                    <div class="timer" data-to="250" data-speed="2000">250</div>
                                    <div class="operator">M</div>
                                </div>
                                <span class="medium">Growth Tonns of Harvest</span>
                            </div>
                        </li>
                        <li>
                            <div class="fun-fact">
                                <div class="counter">
                                    <div class="timer" data-to="688" data-speed="2000">688</div>
                                    <div class="operator">K</div>
                                </div>
                                <span class="medium">Sales of our Products</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End About -->

    <!-- Start Product
    ============================================= -->
    <div class="product-list-area box-layout default-padding bottom-less bg-gray text-center" style="background-image: url(assets/img/shape/16.png);">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="site-heading text-center">
                        <h5 class="sub-title">Our Product</h5>
                        <h2 class="title">Healthy & Orgtanic Products</h2>
                        <div class="devider"></div>
                        <p>
                            Everything melancholy uncommonly but solicitude inhabiting <br> projection off. Connection stimulated estimating.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">

                <div class="product-list-box">
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/1.png" alt="Icon"></div>
                            <h5>Blueberry</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/7.png" alt="Icon"></div>
                            <h5>Fruit</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/2.png" alt="Icon"></div>
                            <h5>Strawberry</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/4.png" alt="Icon"></div>
                            <h5>Eggplant</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/5.png" alt="Icon"></div>
                            <h5>Orange</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                    <!-- Single Item -->
                    <div class="product-list-item">
                        <a href="#">
                            <div class="thumb"><img src="assets/img/icon/8.png" alt="Icon"></div>
                            <h5>Harvest</h5>
                        </a>
                    </div>
                    <!-- End Single Item -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Product Area -->

    <!-- Start Food Order Process
    ============================================= -->
    <div class="process-area default-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 process-style-one">
                    <h5 class="sub-title">Order process</h5>
                    <h2 class="title">Order Now and <br> get pure Organic Food</h2>
                    <div class="call-to-action mt-45">
                        <div class="icon">
                            <i class="fas fa-user-headset"></i>
                        </div>
                        <div class="info">
                            <span>Get quick support</span>
                            <h4><a href="tel:2151234567">+123 34598768</a></h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 process-style-one">
                    <div class="row">
                        <div class="shape">
                            <img src="assets/img/shape/35.webp" alt="Image Not Found">
                        </div>

                        <div class="col-lg-4">
                            <div class="nav nav-tabs order-process-tab-navs" id="nav-tab" role="tablist">
                                <button class="nav-link" id="nav-id-1" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">
                                    <span>Process - 01 </span>
                                    <strong>Home Delivary</strong>
                                </button>
                                <button class="nav-link active" id="nav-id-2" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">
                                    <span>Process - 02 </span>
                                    <strong>Live Purchase</strong>
                                </button>
                            </div>
                        </div>

                        <div class="col-lg-8">
                            <div class="tab-content order-process-tab-content" id="nav-tabContent">
                                <!-- Single Item -->
                                <div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="nav-id-1">
                                    <h3 class="title">Get products from home</h3>
                                    <p>
                                        Give lady of they such they sure it. Me contained explained  education. Vulgar as hearts by garret. Perceived is determine departure explained no forfeited he something an join.
                                    </p>
                                    <ul>
                                        <li>Product will be delivered to your door</li>
                                        <li>The product will be checked before being sent to you.</li>
                                    </ul>
                                </div>
                                <!-- End Single Item -->
        
                                <!-- Single Item -->
                                <div class="tab-pane fade show active" id="tab2" role="tabpanel" aria-labelledby="nav-id-2">
                                    <div class="row align-center">
                                        <h3 class="title">Collect food from the farm</h3>
                                        <p>
                                            Take join of they such they sure it. Me contained explained  education. Vulgar as hearts by garret. Perceived is determine departure explained no forfeited he something an come.
                                        </p>
                                        <ul>
                                            <li>You must come for purchasing the product</li>
                                            <li>The product quality depends on your choice</li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- End Single Item -->
        
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Food Order Process -->

    <!-- Start Farmer 
    ============================================= -->
    <div class="farmer-area default-padding bottom-less bg-gray" style="background-image: url(assets/img/shape/36.png);">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="site-heading text-center">
                        <h5 class="sub-title">Our Farmers</h5>
                        <h2 class="title">Meet Our Farm Experts</h2>
                        <div class="devider"></div>
                        <p>
                            Everything melancholy uncommonly but solicitude inhabiting <br> projection off. Connection stimulated estimating.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">

                        <!-- Single Item -->
                        <div class="col-lg-4 col-md-6 farmer-stye-one">
                            <div class="farmer-style-one-item">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                    <div class="social">
                                        <i class="fas fa-share-alt"></i>
                                        <ul>
                                            <li class="facebook">
                                                <a href="#">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li class="twitter">
                                                <a href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li class="linkedin">
                                                <a href="#">
                                                    <i class="fab fa-linkedin-in"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="info">
                                    <span>Farmer of tomatoes</span>
                                    <h4><a href="#">Aleesha Brown</a></h4>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Item -->
                        <!-- Single Item -->
                        <div class="col-lg-4 col-md-6 farmer-stye-one">
                            <div class="farmer-style-one-item">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                    <div class="social">
                                        <i class="fas fa-share-alt"></i>
                                        <ul>
                                            <li class="facebook">
                                                <a href="#">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li class="twitter">
                                                <a href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li class="linkedin">
                                                <a href="#">
                                                    <i class="fab fa-linkedin-in"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="info">
                                    <span>Farmer of cherry</span>
                                    <h4><a href="#">Kevin Martin</a></h4>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Item -->
                        <!-- Single Item -->
                        <div class="col-lg-4 col-md-6 farmer-stye-one">
                            <div class="farmer-style-one-item">
                                <div class="thumb">
                                    <img src="assets/img/800x800.png" alt="Image Not Found">
                                    <div class="social">
                                        <i class="fas fa-share-alt"></i>
                                        <ul>
                                            <li class="facebook">
                                                <a href="#">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li class="twitter">
                                                <a href="#">
                                                    <i class="fab fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li class="linkedin">
                                                <a href="#">
                                                    <i class="fab fa-linkedin-in"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="info">
                                    <span>Farmer of potato</span>
                                    <h4><a href="#">Sarah Albert</a></h4>
                                </div>
                            </div>
                        </div>
                        <!-- End Single Item -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Farmer -->

    <!-- Start Gallery
    ============================================= -->
    <div class="gallery-area default-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="site-heading text-center">
                        <h5 class="sub-title">Awesome Gallery</h5>
                        <h2 class="title">Gallery Of Our Products</h2>
                        <div class="devider"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12 gallery-content">
                    <div class="magnific-mix-gallery masonary">
                        <div id="portfolio-grid" class="gallery-items colums-2">
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Fruit</span>
                                        <h4><a href="#">Healthy Food</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Vegetables</span>
                                        <h4><a href="#">Organic Vegetables</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Cereals</span>
                                        <h4><a href="#">Juicy Mandrains</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Organic</span>
                                        <h4><a href="#">Cow Milk</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Havest</span>
                                        <h4><a href="#">Crispy Cucumber</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                            <!-- Single Item -->
                            <div class="pf-item">
                                <div class="gallery-style-two">
                                    <img src="assets/img/800x800.png" alt="Thumb">
                                    <div class="overlay">
                                        <span>Fruit</span>
                                        <h4><a href="#">Healthy Food</a></h4>
                                    </div>
                                    <a class="link" href="#"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                            <!-- End Single Item -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Gallery -->

    <!-- Start Contact Us 
    ============================================= -->
    <div class="contact-area bg-gray default-padding" style="background-image: url(assets/img/shape/28.png);">
        <div class="container">
            <div class="row align-center">
                
                <div class="col-tact-stye-one col-lg-7 mb-md-50">
                    <div class="contact-form-style-one">
                        <h5 class="sub-title">Have Questions?</h5>
                        <h2 class="heading">Send us a Massage</h2>
                        <form action="assets/mail/contact.php" method="POST" class="contact-form contact-form">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <input class="form-control" id="name" name="name" placeholder="Name" type="text">
                                        <span class="alert-error"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input class="form-control" id="email" name="email" placeholder="Email*" type="email">
                                        <span class="alert-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <input class="form-control" id="phone" name="phone" placeholder="Phone" type="text">
                                        <span class="alert-error"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group comments">
                                        <textarea class="form-control" id="comments" name="comments" placeholder="Tell Us About Project *"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="submit" name="submit" id="submit">
                                        <i class="fa fa-paper-plane"></i> Get in Touch
                                    </button>
                                </div>
                            </div>
                            <!-- Alert Message -->
                            <div class="col-lg-12 alert-notification">
                                <div id="message" class="alert-msg"></div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-tact-stye-one col-lg-5 pl-60 pl-md-15 pl-xs-15">
                    <div class="contact-style-one-info">
                        <h2>
                            Contact 
                            <span>
                                Information
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M14.4,111.6c0,0,202.9-33.7,471.2,0c0,0-194-8.9-397.3,24.7c0,0,141.9-5.9,309.2,0" style="animation-play-state: running;"></path></svg>
                            </span>
                        </h2>
                        <p>
                            Plan upon yet way get cold spot its week. Almost do am or limits hearts. Resolve parties but why she shewing.
                        </p>
                        <ul>
                            <li class="wow fadeInUp">
                                <div class="icon">
                                    <i class="fas fa-phone-alt"></i>
                                </div>
                                <div class="content">
                                    <h5 class="title">Hotline</h5>
                                    <a href="">+4733378901</a>
                                </div>
                            </li>
                            <li class="wow fadeInUp" data-wow-delay="300ms">
                                <div class="icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                </div>
                                <div class="info">
                                    <h5 class="title">Our Location</h5>
                                    <p>
                                        55 Main Street, The Grand Avenue 2nd Block, <br> New York City
                                    </p>
                                </div>
                            </li>
                            <li class="wow fadeInUp" data-wow-delay="500ms">
                                <div class="icon">
                                    <i class="fas fa-envelope-open-text"></i>
                                </div>
                                <div class="info">
                                    <h5 class="title">Official Email</h5>
                                    <a href="mailto:info@agrul.com.com">info@agrul.com</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End Contact -->

    <!-- Start Blog Area
    ============================================= -->
    <div class="blog-area full-blog blog-grid default-padding bottom-less">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-30">
                    <div class="blog-style-one">
                        <div class="thumb">
                            <a href="#"><img src="assets/img/1500x890.png" alt="Image Not Found"></a>
                            <div class="date"><strong>18</strong> <span>Apr, 22</span></div>
                        </div>
                        <div class="info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <a href="#"><i class="fas fa-user-circle"></i> Admin</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fas fa-comments"></i> 26 Comments</a>
                                    </li>
                                </ul>
                            </div>
                            <h4 class="title">
                                <a href="#">Announcing if attachment resolution sentiments Possession ye no mr unaffected remarkably</a>
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-30">
                    <div class="blog-style-one">
                        <div class="thumb">
                            <a href="#"><img src="assets/img/800x1000.png" alt="Image Not Found"></a>
                            <div class="date"><strong>15</strong> <span>Jul, 22</span></div>
                        </div>
                        <div class="info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <a href="#"><i class="fas fa-user-circle"></i> User</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fas fa-comments"></i> 35 Comments</a>
                                    </li>
                                </ul>
                            </div>
                            <h4 class="title">
                                <a href="#">Considered imprudence of he friendship day</a>
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-30">
                    <div class="blog-style-one">
                        <div class="thumb">
                            <a href="#"><img src="assets/img/800x1000.png" alt="Image Not Found"></a>
                            <div class="date"><strong>24</strong> <span>Feb, 22</span></div>
                        </div>
                        <div class="info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <a href="#"><i class="fas fa-user-circle"></i> User</a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fas fa-comments"></i> 12 Comments</a>
                                    </li>
                                </ul>
                            </div>
                            <h4 class="title">
                                <a href="#">Overcame breeding or concerns removing past</a>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Blog Area -->

    <!-- Start Footer 
    ============================================= -->
    <footer class="bg-dark text-light" style="background-image: url(assets/img/shape/brush-down.png);">
        <div class="container">
            <div class="f-items default-padding">
                <div class="row">
                    
                    <!-- Single Itme -->
                    <div class="col-lg-4 col-md-6 item">
                        <div class="footer-item about">
                            <img class="logo" src="assets/img/logo-light.png" alt="Logo">
                            <p>
                                Happen active county. Winding morning ambition shyness evident to poor. Because elderly new to the point to main success.
                            </p>
                            <form action="#">
                                <input type="email" placeholder="Your Email" class="form-control" name="email">
                                <button type="submit"> Go</button>  
                            </form>
                        </div>
                    </div>
                    <!-- End Single Itme -->

                    <!-- Single Itme -->
                    <div class="col-lg-2 col-md-6 item">
                        <div class="footer-item link">
                            <h4 class="widget-title">Explore</h4>
                            <ul>
                                <li>
                                    <a href="#">About Us</a>
                                </li>
                                <li>
                                    <a href="#">Meet Our Team</a>
                                </li>
                                <li>
                                    <a href="#">News & Media</a>
                                </li>
                                <li>
                                    <a href="#">Services</a>
                                </li>
                                <li>
                                    <a href="#">Contact Us</a>
                                </li>
                                <li>
                                    <a href="#">Volunteers</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Single Itme -->

                    <!-- Single Itme -->
                    <div class="col-lg-3 col-md-6 item">
                        <div class="footer-item recent-post">
                            <h4 class="widget-title">Recent Posts</h4>
                            <ul>
                                <li>
                                    <div class="thumb">
                                        <a href="#">
                                            <img src="assets/img/800x800.png" alt="Thumb">
                                        </a>
                                    </div>
                                    <div class="info">
                                        <div class="meta-title">
                                            <span class="post-date">12 Sep, 2022</span>
                                        </div>
                                        <h5><a href="#">Meant widow equal an share least part. </a></h5>
                                    </div>
                                </li>
                                <li>
                                    <div class="thumb">
                                        <a href="#">
                                            <img src="assets/img/800x800.png" alt="Thumb">
                                        </a>
                                    </div>
                                    <div class="info">
                                        <div class="meta-title">
                                            <span class="post-date">18 Jul, 2022</span>
                                        </div>
                                        <h5><a href="#">Future Plan & Strategy for Consutruction </a></h5>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- End Single Itme -->

                    <!-- Single Itme -->
                    <div class="col-lg-3 col-md-6 item">
                        <div class="footer-item contact">
                            <h4 class="widget-title">Contact Info</h4>
                            <ul>
                                <li>
                                    <div class="icon">
                                        <i class="fas fa-home"></i>
                                    </div>
                                    <div class="content">
                                        <strong>Address:</strong>
                                        5919 Trussville Crossings Pkwy, Birmingham
                                    </div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div class="content">
                                        <strong>Email:</strong>
                                        <a href="mailto:info@validtheme.com">info@validtheme.com</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="icon">
                                        <i class="fas fa-phone"></i>
                                    </div>
                                    <div class="content">
                                        <strong>Phone:</strong>
                                        <a href="tel:2151234567">+123 34598768</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- Single Itme -->
                    
                </div>
            </div>
            <!-- Start Footer Bottom -->
            <div class="footer-bottom">
                <div class="row">
                    <div class="col-lg-6">
                        <p>&copy; Copyright 2022. All Rights Reserved by <a href="#">validthemes</a></p>
                    </div>
                    <div class="col-lg-6 text-end">
                        <ul>
                            <li>
                                <a href="#">Terms</a>
                            </li>
                            <li>
                                <a href="#">Privacy</a>
                            </li>
                            <li>
                                <a href="#">Support</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- End Footer Bottom -->
        </div>
        <div class="shape-right-bottom">
            <img src="assets/img/shape/10.png" alt="Image Not Found">
        </div>
        <div class="shape-left-bottom">
            <img src="assets/img/shape/11.png" alt="Image Not Found">
        </div>
    </footer>
    <!-- End Footer -->
    
    <!-- jQuery Frameworks
    ============================================= -->
    <script src="assets/js/jquery-3.6.0.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/jquery.appear.js"></script>
    <script src="assets/js/jquery.easing.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/modernizr.custom.13711.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/progress-bar.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/count-to.js"></script>
    <script src="assets/js/jquery.scrolla.min.js"></script>
    <script src="assets/js/YTPlayer.min.js"></script>
    <script src="assets/js/TweenMax.min.js"></script>
    <script src="assets/js/validnavs.js"></script>
    <script src="assets/js/main.js"></script>

</body>
</html>