thebola-cms/resources/views/booking.antlers.html

<section>
    <div class="text-md-center text-light section-2" style="background-image: url(./assets/image/dbparticle2.png);">
        <div class="container-fluid p-0 m-0" data-aos="zoom-in" >
            <p class="db-h3 text-highlight">Venues</p>
            <p class="mx-auto p-0 about-paragraph db-h5">You can book venue and field to organize our matches according to you preferred date and time</p>
        </div>
    </div>
</section>
<section id="booking-section">
    <div class="text-light section-5">
        <div class="row g-0 booking-container">

            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
                <div data-fieldid="1" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
                    <div class="position-absolute d-flex flex-wrap booking-details">
                        <div class="mt-auto booking-overlay">
                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD A </p>
                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
                <div data-fieldid="2" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
                    <div class="position-absolute d-flex flex-wrap booking-details">
                        <div class="mt-auto booking-overlay">
                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD B </p>
                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div data-aos="fade-up" class="col-xl-4 position-relative p-0 p-lg-3">
                <div data-fieldid="3" class="position-relative booking-item" style="background-image: url(./assets/image/Group_6775.jpg);">
                    <div class="position-absolute d-flex flex-wrap booking-details">
                        <div class="mt-auto booking-overlay">
                            <p class="text-highlight db-h5 fw-bold p-0"> FIELD C </p>
                            <p class="p-0 m-0"><a class="text-light d-block article-details-href"> Book Now <span><i class="fa-solid fa-angle-right ps-3 text-db"></i></span></a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-0">
                <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
                    <input id="input-booking-date" class="db-input" type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
                </div>
                <div class="col-lg-5 my-4 my-lg-5 px-5 my-lg-0 position-relative">
                    <select id="input-booking-slot" class="db-input" id="cars" name="cars">
                        <option selected>Select Available slot</option>
                      </select>
                </div>
                <div class="col-lg-2 my-5 my-lg-0 d-flex">
                    <a href="https://play.google.com/store/apps/details?id=club.thebola.app" target="_blank" class="nav-link db-btn mx-auto mt-auto" style="font-size: clamp(18px,1vw,23px);font-weight: 500;padding: 0.5rem 3rem;">Book Now</a>
                </div>
            </div>

        </div>
    </div>
</section>
<section>
    <div class="text-light section-8" style="background-image: url(./assets/image/dbparticle3.png);">
        <div data-aos="zoom-in" class="text-center ">
            <p class="db-h3 text-highlight" style="line-height: clamp(3rem,2.5vw,4rem);">Our Mobile Apps Is Coming Soon!</p>
            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Soon all of the amazing features that we provide here will be available in<br/> an exclusive app for both android and iOS.</p>
        </div>
        <div class="container-fluid d-flex flex-wrap justify-content-center">
            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/gplay.png" alt="google-play-img" style="width: 200px;">
            <img data-aos="fade-up" data-aos-delay="100" class="mx-2" src="./assets/image/appstore.png" alt="google-play-img" style="width: 200px;">
        </div>
    </div>
</section>