├── index.html └── main.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 |
12 |
13 |

Calculator

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 | 42 | 43 | 44 |
45 |
46 | 47 |
48 |
49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100%; 3 | height:100vh; 4 | background: whitesmoke; 5 | display:flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | .calculator{ 10 | background-image: linear-gradient(black, rgb(74, 70, 70)); 11 | padding: 20px; 12 | border-radius: 24px; 13 | height: 62%; 14 | } 15 | .calculator form input{ 16 | border:1px solid rgb(89, 89, 89); 17 | outline:0; 18 | width: 65px; 19 | height:65px; 20 | background: transparent; 21 | border-radius: 50px; 22 | color:white; 23 | cursor:pointer; 24 | margin:10px; 25 | font-size: 30px; 26 | } 27 | .display{ 28 | display: flex; 29 | justify-content: flex-end; 30 | margin:20px 0px; 31 | } 32 | form .display input{ 33 | text-align: right; 34 | flex-grow: 1; 35 | font-size: 45px; 36 | border:none; 37 | } 38 | form .clear input{ 39 | width: 330px; 40 | border-color: rgb(255, 98, 0); 41 | border-width: 2px; 42 | border-radius: 12px; 43 | } 44 | .title{ 45 | color: white; 46 | display: flex; 47 | justify-content: center; 48 | font-size:larger; 49 | color: rgb(255, 98, 0); 50 | margin-top: -38px; 51 | } 52 | .under-title{ 53 | width:65%; 54 | margin-top: -24px; 55 | height:4px; 56 | background-color: rgb(255, 98, 0); 57 | } 58 | hr{ 59 | width: 86%; 60 | height: 2px; 61 | background-color: rgb(98, 97, 97); 62 | border: none; 63 | } 64 | .r-1 .divide{ 65 | background-color: rgb(89, 89, 89); 66 | } 67 | .r-2 .multiply{ 68 | background-color: rgb(89, 89, 89); 69 | } 70 | .r-3 .plus{ 71 | background-color: rgb(89, 89, 89); 72 | } 73 | .r-4 .minus{ 74 | background-color: rgb(89, 89, 89); 75 | } 76 | .r-4 .point{ 77 | background-color: rgb(89, 89, 89); 78 | } 79 | form .r-4 .equal{ 80 | background-color: rgb(255, 98, 0); 81 | } 82 | --------------------------------------------------------------------------------