-
-
Save tjinauyeung/ed3aa6ad8ac960a3a3dc to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/xufihemiso
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font: 100% "Montserrat", "Helvetica-neue", "Helvetica", "Arial", sans-serif; | |
| color: #424242; | |
| font-weight: 100; | |
| background: #9c52ce; | |
| background: -moz-linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| background: -webkit-linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| background: linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f7eed', endColorstr='#9c52ce',GradientType=1 ); | |
| padding: 20px; | |
| } | |
| form { | |
| max-width: 700px; | |
| margin: auto; | |
| } | |
| form fieldset { | |
| border: none; | |
| background: #f2f2f2; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| margin-top: 30px; | |
| } | |
| form fieldset div { | |
| margin-bottom: 20px; | |
| } | |
| form fieldset select { | |
| width: 100%; | |
| margin-top: 10px; | |
| border: 1px solid #fff; | |
| height: 40px; | |
| font-size: 18px; | |
| outline: none; | |
| } | |
| form fieldset legend { | |
| font-weight: 400; | |
| position: relative; | |
| bottom: 5px; | |
| left: -20px; | |
| background: #f2f2f2; | |
| padding: 20px 20px 40px 20px; | |
| color: #9c52ce; | |
| border-radius: 10px; | |
| font-size: 18px; | |
| letter-spacing: 1.2px; | |
| margin-bottom: -25px; | |
| } | |
| form fieldset input[type=text], form fieldset input[type=email] { | |
| border: none; | |
| background: #fff; | |
| border-radius: 5px; | |
| width: 100%; | |
| display: block; | |
| height: 40px; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 16px; | |
| padding-left: 10px; | |
| } | |
| form fieldset input[type=radio] { | |
| margin-right: 30px; | |
| } | |
| form fieldset textarea { | |
| width: 100%; | |
| border-radius: 5px; | |
| border: none; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 22px; | |
| padding: 20px; | |
| } | |
| form fieldset input[type=text]:focus, | |
| form fieldset input[type=email]:focus, | |
| form fieldset textarea:focus { | |
| border: 1px solid #9c52ce; | |
| } | |
| form fieldset h4 { | |
| font-weight: 100; | |
| margin-top: 30px; | |
| margin-bottom: 15px; | |
| } | |
| form fieldset div:last-child { | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin-bottom: 0px; | |
| } | |
| form button { | |
| padding: 10px; | |
| border-radius: 10px; | |
| width: 100%; | |
| border: none; | |
| background: #9c52ce; | |
| transition: 0.2s ease-in-out; | |
| color: #fff; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| height: 45px; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| transition: 0.2s ease-in-out; | |
| } | |
| form button:hover { | |
| transition: 0.4s ease-in-out; | |
| color: #fff; | |
| background: #6d3099; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="#" method="post"> | |
| <fieldset> | |
| <legend>Personal details</legend> | |
| <div> | |
| <label for="name">Your name:</label> | |
| <input type="text" name="name" id="name"> | |
| </div> | |
| <div> | |
| <label for="email">Your email address:</label> | |
| <input type="email" id="email" name="email"> | |
| </div> | |
| <div> | |
| <label for="phoneNumber">Your telephone number:</label> | |
| <input type="text" name="phoneNumber" id="phoneNumber"> | |
| </div> | |
| <label for="select-choice">Where are you from?</label> | |
| <select name="select-choice" id="select-choice"> | |
| <option value="england">England</option> | |
| <option value="spain">Spain</option> | |
| <option value="france">France</option> | |
| <option value="netherlands">Netherlands</option> | |
| </select> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Which do you like?</legend> | |
| <label for="checkbox1">Mercedes</label> | |
| <input type="radio" name="likes" id="checkbox1" value="checkbox1"> | |
| <label for="checkbox2">Audi</label> | |
| <input type="radio" name="likes" id="checkbox2" value="checkbox2"> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Feedback</legend> | |
| <div> | |
| <label for="textarea">Enter your feedback:</label> | |
| <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> | |
| </div> | |
| <h4>How does our product make you feel?</h4> | |
| <div> | |
| <label for="radiobutton1">Amazing</label> | |
| <input type="radio" name="happiness" id="radiobutton1" /> | |
| <label for="radiobutton2">Happy</label> | |
| <input type="radio" name="happiness" id="radiobutton2" /> | |
| <label for="radiobutton3">Sad</label> | |
| <input type="radio" name="happiness" id="radiobutton3" /> | |
| </div> | |
| </fieldset> | |
| <button>Submit</button> | |
| </form> | |
| <script id="jsbin-source-css" type="text/css">@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
| $primary-colour: #9c52ce; | |
| $secondary-colour: #424242; | |
| $button-primary-colour: $primary-colour; | |
| $button-hover-colour: #6d3099; | |
| $light-background-colour: #f2f2f2; | |
| $font-stack: 'Montserrat', 'Helvetica-neue', 'Helvetica', 'Arial', sans-serif; | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font: 100% $font-stack; | |
| color: $secondary-colour; | |
| font-weight: 100; | |
| background: $primary-colour; | |
| background: -moz-linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| background: -webkit-linear-gradient(45deg, #2f7eed 0%,#9c52ce 100%); | |
| background: linear-gradient(45deg, #2f7eed 0%,#9c52ce 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f7eed', endColorstr='#9c52ce',GradientType=1 ); | |
| padding: 20px; | |
| } | |
| form { | |
| max-width: 700px; | |
| margin: auto; | |
| fieldset { | |
| border: none; | |
| background: $light-background-colour; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| margin-top: 30px; | |
| div { | |
| margin-bottom: 20px; | |
| } | |
| select { | |
| width: 100%;; | |
| margin-top: 10px; | |
| border: 1px solid #fff; | |
| height: 40px; | |
| font-size: 18px; | |
| outline: none; | |
| } | |
| legend { | |
| font-weight: 400; | |
| position: relative; | |
| bottom: 5px; | |
| left: -20px; | |
| background: $light-background-colour; | |
| padding: 20px 20px 40px 20px; | |
| color: #9c52ce; | |
| border-radius: 10px; | |
| font-size: 18px; | |
| letter-spacing: 1.2px; | |
| margin-bottom: -25px; | |
| } | |
| input[type=text], input[type=email] { | |
| border: none; | |
| background: #fff; | |
| border-radius: 5px; | |
| width: 100%; | |
| display: block; | |
| height: 40px; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 16px; | |
| padding-left: 10px; | |
| } | |
| input[type=radio] { | |
| margin-right: 30px; | |
| } | |
| textarea { | |
| width: 100%; | |
| border-radius: 5px; | |
| border: none; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 22px; | |
| padding: 20px; | |
| } | |
| input[type=text]:focus, | |
| input[type=email]:focus, | |
| textarea:focus { | |
| border: 1px solid $primary-colour; | |
| } | |
| h4 { | |
| font-weight: 100; | |
| margin-top: 30px; | |
| margin-bottom: 15px; | |
| } | |
| div:last-child { | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin-bottom: 0px; | |
| } | |
| } | |
| button { | |
| padding: 10px; | |
| border-radius: 10px; | |
| width: 100%; | |
| border: none; | |
| background: $button-primary-colour; | |
| transition: 0.2s ease-in-out; | |
| color: #fff; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| height: 45px; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| transition: 0.2s ease-in-out; | |
| } | |
| button:hover { | |
| transition: 0.4s ease-in-out; | |
| color: #fff; | |
| background: $button-hover-colour; | |
| } | |
| }</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
| @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font: 100% "Montserrat", "Helvetica-neue", "Helvetica", "Arial", sans-serif; | |
| color: #424242; | |
| font-weight: 100; | |
| background: #9c52ce; | |
| background: -moz-linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| background: -webkit-linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| background: linear-gradient(45deg, #2f7eed 0%, #9c52ce 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f7eed', endColorstr='#9c52ce',GradientType=1 ); | |
| padding: 20px; | |
| } | |
| form { | |
| max-width: 700px; | |
| margin: auto; | |
| } | |
| form fieldset { | |
| border: none; | |
| background: #f2f2f2; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-bottom: 20px; | |
| margin-top: 30px; | |
| } | |
| form fieldset div { | |
| margin-bottom: 20px; | |
| } | |
| form fieldset select { | |
| width: 100%; | |
| margin-top: 10px; | |
| border: 1px solid #fff; | |
| height: 40px; | |
| font-size: 18px; | |
| outline: none; | |
| } | |
| form fieldset legend { | |
| font-weight: 400; | |
| position: relative; | |
| bottom: 5px; | |
| left: -20px; | |
| background: #f2f2f2; | |
| padding: 20px 20px 40px 20px; | |
| color: #9c52ce; | |
| border-radius: 10px; | |
| font-size: 18px; | |
| letter-spacing: 1.2px; | |
| margin-bottom: -25px; | |
| } | |
| form fieldset input[type=text], form fieldset input[type=email] { | |
| border: none; | |
| background: #fff; | |
| border-radius: 5px; | |
| width: 100%; | |
| display: block; | |
| height: 40px; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 16px; | |
| padding-left: 10px; | |
| } | |
| form fieldset input[type=radio] { | |
| margin-right: 30px; | |
| } | |
| form fieldset textarea { | |
| width: 100%; | |
| border-radius: 5px; | |
| border: none; | |
| margin-top: 10px; | |
| outline: none; | |
| font-size: 22px; | |
| padding: 20px; | |
| } | |
| form fieldset input[type=text]:focus, | |
| form fieldset input[type=email]:focus, | |
| form fieldset textarea:focus { | |
| border: 1px solid #9c52ce; | |
| } | |
| form fieldset h4 { | |
| font-weight: 100; | |
| margin-top: 30px; | |
| margin-bottom: 15px; | |
| } | |
| form fieldset div:last-child { | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 5px; | |
| margin-bottom: 0px; | |
| } | |
| form button { | |
| padding: 10px; | |
| border-radius: 10px; | |
| width: 100%; | |
| border: none; | |
| background: #9c52ce; | |
| transition: 0.2s ease-in-out; | |
| color: #fff; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| height: 45px; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| transition: 0.2s ease-in-out; | |
| } | |
| form button:hover { | |
| transition: 0.4s ease-in-out; | |
| color: #fff; | |
| background: #6d3099; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment