<?php
$page = basename($_SERVER['PHP_SELF'], '.php');
?>
<header class="header">
    <nav class="navbar navbar-expand-xl navbar-dark stroke bg-transparent">
        <div class="container">
            <div class="header-logo-main">
                <a class="navbar-brand" href="#">
                    <img src="assets/images/logo.png" />
                </a>
                <div class="soclia-media-main">


                    <a class="socialContainer containerThree" href="#">

                        <div class="socialSvg linkdinSvg">
                            <i class="fa fa-facebook" aria-hidden="true"></i>

                        </div>
                    </a>
                    <a class="socialContainer containerTwo" href="#">

                        <div class="socialSvg twitterSvg">
                            <i class="fa fa-twitter" aria-hidden="true"></i>
                        </div>
                    </a>

                    <a class="socialContainer containerThree" href="#">

                        <div class="socialSvg linkdinSvg">
                            <i class="fa fa-linkedin" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
            </div>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="navbar_main">
                <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link " href="#home">Home</a>
                        </li>
                         <li class="nav-item"  >
                            <a class="nav-link " href="#book">Book</a>
                        </li>
                     
                        <li class="nav-item">
                            <a class="nav-link " href="#about">About Aurthor</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="#blog">News</a>
                        </li>


                        <!--<li class="nav-item">-->
                        <!--    <a class="nav-link " href="#">-->
                        <!--        Contact-->
                        <!--    </a>-->
                        <!--</li>-->
                    </ul>
                </div>
                <div class="my-2 my-lg-0 d-xl-block d-none">
                    <a href="#" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal" class="btn btn-theme">Order Today</a>
                </div>
            </div>
        </div>
    </nav>
</header>


<!-- popup -->
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-md model-sec">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row align-items-center">
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="model-discount">
                            <div class="d-block text-center align-items-center">
                                <div class="animate-div"><span>Order Your Book</span></div>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <hr>
                            <form method="POST" action="#" class="needs-validation" novalidate>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                        <div class="mb-3">
                                            <label for="exampleInputEmail1" class="form-label">Name</label>
                                            <input type="text" class="form-control model-input" placeholder="Enter Name"
                                                pattern="[A-Za-z ]+" name="name" required>
                                        </div>
                                    </div>
                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                        <div class="mb-3">
                                            <label for="exampleInputEmail1" class="form-label">Email</label>
                                            <input type="email" class="form-control model-input"
                                                placeholder="Enter Email" name="email"
                                                pattern="[^\s@]+@[a-zA-Z]+[^0-9@]+\.[cC][oO][mM]$" required>
                                        </div>
                                    </div>
                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                        <div class="mb-3">
                                            <label for="exampleInputEmail1" class="form-label">Contact No.</label>
                                            <input type="number" class="form-control model-input"
                                                placeholder="Enter Contact No." name="phone"
                                                onkeypress="if(this.value.length==12) return false;" required>
                                        </div>
                                    </div>
                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                        <button type="submit" class="btn btn btn-theme mt-1 w-100">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end -->    <!-- End header -->