Scribd
Upload
2 views3 pages

Sign Up Form

The document is an HTML code for a sign-up form with a visually appealing design using CSS. It includes fields for username, email, password, and password confirmation, along with a submit button and a link for existing users to log in. The layout features a gradient background and styled input elements for a modern user experience.

Uploaded by

fedawak88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views3 pages

Sign Up Form

The document is an HTML code for a sign-up form with a visually appealing design using CSS. It includes fields for username, email, password, and password confirmation, along with a submit button and a link for existing users to log in. The layout features a gradient background and styled input elements for a modern user experience.

Uploaded by

fedawak88
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up Form</title>
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
margin: 0;
}
.signup-container {
width: 360px;
margin: 100px auto;
padding: 40px 30px 30px 30px;
background: rgba(255, 255, 255, 0.97);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
position: relative;
overflow: hidden;
}
.signup-container::before {
content: "";
position: absolute;
top: -60px;
left: -60px;
width: 120px;
height: 120px;
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
border-radius: 50%;
opacity: 0.13;
z-index: 0;
}
.signup-container h2 {
text-align: center;
margin-bottom: 28px;
color: #333;
letter-spacing: 1px;
font-weight: 600;
z-index: 1;
position: relative;
}
.signup-container input[type="text"],
.signup-container input[type="email"],
.signup-container input[type="password"] {
width: 100%;
padding: 12px;
margin: 10px 0 20px 0;
border: none;
border-radius: 8px;
background: #f3f3f3;
font-size: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: background 0.2s;
}
.signup-container input:focus {
background: #e9e9ff;
outline: none;
}
.signup-container button {
width: 100%;
padding: 12px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
transition: background 0.2s, transform 0.1s;
}
.signup-container button:hover {
background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
transform: translateY(-2px) scale(1.03);
}
.signup-container .login-link {
display: block;
text-align: center;
margin-top: 18px;
font-size: 14px;
color: #888;
}
.signup-container .login-link a {
color: #764ba2;
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.signup-container .login-link a:hover {
color: #667eea;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="signup-container">
<h2>Create Account</h2>
<form>
<input type="text" placeholder="Username" required />
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<input type="password" placeholder="Confirm Password" required />
<button type="submit">Sign Up</button>
<div class="login-link">
Already have an account? <a href="#">Login</a>
</div>
</form>
</div>
</body>
</html>

You might also like