Mechanical Keyboard created with CSS for the January 2019 Codepen Challenge
A Pen by khuongyolo on CodePen.
Created
February 12, 2022 04:35
-
-
Save khuongyolo/00c024d3a5109d6f5e3d813355d5d8ef to your computer and use it in GitHub Desktop.
Mechanical Keyboard
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
| <head> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body> | |
| <div class="keyboard"> | |
| <div class="row"> | |
| <div class="key key__esc"> | |
| <i data-feather="x"></i> | |
| </div> | |
| <div class="key key__symbols"> | |
| ! <span> 1 | |
| </div> | |
| <div class="key key__symbols"> | |
| @ <span> 2 | |
| </div> | |
| <div class="key key__symbols"> | |
| # <span> 3 | |
| </div> | |
| <div class="key key__symbols"> | |
| $ <span> 4 | |
| </div> | |
| <div class="key key__symbols"> | |
| % <span> 5 | |
| </div> | |
| <div class="key key__symbols"> | |
| ^ <span> 6 | |
| </div> | |
| <div class="key key__symbols"> | |
| & <span> 7 | |
| </div> | |
| <div class="key key__symbols"> | |
| * <span> 8 | |
| </div> | |
| <div class="key key__symbols"> | |
| ( <span> 9 | |
| </div> | |
| <div class="key key__symbols"> | |
| ) <span> 0 | |
| </div> | |
| <div class="key key__symbols"> | |
| _ <span> - | |
| </div> | |
| <div class="key key__symbols"> | |
| + <span> = | |
| </div> | |
| <div class="key key__delete key__icon"> | |
| <i data-feather="delete"></i> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="key key__oneandhalf"> | |
| <i data-feather="log-in"></i> | |
| </div> | |
| <div class="key"> | |
| Q | |
| </div> | |
| <div class="key"> | |
| W | |
| </div> | |
| <div class="key"> | |
| E | |
| </div> | |
| <div class="key"> | |
| R | |
| </div> | |
| <div class="key"> | |
| T | |
| </div> | |
| <div class="key"> | |
| Y | |
| </div> | |
| <div class="key"> | |
| U | |
| </div> | |
| <div class="key"> | |
| I | |
| </div> | |
| <div class="key"> | |
| O | |
| </div> | |
| <div class="key"> | |
| P | |
| </div> | |
| <div class="key key__symbols"> | |
| { <span> [ | |
| </div> | |
| <div class="key key__symbols"> | |
| } <span> ] | |
| </div> | |
| <div class="key key__symbols key__oneandhalf"> | |
| | <span> \ | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="key key__caps"> | |
| <i data-feather="meh"></i> | |
| </div> | |
| <div class="key"> | |
| A | |
| </div> | |
| <div class="key"> | |
| S | |
| </div> | |
| <div class="key"> | |
| D | |
| </div> | |
| <div class="key"> | |
| F | |
| </div> | |
| <div class="key"> | |
| G | |
| </div> | |
| <div class="key"> | |
| H | |
| </div> | |
| <div class="key"> | |
| J | |
| </div> | |
| <div class="key"> | |
| K | |
| </div> | |
| <div class="key"> | |
| L | |
| </div> | |
| <div class="key key__symbols"> | |
| : <span> ; | |
| </div> | |
| <div class="key key__symbols"> | |
| " <span> ' | |
| </div> | |
| <div class="key key__enter"> | |
| <i data-feather="corner-down-left"></i> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="key key__shift-left"> | |
| <i data-feather="arrow-up-circle"></i> | |
| </div> | |
| <div class="key"> | |
| Z | |
| </div> | |
| <div class="key"> | |
| X | |
| </div> | |
| <div class="key"> | |
| C | |
| </div> | |
| <div class="key"> | |
| V | |
| </div> | |
| <div class="key"> | |
| B | |
| </div> | |
| <div class="key"> | |
| N | |
| </div> | |
| <div class="key"> | |
| M | |
| </div> | |
| <div class="key key__symbols"> | |
| > <span> . | |
| </div> | |
| <div class="key key__symbols"> | |
| < <span> . | |
| </div> | |
| <div class="key key__symbols"> | |
| ? <span> / | |
| </div> | |
| <div class="key"> | |
| <i data-feather="arrow-up-circle"></i> | |
| </div> | |
| <div class="key key__arrow"> | |
| <i data-feather="arrow-up"></i> | |
| </div> | |
| <div class="key"> | |
| <i data-feather="trash-2"></i> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="key key__bottom-funct"> | |
| ^ | |
| </div> | |
| <div class="key key__bottom-funct"> | |
| <i data-feather="activity"></i> | |
| </div> | |
| <div class="key key__bottom-funct"> | |
| <i data-feather="command"></i> | |
| </div> | |
| <div class="key key__spacebar"> | |
| </div> | |
| <div class="key"> | |
| <i data-feather="command"></i> | |
| </div> | |
| <div class="key"> | |
| <i data-feather="activity"></i> | |
| </div> | |
| <div class="key key__arrow"> | |
| <i data-feather="arrow-left"></i> | |
| </div> | |
| <div class="key key__arrow"> | |
| <i data-feather="arrow-down"></i> | |
| </div> | |
| <div class="key key__arrow"> | |
| <i data-feather="arrow-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
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
| feather.replace(); |
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
| :root { | |
| --green: #A2CCB6; | |
| --yellow: #FCEEB5; | |
| --peach: #EE786E; | |
| --off-white: #FFFFF4; | |
| } | |
| body { | |
| background-color: #FFFFFF; | |
| margin-top: 50px; | |
| font-family: Arial; | |
| } | |
| span { | |
| display: block; | |
| margin-top: -5px; | |
| } | |
| .keyboard { | |
| width: 780px; | |
| height: 262px; | |
| margin: 0px auto; | |
| border: 3px solid #000000; | |
| border-radius: 10px; | |
| background: #000000; | |
| } | |
| .row { | |
| margin-top: 2px; | |
| overflow: hidden; | |
| } | |
| .key { | |
| width: 50px; | |
| height: 50px; | |
| float: left; | |
| cursor: pointer; | |
| background-color: var(--off-white); | |
| color: #000000; | |
| line-height: 48px; | |
| text-align: center; | |
| margin-left: 2px; | |
| border-radius: 4px; | |
| } | |
| .key__symbols { | |
| line-height: 28px; | |
| } | |
| .key__delete { | |
| width: 100px; | |
| } | |
| .key__oneandhalf { | |
| width: 75px; | |
| } | |
| .key__esc { | |
| background: var(--peach); | |
| } | |
| .key__enter { | |
| width: 112px; | |
| } | |
| .key__caps { | |
| width: 90px; | |
| } | |
| .key__shift-left { | |
| width: 100px; | |
| } | |
| .key__spacebar { | |
| width: 300px; | |
| } | |
| .key__bottom-funct { | |
| width: 70px; | |
| } | |
| .key__arrow { | |
| background: var(--green); | |
| } | |
| .feather { | |
| margin-top: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment