Created
August 30, 2016 08:17
-
-
Save anonymous/794354228edd4c8488fdf5e9bf2285a4 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/kajileqega
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> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #f9fcfe; | |
| color: #313233; | |
| font-family: avenir, sans-serif; | |
| margin: 0; | |
| } | |
| .chart { | |
| margin: auto; | |
| max-width: 420px; | |
| padding: 0 20px; | |
| } | |
| @media screen and (max-width: 480px) { | |
| .chart { | |
| padding: 20px; | |
| } | |
| } | |
| .chart__title { | |
| color: #42525f; | |
| font-size: 1.5rem; | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| .chart__tabs { | |
| display: flex; | |
| position: relative; | |
| } | |
| .chart__tab { | |
| width: 50%; | |
| min-height: 350px; | |
| } | |
| .chart__tab:first-child .chart__label { | |
| border-right: none; | |
| border-top-left-radius: 5px; | |
| } | |
| .chart__tab:last-child .chart__label { | |
| border-top-right-radius: 5px; | |
| } | |
| .chart__input { | |
| display: none; | |
| } | |
| .chart__input:checked + label { | |
| background: #f9fcfe; | |
| border-bottom: none; | |
| color: #396a86; | |
| } | |
| .chart__input:checked + label + .chart__body { | |
| display: block; | |
| } | |
| .chart__label { | |
| background: #f4f7f9; | |
| border: 1px solid #e5e8ea; | |
| color: #97a2aa; | |
| display: block; | |
| font-size: 1.25rem; | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| .chart__label:hover { | |
| color: #396a86; | |
| } | |
| .chart__body { | |
| display: none; | |
| left: 0; | |
| position: absolute; | |
| top: 70px; | |
| width: 100%; | |
| } | |
| /* ====== FORM ====== */ | |
| .form__item { | |
| margin-bottom: 10px; | |
| } | |
| .form__input { | |
| border: 1px solid #dbdee0; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| padding: 12px; | |
| width: 100%; | |
| } | |
| .form__input:active, | |
| .form__input:focus { | |
| border: 1px solid #99BCD0; | |
| box-shadow: 0px 0px 7px 1px rgba(55,144,196,0.2); | |
| outline: none; | |
| } | |
| .form__forgot { | |
| color: #f15d22; | |
| font-size: .8125rem; | |
| line-height: 2; | |
| margin-left: .8125rem; | |
| text-decoration: none; | |
| } | |
| .form__submit { | |
| background: #f15d22; | |
| border-radius: 5px; | |
| color: white; | |
| display: block; | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| padding: 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| .form__message { | |
| font-size: 1.125rem; | |
| text-align: center; | |
| } | |
| .form__link { | |
| display: block; | |
| margin-top: 0.625rem; | |
| text-decoration: none; | |
| color: #f15d22; | |
| } | |
| .chart-community { | |
| border-top: 1px solid #e5e8ea; | |
| margin-top: 30px; | |
| padding-top: 30px; | |
| text-align: center; | |
| } | |
| .chart-community__item { | |
| margin-bottom: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chart"> | |
| <h3 class="chart__title"> | |
| MyChart | |
| </h3> | |
| <div class="chart__tabs"> | |
| <div class="chart__tab"> | |
| <input type="radio" id="signin" name="mychart" class="chart__input" checked=checked> | |
| <label for="signin" class="chart__label">Sign In</label> | |
| <div class="chart__body"> | |
| <form action="" method="POST" class="form"> | |
| <div class="form__item"> | |
| <input type="text" placeholder="Username" class="form__input"> | |
| <a href="#" class="form__forgot">Forgot Username?</a> | |
| </div> | |
| <div class="form__item"> | |
| <input type="text" placeholder="Password" class="form__input"> | |
| <a href="#" class="form__forgot">Forgot Password?</a> | |
| </div> | |
| <a href="#" class="form__submit">Sign In to MyChart</a> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="chart__tab"> | |
| <input id="register" type="radio" name="mychart" class="chart__input"> | |
| <label for="register" class="chart__label">Register</label> | |
| <div class="chart__body"> | |
| <div class="form__message"> | |
| <p>To register for MyChart, our patient communication and information system, you’ll need the activation code from your enrollment letter.</p> | |
| <p>If you haven’t received an activation code, please request one to begin.</p> | |
| <a href="#" class="form__submit">Continue to Registration</a> | |
| <a href="#" class="form__link">Request Activation Code</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chart-community"> | |
| <div class="chart-community__item"> | |
| Community Howard Regional Health? | |
| <a href="#" class="form__link">Sign In to My e-Health</a> | |
| </div> | |
| <div class="chart-community__item"> | |
| Community Hospital Anderson? | |
| <a href="#" class="form__link">Sign In to MyRecords</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">* { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #f9fcfe; | |
| color: #313233; | |
| font-family: avenir, sans-serif; | |
| margin: 0; | |
| } | |
| .chart { | |
| margin: auto; | |
| max-width: 420px; | |
| padding: 0 20px; | |
| } | |
| @media screen and (max-width: 480px) { | |
| .chart { | |
| padding: 20px; | |
| } | |
| } | |
| .chart__title { | |
| color: #42525f; | |
| font-size: 1.5rem; | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| .chart__tabs { | |
| display: flex; | |
| position: relative; | |
| } | |
| .chart__tab { | |
| width: 50%; | |
| min-height: 350px; | |
| } | |
| .chart__tab:first-child .chart__label { | |
| border-right: none; | |
| border-top-left-radius: 5px; | |
| } | |
| .chart__tab:last-child .chart__label { | |
| border-top-right-radius: 5px; | |
| } | |
| .chart__input { | |
| display: none; | |
| } | |
| .chart__input:checked + label { | |
| background: #f9fcfe; | |
| border-bottom: none; | |
| color: #396a86; | |
| } | |
| .chart__input:checked + label + .chart__body { | |
| display: block; | |
| } | |
| .chart__label { | |
| background: #f4f7f9; | |
| border: 1px solid #e5e8ea; | |
| color: #97a2aa; | |
| display: block; | |
| font-size: 1.25rem; | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| .chart__label:hover { | |
| color: #396a86; | |
| } | |
| .chart__body { | |
| display: none; | |
| left: 0; | |
| position: absolute; | |
| top: 70px; | |
| width: 100%; | |
| } | |
| /* ====== FORM ====== */ | |
| .form__item { | |
| margin-bottom: 10px; | |
| } | |
| .form__input { | |
| border: 1px solid #dbdee0; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| padding: 12px; | |
| width: 100%; | |
| } | |
| .form__input:active, | |
| .form__input:focus { | |
| border: 1px solid #99BCD0; | |
| box-shadow: 0px 0px 7px 1px rgba(55,144,196,0.2); | |
| outline: none; | |
| } | |
| .form__forgot { | |
| color: #f15d22; | |
| font-size: .8125rem; | |
| line-height: 2; | |
| margin-left: .8125rem; | |
| text-decoration: none; | |
| } | |
| .form__submit { | |
| background: #f15d22; | |
| border-radius: 5px; | |
| color: white; | |
| display: block; | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| padding: 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| .form__message { | |
| font-size: 1.125rem; | |
| text-align: center; | |
| } | |
| .form__link { | |
| display: block; | |
| margin-top: 0.625rem; | |
| text-decoration: none; | |
| color: #f15d22; | |
| } | |
| .chart-community { | |
| border-top: 1px solid #e5e8ea; | |
| margin-top: 30px; | |
| padding-top: 30px; | |
| text-align: center; | |
| } | |
| .chart-community__item { | |
| margin-bottom: 1.5rem; | |
| }</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
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #f9fcfe; | |
| color: #313233; | |
| font-family: avenir, sans-serif; | |
| margin: 0; | |
| } | |
| .chart { | |
| margin: auto; | |
| max-width: 420px; | |
| padding: 0 20px; | |
| } | |
| @media screen and (max-width: 480px) { | |
| .chart { | |
| padding: 20px; | |
| } | |
| } | |
| .chart__title { | |
| color: #42525f; | |
| font-size: 1.5rem; | |
| font-weight: normal; | |
| text-align: center; | |
| } | |
| .chart__tabs { | |
| display: flex; | |
| position: relative; | |
| } | |
| .chart__tab { | |
| width: 50%; | |
| min-height: 350px; | |
| } | |
| .chart__tab:first-child .chart__label { | |
| border-right: none; | |
| border-top-left-radius: 5px; | |
| } | |
| .chart__tab:last-child .chart__label { | |
| border-top-right-radius: 5px; | |
| } | |
| .chart__input { | |
| display: none; | |
| } | |
| .chart__input:checked + label { | |
| background: #f9fcfe; | |
| border-bottom: none; | |
| color: #396a86; | |
| } | |
| .chart__input:checked + label + .chart__body { | |
| display: block; | |
| } | |
| .chart__label { | |
| background: #f4f7f9; | |
| border: 1px solid #e5e8ea; | |
| color: #97a2aa; | |
| display: block; | |
| font-size: 1.25rem; | |
| padding: 10px; | |
| text-align: center; | |
| } | |
| .chart__label:hover { | |
| color: #396a86; | |
| } | |
| .chart__body { | |
| display: none; | |
| left: 0; | |
| position: absolute; | |
| top: 70px; | |
| width: 100%; | |
| } | |
| /* ====== FORM ====== */ | |
| .form__item { | |
| margin-bottom: 10px; | |
| } | |
| .form__input { | |
| border: 1px solid #dbdee0; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| padding: 12px; | |
| width: 100%; | |
| } | |
| .form__input:active, | |
| .form__input:focus { | |
| border: 1px solid #99BCD0; | |
| box-shadow: 0px 0px 7px 1px rgba(55,144,196,0.2); | |
| outline: none; | |
| } | |
| .form__forgot { | |
| color: #f15d22; | |
| font-size: .8125rem; | |
| line-height: 2; | |
| margin-left: .8125rem; | |
| text-decoration: none; | |
| } | |
| .form__submit { | |
| background: #f15d22; | |
| border-radius: 5px; | |
| color: white; | |
| display: block; | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| padding: 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| .form__message { | |
| font-size: 1.125rem; | |
| text-align: center; | |
| } | |
| .form__link { | |
| display: block; | |
| margin-top: 0.625rem; | |
| text-decoration: none; | |
| color: #f15d22; | |
| } | |
| .chart-community { | |
| border-top: 1px solid #e5e8ea; | |
| margin-top: 30px; | |
| padding-top: 30px; | |
| text-align: center; | |
| } | |
| .chart-community__item { | |
| margin-bottom: 1.5rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment