How to create Sign up page in HTML and CSS ?

How to create Sign up page

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

HTML FILE

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

        <h2>Sign Up</h2>

        <p>Please fill in this form to create an account.</p>
        <hr>
        <form>
            <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>

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

CSS FILE

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;

}

OUTPUT

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

Leave a Reply

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