in this tutorial, I will show you how to make a signup form using HTML and CSS.
HTML code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Sign up</h1>
<form>
<input type="text" placeholder="Full name"><br>
<input type="email" placeholder="Email"><br>
<input type="password" placeholder="password"><br>
<input type="password" placeholder="confirm password"><br>
<button>Next</button>
</form>
</div>
</body>
</html>
CSS code
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #212121;
color: #fafafa;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 20%;
}
.container h1{
text-align: center;
margin: 25px 0;
font-family: 'Roboto',sans-serif;
font-size: 2.5rem;
}
form label{
font-family: 'Open Sans',sans-serif;
}
form input{
border:none;
background-color: transparent;
border-bottom: 2px solid #fafafa;
color: #fafafa;
margin-bottom: 15px;
width: calc(100% - 30px);
font-size: 1.3rem;
padding: 10px 15px;
}
form button{
width: 100%;
border-radius: 30px;
padding: 10px 15px;
background-color: transparent;
border: 2px solid #fafafa;
color: #fafafa;
margin: 25px 0;
transition: .4s;
cursor: pointer;
font-size: 1rem;
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
}
form button:hover{
background-color: #fafafa;
color: #212121;
}
i hope that you liked this project
Make an Animated Signup Form Using HTML and CSS
Reviewed by Medics
on
July 25, 2019
Rating:
Reviewed by Medics
on
July 25, 2019
Rating:
No comments: