Skip to content

Instantly share code, notes, and snippets.

@skiabox skiabox/index.html
Created Jan 12, 2020

Embed
What would you like to do?
Styled Form
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.