Trailingslashes · February 21, 2019 23:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
      <title>AnalogSea</title>
      <meta name="description" content="Sign up for AnalogSea.">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <img class="logo" src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.5.2_challenge_signup_form/logo.png" alt="AnalogSea" />
      <form role="form" action="/signup" accept-charset="UTF-8" method="post" class="signup-form">
         <fieldset>
            <legend>Sign up</legend>
            <label for="user-email">Email</label>
            <input type="email" placeholder="[email protected]" name="user-email" id="user-email" required/>
            <label for="user-password">Password</label>
            <input placeholder="password" type="password" name="user-password" id="user-password" required/>
            <button type="submit">Sign up</button>
         </fieldset>
      </form>
      <footer role="contentinfo" class="footer">
         <p>Already have an account? <a href="/login">Log in</a></p>
      </footer>
   </body>
 </html>
diff --git a/style.css b/style.css
 body {
 	background: #298eea;
 	font-family: "Roboto", helvetica, sans-serif;
 	padding: 60px 0 0;
 	margin: 0;
 	font-size: 18px;
 }

 body * {
 	box-sizing: border-box;
 }

 fieldset {
 	padding: 0;
 	border: 0;
 	margin: 0;
 }

 .logo {
 	display: block;
 	width: auto;
 	height: 35px;
 	margin: 0 auto 30px;
 }

 .signup-form {
 	width: 400px;
 	padding: 40px;
 	border-radius: 3px;
 	background: white;
 	margin: 0 auto;
 }

 .signup-form legend {
 	width: 100%;
 	line-height: 38px;
 	font-size: 35px;
 	font-weight: 300;
 	color: #565656;
 	text-align: center;
 	letter-spacing: 0;
 	margin: 0 auto 45px;
 }


 /* The button ultimately gets a different background
 color below, but it largely overlaps with email/password
 input styling, so we include it in the same style block, then
 override parts of it in its own declaration. */

 input[type="email"],
 input[type="password"],
 button[type="submit"] {
 	display: block;
 	width: 100%;
 	height: auto;
 	font-size: 18px;
 	text-align: left;
 	padding: 15px;
 	border: 2px solid #e7e7e7;
 	border-radius: 3px;
 	background: #fcfcfc;
 	margin: 10px auto 20px;
 	transition: opacity 0.4s;
 }

 button[type="submit"] {
 	height: auto;
 	font-size: 22px;
 	font-weight: 500;
 	text-align: center;
 	color: white;
 	background: #15CD72;
 	border: 0;
 	cursor: pointer;
 	margin-bottom: 0;
 }


 /* A Firefox bug makes our focus outlines disappear,
  so we have to restore them ourselves. This focus outline is an
  a11y MUST for keyboard users! Note that we are NOT expecting you 
  to know this. You can read more about the issue & the fix at: 
  */

 input[type="email"]:focus,
 input[type="password"]:focus,
 button[type="submit"]:focus {
 	/* Restore desirable focus behavior 
 in non-webkit browsers like Firefox */
 	outline: auto 2px #87ceeb;
 	/* Preseve default focus behavior in webkit browsers */
 	outline: auto 5px -webkit-focus-ring-color;
 	box-shadow: 0;
 }

 button[type="submit"]:hover,
 button[type="submit"]:focus {
 	background-color: #0CB863;
 	-webkit-transition: background 0.1s;
 	-moz-transition: background 0.1s;
 	-o-transition: background 0.1s;
 	transition: background 0.1s;
 }

 .signup-form p {
 	font-size: 16px;
 	text-align: center;
 	margin: 10px 0 0;
 	color: #696969;
 }

 .signup-form a {
 	color: #999;
 	text-decoration: none;
 	border-bottom: 1px solid #bbb;
 }

 .signup-form a:hover {
 	border-color: #999;
 	color: #777;
 }

 .footer {
 	text-align: center;
 	color: white;
 	margin: 20px auto;
 	font-weight: 600;
 	border: 0;
 	padding: 0;
 }

 .footer a {
 	color: white;
 }

 .footer a:hover {
 	color: #E7F1F9;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>AnalogSea</title>
	<meta name="description" content="Sign up for AnalogSea.">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<img class="logo" src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.5.2_challenge_signup_form/logo.png" alt="AnalogSea" />
	<form role="form" action="/signup" accept-charset="UTF-8" method="post" class="signup-form">
	<fieldset>
	<legend>Sign up</legend>
	<label for="user-email">Email</label>
	<input type="email" placeholder="[email protected]" name="user-email" id="user-email" required/>
	<label for="user-password">Password</label>
	<input placeholder="password" type="password" name="user-password" id="user-password" required/>
	<button type="submit">Sign up</button>
	</fieldset>
	</form>
	<footer role="contentinfo" class="footer">
	<p>Already have an account? <a href="/login">Log in</a></p>
	</footer>
	</body>
	</html>
	body {
	background: #298eea;
	font-family: "Roboto", helvetica, sans-serif;
	padding: 60px 0 0;
	margin: 0;
	font-size: 18px;
	}

	body * {
	box-sizing: border-box;
	}

	fieldset {
	padding: 0;
	border: 0;
	margin: 0;
	}

	.logo {
	display: block;
	width: auto;
	height: 35px;
	margin: 0 auto 30px;
	}

	.signup-form {
	width: 400px;
	padding: 40px;
	border-radius: 3px;
	background: white;
	margin: 0 auto;
	}

	.signup-form legend {
	width: 100%;
	line-height: 38px;
	font-size: 35px;
	font-weight: 300;
	color: #565656;
	text-align: center;
	letter-spacing: 0;
	margin: 0 auto 45px;
	}


	/* The button ultimately gets a different background
	color below, but it largely overlaps with email/password
	input styling, so we include it in the same style block, then
	override parts of it in its own declaration. */

	input[type="email"],
	input[type="password"],
	button[type="submit"] {
	display: block;
	width: 100%;
	height: auto;
	font-size: 18px;
	text-align: left;
	padding: 15px;
	border: 2px solid #e7e7e7;
	border-radius: 3px;
	background: #fcfcfc;
	margin: 10px auto 20px;
	transition: opacity 0.4s;
	}

	button[type="submit"] {
	height: auto;
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	color: white;
	background: #15CD72;
	border: 0;
	cursor: pointer;
	margin-bottom: 0;
	}


	/* A Firefox bug makes our focus outlines disappear,
	so we have to restore them ourselves. This focus outline is an
	a11y MUST for keyboard users! Note that we are NOT expecting you
	to know this. You can read more about the issue & the fix at:
	*/

	input[type="email"]:focus,
	input[type="password"]:focus,
	button[type="submit"]:focus {
	/* Restore desirable focus behavior
	in non-webkit browsers like Firefox */
	outline: auto 2px #87ceeb;
	/* Preseve default focus behavior in webkit browsers */
	outline: auto 5px -webkit-focus-ring-color;
	box-shadow: 0;
	}

	button[type="submit"]:hover,
	button[type="submit"]:focus {
	background-color: #0CB863;
	-webkit-transition: background 0.1s;
	-moz-transition: background 0.1s;
	-o-transition: background 0.1s;
	transition: background 0.1s;
	}

	.signup-form p {
	font-size: 16px;
	text-align: center;
	margin: 10px 0 0;
	color: #696969;
	}

	.signup-form a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px solid #bbb;
	}

	.signup-form a:hover {
	border-color: #999;
	color: #777;
	}

	.footer {
	text-align: center;
	color: white;
	margin: 20px auto;
	font-weight: 600;
	border: 0;
	padding: 0;
	}

	.footer a {
	color: white;
	}

	.footer a:hover {
	color: #E7F1F9;
	}