Introduction:
Here's an amazing and nice blueprint for a login page in HTML and CSS with the source code. But before we move on to the code, let me show you what to do.
Preview:
HTML Code:
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<form action="#">
<div class="title">Login</div>
<div class="input-box underline">
<input type="text" placeholder="Enter Your Email" required>
<div class="underline"></div>
</div>
<div class="input-box">
<input type="password" placeholder="Enter Your Password" required>
<div class="underline"></div>
</div>
<div class="input-box button">
<input type="submit" name="" value="Login"><br>
</div>
</form>
</div>
</body>
</html>
CSS Code:
<code>@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Baloo Bhai 2',sans-serif; background: #FAF7FF;}html, body{ display: grid; height: 100vh; width: 100%; place-items: center; background: linear-gradient(to right, #540099 0%,100%);}::selection{ background: #ff80bf;
}.container{ background: #FAF7FF; max-width: 350px; width: 100%; padding: 25px 30px; border-radius: 10px; box-shadow: 10px 20px 20px rgb(0 0 0 / 15%);}.container form .title{ font-size: 30px; font-weight: 600; margin: 20px 0 10px 0; position: relative;}.container form .title:before{ content: ''; position: absolute; height: 4px; width: 33px; left: 0px; bottom: 3px; border-radius: 5px; background: linear-gradient(to right, #290099 0%, #ae00ff 100%);}.container form .input-box{ width: 100%; height: 45px; margin-top: 25px; position: relative;}.container form .input-box input{ width: 100%; height: 100%; outline: none; font-size: 18px; border: none;}.container form .underline::before{ content: ''; position: absolute; height: 2px; width: 100%; background: #ccc; left: 0; bottom: 0;}
.container form .button{ margin: 40px 0 20px 0;}.container .input-box input[type="submit"]{ background: linear-gradient(to right, #290099 0%, #ae00ff 100%); font-size: 17px; color: #fff; border-radius: 5px; cursor: pointer; transition: all 0.3s ease;}.container .input-box input[type="submit"]:hover{ background-color: rgb(224, 220, 245);}.container .option{ font-size: 14px; text-align: center;}</code>
