Step: 1

Create two file in same location, first file name is register.html and second file name is register.css .

Open register.html then copy and paste html code.

html code

					<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=""
        <link rel="stylesheet" href="register.css">
    <title>Register form</title>

    <div class="register_container">
        <div class="register_form">
            <div class="reg_title">
                <h4>Register here</h4>
            <form action="#">
                <div class="name_cont">
                    <div class="fname">
                        <label for="fname">First name</label>
                        <input type="text" name="fname" id="fname" placeholder="first name" required>
                    <div class="lname">
                        <label for="lname">Last name</label>
                        <input type="text" name="fname" id="lname" placeholder="last name" required>
                <div class="user_name">
                    <label for="uname">Username</label>
                    <input type="text" name="uname" id="uname" placeholder="username" required>
                <div class="mobile_no">
                    <label for="mob_no">Mobile Number</label>
                    <input type="text" name="uname" id="mob_no" placeholder="mobile number" required>

                <div class="email">
                    <label for="email_address">Email Address</label>
                    <input type="email" name="email_address" id="email_address" placeholder="email address" required>

                <div class="password">
                    <label for="pass">Password</label>
                    <input type="password" name="pass" id="pass" placeholder="password" required>

                <div class="con_password">
                    <label for="con_pass">Confirm Password</label>
                    <input type="password" name="con_pass" id="con_pass" placeholder="confirm password" required>

                <div class="reg_btn">
                    <input type="submit">
            <div class="log_cont">
                <span>I Have Account?</span>
                <a href="#">Login here</a>


step: 2

Open register.css file then copy and paste Css code.

Css Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

.register_container {
    background-color: rgb(237, 231, 231);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;

.register_form {
    width: 400px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 8px 5px rgb(186, 182, 182);


.name_cont {
    display: flex;
    width: 100%;
    margin-top: 10px;

.reg_btn {
    margin-top: 10px;
    width: 100%;

.name_cont .fname,
.lname {
    width: 50%;
    padding: 2px;

.reg_title {
    padding: 10px;
    border-radius: 5px 5px 0 0;
    background-color: rgb(185, 194, 202);
    color: red;
    font-weight: bold;

.fname input,
.lname input,
.user_name input,
.mobile_no input,
.email input,
.password input,
.con_password input {
    height: 30px;
    width: 100%;
    border: 1px solid rgb(63, 42, 42);
    padding: 4px;
    border-radius: 3px;
    outline: none;

.reg_btn input {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    outline: none;
    background: rgb(97, 64, 64);
    border: 1px solid rgba(245, 221, 221, 0);
    color: aliceblue;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif;
    font-family: 'PT Serif', serif;
.reg_btn input:hover{
    background-color:rgb(78, 52, 52) ;
    transform: scale(1.02);
.reg_btn input:active{
    transform: scale(1);
.log_cont {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-weight: bold;

.register_form form {
    width: 100%;
    padding: 10px;


.register_form form label {
    font-weight: bold;
    color: rgb(18, 129, 90);


Output :