Login Form with Neumorphism Css:
For the perfect and beautiful view is gained by neumorphism. In Css their are many type of options which you can select and make your web layout beautiful. So here we use neumorphism and maked our login form prefectly and creative.
HTML CODE:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="login">
<div class="container">
<div class="login-sec">
<div class="text">
<h2>Welcome</h2>
</div>
<div class="form">
<input type="text" name="Email" placeholder="Email" id=""><br>
<input type="text" name="password" placeholder="Password" id=""><br>
<button type="submit" class="btn">LOGIN</button>
<br>
<p class="para">
Don't have an account? <a href="#">Sign Up</a>
</p>
</div>
</div>
</div>
</section>
</body>
</html>
We used above HTML code for making the simple diagram of our form. We used some div's like: Container, login-sec, text and form.
In the text div we gave it a heading called welcome then in the form div we used 2 input type and 1 button for submission. Then we took a paragraph by using its class para and at the last we used a anchor tag which make the Sign Up button click able.
Font:
Here is the font that we used for our login-form, its name is Baloo Thambi:
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&display=swap');
CSS CODE:
In our Css code we used some padding and margins and we used some background color and neumorphism property, that give the border's up and down shadow which looks really amazing, then we gives the color and border of button.
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&display=swap');
body{
padding: 0%;
margin: 0%;
font-family: 'Baloo Thambi 2', cursive
}
.login{
background-color: #dae1eb;
}
.container{
background-color:#dddddd;
height: 100vh;
width: 100%;
align-content: center;
justify-content: center;
display: flex;
}
.login-sec{
background-color:#dddddd;
border-radius: 15px;
width:200px;
height: 340px;
text-align: center;
transform: translateY(50%);
padding: 30px;
box-shadow: 2px 2px 1rem rgba(0, 0,0,.4) ,
4px -4px 10px rgb(255, 255,255);
}
.text h2{
color: rgba(14, 15, 14, 0.897);
padding-bottom: 15px;
font-size: 28px;
}
.form input{
background-color: transparent;
outline: none;
border: none;
border-bottom: 1px solid gray;
width: 90%;
padding-bottom: 10px;
margin-bottom: 30px;
font-size: 13px;
letter-spacing: 0.1rem;
}
.form .btn{
outline: none;
background-color: rgb(64, 175, 64);
padding: 13px 70px 13px 70px;
font-size: 16px;
color: white;
font-weight: 550;
border-radius: 30px;
border: 3px solid rgba(255, 255, 255);
}
.form .btn:hover{
cursor: pointer;
background-color: rgb(64, 175, 9);
}
.form .para{
font-size: 13px;
margin-top: 25px;
}
.form .para a{
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
0 Reviews: