How to create Sign up page in HTML and CSS ?

How to create Sign up page

आज हम HTML और CSS मे signup पेज को डिज़ाइन / बनाना सीखेंगे | इसके लिए हम html और CSS दोनों की अलग अलग फाइल बनाएंगे जिससे आपको समझने में आसानी हो।


<!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">
    <title>Sign UP Page</title>
    <!-- Link CSS  -->
    <link rel="stylesheet" href="SignUp-Page.css">
    <div class="signup_page">

        <h2>Sign Up</h2>

        <p>Please fill in this form to create an account.</p>
            <label for="fname"> <b>First Name</b></label>
            <input type="text" placeholder="First Name">

            <label for="lname"> <b>Last Name</b></label>
            <input type="text" placeholder="Last Name">

            <label for="email"><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <label for="confirm-pass"><b>Confirm Password</b></label>
            <input type="password" placeholder="Confirm Password" name="confirm-pass" required>

                <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
            <button type="submit" class="signupbtn"> <b> Sign Up</b> </button>
        <p id="terms">By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.


body {
    font-family: 'Times New Roman', Times, serif;
    background-image: url(edu.avif);
    background-size: cover;
    background-repeat: no-repeat;

.signup_page {
    width: 360px;
    height: 520px;
    margin: 120px 1050px;
    background-color: white;
    border-radius: 8px;
    border: 2px solid black;


h2 {
    text-align: center;
    padding-top: 15px;

p {
    text-align: center;
    padding: 2px;

form {
    width: 300px;
    margin-left: 20px;

label {

    display: flex;
    margin-top: 7px;
    font-size: 17px;

input {
    border-radius: 1px black;
    background-color: rgb(224, 248, 248);
    width: 100%;
    padding: 7px;
    border: none;
    border: 1px solid black;
    border-radius: 4px;

input[type=checkbox] {
    width: 5%;

/* Set a style for button */
button {
    background-color: rgb(63, 226, 241);
    color: white;
    width: 80px;
    height: 25px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 4px;


#terms {
    text-align: center;
    padding: 1px;
    font-size: 14px;



One Reply to “How to create Sign up page in HTML and CSS ?”

Comments are closed.