Inspired by http://dribbble.com/shots/911891-Login
A Pen by Secret Sam on CodePen.
Created
November 17, 2013 16:48
-
-
Save michaelminter/7515387 to your computer and use it in GitHub Desktop.
A Pen by A Non Ymous.
This file contains hidden or 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
| <html lang="en-Us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Login with Facebook or Twitter</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300'> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div id="login"> | |
| <h1><strong>Welcome.</strong> Please login.</h1> | |
| <form action="javascript:void(0);" method="get"> | |
| <fieldset> | |
| <p><input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Username" --> | |
| <p><input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Password" --> | |
| <p><a href="#">Forgot Password?</a></p> | |
| <p><input type="submit" value="Login"></p> | |
| </fieldset> | |
| </form> | |
| <p><span class="btn-round">or</span></p> | |
| <p> | |
| <a class="facebook-before"><span class="fontawesome-facebook"></span></a> | |
| <button class="facebook">Login Using Facbook</button> | |
| </p> | |
| <p> | |
| <a class="twitter-before"><span class="fontawesome-twitter"></span></a> | |
| <button class="twitter">Login Using Twitter</button> | |
| </p> | |
| </div> <!-- end login --> | |
| </body> | |
| </html> |
This file contains hidden or 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
| @charset "utf-8"; | |
| /* CSS Document */ | |
| /* ---------- FONTAWESOME ---------- */ | |
| /* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ | |
| /* ---------- http://weloveiconfonts.com/ ---------- */ | |
| @import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
| /* ---------- ERIC MEYER'S RESET CSS ---------- */ | |
| /* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */ | |
| @import url(http://meyerweb.com/eric/tools/css/reset/reset.css); | |
| /* ---------- FONTAWESOME ---------- */ | |
| [class*="fontawesome-"]:before { | |
| font-family: 'FontAwesome', sans-serif; | |
| } | |
| /* ---------- GENERAL ---------- */ | |
| body { | |
| background: #f4f4f4; | |
| color: #5a5656; | |
| font: 100%/1.5em 'Open Sans', sans-serif; | |
| margin: 0; | |
| } | |
| a { text-decoration: none; } | |
| h1 { font-size: 1em; } | |
| h1, p { | |
| margin-bottom: 10px; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| .uppercase { text-transform: uppercase; } | |
| /* ---------- LOGIN ---------- */ | |
| #login { | |
| margin: 50px auto; | |
| width: 300px; | |
| } | |
| form fieldset input[type="text"], input[type="password"] { | |
| background: #e5e5e5; | |
| border: none; | |
| border-radius: 3px; | |
| color: #5a5656; | |
| font-family: inherit; | |
| font-size: 14px; | |
| height: 50px; | |
| outline: none; | |
| padding: 0px 10px; | |
| width: 280px; | |
| -webkit-appearance:none; | |
| } | |
| form fieldset input[type="submit"] { | |
| background-color: #008dde; | |
| border: none; | |
| border-radius: 3px; | |
| color: #f4f4f4; | |
| cursor: pointer; | |
| font-family: inherit; | |
| height: 50px; | |
| text-transform: uppercase; | |
| width: 300px; | |
| -webkit-appearance:none; | |
| } | |
| form fieldset a { | |
| color: #5a5656; | |
| font-size: 10px; | |
| } | |
| form fieldset a:hover { text-decoration: underline; } | |
| .btn-round { | |
| background: #5a5656; | |
| border-radius: 50%; | |
| color: #f4f4f4; | |
| display: block; | |
| font-size: 12px; | |
| height: 50px; | |
| line-height: 50px; | |
| margin: 30px 125px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| width: 50px; | |
| } | |
| .facebook-before { | |
| background: #0064ab; | |
| border-radius: 3px 0px 0px 3px; | |
| color: #f4f4f4; | |
| display: block; | |
| float: left; | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| width: 50px; | |
| } | |
| .facebook { | |
| background: #0079ce; | |
| border: none; | |
| border-radius: 0px 3px 3px 0px; | |
| color: #f4f4f4; | |
| cursor: pointer; | |
| height: 50px; | |
| text-transform: uppercase; | |
| width: 250px; | |
| } | |
| .twitter-before { | |
| background: #189bcb; | |
| border-radius: 3px 0px 0px 3px; | |
| color: #f4f4f4; | |
| display: block; | |
| float: left; | |
| height: 50px; | |
| line-height: 50px; | |
| text-align: center; | |
| width: 50px; | |
| } | |
| .twitter { | |
| background: #1bb2e9; | |
| border: none; | |
| border-radius: 0px 3px 3px 0px; | |
| color: #f4f4f4; | |
| cursor: pointer; | |
| height: 50px; | |
| text-transform: uppercase; | |
| width: 250px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment