3.9K
Flat Sign up form using HTML and CSS
Hi, in this tutorial you are going to learn how to make the flat sign-up form using HTML and CSS. I have also designed it with a transparent background. Just copy the given source code and paste into your text editor and edit it according to your requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Flate Sign up form using HTML and CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<h2 class="head">Sign Up</h2>
<div class="sub-main">
<form action="#" method="post">
<input placeholder="First Name" name="Name" type="text" required="">
<br>
<input placeholder="Last Name" name="Name" type="text" required="">
<br>
<input placeholder="Phone Number" name="Number"type="text" required="">
<br>
<input placeholder="Email" name="mail" type="text" required="">
<br>
<input placeholder="Password" name="Password" type="password" required="">
<br>
<input placeholder="Confirm Password" name="Password"type="password" required="">
<br>
<input type="submit" value="Sign up">
</form>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS
body {
background:url('bg.jpg') no-repeat 0% 87% fixed;
background-size: cover;
font-family: 'Lato', sans-serif;
text-align:center;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
.wrap {
margin: 2% auto;
background: rgba(125, 63, 152, 0.52);
width: 32%;
font-family: monospace;
padding: 0 20px;
}
.head {
font-size: 38px;
padding: 20px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.sub-main{
position:relative;
}
.sub-main input[type="text"],.sub-main input[type="password"] {
outline: none;
font-size: 18px;
font-weight: bold;
margin: 4px 0px 18px 1px;
color: black;
padding: 10px 38px;
border: none;
border-radius: 2px;
width: 68%;
font-family: monospace;
}
.sub-main input[type="submit"] {
color: white;
background: #d52685;
border: none;
padding: 14px 50px;
font-size: 22px;
font-weight: bold;
border-radius: 2px;
margin: 17px;
font-family: monospace;
cursor:pointer;
text-transform:uppercase;
transition:0.5s all;
}
.sub-main input[type="submit"]:hover {
background: #d9edf7;
color: black;
transition:0.5s all;
}
For More Tutorials Please Click Here
