book.html

<!-- -------------------------JAI SHREE RAM----------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book</title>


    <!-- swiper css link  -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />


    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />


    <!-- custom css file link  -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- header section starts  -->
    <section class="header">
        <a href="home.html" class="logo">travel.</a>

        <nav class="navbar">
            <a href="Home.html">home</a>
            <a href="about.html">about</a>
            <a href="package.html">package</a>
            <a href="book.html">book</a>
            <a href="gallery.html">Gallery</a>
        </nav>

        <div id="menu-btn" class="fas fa-bars"></div>

    </section>

    <!-- header section ends here  -->
    
    <div class="heading" style="background: url(images/beach-3.jpg);">
            <h1>Book Now</h1>
    </div>


    <!-- Booking Section Starts here  -->
    
    <section class="booking">

        <h1 class="heading-title">book your trip!</h1>

        <form action="#" class="book-form">

            <div class="flex">
                <div class="inputBox">
                    <span>Name : </span>
                    <input type="text" name="name" placeholder="Enter Your Name" >
                </div>
                <div class="inputBox">
                    <span>Email : </span>
                    <input type="text" name="email" placeholder="Enter Your Email" >
                </div>
                <div class="inputBox">
                    <span>Phone : </span>
                    <input type="number" name="phone" placeholder="Enter Your Number" >
                </div>
                <div class="inputBox">
                    <span>Address : </span>
                    <input type="text" name="address" placeholder="Enter Your Address" >
                </div>
                <div class="inputBox">
                    <span>Where To : </span>
                    <input type="text" name="location" placeholder="Place you want to visit " >
                </div>
                <div class="inputBox">
                    <span>How Many : </span>
                    <input type="number" name="guests" placeholder="number of guests" >
                </div>
                <div class="inputBox">
                    <span>Arrivals : </span>
                    <input type="date" name="arrivals" >
                </div>
                <div class="inputBox">
                    <span>leaving : </span>
                    <input type="date" name="leaving" >
                </div>
            </div>
                
                <input type="submit" value="submit" class="btn" name="send">


        </form>

    </section>



    <!-- Booking section ends here  -->















    <!-- footer section starts here  -->
    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>quick links</h3>
                <a href="home.html"><i class="fas fa-angle-right"></i>home</a>
                <a href="about.html"><i class="fas fa-angle-right"></i>about</a>
                <a href="package.html"><i class="fas fa-angle-right"></i>package</a>
                <a href="book.html"><i class="fas fa-angle-right"></i>book</a>
                <a href="book.html"><i class="fas fa-angle-right"></i>gallery</a>
            </div>

            <div class="box">
                <h3>extra links</h3>
                <a href="#"><i class="fas fa-angle-right"></i>ask questions</a>
                <a href="#"><i class="fas fa-angle-right"></i>about us</a>
                <a href="#"><i class="fas fa-angle-right"></i>privacy policy</a>
                <a href="#"><i class="fas fa-angle-right"></i>terms of use</a>
            </div>
            
            <div class="box">
                <h3>Contact Info</h3>
                <a href="#"><i class="fas fa-phone"></i> +123-456-7890</a>
                <a href="#"><i class="fas fa-phone"></i> +111-222-3333</a>
                <a href="#"><i class="fas fa-envelope"></i> autocrats@gmail.com </a>
                <a href="#"><i class="fas fa-map"></i> Lucknow , india - 222001 </a>
            </div>

            <div class="box">
                <h3>follow us</h3>
                <a href="#"><i class="fab fa-facebook-f"></i> facebook </a>
                <a href="#"><i class="fab fa-twitter"></i> twitter </a>
                <a href="#"><i class="fab fa-instagram"></i> instagram </a>
                <a href="#"><i class="fab fa-linkedin"></i> linkedin </a>
            </div>

        </div>


        <div class="credit">
            created by Team <span>Boolean Autocrats</span> | all rights reserved!</div>


    </section>

    <!-- footer section ends here  -->







    <!-- swiper js link  -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>


    <!-- custom javascript file link  -->
    <script src="script.js"></script>


</body>

</html>