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
helpful