├── README.md ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Calculator -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #ecf0f3; 6 | font-family: sans-serif; 7 | outline: none; 8 | } 9 | 10 | .container{ 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .Calculator{ 18 | background-color: #ecf0f3; 19 | padding: 15px; 20 | border-radius: 30px; 21 | box-shadow: inset 5px 5px 12px #ffffff, 22 | 5px 5px 12px rgba(0,0,0,.16); 23 | display: grid; 24 | grid-template-columns: repeat(4,68px); 25 | 26 | 27 | } 28 | 29 | input{ 30 | grid-column: span 4; 31 | height: 70px; 32 | width: 260px; 33 | background-color: #ecf0f3; 34 | box-shadow: inset -5px -5px 12px #ffffff, 35 | inset 5px 5px 12px rgba(0,0,0,.16); 36 | border: none; 37 | border-radius: 30px; 38 | color: rgb(70, 70, 70); 39 | font-size: 50px; 40 | text-align: end; 41 | margin: auto; 42 | margin-top: 40px; 43 | margin-bottom: 30px; 44 | padding: 20px; 45 | 46 | } 47 | 48 | button{ 49 | height: 48px; 50 | width: 48px; 51 | background-color: #ecf0f3; 52 | box-shadow: -5px -5px 12px #ffffff, 53 | 5px 5px 12px rgba(0,0,0,.16); 54 | border: none; 55 | border-radius: 70%; 56 | margin: 8px; 57 | font-size: 16px; 58 | 59 | } 60 | 61 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 | 64 | 65 | 66 | 67 | 68 | --------------------------------------------------------------------------------