How to make a advanced sign up form in html and css
Hello today I am going to tell you how to make a sign up form I haven't finished but it still looks really nice. Type in this code. <!DOCTYPE html>
<html>
<center>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In Form</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<div>
<!-- Left section of signup form -->
<dive>
<p><label for="userNmae">User Name</label></p>
<input type="text" id="userName" autocomplete="off" >
</p></div>
<div>
<p><label for="email">Email</label></p>
<input type="email" id="email" name="email" required >
</div>
<div>
<p><label for="password">Password</label></p>
<input type="password" id="password" required >
</div>
<div>
<p><label for="password">Confirm Password</label></p>
<input type="password" id="password" required >
</div>
<div>
<div>
<br/>
<div>
<input type="submit" value="Submit Form" accesskey="s">
</div>
</div>
</form>
<div></div>
<!-- Social media icones -->
<div>
</div>
</dive>
</div>
</body>
</center>
</html>
Go to your css file and save as styles.css. Type in this code.
p {
font-family: Stencil ;
}
input{
border: none;
width: 18%;
border-bottom: 1px solid lightgray;
background-color: #FBFBFB;
position: relative;
top: -10px;
padding: 5px;
}
input:focus {
outline: none !important;
border-bottom: 1px solid red;
font-size: 14px;
font-weight: bold;
}
If you want to add a background image type this code.
body{
background-image:url(your image.png);
background-repeat: no-repeat;
background-size: cover;
}
 |
Comments
Post a Comment