Simple Login Form Template

Simple login form template with HTML, CSS & JS Code - New option in the settings menu to automatically generate a login form for you - Make your page more user-friendly by adding custom headers and fields like name, email, etc.

Features of The Login Form Template:

Full responsive login form template
Created to be easy for your visitors and a nice way of sharing content amongst friends!
Easy-to use UI Design - Everything you need in one place (but don't hate it because the html does not look great!)

*Note:
If you are interested please send an email to us at (info@spectricssolutions.com). This is an original design by NeedMyCode

*key Suggestion:
If you are interested then check our other templates which belong to Same Category.
# Business Website Template
# Cafe & Restaurant Website Template

HTML

<form> <div id="info-wrapper"> <span class="brand">B</span> <div class="notification"> <h2>Special announcement</h2> <p>It's time to party! Phasellus semper augue quis metus imperdiet porttitor. Suspendisse suscipit cursus fermentum. Praesent vel erat vitae quam dapibus molestie. In malesuada finibus felis, vel faucibus ex pellentesque ac. Vivamus nec tellus ac ante vulputate luctus.</p> </div> </div> <div id="form-wrapper"> <div> <h1>Welcome Back</h1> <p>Enter your credentials to continue.</p> </div> <div> <div class="input-wrapper"> <input type="text" placeholder="Enter your username" /> <i class="bx bxs-user-circle"></i> </div> <div class="input-wrapper"> <input type="password" placeholder="Enter your password" /> <i class="bx bx-key"></i> </div> <button type="submit"> Sign In <i class='bx bx-right-arrow-alt'></i> </button> </div> <p class="mb-0"> <a class="default" href="#">Send password recovery link to your email.</a> </p> </div> </form> </p> </p>

CSS

$blue-start: rgba(96,128,255,1); $blue-stop: rgba(33,65,189,1); $orange-start: #FEB692; $orange-stop: #EA5455; $purple-start: #97ABFF; $purple-stop: #123597; $crystal-start: #81FFEF; $crystal-stop: #F067B4; $peach-start: #F6D242; $peach-stop: #FF52E5; * { box-sizing: border-box; } body { background-color: #f2f5ff; color: #31507d; display: flex; flex-direction: column; font-family: 'Poppins', sans-serif; height: 100vh; align-items: center; justify-content: center; } ul.theme-picker { list-style-type: none; background-color: #fff; border-radius: 50px; display: flex; padding: 7px 10px; box-shadow: rgba(74, 79, 97, 0.25) 0px 13px 27px -5px, rgba(74, 79, 97, 0.3) 0px 8px 16px -8px; margin-bottom: 50px; li { border-radius: 50px; background: #000; display: inline-block; margin-right: 7px; width: 50px; height: 50px; cursor: pointer; &:last-child { margin-right: 0; } &.blue { background: linear-gradient(225deg, $blue-start 16%, $blue-stop 100%); } &.orange { background: linear-gradient(225deg, $orange-start 16%, $orange-stop 100%); } &.purple { background: linear-gradient(225deg, $purple-start 16%, $purple-stop 100%); } &.crystal { background: linear-gradient(225deg, $crystal-start 16%, $crystal-stop 100%); } &.peach { background: linear-gradient(225deg, $peach-start 16%, $peach-stop 100%); } } } form { background-color: #fff; border-radius: 8px; display: flex; box-shadow: rgba(74, 79, 97, 0.25) 0px 13px 27px -5px, rgba(74, 79, 97, 0.3) 0px 8px 16px -8px; height: 550px; overflow: hidden; #info-wrapper, #form-wrapper { padding: 40px 35px 40px 35px; } #info-wrapper { background-color: #4c70ff; background: linear-gradient(225deg, $blue-start 16%, $blue-stop 100%); color: #fff; width: 450px; padding-left: 50px; p { color: #fff; font-size: 18px; } } #form-wrapper { display: flex; justify-content: space-between; align-items: center; flex-direction: column; text-align: center; width: 575px; } i { color: #fff; font-size: 30px; transition: color 250ms ease-in; } .input-wrapper { margin-bottom: 30px; position: relative; width: 480px; i { color: #a4a9b6; position: absolute; opacity: 0.85; right: 13px; top: 50%; transform: translateY(-50%); } } h1 { font-weight: 600; letter-spacing: 0px; margin: 25px 0 0 0; } h2 { font-weight: 500; } p { color: #a4a9b6; font-size: 18px; margin: 2px 0 44px 0; } a.default { color: #a4a9b6; text-decoration: none; transition: color 300ms ease-in-out; &:hover { color: #4c70ff; } } input[type=text], input[type=password] { border: 1px solid #d8ddf0; border-radius: 6px; font-size: 15px; padding: 13px 9px 13px 9px; transition: border-color 250ms ease-in-out; &:focus { border-color: #4c70ff; outline: none; } &:focus + i { color: #4c70ff; } } input { width: 100% } ::placeholder { color: #a4a9b6; font-size: 15px; opacity: 1; } button[type=submit] { background: #4c70ff; border: none; border-radius: 6px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; padding: 18px 10px; width: 480px; i { margin-left: 5px; } } .brand { background: #fff; border-radius: 10px; color: #31507d; display: flex; font-size: 28px; font-weight: 600; margin-bottom: 50px; justify-content: center; align-items: center; height: 50px; opacity: 0.9; width: 50px; } } .mb-0 { margin-bottom: 0; }