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

<section>
    <div class="text-md-center text-light page-highlight" 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 text-center">

            <div class="col-12 position-relative px-3 mb-5">
                <select id="select-location" class="db-input" id="cars" name="cars">
                    <option id="default-input-select-location" value="default">Select City and State</option>
                  </select>
            </div>

            <div id="field-location-container" class="container-fluid p-0 col-12 row text-center my-5">
                <p class="db-h5 text-highlight title">SELECT LOCATION</p>
                <div id="field-location-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn" style="display: none;">
                    <div class="position-relative location-item field-location-img">
                        <div class="position-absolute d-flex flex-wrap field-details">
                            <div class="mt-auto d-flex location-overlay"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="field-container" class="container-fluid p-0 col-12 row my-5">
                <p class="db-h5 text-highlight">SELECT FIELD</p>
                <div id="field-template" class="col-xl-4 position-relative p-0 p-lg-3 animate__animated animate__fadeIn field-c" style="display: none;">
                    <div class="position-relative field-item field-img">
                        <div class="position-absolute d-flex flex-wrap field-details">
                            <div class="mt-auto field-overlay text-start">
                                <p class="text-highlight db-h5 fw-bold m-0 field-text"></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>

            <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">
                    <button id="booknow-btn" class="nav-link db-btn mx-auto mt-auto">
                        Book Now
                    </button>
                </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 Now Available!</p>
            <p class="mx-auto p-0 db-h5 mb-5" style="line-height: clamp(1.7rem,2.5vw,3rem);">Download the app for bookings and other important notifications in<br/> an exclusive app for both android and iOS.</p>
        </div>

        {{ partial:partials/appsdownload }}

    </div>
</section>