<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" /> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Exo+2:800&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script> <title>Supreme Sports Arena - Facilities</title> <style> hr.style17 { border-top: 1px solid #8c8b8b; text-align: center; width: 1200px; margin-top: -15px; } hr.style17:after { content: '§'; display: inline-block; position: relative; top: -14px; padding: 0 10px; background: #f0f0f0; color: #8c8b8b; font-size: 18px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); } .jumbotron{ background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/facility0.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; color:white !important; height:660px; font-family: 'Teko', sans-serif; text-align: center } .jumbotron .lead{ padding-top: 160px; font-size: 30px; color: #edbb00; } .jumbotron .display-4{ font-size: 140px; } .page-scroll{ height:1850px; } .card-horizontal { display: flex; flex: 1 1 auto; } .gap100{ padding: 70px 0px; } .container .content h2{ font-weight: bold; color: darkgoldenrod; font-family: 'Exo 2', sans-serif; } .container .content P{ text-align: justify; } @media only screen and (min-width: 992px) and (max-width: 1201px) { hr.style17{ width: 900px; } .jumbotron{ background-position: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .jumbotron .display-4{ font-size: 120px; } hr.style17{ width: 700px; } } @media only screen and (max-width: 767px){ .jumbotron .display-4{ font-size: 100px; } .img-fluid{ margin: 20px auto; margin-top: -40px; } hr.style17{ width: 380px; margin-top: -35px; } .page-scroll{ height: 3150px; } } </style> </head> <body> <?php session_start(); // if don't have session user..then if(! isset($_SESSION['memname'])) { session_write_close(); die("<script>window.location.href='arena_facilities.php';</script>"); } ?> <!--Navigation Bar--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="home.php"><img alt="Brand" src="images/logo.png" style="width: 80px; height: 80px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto" style="padding-right: 50px;"> <li class="nav-item"> <a class="nav-link" href="home.php">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown active"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Arena </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="arena_facilities.php">Arena Facilities</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="badminton_court_booking.php">Badminton Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="volleyball_court_booking.php">Volleyball Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="squash_court_booking.php">Squash Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="futsal_court_booking.php">Futsal Court Booking</a> <div class="dropdown-divider"></div> </div> </li> <li class="nav-item"> <a class="nav-link" href="shop.php">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="about_us.php">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="faq.php">FAQ</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Extras </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="member_profile.php">Profile</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="booking_history.php">Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="my_purchases.php">My Purchase</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="logout.php">Logout</a> <div class="dropdown-divider"></div> </div> </li> </ul> </div> </nav> <div class="jumbotron jumbotron-fluid"> <div class="container"> <p class="lead">Supreme Sports Arena</p> <h1 class="display-4">FACILITIES</h1> </div> </div> <div class="page-scroll"> <section> <div class="container"> <div class="row gap100 content"> <div class="col-md-4"> <img src="images/guardhouse.jpg" class="img-fluid" alt=""> </div> <div class="col-md-8"> <h2>PROFESSIONAL SECURITY GUARDHOUSE</h2> <p>We take safety and security very seriously, as the welfare and the comfort of our guests are our No.1 priority. Therefore, we have CCTV monitoring as a third-eye while security guards on duty 24 hours around the arena’s compound. With these brave watchmen, you will never have to worry about your personal safety when you are around the sports arena.</p> </div> </div> </div> </section> <hr class="style17"> <section> <div class="container"> <div class="row gap100 content"> <div class="col-md-4"> <img src="images/parking.jpg" class="img-fluid" alt=""> </div> <div class="col-md-8"> <h2>UNDERGROUND INDOOR PARKING</h2> <p>For the convenience of customers, we do provide high security underground parking slot for you. You will never have to worry about your vehicles again during your time spent at Sports Arena. This is because the underground parking areas are under the survillence of CCTV. Thus you can enjoy your day in our Sports Arena.</p> </div> </div> </div> </section> <hr class="style17"> <section> <div class="container"> <div class="row gap100 content"> <div class="col-md-4"> <img src="images/lockers.webp" class="img-fluid" alt=""> </div> <div class="col-md-8"> <h2>PERSONAL INVENTORY LOCKERS</h2> <p>Lockers also be provided to you in a covered room under the survillence of security man. You can keep your important personal invenotry here before you go to carry out your sports activities in our Sports Arena. So that you don't have to worry about your personal inventory during your sporting sessions.</p> </div> </div> </div> </section> <hr class="style17"> <section> <div class="container"> <div class="row gap100 content"> <div class="col-md-4"> <img src="images/shower.jpg" class="img-fluid" alt=""> </div> <div class="col-md-8"> <h2>SEPERATED SHOWER ROOM</h2> <p>For the convenience of customers, we do provide seperated shower room for both male and female room. You may take shower if you want to freshen your body after sporting sessions. For the privacy of customers, all the shower room are covered.</p> </div> </div> </div> </section> <hr class="style17"> <section> <div class="container"> <div class="row gap100 content"> <div class="col-md-4"> <img src="images/canteen.jfif" class="img-fluid" alt=""> </div> <div class="col-md-8"> <h2>INDOOR MINI CANTEEN</h2> <p>Our Sports Arena also provide mini canteen area for you to have simple meal after heavy sporting session to fill up your tummy. The mini canteen do provide various type of cuisine for you so that you able to find meals that suite your appetite.</p> </div> </div> </div> </section> </div> <!--Footer--> <footer> <div class="footer-top"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12 segment-one md-mb-30 sm-mb-30"> <h3> <font style="color: red;">Supreme</font> Sports Arena </h3> <p>Supreme Sports Arena is a newly built sports arena which include badminton, squash, volleyball and futsal. The Arena is provided with high quality facilities for the sports enthusiasts.</p> </div> <div class="col-md-4 col-sm-6 col-xs-12 segment-two md-mb-30 sm-mb-30"> <h2>Quick Links</h2> <ul> <li><a href="home.php">Home</a></li> <li><a href="arena_facilities.php">Arena Facilities</a></li> <li><a href="shop.php">Shop</a></li> <li><a href="about_us.php">About Us</a></li> <li><a href="faq.php">FAQ</a></li> </ul> </div> <div class="col-md-4 col-sm-6 col-xs-12 segment-three md-mb-30 sm-mb-30"> <h2>Contact Us</h2> <p><i class="fa fa-phone"></i> 012-3456789 (John Siena)</p> <p><i class="fas fa-envelope"></i> supremesportsarena@gmail.com</p> <a href="https://www.facebook.com/Supreme-Sports-Arena-113298846750542/?modal=admin_todo_tour" target="_blank"><i class="fab fa-facebook-square"></i></a> <a href="https://www.instagram.com/supreme_sports_arena/" target="_blank"><i class="fab fa-instagram"></i></a> <a href="https://twitter.com/ArenaSupreme" target="_blank"><i class="fab fa-twitter"></i></a> </div> </div> </div> </div> <p class="footer-bottom-text">All Right reserved by ©Supreme Sports Arena 2020</p> </footer> <!--Bootstrap js--> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--To make dropdown menu become hover accross--> <script> const $dropdown = $(".dropdown"); const $dropdownToggle = $(".dropdown-toggle"); const $dropdownMenu = $(".dropdown-menu"); const showClass = "show"; $(window).on("load resize", function () { if (this.matchMedia("(min-width: 768px)").matches) { $dropdown.hover( function () { const $this = $(this); $this.addClass(showClass); $this.find($dropdownToggle).attr("aria-expanded", "true"); $this.find($dropdownMenu).addClass(showClass); }, function () { const $this = $(this); $this.removeClass(showClass); $this.find($dropdownToggle).attr("aria-expanded", "false"); $this.find($dropdownMenu).removeClass(showClass); } ); } else { $dropdown.off("mouseenter mouseleave"); } }); //let the nvbar stick on top // When the user scrolls the page, execute myFunction window.onscroll = function () { myFunction() }; // Get the navbar var navbar = document.getElementById("navbar"); // Get the offset position of the navbar var sticky = navbar.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script> </body> </html>