Created
February 21, 2019 23:16
-
-
Save Trailingslashes/71e89d5077b3ff709eee6747a776ef18 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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