Skip to content

Instantly share code, notes, and snippets.

@Trailingslashes
Created February 21, 2019 23:16
Show Gist options
  • Save Trailingslashes/b73a06c125113293cd166772406c460c to your computer and use it in GitHub Desktop.
Save Trailingslashes/b73a06c125113293cd166772406c460c to your computer and use it in GitHub Desktop.
Challenege-Signup-Form: Attempt 2 created by Trailingslashe1 - https://repl.it/@Trailingslashe1/Challenege-Signup-Form-Attempt-2
<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment