Free premium login form theme. we are giving you to download or to copy our premium login theme for free. This theme is mainly developed with HTML and CSS. And you can add your own JavaScript files or other files for form's function.
sign up or log in on codepen.io to see above section
This is the model of the Premium Login Form.
Below I will give the code pen link to copy the code and edit. If you like the code please support out team. and comment in this post about your experience.
HTML
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>login</title>
<link href="./style.css" rel="stylesheet"></link>
</head>
<body>
<div class="body">
<form action="" class="login">
<h3 class="login-head">Login</h3>
<div class="login-row">
<label class="name" for="">Name</label>
<input class="name-input" placeholder="eg; irshad" type="text" />
</div>
<div class="login-row">
<label class="email" for="">Email</label>
<input class="email-input" placeholder="example@gmail.com" type="email" />
</div>
<div class="login-row">
<label class="phone-number" for="">Phone number</label>
<input class="number-input" placeholder="Enter 10 digit number" type="tel" />
</div>
<div class="login-row">
<label class="password" for="">password</label>
<div class="pass">
<input class="passwords" placeholder="Enter Password" type="password" />
<input class="passwords" placeholder="Re-type Password" type="password" />
</div>
</div>
<button class="login-btn" type="submit">Log in</button>
<a class="d-h-ac" href="http://www.feschospace.ml/">Don't have an accound</a>
</form>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.body{
background: #223;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
flex-direction: column;
}
.login{
background: #ddd;
border-radius: 20px;
box-shadow: 10px 10px 10px;
height: 400px;
width: 300px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.login-row{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 7px;
}
.pass{
width: 100%;
display: flex;
justify-content: space-between;
}
.passwords{
width: 48%;
}
/*inputs*/
.name-input{
width: 100%;
height: 40px;
padding-left: 5px;
border-radius: 7px;
border: none;
transition: 150ms;
}
.name-input:focus{
background: #ddd;
border: none;
}
.email-input{
width: 100%;
height: 40px;
padding-left: 5px;
border-radius: 7px;
border: none;
transition: 150ms;
}
.email-input:focus{
background: #ddd;
}
.passwords{
width: 48%;
height: 40px;
border-radius: 7px;
border: none;
padding-left: 5px;
transition: 150ms;
}
.passwords:focus{
background: #ddd;
}
.login-btn{
width: 100%;
height: 40px;
margin-top: 10px;
border-radius: 7px;
border: none;
transition: 200ms;
cursor: pointer;
}
.login-btn:focus{
background: green;
}
.d-h-ac{
font-size: 13px;
margin-top: 20px;
}
label{
font-size: 14px;
}
.number-input{
width: 100%;
height: 40px;
border-radius: 7px;
border: none;
padding-left: 5px;
}
.number-input:focus{
background: #ddd;
}
You can copy the code from above iframe. This code is developed by Irsahd.
If you want to study how to build html webpages, please contact Irshad. You can study the HTML and CSS basics in low cost. We only pay 10$ for each. It means 10$ for HTML basics, 10$ for CSS basics, 10$ for JAVACRIPT, 10$ for C++, 10$ for C.
Comments
Post a Comment