about_us_al.php · sports-arena-website

<!DOCTYPE html>
<html>

<?php
session_start();
// if don't have session user..then
if(! isset($_SESSION['memname']))
{
session_write_close();
die("<script>window.location.href='about_us.php';</script>");
}
?>

<!--Header-->

<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=Poppins&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

    <title>About Us</title>

    <style>
        body {
            padding: 0 auto;
            margin: 0 auto;
            background-color: whitesmoke;
        }
        
        p {
            text-align: justify;
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 1.3em;
        }
        .box-center{
            margin:0 auto;
        }
        .intro-bg{
            background-image: url(images/aboutus-bg-img.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            margin: 0 auto;
        }
        .vision ul, .mission ul{
            list-style-image: url('images/volleyball_icon.png');
        }
        .intro{
            padding: 20px;
        }

        .intro h1 {
            text-align: center;
            font-family: 'Teko', sans-serif;
            font-size: 3.0em;
            margin-top: 20px;
            
        }
        .box-center{
            width: 500px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 20px; 
            padding: 10px; 
        }
        .intro p {
            text-align: center;    
            font-family: 'Lobster', cursive;  
            font-size: 22px;
        }
        .vision,
        .mission {
            background-color: whitesmoke;
            border: 1px grey solid;
            margin: 0;
        }
        
        .vision h1,
        .mission h1,
        .location h1 {
            font-family: 'Teko', sans-serif;
            text-align: center;
            font-size: 2.8em;
            color: #CF161E;
        }
        /*iphone 8*/
        
        @media only screen and (min-width: 360px) and (max-width: 667px) {
            .intro h1 {
                padding-top: 35px;
                font-size: 40px;
            }
            .box-center {
                width: 340px;
                font-size: 12px;
            }
            .vision h1,
            .mission h1 {
                padding-top: 20px;
                font-size: 28px;
            }
            .vision p,
            .mission p {
                font-family: 'Teko', sans-serif;
                font-size: 18px;
            }
            .iframe-location {
                height: 300px;
                width: 400px;
            }
        }
    </style>
</head>

<body>
    <!--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">
                    <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>
                <li class="nav-item">
                    <a class="nav-link" href="shop.php">Shop</a>
                </li>
                <li class="nav-item active">
                    <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>
    <!--Content-->
        <div class="intro-bg">
            <div class="container-fluid intro">
                <!--title-->
                <h1>
                    <font style="color:#b83321;">Supreme</font>
                    <font style="color:#d1b32d;">Sports Arena</font>
                </h1>
                <!--Information of Supreme Sports Arena-->
                <div class="box-center">
                <p>
                    Supreme Sports Arena is formed by John Siena with his team members on June 2019 in Kuala Lumpur, Malaysia. <br><br> We had provided a lot of facilities for all sportsman. But first, you should register as a member! <a href="register.html">Register now?</a><br>                <br> As a member, you are free to use our court booking facility. The sports involved <strong>Badminton</strong>, <strong>Futsal</strong>, <strong>Volleyball</strong>, and <strong>Squash</strong>.<br><br> We also have <a href="shop.php">Online Shop</a>                which is selling sports accessories.
                </p>
                </div>
            </div>
        </div>

        <div class="container-fluid"></div>

        <br style="clear: both;" />

        <!--Mission and Vission-->
        <div class="row">
            <div class="container-fluid vision col-sm-6">
                <h1>
                    The Vision
                </h1>
                <p>
                    <ul>
                        <li>
                            To be preferred sports and entertainment hub in the region.
                        </li>
                        <li>
                            To make people healhtier.
                        </li>
                    </ul>
                </p>
            </div>
            <div class="container-fluid mission col-sm-6">
                <h1>
                    The Mission
                </h1>
                <p>
                    <ul>
                        <li>
                            Providing world class facilities, services and seamless user experience to the event organizers, athletes, artists, fans, corporate, tourist and public.
                        </li>
                        <li>
                            Showcasing Sports, Entertainment and Educational content for the community, commercial and tourism industry.
                        </li>
                        <li>
                            The main reference for Stadium Management in Malaysia.
                        </li>
                    </ul>
                </p>
            </div>
        </div>

        <br style="clear: both;" />

        <!--location-->
        <div class="container-fluid location">
            <h1>
                Locate Us
            </h1>
        </div>

        <div class="container-fluid">
            <p style="text-align: center;">
                <iframe class="iframe-location"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3092.904317458549!2d-76.84036798469424!3d39.17689587952854!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7de26ee5a88c9%3A0x49a5c11ea44d994b!2sSupreme%20Sports%20Club!5e0!3m2!1sen!2smy!4v1586174599462!5m2!1sen!2smy"
                    height="400" width="1000" frameborder="0" style="border:0;" allowfullscreen="on" style="text-align: center;"></iframe>
            </p>
        </div>
        <br/>
        <br/>
    </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> &nbsp; 012-3456789 (John Siena)</p>
                        <p><i class="fas fa-envelope"></i> &nbsp; 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 &copy;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>