<?php
  include("includes/connection.php");
?>
    <!DOCTYPE html>
    <html lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <?php include("includes/head.php"); ?>
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
         <title>PROGRAMERS INTERNATIONAL</title>
        <link href="css/robust.css" rel="stylesheet">
        
        <style>
            body {font-family: Arial, Helvetica, sans-serif;}

            input[type=text], input[type=password]
            {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
            }

            button 
            {
            background-color: #04AA6D;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            }

            button:hover 
            {
            opacity: 0.8;
            }

            .cancelbtn 
            {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
            }

            .imgcontainer 
            {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
            }

            img.avatar 
            {
            width: 40%;
            border-radius: 50%;
            }

            .container 
            {
            padding: 16px;
            }

            span.psw
            {
            float: right;
            padding-top: 16px;
            }

            .modal 
            {
            display: none; 
            position: fixed; 
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
            }

            .modal-content 
            {
            background-color: #fefefe;
            margin: 5% auto 15% auto; 
            border: 1px solid #888;
            width: 80%;
            }

            .close 
            {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
            }

            .close:hover,
            .close:focus 
            {
            color: red;
            cursor: pointer;
            }

            .animate 
            {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
            }

            @-webkit-keyframes animatezoom 
            {
            from {-webkit-transform: scale(0)} 
            to {-webkit-transform: scale(1)}
            }
            
            @keyframes animatezoom 
            {
            from {transform: scale(0)} 
            to {transform: scale(1)}
            }

            @media screen and (max-width: 300px) 
            {
            span.psw 
            {
                display: block;
                float: none;
            }
            .cancelbtn 
            {
                width: 100%;
            }
            }
            </style>

    </head>

    <body>

        <nav class="navbar navbar-lg navbar-expand-lg navbar-transparant navbar-dark navbar-absolute w-100">
            <div class="container">
                <a class="navbar-brand" href="index.php">WELCOME TO PROGRAMERS</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav ml-auto">
                    </ul>
                    <a class="btn btn-danger" href="login.php" target="_blank">LOGIN</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="btn btn-success" href="user_creation.php">NEW USER</a>
                </div>
            </div>
        </nav>

        <div class="intro py-5 py-lg-9 position-relative text-white">
            <div class="bg-overlay-gray">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <img src="images/loginimage1.jpg" class="img-fluid img-cover"/>
            </div>
            <div class="intro-content py-6 text-center">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-12 col-sm-10 col-md-8 col-lg-8 mx-auto text-center">
                        <h1 class="my-3 display-4 d-none d-lg-inline-block">Welcome To ALL</h1><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <a class="btn btn-success btn-lg mr-lg-2 my-1" target="_blank" href="login.php" role="button">START</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/bundle.js"></script>

    </body>

    </html>
