<!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">
<title>Supreme Sports Arena - Register</title>

<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="loginregister.css">
<script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">

<style>
.input{
    font-size: 14px;
}
.input-div > div{
	height: 25px;
}
.input-div > div h5{
	font-size: 16px;
}
.input-div.focus div h5{
	font-size: 14px;
}
</style>
</head>

<body>
    <img class="wave" src="images/wave.png">
    <div class="container">
        <div class="img">
            <img src="images/register.svg">
        </div>
        <div class="login-container">
            <form action="register.php" method="POST">
                <img src="images/logo.png" class="logo">
                <h2 style="font-size:1.8rem;">Register Now</h2>
                <div class="input-div">
                    <div class="i">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <h5>Username</h5>
                        <input class="input" type="text" id="user" name="user" required="required">
                    </div>
                </div>
                <div class="input-div">
                    <div class="i">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div>
                        <h5>Password</h5>
                        <input class="input" type="password" id="pass" name="pass" required="required">
                    </div>
                </div>
                <div class="input-div">
                    <div class="i">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div>
                        <h5>Confirm Password</h5>
                        <input class="input" type="password" id="confirmpass" name="confirmpass" required="required">
                    </div>
                </div>
                <div class="input-div">
                    <div class="i">
                        <i class="fas fa-map-pin"></i>
                    </div>
                    <div>
                        <h5>Address</h5>
                        <input class="input" type="text" id="address" name="address" required="required">
                    </div>
                </div>
                <div class="input-div">
                    <div class="i">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div>
                        <h5>Email</h5>
                        <input class="input" type="email" id="email" name="email" required="required">
                    </div>
                </div>
                <div class="input-div">
                    <div class="i">
                        <i class="fa fa-phone"></i>
                    </div>
                    <div>
                        <h5>Phone</h5>
                        <input class="input" type="text" id="phone" name="phone" required="required">
                    </div>
                </div>
                <input type="submit" class="btn" value="register">
                <a href="login.html">Already have an account?</a>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="loginregister.js"></script>
</body>

</html>