→ Anonymous
→ Agriculture Website for Live project_WDD

Agriculture Website for Live project_WDD

This bootstrap css example is contributed by Anonymous, on 13-Jun-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Footer Header Card Button Form Carousel

Author Anonymous

275

v.4.6

Fork Fullscreen

<body>

<header>
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="./index.html"><img
                        src="./assets/images/Agricultural Information Hub logo.jfif" alt=""></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./farming-guide.html">Farming Guide</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./crop-details.html">Crop Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./pest-control.html">Pest Control </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./contact-us.html">Contact Us</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>

</header>
    <main>

<section>
            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="./assets/images/image-1.avif" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Agricultural Information Hub</h5>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./assets/images/image-2.avif" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Agricultural Information Hub</h5>
                            <p>Some representative placeholder content for the second slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="./assets/images/image-3.avif" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Agricultural Information Hubl</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </section>

<section class="py-5">
            <div class="container">
                <div class="row align-items-center ">
                    <div class="col-md-6 h-100 gap-5">
                        <h2>Introduction</h2>
                        <p>The Agricultural Information Hub is a platform dedicated to providing farmers with valuable
                            agricultural information and resources to help them make informed decisions about their
                            crops and farming practices. Our mission is to connect farmers with experts, professionals,
                            and resources to support their agricultural endeavors.</p>
                    </div>
                    <div class="col-md-6 h-100 d-flex justify-content-center">
                        <img class="farmer-img" src="./assets/images/farmer.avif" alt="">
                    </div>

</div>
            </div>
        </section>

<div class="py-5">
                    <h2>Featured Sections</h2>
                </div>
                <div class="row g-2">
                    <div class="col-md-4">
                        <div class="card text-center h-100 p-1">
                            <div class="card-body">
                                <h5 class="card-title">Farming Guide
                                </h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the card's content.</p>

</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card text-center h-100  p-1">
                            <div class="card-body">
                                <h5 class="card-title">Crop Details
                                </h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the card's content.</p>

</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card text-center h-100  p-1">
                            <div class="card-body">
                                <h5 class="card-title">Pest Control
                                </h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the
                                    bulk of the card's content.</p>

</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section>
            <div class="container py-5">
                <h1 class="fw-bold">Guides</h1>
                <div class="row ">
                    <div class="col-md-12 g-3">
                        <div class="card d-md-flex flex-md-row align-items-center p-3">

<div class="ms-4 pt-2">
                                <h2 class="fw-bold">Crop Farming</h2>
                                <p><span class="fw-bold">Crop Selection and Planning</span>: Decide based on market
                                    demand, climate adaptability, and soil conditions.</p>
                                <p><span class="fw-bold">Soil Preparation Soil Preparation</span>: Conduct soil tests to
                                    determine fertility, pH, and texture.</p>
                                <p><span class="fw-bold">Planting and Maintenance</span>: Use certified, high-yield, and
                                    pest-resistant seeds. Precision placement of seeds using machinery.</p>

</div>