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">
<head>
<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="https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald:wght@200&family=PT+Serif&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="register.css">
<title>Register form</title>
</head>
<body>
<div class="register_container">
<div class="register_form">
<div class="reg_title">
<h4>Register here</h4>
</div>
<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>
<div class="lname">
<label for="lname">Last name</label>
<input type="text" name="fname" id="lname" placeholder="last name" required>
</div>
</div>
<div class="user_name">
<label for="uname">Username</label>
<input type="text" name="uname" id="uname" placeholder="username" required>
</div>
<div class="mobile_no">
<label for="mob_no">Mobile Number</label>
<input type="text" name="uname" id="mob_no" placeholder="mobile number" required>
</div>
<div class="email">
<label for="email_address">Email Address</label>
<input type="email" name="email_address" id="email_address" placeholder="email address" required>
</div>
<div class="password">
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" placeholder="password" required>
</div>
<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>
<div class="reg_btn">
<input type="submit">
</div>
</form>
<div class="log_cont">
<span>I Have Account?</span>
<a href="#">Login here</a>
</div>
</div>
</div>
</body>
</html>
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;
}
.user_name,
.mobile_no,
.email,
.password,
.con_password,
.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 :
