<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Butter Cake v4.0.0 - Starter Kit</title>
<!-- FONT AWESOME 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS 4.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/css/butterCake.min.css">
</head>
<body>
<!-- LOGIN CONTAINER -->
<section class="login-page flex-center-center py-5 bg-light">
<!-- FORM -->
<div class="w-100 mx-auto px-2" style="max-width: 400px">
<form action="">
<div class="text-center text-gray">
<h2 class="weight-500 mb-1">Login</h2>
<p class="h4 mb-2 weight-300">
Please login to proceed
</p>
</div>
<div class="card overflow-unset mt-9 mb-1">
<div class="card-body">
<!-- AVATAR -->
<div class="avatar-icon text-center">
<img src="https://placehold.it/128x128" alt="Avatar"
class="img-circle img-cover card mb-2 ml-auto mr-auto p-1">
</div>
<!-- EMAIL -->
<div class="group">
<input type="text" class="input" placeholder="Email Address">
</div>
<!-- PASSWORD -->
<div class="group">
<input type="password" class="input" placeholder="Password">
</div>
<!-- REMEMBER ME -->
<div class="group">
<div class="custom-checkbox">
<input type="checkbox" value="remember me" id="rememberMe">
<label for="rememberMe" class="text-gray">Remember Me</label>
</div>
</div>
<!-- LOGIN -->
<div class="group">
<button class="btn primary block btn-lg weight-500">Login</button>
</div>
</div>
</div>
<!-- LINKS -->
<div class="text-center weight-600 text-gray">
<a href="" class="text-gray">Sign Up</a> · <a href="" class="text-gray">Forgot Password</a> · <a href=""
class="text-gray">Need Help?</a>
</div>
</form>
</div>
</section>
<!-- STYLE -->
<style>
.login-page {
min-height: 100vh;
}
.login-page .avatar-icon img {
margin-top: -80px;
width: 128px;
height: 128px;
}
</style>
</body>
</html>