sports-arena-website / index.php
index.php
Raw
<!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/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="home.css">
    <link rel="stylesheet" href="animate.css">
    <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Concert+One&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=Caladea&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>

    <title>Supreme Sports Arena - Home</title>

    <style>
        .temp{
            padding-top: 10px;
        }
        @media only screen and (max-width: 458px) {
            .helo{
                padding-top: 0px;
            }
            .temp{
                padding-top: 0px;
                
            }
            .jumbotron{
                height: 460px;
            }
        }
    </style>
</head>

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

<header>
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="home.php"><img alt="Brand" src="images/logo.png" style="width: 70px; height: 70px;margin-top: -30px;"></a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="home.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Arena <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="arena_facilities.php">Arena Facilities</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="badminton_court_booking.php">Badminton Court Booking</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="volleyball_court_booking.php">Volleyball Court Booking</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="squash_court_booking.php">Squash Court Booking</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="futsal_court_booking.php">Futsal Court Booking</a></li>
                        </ul>
                    <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>
                    <li><a href="login.html">Login</a></li>
                </ul>
                 
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            <li data-target="#carousel-example-generic" data-slide-to="4"></li>

        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="banner" style="background-image: url(images/badminton.jpg);"></div>
                <div class="carousel-caption">
                    <h2 class="animated bounceInRight" style="animation-delay: 1s"><span>Badminton</span> Sports</h2>
                    <h3 class="animated bounceInLeft" style="animation-delay: 2s">High Quality Facilities Court</h3>
                    <p class="animated bounceInRight" style="animation-delay: 3s"><a href="badminton_court_booking.php">Explore Now</a></p>
                </div>
            </div>
            <div class="item">
                <div class="banner" style="background-image: url(images/futsal.jpg);"></div>
                <div class="carousel-caption">
                    <h2 class="animated slideInDown" style="animation-delay: 1s"><span>Futsal</span> Sports</h2>
                    <h3 class="animated fadeInUp" style="animation-delay: 2s">High Quality Facilities Court</h3>
                    <p class="animated zoomIn" style="animation-delay: 3s"><a href="futsal_court_booking.php">Explore Now</a></p>
                </div>
            </div>
            <div class="item">
                <div class="banner" style="background-image: url(images/volleyball.jfif);"></div>
                <div class="carousel-caption">
                    <h2 class="animated zoomIn" style="animation-delay: 1s"><span>Volleyball</span> Sports</h2>
                    <h3 class="animated fadeInLeft" style="animation-delay: 2s">High Quality Facilities Court</h3>
                    <p class="animated zoomIn" style="animation-delay: 3s"><a href="volleyball_court_booking.php">Explore Now</a></p>
                </div>
            </div>
            <div class="item">
                <div class="banner" style="background-image: url(images/squash.jpg);"></div>
                <div class="carousel-caption">
                    <h2 class="animated bounceInRight" style="animation-delay: 1s"><span>Squash</span> Sports</h2>
                    <h3 class="animated fadeInUp" style="animation-delay: 2s">High Quality Facilities Court</h3>
                    <p class="animated bounceInLeft" style="animation-delay: 3s"><a href="squash_court_booking.php">Explore Now</a></p>
                </div>
            </div>
            <div class="item">
                <div class="banner" style="background-image: url(images/store.jpg);"></div>
                <div class="carousel-caption">
                    <h2 class="animated fadeInDown" style="animation-delay: 1s">Sports <span>Accessories</span></h2>
                    <h3 class="animated bounceInRight" style="animation-delay: 2s">Available in Sports Store</h3>
                    <p class="animated bounceInLeft" style="animation-delay: 3s"><a href="shop.php">Explore Now</a></p>
                </div>
            </div>
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</header>

    <!--Content here-->
    <div class="container">
        <div class="row" style="margin-top: 20px;">
            <h2 class="labelh2" style="text-align: center;">EXPLORE OUR SPORTS ARENA</h2>
            <hr class="sep-3" />
            <p style="text-align: center; font-weight: bold;padding-left: 30px;padding-right: 30px;"><span style="color: #edbb00;">Supreme Sports Arena</span> provides four main type of courts with high quality of facilities. View our Sports Arena courts for more detail through below.</p>
            <div class="col-sm-8 col-md-6">
                <div class="thumbnail">
                    <img src="images/badminton_court.webp" alt="badminton court">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Badminton Court</h3>
                        <p style="text-align: justify;">Supreme Sports Arena provide 6 rubber surface badminton courts with high quality nets for badminton enthusiasts to book the courts. For more details, please click on the button below to explore more.</p>
                        <p><a href="badminton_court_booking.php" class="btn btn-primary" role="button">Explore Now!</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 col-md-6">
                <div class="thumbnail">
                    <img src="images/volleyball_court.jpg" alt="volleyball court">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Volleyball Court</h3>
                        <p style="text-align: justify;">Supreme Sports Arena provide 4 indoor modern style volleyball courts with high quality
                            nets for volleyball enthusiasts to book the courts. For more details, please click on the button below to explore
                            more.</p>
                        <p><a href="volleyball_court_booking.php" class="btn btn-primary" role="button">Explore Now!</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 col-md-6">
                <div class="thumbnail">
                    <img src="images/squash_court.jpg" alt="squash court">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Squash Court</h3>
                        <p style="text-align: justify;">Supreme Sports Arena provide 6 transparent inddor squash courts with premium glass wall for squash enthusiasts to book the courts. For more details, please click on the button below to explore
                            more.</p>
                        <p><a href="squash_court_booking.php" class="btn btn-primary" role="button">Explore Now!</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 col-md-6">
                <div class="thumbnail">
                    <img src="images/futsal_court.jpg" alt="futsal court">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Futsal Court</h3>
                        <p style="text-align: justify;">Supreme Sports Arena provide 4 rubber surface futsal courts with high quality goal doors for futsal enthusiasts to book the courts. For more details, please click on the button below to explore
                            more.</p>
                        <p><a href="futsal_court_booking.php" class="btn btn-primary" role="button">Explore Now!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="jumbotron helo" style="margin-bottom: 0px;">
        <div class="container">
            <h1 class="labelh1" style="color:orange;font-weight: bold; font-family: 'Concert One', cursive;" >NEED SPORTS ACCESORIES?</h1>
            <p style="font-family: 'Acme', sans-serif;">Find out more branded sports accessories in our <span style="color: #edbb00;">sports arena store</span></p>
            <p style="font-family: 'Acme', sans-serif; text-align: justify;">Our products are originally imported from the particular branded company. The products can be verified through the certificates given by companies. The brands included Nike, Adidas, Puma, Skechers, Asics, Northface and more!</p>
            <p class="temp"><a class="btn btn-primary btn-lg" href="shop.php" role="button">Visit Now</a></p>
        </div>
    </div>
    
    
    <div class="container">
        <div class="row" style="margin-top: 20px;">
            <h2 class="labelh2" style="text-align: center;">LATEST SPORTS NEWS</h2>
            <hr class="sep-3" />
            <p style="text-align: center; font-weight: bold;padding-left: 30px;padding-right: 30px;">Following are the sports news happening around the world and within <span
                    style="color: #edbb00;">Supreme Sports Arena</span></p>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <img src="images/news1.jpg" alt="" class="image">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Chelsea knock Liverpool out of FA Cup</h3>
                        <p style="text-align: justify;">The result meant Liverpool suffered their second successive defeat of this stellar season in a highly-competitive
                        encounter at Stamford Bridge. For more info, click on the button below.</p>
                        <p><a href="https://www.bbc.com/sport/football/51698397" target="blank" class="btn btn-primary" role="button">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <img src="images/news2.jpg" alt="" class="image">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">England to host 2021 European Mixed Team Championships</h3>
                        <p style="text-align: justify;">England will host the badminton 2021 European Mixed Team Championships in Milton Keynes. For more info, click on the button below.</p>
                        <p><a href="https://www.bbc.com/sport/badminton/51460191" target="blank" class="btn btn-primary" role="button">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <img src="images/news3.jpg" alt="" class="image">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Simpson calls time on squash career</h3>
                        <p style="text-align: justify;">Guernsey squash player Chris Simpson retires at the age of 32 after a 14-year professional careen. For more info, click on the button below.</p>
                        <p><a href="https://www.bbc.com/sport/squash/50578423" target="blank" class="btn btn-primary" role="button">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <img src="images/news4.jpg" alt="" class="image">
                    <div class="caption" style="padding-left:20px; padding-right: 20px;">
                        <h3 style="color: black;">Yonex Voltrix 200 Promotion</h3>
                        <p style="text-align: justify;">The brand new Yonex Voltrix 200 racket is now on promotion at Supreme Sports Arena Store. Limited amount onstock. For more info, click on the button below.</p>
                        <p><a href="shop.php" class="btn btn-primary" role="button">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        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");
            }
        });

        //scroll to certain height change bgcolor for nav
        $(function () {
                $(document).scroll(function () {
                    var $nav = $(".navbar-fixed-top");
                    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
                });
            });

        
    </script>
</body>

</html>