Created
November 27, 2017 05:32
-
-
Save alejandrolechuga/54328b59b472007c10be1b8a759751c0 to your computer and use it in GitHub Desktop.
Calculator lol
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>Calculator</title> | |
| </head> | |
| <body> | |
| <div class="calculator"> | |
| <div class="calculator-display"> | |
| <span class="calculator-output">0</span> | |
| </div> | |
| <div class="calculator-keyboard"> | |
| <div class="calculator-row"> | |
| <button class="calculator-key number">7</buttom> | |
| <button class="calculator-key number">8</buttom> | |
| <button class="calculator-key number">9</buttom> | |
| <button class="calculator-key operator">/</buttom> | |
| </div> | |
| <div class="calculator-row"> | |
| <button class="calculator-key number">4</buttom> | |
| <button class="calculator-key number">5</buttom> | |
| <button class="calculator-key number">6</buttom> | |
| <button class="calculator-key operator">X</buttom> | |
| </div> | |
| <div class="calculator-row"> | |
| <button class="calculator-key number">1</buttom> | |
| <button class="calculator-key number">2</buttom> | |
| <button class="calculator-key number">3</buttom> | |
| <button class="calculator-key operator">-</buttom> | |
| </div> | |
| <div class="calculator-row"> | |
| <button class="calculator-key number">0</buttom> | |
| <button class="calculator-key operator">C</buttom> | |
| <button class="calculator-key operator">=</buttom> | |
| <button class="calculator-key operator">+</buttom> | |
| </div> | |
| </div> | |
| </div> | |
| </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; | |
| } | |
| .calculator { | |
| /* w:298 x h:397 pt */ | |
| width: 298px; | |
| height: 397px; | |
| background-color: black; | |
| color: white; | |
| font-family: Helvetica; | |
| } | |
| .calculator-display { | |
| /* h: 98 pt */ | |
| width: 100%; | |
| height: 98px; | |
| background-color: #4A5559; | |
| font-size: 40px; | |
| text-align: right; | |
| padding-right: 20px; | |
| } | |
| .calculator-output { | |
| line-height: 98px; | |
| } | |
| .calculator-key { | |
| /* 73 x 72 pt */ | |
| width: 25%; | |
| height: 75px; | |
| border: 1px solid #789198; | |
| background-color: black; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| .calculator-key.number { | |
| background-color: #8FB3BC; | |
| } | |
| .calculator-key.operator { | |
| background-color: #8FC9D8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment