<!DOCTYPE html> <html lang="en"> <head> {% include "title.html" %} <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="fonts/icomoon/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" href="css/owl.carousel.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" href="css/owl.theme.default.min.css"> <link rel="stylesheet" href="css/jquery.fancybox.min.css"> <link rel="stylesheet" href="css/bootstrap-datepicker.css"> <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css"> <link rel="stylesheet" href="css/aos.css"> <link href="css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="css/style.css"> </head> <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300"> <div class="site-wrap"> <div class="site-mobile-menu site-navbar-target"> <div class="site-mobile-menu-header"> <div class="site-mobile-menu-close mt-3"> <span class="icon-close2 js-menu-toggle"></span> </div> </div> <div class="site-mobile-menu-body"></div> </div> {% include "navbar.html" %} <div class="intro-section" style="background-image: url('images/hero_1.jpg');"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-md-7 mx-auto text-center" data-aos="fade-up"> <h1>Login</h1> <p>Come on in and buy a card today!</p> <p><a href="#" class="btn btn-primary">Explore Now</a></p> </div> </div> </div> </div> <div class="site-section"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-5"> {% if failed %} <h2 class="mb-5 text-black"><strong>Login Failed</strong></h2> <p> Please try again </p> {% else %} <h2 class="mb-5 text-black"><strong>Login</strong></h2> {% endif %} <div class="row"> <div class="col-md-12 form-group"> <form action="/login.html" method="POST"> <label for="uname">Username/Email</label> <input type="username" id="uname" name="uname" class="form-control form-control-lg"> </div> </div> <div class="row"> <div class="col-md-12 form-group"> <label for="pword">Password</label> <input type="password" id="pword" name="pword" class="form-control form-control-lg"> </div> </div> <div class="row"> <div class="col-12"> <input type="submit" value="Login" class="btn btn-primary btn-lg px-5"> </div> </div> {% csrf_token %} </form> </div> </div> </div> </div> {% include "testimonials.html" %} {% include "footer.html" %} <!-- loader --> <div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#51be78"/></svg></div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery-migrate-3.0.1.min.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/owl.carousel.min.js"></script> <script src="js/jquery.stellar.min.js"></script> <script src="js/jquery.countdown.min.js"></script> <script src="js/bootstrap-datepicker.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/aos.js"></script> <script src="js/jquery.fancybox.min.js"></script> <script src="js/jquery.sticky.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script> <script src="js/main.js"></script> </body> </html>