This a simple login and registration page template for a web page. To create this template I used only HTML and CSS.
Here is the code of this template –
If you want to see a demo of this login registration page template, then click on Live Demo button.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login and registration Template - W3jar.Com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="radio" class="login-radio" name="login_registration" id="login" checked>
<input type="radio" class="reg-radio" name="login_registration" id="signUp">
<div class="login">
<h1 class="title">Sign in</h1>
<form action="" method="POST">
<div class="input-control">
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="input-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<div class="input-control">
<button type="submit">Sign in</button>
</div>
</form>
<div class="footer">
<div><label for="signUp"><span>Sign Up</span></label></div>
<div><a href="#">Forgot password?</a></div>
</div>
</div>
<div class="register">
<h1 class="title">Sign Up</h1>
<form action="" method="POST">
<div class="input-control">
<label for="name">Name</label>
<input type="text" placeholder="Enter your name" id="name" required>
</div>
<div class="input-control">
<label for="email2">Email</label>
<input type="email" placeholder="[email protected]" id="email2">
</div>
<div class="input-control">
<label for="gender">Gender</label>
<select id="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
<div class="input-control">
<label for="dob">Birth date</label>
<input type="date" id="dob">
</div>
<div class="input-control">
<label for="password2">New password</label>
<input type="password" placeholder="Create new password" id="password2">
</div>
<div class="input-control">
<input type="checkbox" id="agreement" required> <label for="agreement">I agree to the <a href="#">terms and conditions</a></label>
</div>
<div class="input-control">
<button type="submit" class="sing-up">Sign Up</button>
</div>
</form>
<div class="footer">
<div><label for="login"><span class="sign-in">Sign in</span></label></div>
</div>
</div>
<div class="wbtme"><a href="https://www.w3jar.com/">w3jar.com</a></div>
</div>
</body>
</html>style.css
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
padding: 50px;
font-family: sans-serif;
background-color: #f2f2f2;
}
a {
text-decoration: none;
color: #3490DC;
}
a:hover {
color: #2779BD;
text-decoration: underline;
}
.container {
background-color: #ffffff;
max-width: 450px;
margin: 0 auto;
padding: 20px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.container input[type='radio'] {
display: none;
}
.container .login,
.container .register {
display: none;
}
.container .login .title,
.container .register .title {
text-align: center;
padding: 0;
margin: 10px;
}
.container .login form label,
.container .register form label {
font-weight: bold;
color: #555555;
}
.container .login form label[for="agreement"],
.container .register form label[for="agreement"] {
font-weight: normal;
}
.container .login form input[type='email'],
.container .login form input[type='password'],
.container .login form input[type='text'],
.container .login form input[type='date'],
.container .login form select,
.container .register form input[type='email'],
.container .register form input[type='password'],
.container .register form input[type='text'],
.container .register form input[type='date'],
.container .register form select {
width: 100%;
height: 35px;
padding: 0 10px;
font-size: 16px;
outline: none;
border: 0;
border-bottom: 1px solid rgba(23, 23, 23, 0.2);
/* border: 1px solid rgba(23, 23, 23, 0.2); */
}
.container .login form input[type='email']:focus,
.container .login form input[type='password']:focus,
.container .login form input[type='text']:focus,
.container .login form input[type='date']:focus,
.container .login form select:focus,
.container .register form input[type='email']:focus,
.container .register form input[type='password']:focus,
.container .register form input[type='text']:focus,
.container .register form input[type='date']:focus,
.container .register form select:focus {
border-color: rgba(23, 23, 23, 0.7);
}
.container .login form select,
.container .login form input[type='date'],
.container .register form select,
.container .register form input[type='date'] {
border: 1px solid rgba(23, 23, 23, 0.2);
}
.container .login form [type='submit'],
.container .register form [type='submit'] {
background-color: #2ecc71;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 20px;
outline: none;
color: #ffffff;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
width: 100%;
height: 40px;
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 2px 2px -1px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 2px 2px -1px rgba(0, 0, 0, 0.3);
}
.container .login form .sing-up,
.container .register form .sing-up {
background-color: #3490DC;
}
.container .login form .input-control,
.container .register form .input-control {
margin-bottom: 10px;
}
.container .footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px 0;
}
.container .footer label span {
display: inline-block;
font-size: 14px;
background: none;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left: 3px solid #3490DC;
padding: 7px 10px;
color: #555555;
cursor: pointer;
text-transform: uppercase;
border-radius: 2px 30px 30px 2px;
}
.container .footer label span:hover {
border-color: rgba(0, 0, 0, 0.3);
border-left-color: #3490DC;
background: #F8FAFC;
color: #222222;
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 2px 2px -1px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px rgba(255, 255, 255, 0.2) inset, 0 2px 2px -1px rgba(0, 0, 0, 0.3);
}
.container .footer label .sign-in {
border-left: 3px solid #2ecc71 !important;
}
.container .reg-radio:checked~.register {
display: block;
}
.container .login-radio:checked~.login {
display: block;
}See also:
