mtvbrianking/login.html

## login.html
<!DOCTYPE html>
<html>

<head>
    <title>Login</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
        body {
            background-color: #f1f5f8;
            font-family: 'Quicksand', sans-serif;
        }

        .min-vh-100 {
            min-height: 100vh !important;
            /* IE11 - https://stackoverflow.com/a/25386261 */
            height: 100px;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .rounded-full {
            border-radius: 1.25em;
        }

        .form-control {
            outline: none;
            border: none;
            border-bottom: 1px solid #d9d9d9;
            border-radius: 0;
            padding: .375rem 0;
            font-size: 1.25em;
        }

        .form-control:focus {
            box-shadow: none;

            border-bottom: 1px solid #7f7f7f;
        }

        label {
            font-size: 0.85em;
            font-weight: 500;
        }

        .custom-control-label {
            font-size: 1em;
        }

        .btn {
            font-weight: 500;
        }

        .btn:focus {
            box-shadow: none;
            border: 2px solid;
        }

        .btn:hover {
            box-shadow: none;
            background-color: transparent;
            color: inherit;
            border: 2px solid;
        }

        .error {
            color: #dc3545;
        }

        .form-control.has-error {
            border-color: #dc3545;
        }
        /* ........ */
    </style>
</head>

<body>
    <div id="app">
        <div class="container mx-auto min-vh-100 d-flex justify-content-center align-items-center">
            <div class="mb-4 col-lg-4 col-md-7 col-sm-10">

                <!-- <h1 class="text-center uppercase mb-3">RECTS</h1> -->

                <div class="d-flex justify-content-center mb-3">
                    <img src="http://bmatovu.com/wp-admin/images/wordpress-logo.svg" class="px-2" height="100px">
                </div>

                <form method="POST" action="#login" class="bg-white shadow rounded p-4">

                    <input type="hidden" name="_token" value="">

                    <div class="form-group mb-3">
                        <label class="required" for="email">Username</label>
                        <input class="form-control" id="username" name="username" type="username" placeholder="Or email address..." required autofocus>
                        <!-- <small class="error" role="alert">Wrong username or password.</small> -->
                    </div>

                    <div class="form-group mb-1">
                        <label class="" for="password">Password</label>
                        <input class="form-control" id="password" name="password" type="password" required>
                        <!-- <small class="error">Provider your account password.</small> -->
                    </div>

                    <div class="d-flex justify-content-end mb-3">
                        <a class="small" href="#forgot-password">
                            Forgot Password?
                        </a>
                    </div>

                    <div class="mb-3">
                        <button class="btn btn-block btn-outline-dark rounded-full" type="submit">Sign In</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="w-100 mt-n8">
            <p class="text-center">
                &copy;<a href="#bsmart" class="">B'Smart Technology</a> All rights reserved.
            </p>
        </div>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Login</title>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500');
	body {
	background-color: #f1f5f8;
	font-family: 'Quicksand', sans-serif;
	}

	.min-vh-100 {
	min-height: 100vh !important;
	/* IE11 - https://stackoverflow.com/a/25386261 */
	height: 100px;
	}

	a {
	color: inherit;
	text-decoration: none;
	}

	.rounded-full {
	border-radius: 1.25em;
	}

	.form-control {
	outline: none;
	border: none;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 0;
	padding: .375rem 0;
	font-size: 1.25em;
	}

	.form-control:focus {
	box-shadow: none;

	border-bottom: 1px solid #7f7f7f;
	}

	label {
	font-size: 0.85em;
	font-weight: 500;
	}

	.custom-control-label {
	font-size: 1em;
	}

	.btn {
	font-weight: 500;
	}

	.btn:focus {
	box-shadow: none;
	border: 2px solid;
	}

	.btn:hover {
	box-shadow: none;
	background-color: transparent;
	color: inherit;
	border: 2px solid;
	}

	.error {
	color: #dc3545;
	}

	.form-control.has-error {
	border-color: #dc3545;
	}
	/* ........ */
	</style>
	</head>

	<body>
	<div id="app">
	<div class="container mx-auto min-vh-100 d-flex justify-content-center align-items-center">
	<div class="mb-4 col-lg-4 col-md-7 col-sm-10">

	<!-- <h1 class="text-center uppercase mb-3">RECTS</h1> -->

	<div class="d-flex justify-content-center mb-3">
	<img src="http://bmatovu.com/wp-admin/images/wordpress-logo.svg" class="px-2" height="100px">
	</div>

	<form method="POST" action="#login" class="bg-white shadow rounded p-4">

	<input type="hidden" name="_token" value="">

	<div class="form-group mb-3">
	<label class="required" for="email">Username</label>
	<input class="form-control" id="username" name="username" type="username" placeholder="Or email address..." required autofocus>
	<!-- <small class="error" role="alert">Wrong username or password.</small> -->
	</div>

	<div class="form-group mb-1">
	<label class="" for="password">Password</label>
	<input class="form-control" id="password" name="password" type="password" required>
	<!-- <small class="error">Provider your account password.</small> -->
	</div>

	<div class="d-flex justify-content-end mb-3">
	<a class="small" href="#forgot-password">
	Forgot Password?
	</a>
	</div>

	<div class="mb-3">
	<button class="btn btn-block btn-outline-dark rounded-full" type="submit">Sign In</button>
	</div>
	</form>
	</div>
	</div>
	<div class="w-100 mt-n8">
	<p class="text-center">
	©<a href="#bsmart" class="">B'Smart Technology</a> All rights reserved.
	</p>
	</div>
	</div>
	</body>

	</html>