Created
August 2, 2021 02:11
-
-
Save 6e5/543ad5e05dbe5b82842700d95fae72bb to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/racamib
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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --blue: #0099e5; | |
| --light-blue: #74d2e7; | |
| --red: #ff4c4c; | |
| --yellow: #ffdd00; | |
| --white: #fefefe; | |
| --light-gray: #f3f4f7; | |
| --green: #34be5b; | |
| --light-purple: #5677fc; | |
| --orange: #ee5622; | |
| --linen: #e8e9d7; | |
| --level-1: 2px 2px 4px rgba(0,0,0,.1), 4px 4px 8px rgba(0,0,0,.1); | |
| } | |
| body { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #eee; | |
| font-family: "Nunito", sans-serif; | |
| flex-direction: column; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| /* Buttons */ | |
| button, | |
| .btn { | |
| -webkit-appearance: none; | |
| background: #fff; | |
| padding: .5rem; | |
| border-radius: 5px; | |
| border: 1px solid rgba(0,0,0,.3); | |
| cursor: pointer; | |
| font-weight: 900; | |
| border: 2px solid rgba(0,0,0,.2) | |
| } | |
| .btn-default { | |
| background-color: var(--light-blue); | |
| } | |
| .btn-primary { | |
| background-color: var(--blue); | |
| } | |
| .btn-success { | |
| background-color: var(--green); | |
| } | |
| .btn-warning { | |
| background-color: var(--orange); | |
| } | |
| .btn-info { | |
| background-color: var(--light-purple); | |
| } | |
| .btn-danger { | |
| background-color: var(--red) | |
| } | |
| .btn-danger .btn-ghost, | |
| .btn-info .btn-ghost, | |
| .btn-warning .btn-ghost, | |
| .btn-success .btn-ghost, | |
| .btn-primary .btn-ghost | |
| { | |
| background-color: none; | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .btn:hover { | |
| opacity: .8; | |
| } | |
| /* Inputs */ | |
| input { | |
| display: inline-block; | |
| border: 2px solid rgba(0,0,0,.2); | |
| padding: 4px; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| padding-left: 8px; | |
| border-right: none; | |
| border-top: none; | |
| outline: none; | |
| width: 100%; | |
| } | |
| .styled-input { | |
| display: inline; | |
| position: relative; | |
| } | |
| .styled-input input { | |
| padding-left: 30px; | |
| } | |
| .styled-input.email:after { | |
| content: "\f0e0"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.password:before { | |
| content: "\f084"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.phone:before { | |
| content: "\f095"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.country:before { | |
| content: "\f0ac"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| background-color: var(--yellow); | |
| } | |
| input[type="email"] { | |
| position: relative; | |
| } | |
| input[type="email"]:before { | |
| content: "asadasd"; | |
| width: 30px; | |
| height: 30px; | |
| background: red; | |
| position: absolute; | |
| font-size: 20px; | |
| top: 0; | |
| left: 0; | |
| } | |
| input[type='checkbox']{ | |
| -webkit-appearance: none; | |
| width: 35px; | |
| height: 10px; | |
| border: 1px solid #bdbdbd; | |
| background: #eee; | |
| position: relative; | |
| cursor: pointer; | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:before { | |
| content: ""; | |
| height: 15px; | |
| width: 15px; | |
| background-color: #bdbdbd; | |
| border: 1px solid rgba(0,0,0,.1); | |
| position: absolute; | |
| top: 50%; | |
| left: 0px; | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:checked:before{ | |
| transform: translateY(-50%) translateX(16px); | |
| background: var(--blue); | |
| border: 2px solid rgba(255,255,255,.4); | |
| } | |
| input[type="checkbox"]:checked { | |
| background: var(--light-blue); | |
| } | |
| input[type="radio"]{ | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(0,0,0,.1); | |
| border-radius: 50%; | |
| background: #e1e1e1; | |
| transition: .3s; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| input[type="radio"]:checked { | |
| background: var(--blue); | |
| box-shadow: var(--level-1); | |
| } | |
| input[type="radio"]:before { | |
| content: "✓"; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: 900; | |
| color: var(--white) | |
| } | |
| ::placeholder { | |
| font-weight: 900; | |
| text-transform: capitalize; | |
| letter-spacing: .4px; | |
| } | |
| textarea { | |
| padding: 5px; | |
| border: 2px solid rgba(0,0,0,.2); | |
| border-radius: 5px; | |
| font-weight: 600; | |
| font-size: 1.05rem; | |
| resize: vertical; | |
| background: var(--linen); | |
| } | |
| form { | |
| border: 2px solid #bdbdbd; | |
| border-radius: 10px; | |
| padding: 10px; | |
| width: 280px; | |
| height: auto; | |
| box-shadow: var(--level-1); | |
| } | |
| select { | |
| background: var(--blue); | |
| width: 100%; | |
| padding: 10px; | |
| font-weight: 600; | |
| font-size: 20px; | |
| outline: none; | |
| border: none; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| border-radius: 6px; | |
| } | |
| .styled-select { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .styled-select:before { | |
| content: "\f13a"; | |
| width: 20%; | |
| font-family: FontAwesome; | |
| height: 100%; | |
| background: rgba(255,255,255,.2); | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: rgba(255,255,255,.6); | |
| pointer-events: none; | |
| } | |
| .styled-select:hover:before { | |
| color: rgba(255,255,255,.8); | |
| background: rgba(255,255,255, .3); | |
| } | |
| label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-weight: 900; | |
| align-items: center; | |
| font-size: .8rem; | |
| letter-spacing: .4px; | |
| color: var(--gray); | |
| margin: 5px 0; | |
| } | |
| label input[type="radio"]{ | |
| margin: 0 10px; | |
| } | |
| .terms-of-service { | |
| display: grid; | |
| grid-template-columns: 1fr 5fr; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <br><br><br><br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <div class="buttons"> | |
| <h1>Buttons</h1> | |
| <button class="btn btn-default">Default</button> | |
| <button class="btn btn-primary">Primary</button> | |
| <button class="btn btn-primary btn-ghost">Ghost</button> | |
| <button class="btn btn-success">Success</button> | |
| <button class="btn btn-warning">Warning</button> | |
| <button class="btn btn-info">Info</button> | |
| <button class="btn btn-danger">Danger</button> | |
| </div> | |
| <div class="inputs"> | |
| <h1>Inputs</h1> | |
| <input type="text" name="" id="" placeholder="text"> | |
| <br> | |
| <span class="styled-input email"> | |
| <input type="email" name="" id="" placeholder="email"> | |
| </span> | |
| <br> | |
| <span class="styled-input password"> | |
| <input type="password" name="" id="" placeholder="Password"> | |
| </span> | |
| <br> | |
| <span class="styled-input phone"> | |
| <input type="phone" name="" id="" placeholder="phone"> | |
| </span> | |
| <br> | |
| <input type="checkbox" name="" id=""> | |
| <br> | |
| <input type="radio" name="" id=""> | |
| <br> | |
| <textarea name="" id="" cols="30" rows="10">Lorem ipsum dolor. | |
| </textarea> | |
| <br> | |
| <div class="styled-select"> | |
| <select name="" id=""> | |
| <option value="">James</option> | |
| <option value="">Wilson</option> | |
| <option value="">Hazir</option> | |
| <option value="">Kazim</option> | |
| <option value="">muoir</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form"> | |
| <h1>Forms</h1> | |
| <form action="#"> | |
| </label> | |
| <input type="text" name="" id="" placeholder="text"> | |
| <br> | |
| <span class="styled-input email"> | |
| <input type="email" name="" id="" placeholder="email"> | |
| </span> | |
| <br> | |
| <input type="password" name="" id="" placeholder="Password"> | |
| <br> | |
| <input type="phone" name="" id="" placeholder="phone"> | |
| <br> | |
| <input type="checkbox" name="" id=""> | |
| <br> | |
| <input type="radio" name="" id=""> | |
| <br> | |
| <div class="terms-of-service"> | |
| <input type="radio" name="" id=""> <p>Agreee to <a href="#">terms of service</a></p> | |
| </div> | |
| <br> | |
| <button class="btn btn-primary btn-block">Register</button> | |
| </form> | |
| </div> | |
| <div class="radios"> | |
| <br> | |
| <br> | |
| <br> | |
| <h1>Radios</h1> | |
| <div> | |
| <label for="male"> | |
| Male: | |
| <input type="radio" name="gender" id="male"> | |
| </label> | |
| <label for="female"> | |
| Female: | |
| <input type="radio" name="gender" id="female"> | |
| </label> | |
| </div> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --blue: #0099e5; | |
| --light-blue: #74d2e7; | |
| --red: #ff4c4c; | |
| --yellow: #ffdd00; | |
| --white: #fefefe; | |
| --light-gray: #f3f4f7; | |
| --green: #34be5b; | |
| --light-purple: #5677fc; | |
| --orange: #ee5622; | |
| --linen: #e8e9d7; | |
| --level-1: 2px 2px 4px rgba(0,0,0,.1), 4px 4px 8px rgba(0,0,0,.1); | |
| } | |
| body { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #eee; | |
| font-family: "Nunito", sans-serif; | |
| flex-direction: column; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| /* Buttons */ | |
| button, | |
| .btn { | |
| -webkit-appearance: none; | |
| background: #fff; | |
| padding: .5rem; | |
| border-radius: 5px; | |
| border: 1px solid rgba(0,0,0,.3); | |
| cursor: pointer; | |
| font-weight: 900; | |
| border: 2px solid rgba(0,0,0,.2) | |
| } | |
| .btn-default { | |
| background-color: var(--light-blue); | |
| } | |
| .btn-primary { | |
| background-color: var(--blue); | |
| } | |
| .btn-success { | |
| background-color: var(--green); | |
| } | |
| .btn-warning { | |
| background-color: var(--orange); | |
| } | |
| .btn-info { | |
| background-color: var(--light-purple); | |
| } | |
| .btn-danger { | |
| background-color: var(--red) | |
| } | |
| .btn-danger .btn-ghost, | |
| .btn-info .btn-ghost, | |
| .btn-warning .btn-ghost, | |
| .btn-success .btn-ghost, | |
| .btn-primary .btn-ghost | |
| { | |
| background-color: none; | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .btn:hover { | |
| opacity: .8; | |
| } | |
| /* Inputs */ | |
| input { | |
| display: inline-block; | |
| border: 2px solid rgba(0,0,0,.2); | |
| padding: 4px; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| padding-left: 8px; | |
| border-right: none; | |
| border-top: none; | |
| outline: none; | |
| width: 100%; | |
| } | |
| .styled-input { | |
| display: inline; | |
| position: relative; | |
| } | |
| .styled-input input { | |
| padding-left: 30px; | |
| } | |
| .styled-input.email:after { | |
| content: "\f0e0"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.password:before { | |
| content: "\f084"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.phone:before { | |
| content: "\f095"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.country:before { | |
| content: "\f0ac"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| background-color: var(--yellow); | |
| } | |
| input[type="email"] { | |
| position: relative; | |
| } | |
| input[type="email"]:before { | |
| content: "asadasd"; | |
| width: 30px; | |
| height: 30px; | |
| background: red; | |
| position: absolute; | |
| font-size: 20px; | |
| top: 0; | |
| left: 0; | |
| } | |
| input[type='checkbox']{ | |
| -webkit-appearance: none; | |
| width: 35px; | |
| height: 10px; | |
| border: 1px solid #bdbdbd; | |
| background: #eee; | |
| position: relative; | |
| cursor: pointer; | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:before { | |
| content: ""; | |
| height: 15px; | |
| width: 15px; | |
| background-color: #bdbdbd; | |
| border: 1px solid rgba(0,0,0,.1); | |
| position: absolute; | |
| top: 50%; | |
| left: 0px; | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:checked:before{ | |
| transform: translateY(-50%) translateX(16px); | |
| background: var(--blue); | |
| border: 2px solid rgba(255,255,255,.4); | |
| } | |
| input[type="checkbox"]:checked { | |
| background: var(--light-blue); | |
| } | |
| input[type="radio"]{ | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(0,0,0,.1); | |
| border-radius: 50%; | |
| background: #e1e1e1; | |
| transition: .3s; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| input[type="radio"]:checked { | |
| background: var(--blue); | |
| box-shadow: var(--level-1); | |
| } | |
| input[type="radio"]:before { | |
| content: "✓"; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: 900; | |
| color: var(--white) | |
| } | |
| ::placeholder { | |
| font-weight: 900; | |
| text-transform: capitalize; | |
| letter-spacing: .4px; | |
| } | |
| textarea { | |
| padding: 5px; | |
| border: 2px solid rgba(0,0,0,.2); | |
| border-radius: 5px; | |
| font-weight: 600; | |
| font-size: 1.05rem; | |
| resize: vertical; | |
| background: var(--linen); | |
| } | |
| form { | |
| border: 2px solid #bdbdbd; | |
| border-radius: 10px; | |
| padding: 10px; | |
| width: 280px; | |
| height: auto; | |
| box-shadow: var(--level-1); | |
| } | |
| select { | |
| background: var(--blue); | |
| width: 100%; | |
| padding: 10px; | |
| font-weight: 600; | |
| font-size: 20px; | |
| outline: none; | |
| border: none; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| border-radius: 6px; | |
| } | |
| .styled-select { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .styled-select:before { | |
| content: "\f13a"; | |
| width: 20%; | |
| font-family: FontAwesome; | |
| height: 100%; | |
| background: rgba(255,255,255,.2); | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: rgba(255,255,255,.6); | |
| pointer-events: none; | |
| } | |
| .styled-select:hover:before { | |
| color: rgba(255,255,255,.8); | |
| background: rgba(255,255,255, .3); | |
| } | |
| label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-weight: 900; | |
| align-items: center; | |
| font-size: .8rem; | |
| letter-spacing: .4px; | |
| color: var(--gray); | |
| margin: 5px 0; | |
| } | |
| label input[type="radio"]{ | |
| margin: 0 10px; | |
| } | |
| .terms-of-service { | |
| display: grid; | |
| grid-template-columns: 1fr 5fr; | |
| align-items: center; | |
| } | |
| </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
| @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap'); | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --blue: #0099e5; | |
| --light-blue: #74d2e7; | |
| --red: #ff4c4c; | |
| --yellow: #ffdd00; | |
| --white: #fefefe; | |
| --light-gray: #f3f4f7; | |
| --green: #34be5b; | |
| --light-purple: #5677fc; | |
| --orange: #ee5622; | |
| --linen: #e8e9d7; | |
| --level-1: 2px 2px 4px rgba(0,0,0,.1), 4px 4px 8px rgba(0,0,0,.1); | |
| } | |
| body { | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #eee; | |
| font-family: "Nunito", sans-serif; | |
| flex-direction: column; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| } | |
| /* Buttons */ | |
| button, | |
| .btn { | |
| -webkit-appearance: none; | |
| background: #fff; | |
| padding: .5rem; | |
| border-radius: 5px; | |
| border: 1px solid rgba(0,0,0,.3); | |
| cursor: pointer; | |
| font-weight: 900; | |
| border: 2px solid rgba(0,0,0,.2) | |
| } | |
| .btn-default { | |
| background-color: var(--light-blue); | |
| } | |
| .btn-primary { | |
| background-color: var(--blue); | |
| } | |
| .btn-success { | |
| background-color: var(--green); | |
| } | |
| .btn-warning { | |
| background-color: var(--orange); | |
| } | |
| .btn-info { | |
| background-color: var(--light-purple); | |
| } | |
| .btn-danger { | |
| background-color: var(--red) | |
| } | |
| .btn-danger .btn-ghost, | |
| .btn-info .btn-ghost, | |
| .btn-warning .btn-ghost, | |
| .btn-success .btn-ghost, | |
| .btn-primary .btn-ghost | |
| { | |
| background-color: none; | |
| } | |
| .btn-block { | |
| display: block; | |
| width: 100%; | |
| } | |
| .btn:hover { | |
| opacity: .8; | |
| } | |
| /* Inputs */ | |
| input { | |
| display: inline-block; | |
| border: 2px solid rgba(0,0,0,.2); | |
| padding: 4px; | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| padding-left: 8px; | |
| border-right: none; | |
| border-top: none; | |
| outline: none; | |
| width: 100%; | |
| } | |
| .styled-input { | |
| display: inline; | |
| position: relative; | |
| } | |
| .styled-input input { | |
| padding-left: 30px; | |
| } | |
| .styled-input.email:after { | |
| content: "\f0e0"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.password:before { | |
| content: "\f084"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.phone:before { | |
| content: "\f095"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| .styled-input.country:before { | |
| content: "\f0ac"; | |
| width: 30px; | |
| height: 100%; | |
| font-family: FontAwesome; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| top: 0; | |
| left: 0; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| background-color: var(--yellow); | |
| } | |
| input[type="email"] { | |
| position: relative; | |
| } | |
| input[type="email"]:before { | |
| content: "asadasd"; | |
| width: 30px; | |
| height: 30px; | |
| background: red; | |
| position: absolute; | |
| font-size: 20px; | |
| top: 0; | |
| left: 0; | |
| } | |
| input[type='checkbox']{ | |
| -webkit-appearance: none; | |
| width: 35px; | |
| height: 10px; | |
| border: 1px solid #bdbdbd; | |
| background: #eee; | |
| position: relative; | |
| cursor: pointer; | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:before { | |
| content: ""; | |
| height: 15px; | |
| width: 15px; | |
| background-color: #bdbdbd; | |
| border: 1px solid rgba(0,0,0,.1); | |
| position: absolute; | |
| top: 50%; | |
| left: 0px; | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| transition: .3s; | |
| } | |
| input[type="checkbox"]:checked:before{ | |
| transform: translateY(-50%) translateX(16px); | |
| background: var(--blue); | |
| border: 2px solid rgba(255,255,255,.4); | |
| } | |
| input[type="checkbox"]:checked { | |
| background: var(--light-blue); | |
| } | |
| input[type="radio"]{ | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(0,0,0,.1); | |
| border-radius: 50%; | |
| background: #e1e1e1; | |
| transition: .3s; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| input[type="radio"]:checked { | |
| background: var(--blue); | |
| box-shadow: var(--level-1); | |
| } | |
| input[type="radio"]:before { | |
| content: "✓"; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-weight: 900; | |
| color: var(--white) | |
| } | |
| ::placeholder { | |
| font-weight: 900; | |
| text-transform: capitalize; | |
| letter-spacing: .4px; | |
| } | |
| textarea { | |
| padding: 5px; | |
| border: 2px solid rgba(0,0,0,.2); | |
| border-radius: 5px; | |
| font-weight: 600; | |
| font-size: 1.05rem; | |
| resize: vertical; | |
| background: var(--linen); | |
| } | |
| form { | |
| border: 2px solid #bdbdbd; | |
| border-radius: 10px; | |
| padding: 10px; | |
| width: 280px; | |
| height: auto; | |
| box-shadow: var(--level-1); | |
| } | |
| select { | |
| background: var(--blue); | |
| width: 100%; | |
| padding: 10px; | |
| font-weight: 600; | |
| font-size: 20px; | |
| outline: none; | |
| border: none; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| border-radius: 6px; | |
| } | |
| .styled-select { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .styled-select:before { | |
| content: "\f13a"; | |
| width: 20%; | |
| font-family: FontAwesome; | |
| height: 100%; | |
| background: rgba(255,255,255,.2); | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| font-size: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: rgba(255,255,255,.6); | |
| pointer-events: none; | |
| } | |
| .styled-select:hover:before { | |
| color: rgba(255,255,255,.8); | |
| background: rgba(255,255,255, .3); | |
| } | |
| label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-weight: 900; | |
| align-items: center; | |
| font-size: .8rem; | |
| letter-spacing: .4px; | |
| color: var(--gray); | |
| margin: 5px 0; | |
| } | |
| label input[type="radio"]{ | |
| margin: 0 10px; | |
| } | |
| .terms-of-service { | |
| display: grid; | |
| grid-template-columns: 1fr 5fr; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment