Styled Form
A Pen by Stavros Kefaleas on CodePen.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<title>Form Styling</title> | |
<link | |
href="https://fonts.googleapis.com/css?family=Raleway" | |
rel="stylesheet" | |
/> | |
<style> | |
* { | |
/* | |
-May want to add "border-box for "box-sizing so padding does not affect width | |
-Reset margin and padding | |
*/ | |
/* CSS Reset */ | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
/* | |
-Background color is #344a72 | |
*/ | |
background: #344a72; | |
font-family: 'Raleway', sans-serif; | |
line-height: 1.8; | |
} | |
a { | |
/* | |
Underlined links are ugly :) | |
*/ | |
text-decoration: none; | |
} | |
#container { | |
/* | |
-Remember, margin: auto on left and right will center a block element | |
-I would also set a "max-width" for responsiveness | |
-May want to add some padding | |
*/ | |
max-width: 400px; | |
margin: 30px auto; | |
padding: 20px; | |
} | |
.form-wrap { | |
/* | |
This is the white area around the form and heading, etc | |
*/ | |
background: white; | |
padding: 15px 25px; | |
} | |
.form-wrap h1, | |
.form-wrap p { | |
/* | |
May want to center these | |
*/ | |
text-align: center; | |
} | |
.form-wrap .form-group { | |
/* | |
Each label, input is wrapped in .form-group | |
*/ | |
margin-top: 15px; | |
} | |
.form-wrap .form-group label { | |
/* | |
Label should be turned into a block element | |
*/ | |
display: block; | |
color: #666; | |
} | |
.form-wrap .form-group input { | |
/* | |
Inputs should reach accross the .form-wrap 100% and have some padding | |
*/ | |
width: 100%; | |
padding: 10px; | |
border: #ddd 1px solid; | |
border-radius: 5px; | |
} | |
.form-wrap button { | |
/* | |
Button should wrap accross 100% and display as block | |
Background color for button is #49c1a2 | |
*/ | |
width: 100%; | |
display: block; | |
background-color: #49c1a2; | |
padding: 10px; | |
margin-top: 20px; | |
color: #fff; | |
cursor: pointer; | |
} | |
.form-wrap button:hover { | |
/* | |
Hover background color for button is #37a08e | |
*/ | |
background: #37a08e; | |
} | |
.form-wrap .bottom-text { | |
/* | |
Bottom text is smaller | |
*/ | |
font-size: 13px; | |
margin-top: 20px; | |
} | |
footer { | |
/* | |
Should be centered | |
*/ | |
text-align: center; | |
margin-top: 10px; | |
color: white; | |
} | |
footer a { | |
/* | |
Footer link color is #49c1a2 | |
*/ | |
color: #49c1a2; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div class="form-wrap"> | |
<h1>Sign Up</h1> | |
<p>It's free and only takes a minute</p> | |
<form> | |
<div class="form-group"> | |
<label for="first-name">First Name</label> | |
<input type="text" name="firstName" id="first-name" /> | |
</div> | |
<div class="form-group"> | |
<label for="last-name">Last Name</label> | |
<input type="text" name="lastName" id="last-name" /> | |
</div> | |
<div class="form-group"> | |
<label for="email">Email</label> | |
<input type="email" name="email" id="email" /> | |
</div> | |
<div class="form-group"> | |
<label for="password">Password</label> | |
<input type="password" name="password" id="password" /> | |
</div> | |
<div class="form-group"> | |
<label for="password2">Confirm Password</label> | |
<input type="password" name="pasword2" id="password2" /> | |
</div> | |
<button type="submit" class="btn">Sign Up</button> | |
<p class="bottom-text"> | |
By clicking the Sign Up button, you agree to our | |
<a href="#">Terms & Conditions</a> and | |
<a href="#">Privacy Policy</a> | |
</p> | |
</form> | |
</div> | |
<footer> | |
<p>Already have an account? <a href="#">Login Here</a></p> | |
</footer> | |
</div> | |
</body> | |
</html> |
A Pen by Stavros Kefaleas on CodePen.