├── index.html
└── style.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Calculator
6 |
7 |
8 |
9 |
10 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | font-family: 'Poppins', sans-serif;
5 | box-sizing: border-box;
6 | }
7 |
8 |
9 | .container{
10 | width: 100%;
11 | height: 100vh;
12 | background: #ffffff;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | }
17 | .calculator{
18 | background: #000000;
19 | padding: 20px;
20 | border-radius: 10px;
21 | }
22 | .calculator form input{
23 | border: 0;
24 | outline: 0;
25 | width: 90px;
26 | height: 60px;
27 | border-radius: 10px;
28 | box-shadow: -8px -8px 15px rgb(0, 0, 0),5px 5px 15px rgba(0, 0, 0, 0.2);
29 | background-color: #d708fcbe;
30 | font-size: 20px;
31 | color: #000000;
32 | cursor: pointer;
33 | margin: 10px;
34 | }
35 |
36 | form .display{
37 | display: flex;
38 | justify-content: flex-end;
39 | margin: 5px;
40 | }
41 | form .display input{
42 | text-align: right;
43 | flex: 1;
44 | font-size: 60px;
45 | box-shadow: none;
46 | background-color: #ffffff;
47 | }
48 | form input.equal{
49 | width: 200px;
50 | background-color: #fa9704;
51 | }
52 |
53 | form input.clear{
54 | background-color: #fa9704;
55 | }
56 |
57 |
58 | form input.operator{
59 | color: #ffffff;
60 | }
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------