HTML CSS Login and Registration Page Template

HTML CSS Login and Registration Page Template

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:

HTML and CSS Simple and Animated Dropdown Menus

Leave a Reply

Your email address will not be published. Required fields are marked *