Created
August 7, 2013 13:32
-
-
Save DragonI/6174067 to your computer and use it in GitHub Desktop.
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
| /* BS3 using input group icons from Font-Awesome 3.2.1 */ | |
| /* no need for any margin/padding for headings when using WELL */ | |
| .well h3 { | |
| padding-top: 0; | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| } | |
| #signupForm .input-group { | |
| margin-bottom: 20px; | |
| } | |
| /* get font-awesome to work with BS3 */ | |
| .input-group-addon .icon-2x { | |
| width: 28px; | |
| min-width: 28px; | |
| display: inline-block; | |
| } | |
| .h1-stage-left h1 { | |
| margin-left: -10px; | |
| } | |
| .inline-block > li { | |
| position: relative; | |
| display: inline-block; | |
| margin: 0 10px 10px 0; | |
| } |
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> | |
| <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> | |
| <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> | |
| <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> | |
| <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Sign Up Form: Bootstrap 3.0 RC1 and Font-Awesome 3.2.1" /> | |
| <meta name="author" content="DragonI"> | |
| <link href="http://twbs.github.io/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> | |
| <title>Sign Up Form: Bootstrap 3.0 RC1 and Font-Awesome 3.2.1</title> | |
| </head> | |
| <body> | |
| <div id="contentContainer" class="container"> | |
| <div class="row"> | |
| <div id="realContent" class="col-lg-12"> | |
| <div class="col-lg-8 col-lg-offset-2 h1-stage-left"> | |
| <h1>Sign Up</h1> | |
| </div> | |
| <div class="row"> | |
| <section class="col-lg-8 col-lg-offset-2 col-12 well"> | |
| <div class="col-lg-5 col-sm-5 col-12"> | |
| <div class="row"> | |
| <h3>Social Sign In</h3> | |
| </div> | |
| <div class="row"> | |
| <p>Let's be honest, you need another account like a hole in the head!</p> | |
| </div> | |
| <div class="row"> | |
| <ul id="zSocialSignup" class="inline-block list-unstyled"> | |
| <li><a target="_blank" href="#google" title="Sign in with Google" rel="nofollow"><i class="icon-google-plus-sign icon-5x"></i></a></li> | |
| <li><a target="_blank" href="#twitter" title="Sign in with Twitter" rel="nofollow"><i class="icon-twitter-sign icon-5x"></i></a></li> | |
| <li><a target="_blank" href="#facebook" title="Sign in with Facebook" rel="nofollow"><i class="icon-facebook-sign icon-5x"></i></a></li> | |
| <li><a target="_blank" href="#linkedin" title="Sign in with LinkedIn" rel="nofollow"><i class="icon-linkedin-sign icon-5x"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- wells or col offsets is NOT adding a gutter. Use thus hack until I can figure it out --> | |
| <div class="col-lg-1 col-sm-1"> | |
| | |
| </div> | |
| <div class="col-lg-6 col-sm-6 col-12"> | |
| <div class="row"> | |
| <h3>Sign Up Old School</h3> | |
| </div> | |
| <div class="row"> | |
| <form id="signupForm" method="POST" action="#hahah" accept-charset="UTF-8"> | |
| <div class="input-group"> | |
| <span class="input-group-addon"><i class="icon-envelope icon-2x"></i></span> | |
| <input id="email" class="form-control input-lg" placeholder="Email" required="required" maxlength="100" type="text" name="email" value=""> | |
| </div> | |
| <div class="input-group"> | |
| <span class="input-group-addon"><i class="icon-asterisk icon-2x"></i></span> | |
| <input id="password" class="form-control input-lg" placeholder="Password" required="required" maxlength="60" type="password" name="password"> | |
| </div> | |
| <div class="input-group"> | |
| <span class="input-group-addon"><i class="icon-asterisk icon-2x"></i></span> | |
| <input id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" required="required" maxlength="60" type="password" name="password_confirmation"> | |
| </div> | |
| <div class="form-group"> | |
| <button type="submit" id="btn-signup" class="btn btn-block btn-primary btn-lg">Sign Up</button> | |
| </div> | |
| </form> | |
| <div class="form-group"> | |
| <div class="topCushion">Already a member? <a href="#login">Login</a></div> | |
| </div> | |
| <div class="form-group"> | |
| <p>By clicking on "Sign Up", you agree to the <a href="#terms-of-service" target="_blank">Terms of Service</a> and the <a href="#privacy" target="_blank">Privacy Policy</a>.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <script src="http://twbs.github.io/bootstrap/dist/js/bootstrap.js"></script> | |
| </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
| $(document).ready(function () { | |
| $('form input').tooltip({ | |
| placement: 'top', | |
| trigger: 'focus', | |
| title: function (){ | |
| return $(this).attr('placeholder'); | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment