<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!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>Login Page - Example Template</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">
</head>
<body>
<section class="login-page flex-center-center py-5 bg-light">
<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">
<div class="avatar-icon text-center">
<img src="https://placehold.it/128x128" alt="Avatar"
