Styled Form

## index.html
<!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>

## styled-form.markdown

      
        

          Raw
        
        
          
            
          
          
            
              styled-form.markdown
            
          
        
      
    
  
    Styled Form
A Pen by Stavros Kefaleas on CodePen.
License.
	<!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>