SIGN UP PAGE
Create a Sign Up Page Using HTML and CSS
SOURCE CODE : -
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-wrapper">
<div class="login-img">
<img src="3.jpg" alt="">
</div>
<div class="login-form">
<h2>Sign Up</h2>
<form action="">
<div class="form-group">
<label>E-mail</label>
<input type="email" placeholder="example@gmail.com"/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="************"/>
</div>
<div class="form-group button-holder">
<div>
<button type="submit">Sign Up</button>
</div>
<a href="#">Already have an account? Log In</a>
</div>
</form>
</div>
</div>
</body>
</html>
CSS:-
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
background-image: url("53.png");
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.login-wrapper{
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
background: transparent;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.4);
}
.login-img img{
width: 100%;
}
.login-form{
padding: 2.5rem;
}
.login-form h2{
margin-bottom: 1.4rem;
}
.form-group{
margin-bottom: 1.2rem;
}
.form-group label{
display: block;
margin-bottom: .5rem;
}
.form-group input{
display: block;
width: 100%;
height: 40px;
padding: .5rem;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
}
.button-holder{
text-align: center;
}
.button-holder button{
padding: .7rem 2rem;
background: #31ffe0;
color: #000;
border: none;
border-radius: 20px;
margin-bottom: 1rem;
outline: none;
transition: 0.2s linear;
text-transform: uppercase;
}
.button-holder button:hover{
background: #01ceaf;
}
.button-holder a{
text-decoration: none;
color: #000;
}
Comments
Post a Comment