Login form design using HTML | CSS
This project is about making a nice and clean form design using css
properties. We will also use javascript to toggle password field to show or
hide user entered password.
Please follow the below code and get started 💻.
HTML Code
<body>
<div class="container">
<div class="header">
<h1 class="title">Sign in</h1>
<h4>Welcome User :)</h4>
</div>
<div class="body">
<form>
<div class="input-grp">
<input type="text" class="form-ctrl" placeholder="Enter Username" required />
</div>
<div class="input-grp">
<input type="password" class="form-ctrl pass" placeholder="Enter Password" required />
<button type="button" class="icon">
<i class="fas fa-eye-slash i1"></i>
<i class="fas fa-eye i2"></i>
</button>
</div>
<button class="btn" type="button">Sign in</button>
<p>
<a href="#">Forgot Password ?</a>
</p>
<p>
<a href="#">Don't have an account? <strong style="color: #2C5364">Create now<strong></a>
</p>
</form>
</div>
</div>
</body>CSS Code
:root {
--one: #0F2027;
--two: #2C5364;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: 'Lato', sans-serif;
display: flex;
background: #f1f1f1;
}
.container {
margin: auto;
width: 350px;
max-width: 95%;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 18px rgba(0,0,0,.2);
overflow: hidden;
padding-bottom: 0.75rem;
}
.header {
height: 180px;
background: linear-gradient(122deg, var(--one), var(--two));
border-radius: 0 0 100% 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
.title {
font-weight: 700;
margin-bottom: 0.65rem;
}
h4 {
font-weight: 100;
}
form {
padding: 1.35rem;
}
.form-ctrl {
width: 100%;
padding: 0 .35rem;
border: 0;
font-family: 'Lato', sans-serif;
outline-color: var(--two);
border-radius: 4px;
}
.input-grp {
width: 100%;
height: 38px;
display: flex;
border: 1px solid #ccc;
margin: 1rem 0;
border-radius: 4px;
}
.icon {
position: relative;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
border: 0;
outline: 0;
cursor: pointer
}
.icon.active .i1 {
opacity: 0;
}
.icon.active .i2 {
opacity: 1;
}
.i2 {
opacity: 0;
}
.fas {
position: absolute;
transition: .35s ease;
}
.btn {
background: linear-gradient(122deg, var(--one), var(--two));
border: 0;
outline: 0;
padding: 0.65rem 1.5rem;
width: 100%;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: .95rem;
margin: 1.6rem auto;
display: block;
border-radius: 4px;
cursor: pointer;
transition: .35s;
}
.btn:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.25)
}
p {
text-align: center;
margin: 0.3rem;
font-size: .85rem;
}
a {
text-decoration: none;
color: #7e7e7e;
}JavaScript Code
const icon = document.querySelector('.icon')
const pass = document.querySelector('.pass')
icon.addEventListener('click', () => {
icon.classList.toggle('active')
if(pass.type === 'password')
pass.type = 'text'
else
pass.type = 'password'
})Output
I hope you find this helpful and interesting. Thank you for visiting my blog!
Code by - AltafAlam Shaikh
Topic covered - html form, gradients in css, toggle function in js
Technology used - Html, css, javascript
Font used - Lato