Created
November 11, 2016 17:59
-
-
Save anonymous/1e479392b4408a00b9f7bac04c612497 to your computer and use it in GitHub Desktop.
players // source https://jsbin.com/guwili
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <meta charset="utf-8"> | |
| <link href=" http://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet" type="text/css" /> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>players</title> | |
| <style id="jsbin-css"> | |
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| overflow-y: scroll; | |
| } | |
| body { | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/background.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| font-family: 'lato', sans-serif; | |
| height: 100%; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #F39100; | |
| transition: 0.25s ease; | |
| } | |
| a:hover { | |
| color: #da8200; | |
| } | |
| .form { | |
| background: rgba(25, 34, 88, 0.7); | |
| padding: 40px; | |
| max-width: 600px; | |
| margin: 40px auto; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 10px 4px rgba(25, 34, 88, 0.3); | |
| } | |
| .tab-group { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 0 40px 0; | |
| } | |
| .tab-group:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .tab-group li a { | |
| display: block; | |
| text-decoration: none; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.25); | |
| color: #a0b3b0; | |
| font-size: 20px; | |
| float: left; | |
| width: 50%; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: 0.25s ease; | |
| } | |
| .tab-group li a:hover { | |
| background: #da8200; | |
| color: #ffffff; | |
| } | |
| .tab-group .active a { | |
| background: #F39100; | |
| color: #ffffff; | |
| } | |
| .tab-content > div:last-child { | |
| display: none; | |
| } | |
| .signup { | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .login { | |
| border-top-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| h1 { | |
| font-size: 28px; | |
| text-align: center; | |
| color: #ffffff; | |
| font-weight: 200; | |
| margin: 0 0 40px; | |
| } | |
| label { | |
| position: absolute; | |
| transform: translateY(15px); | |
| left: 13px; | |
| top: -3px; | |
| color: rgba(255, 255, 255, 0.2); | |
| transition: all 0.25s ease; | |
| -webkit-backface-visibility: hidden; | |
| pointer-events: none; | |
| font-size: 22px; | |
| } | |
| label .req { | |
| margin: 2px; | |
| color: rgba(255, 255, 255, 0.2); | |
| } | |
| label.active { | |
| transform: translateY(60px); | |
| left: 2px; | |
| font-size: 14px; | |
| } | |
| label.active .req { | |
| opacity: 0; | |
| } | |
| label.highlight { | |
| color: #ffffff; | |
| } | |
| input, textarea { | |
| font-size: 22px; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| padding: 10px 10px; | |
| background: none; | |
| background-image: none; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: border-color 0.25s ease, box-shadow 0.25s ease; | |
| } | |
| input:focus, textarea:focus { | |
| outline: 0; | |
| border-color: #F39100; | |
| } | |
| textarea { | |
| border: 2px solid #a0b3b0; | |
| resize: vertical; | |
| } | |
| .field-wrap { | |
| position: relative; | |
| margin-bottom: 40px; | |
| } | |
| .top-row:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .top-row > div { | |
| float: left; | |
| width: 48%; | |
| margin-right: 4%; | |
| } | |
| .top-row > div:last-child { | |
| margin: 0; | |
| } | |
| .button { | |
| border: 0; | |
| outline: none; | |
| border-radius: 0; | |
| padding: 15px 0; | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| letter-spacing: .05rem; | |
| background: #F39100; | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: all 0.25s ease; | |
| -webkit-appearance: none; | |
| } | |
| .button:hover, .button:focus { | |
| background: #ffa827; | |
| } | |
| .button-block { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| } | |
| .logo { | |
| width: 50%; | |
| height: 175px; | |
| margin: 0 auto; | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/oyosports.svg); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--Mixins//--> | |
| <!--creates a two up button group--> | |
| <!--creates a centered message in form--> | |
| <!--creates a text input field--> | |
| <!--creates a email input field--> | |
| <!--creates a password input field--> | |
| <!-- creates buttons--> | |
| <!--build//--> | |
| <!-- form acts as container--> | |
| <div class="form"> | |
| <div class="logo"></div> | |
| <ul class="tab-group"> | |
| <li class="tab active"><a href="#signup" class="signup">Sign Up</a></li> | |
| <li class="tab"><a href="#login" class="login">Log In</a></li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div id="signup"> | |
| <h1>Sign Up for Free</h1> | |
| <form action="/" method="post"> | |
| <div class="top-row"> | |
| <div class="field-wrap"> | |
| <label>First Name<span class="req">*</span></label> | |
| <input type="text" required="required" autocomplete="off"/> | |
| </div> | |
| <div class="field-wrap"> | |
| <label>Last Name<span class="req">*</span></label> | |
| <input type="text" required="required" autocomplete="off"/> | |
| </div> | |
| </div> | |
| <div class="field-wrap"> | |
| <label>Email Address<span class="req">*</span></label> | |
| <input type="email" required="required" autocomplete="off"/> | |
| </div> | |
| <div class="field-wrap"> | |
| <label>Password<span class="req">*</span></label> | |
| <input type="email" required="required" autocomplete="off"/> | |
| </div> | |
| <button type="submit" class="button button-block">Sign up Now</button> | |
| <div class="social-login"> | |
| <h3>...or login with:</h3> | |
| <div class="social-login-buttons"> | |
| <a class="btn btn-link-1 btn-link-1-facebook" href="#"> | |
| <i class="fa fa-facebook"></i> Facebook | |
| </a> | |
| <a class="btn btn-link-1 btn-link-1-twitter" href="#"> | |
| <i class="fa fa-twitter"></i> Twitter | |
| </a> | |
| <a class="btn btn-link-1 btn-link-1-google-plus" href="#"> | |
| <i class="fa fa-google-plus"></i> Google Plus | |
| </a> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="login"> | |
| <h1>Welcome Back!</h1> | |
| <form action="/" method="post"> | |
| <div class="field-wrap"> | |
| <label>Email Address<span class="req">*</span></label> | |
| <input type="email" required="required" autocomplete="off"/> | |
| </div> | |
| <div class="field-wrap"> | |
| <label>Password<span class="req">*</span></label> | |
| <input type="email" required="required" autocomplete="off"/> | |
| </div> | |
| <button type="submit" class="button button-block">Log In</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $('.form').find('input, textarea').on('keyup blur focus', function(e) { | |
| var $this = $(this), | |
| label = $this.prev('label'); | |
| if (e.type === 'keyup') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.addClass('active highlight'); | |
| } | |
| } else if (e.type === 'blur') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.removeClass('highlight'); | |
| } | |
| } else if (e.type === 'focus') { | |
| if ($this.val() === '') { | |
| label.removeClass('highlight'); | |
| } else if ($this.val() !== '') { | |
| label.addClass('highlight'); | |
| } | |
| } | |
| }); | |
| $('.tab a').on('click', function(e) { | |
| e.preventDefault(); | |
| $(this).parent().addClass('active'); | |
| $(this).parent().siblings().removeClass('active'); | |
| target = $(this).attr('href'); | |
| $('.tab-content > div').not(target).hide(); | |
| $(target).fadeIn(600); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">*, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| overflow-y: scroll; | |
| } | |
| body { | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/background.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| font-family: 'lato', sans-serif; | |
| height: 100%; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #F39100; | |
| transition: 0.25s ease; | |
| } | |
| a:hover { | |
| color: #da8200; | |
| } | |
| .form { | |
| background: rgba(25, 34, 88, 0.7); | |
| padding: 40px; | |
| max-width: 600px; | |
| margin: 40px auto; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 10px 4px rgba(25, 34, 88, 0.3); | |
| } | |
| .tab-group { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 0 40px 0; | |
| } | |
| .tab-group:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .tab-group li a { | |
| display: block; | |
| text-decoration: none; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.25); | |
| color: #a0b3b0; | |
| font-size: 20px; | |
| float: left; | |
| width: 50%; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: 0.25s ease; | |
| } | |
| .tab-group li a:hover { | |
| background: #da8200; | |
| color: #ffffff; | |
| } | |
| .tab-group .active a { | |
| background: #F39100; | |
| color: #ffffff; | |
| } | |
| .tab-content > div:last-child { | |
| display: none; | |
| } | |
| .signup { | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .login { | |
| border-top-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| h1 { | |
| font-size: 28px; | |
| text-align: center; | |
| color: #ffffff; | |
| font-weight: 200; | |
| margin: 0 0 40px; | |
| } | |
| label { | |
| position: absolute; | |
| transform: translateY(15px); | |
| left: 13px; | |
| top: -3px; | |
| color: rgba(255, 255, 255, 0.2); | |
| transition: all 0.25s ease; | |
| -webkit-backface-visibility: hidden; | |
| pointer-events: none; | |
| font-size: 22px; | |
| } | |
| label .req { | |
| margin: 2px; | |
| color: rgba(255, 255, 255, 0.2); | |
| } | |
| label.active { | |
| transform: translateY(60px); | |
| left: 2px; | |
| font-size: 14px; | |
| } | |
| label.active .req { | |
| opacity: 0; | |
| } | |
| label.highlight { | |
| color: #ffffff; | |
| } | |
| input, textarea { | |
| font-size: 22px; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| padding: 10px 10px; | |
| background: none; | |
| background-image: none; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: border-color 0.25s ease, box-shadow 0.25s ease; | |
| } | |
| input:focus, textarea:focus { | |
| outline: 0; | |
| border-color: #F39100; | |
| } | |
| textarea { | |
| border: 2px solid #a0b3b0; | |
| resize: vertical; | |
| } | |
| .field-wrap { | |
| position: relative; | |
| margin-bottom: 40px; | |
| } | |
| .top-row:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .top-row > div { | |
| float: left; | |
| width: 48%; | |
| margin-right: 4%; | |
| } | |
| .top-row > div:last-child { | |
| margin: 0; | |
| } | |
| .button { | |
| border: 0; | |
| outline: none; | |
| border-radius: 0; | |
| padding: 15px 0; | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| letter-spacing: .05rem; | |
| background: #F39100; | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: all 0.25s ease; | |
| -webkit-appearance: none; | |
| } | |
| .button:hover, .button:focus { | |
| background: #ffa827; | |
| } | |
| .button-block { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| } | |
| .logo { | |
| width: 50%; | |
| height: 175px; | |
| margin: 0 auto; | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/oyosports.svg); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$('.form').find('input, textarea').on('keyup blur focus', function(e) { | |
| var $this = $(this), | |
| label = $this.prev('label'); | |
| if (e.type === 'keyup') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.addClass('active highlight'); | |
| } | |
| } else if (e.type === 'blur') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.removeClass('highlight'); | |
| } | |
| } else if (e.type === 'focus') { | |
| if ($this.val() === '') { | |
| label.removeClass('highlight'); | |
| } else if ($this.val() !== '') { | |
| label.addClass('highlight'); | |
| } | |
| } | |
| }); | |
| $('.tab a').on('click', function(e) { | |
| e.preventDefault(); | |
| $(this).parent().addClass('active'); | |
| $(this).parent().siblings().removeClass('active'); | |
| target = $(this).attr('href'); | |
| $('.tab-content > div').not(target).hide(); | |
| $(target).fadeIn(600); | |
| });</script></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
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| overflow-y: scroll; | |
| } | |
| body { | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/background.png); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| font-family: 'lato', sans-serif; | |
| height: 100%; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #F39100; | |
| transition: 0.25s ease; | |
| } | |
| a:hover { | |
| color: #da8200; | |
| } | |
| .form { | |
| background: rgba(25, 34, 88, 0.7); | |
| padding: 40px; | |
| max-width: 600px; | |
| margin: 40px auto; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 10px 4px rgba(25, 34, 88, 0.3); | |
| } | |
| .tab-group { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 0 40px 0; | |
| } | |
| .tab-group:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .tab-group li a { | |
| display: block; | |
| text-decoration: none; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.25); | |
| color: #a0b3b0; | |
| font-size: 20px; | |
| float: left; | |
| width: 50%; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: 0.25s ease; | |
| } | |
| .tab-group li a:hover { | |
| background: #da8200; | |
| color: #ffffff; | |
| } | |
| .tab-group .active a { | |
| background: #F39100; | |
| color: #ffffff; | |
| } | |
| .tab-content > div:last-child { | |
| display: none; | |
| } | |
| .signup { | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| } | |
| .login { | |
| border-top-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| h1 { | |
| font-size: 28px; | |
| text-align: center; | |
| color: #ffffff; | |
| font-weight: 200; | |
| margin: 0 0 40px; | |
| } | |
| label { | |
| position: absolute; | |
| transform: translateY(15px); | |
| left: 13px; | |
| top: -3px; | |
| color: rgba(255, 255, 255, 0.2); | |
| transition: all 0.25s ease; | |
| -webkit-backface-visibility: hidden; | |
| pointer-events: none; | |
| font-size: 22px; | |
| } | |
| label .req { | |
| margin: 2px; | |
| color: rgba(255, 255, 255, 0.2); | |
| } | |
| label.active { | |
| transform: translateY(60px); | |
| left: 2px; | |
| font-size: 14px; | |
| } | |
| label.active .req { | |
| opacity: 0; | |
| } | |
| label.highlight { | |
| color: #ffffff; | |
| } | |
| input, textarea { | |
| font-size: 22px; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| padding: 10px 10px; | |
| background: none; | |
| background-image: none; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: border-color 0.25s ease, box-shadow 0.25s ease; | |
| } | |
| input:focus, textarea:focus { | |
| outline: 0; | |
| border-color: #F39100; | |
| } | |
| textarea { | |
| border: 2px solid #a0b3b0; | |
| resize: vertical; | |
| } | |
| .field-wrap { | |
| position: relative; | |
| margin-bottom: 40px; | |
| } | |
| .top-row:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| .top-row > div { | |
| float: left; | |
| width: 48%; | |
| margin-right: 4%; | |
| } | |
| .top-row > div:last-child { | |
| margin: 0; | |
| } | |
| .button { | |
| border: 0; | |
| outline: none; | |
| border-radius: 0; | |
| padding: 15px 0; | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| letter-spacing: .05rem; | |
| background: #F39100; | |
| color: #ffffff; | |
| border-radius: 5px; | |
| transition: all 0.25s ease; | |
| -webkit-appearance: none; | |
| } | |
| .button:hover, .button:focus { | |
| background: #ffa827; | |
| } | |
| .button-block { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| } | |
| .logo { | |
| width: 50%; | |
| height: 175px; | |
| margin: 0 auto; | |
| background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183319/oyosports.svg); | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| } |
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
| $('.form').find('input, textarea').on('keyup blur focus', function(e) { | |
| var $this = $(this), | |
| label = $this.prev('label'); | |
| if (e.type === 'keyup') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.addClass('active highlight'); | |
| } | |
| } else if (e.type === 'blur') { | |
| if ($this.val() === '') { | |
| label.removeClass('active highlight'); | |
| } else { | |
| label.removeClass('highlight'); | |
| } | |
| } else if (e.type === 'focus') { | |
| if ($this.val() === '') { | |
| label.removeClass('highlight'); | |
| } else if ($this.val() !== '') { | |
| label.addClass('highlight'); | |
| } | |
| } | |
| }); | |
| $('.tab a').on('click', function(e) { | |
| e.preventDefault(); | |
| $(this).parent().addClass('active'); | |
| $(this).parent().siblings().removeClass('active'); | |
| target = $(this).attr('href'); | |
| $('.tab-content > div').not(target).hide(); | |
| $(target).fadeIn(600); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment