<!DOCTYPE html>
<html >
<head>
    <meta >
    <title>Login</title>
    <style>


        .close:hover { background: #00d9ff; }
        body{
            margin: 0;
            padding: 0;
            background: #fff;
            color: #fff;
            font-family: Arial;
            font-size: 12px;
        }
        .body{
            position: absolute;
            top: -20px;
            left: -10px;
            right: -20px;
            bottom: -40px;
            width: auto;
            height: auto;
            background-image: url(img.jpg);
            background-size: cover;
        }
        .header{
            position: absolute;
            top: calc(50% - 35px);
            left: calc(30% - 255px);
            z-index: 2;
        }
        .header div{
            float: left;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 35px;
            font-weight: 200;
        }

        .log{
            position: absolute;
            top: calc(25% - 35px);
            left: calc(60% - 255px);
            z-index: 2;
        }
        .log div{
            float: left;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 40px;
            font-weight: 200;
        }

        .header div span{
            color: #5379fa !important;
        }
        .login{
            position: absolute;
            top: calc(50% - 75px);
            left: calc(60% - 50px);
            height: 150px;
            width: 350px;
            padding: 10px;
            z-index: 2;
        }
        .login input[type=text]{
            width: 250px;
            height: 30px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 2px;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding: 4px;
        }
        .login input[type=password]{
            width: 250px;
            height: 30px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.6);
            border-radius: 2px;
            color: #fff;
            font-family: 'Exo', sans-serif;
            font-size: 16px;
            font-weight: 400;
            padding: 4px;
            margin-top: 10px;
        }

       .button {
            display: inline-block;
            border-radius: 4px;
            border: 1px solid rgb(115, 115, 115)
            border: none;
            color: #404040;
            text-align: center;
            font-size: 20px;
            font-color: #2d43d0;
            padding: 8px;
            width: 255px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }

        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        .button span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }
        .button:hover span {
            padding-right: 25px;
        }
        .button:hover span:after {
            opacity: 1;
            right: 0;
        }
    </style>
</head>
<body>
<div class="body"></div>
<div class="header">
    <div> <span>TechJunkGigs </span></div>
</div>
<div class="log"><div> Login Page</div></div>
<br>
<form action="db_login.php" method="post" >
    <div class="login">
        <input type="text" placeholder="Email" name="email" required/><br>
        <input type="password" placeholder="password" name="password" required/><br>
        <button class="button" name="login" value="Login" style="vertical-align:middle"><span>Login</span></button><br>
    </div>
</form>
</body>
</html>


