Home » Flat Sign up form using HTML and CSS

Flat Sign up form using HTML and CSS

by techmidpoint
Flat Sign up form using HTML and CSS

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

You may also like

Leave a Comment