├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | # CALCULATOR-only-HTML-CSS
3 | Creating Responsive & Stunning CALCULATOR using HTML & CSS.
4 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Calculator | Ashutosh Python
8 |
9 |
10 |
11 |
12 |
13 |
14 |
137 |
138 |
139 |
140 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Credit - youtube.com/@ashutoshpython */
2 |
3 | body {
4 | background-color: #252424;
5 | font-family: Tahoma;
6 | }
7 |
8 | .container {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | height: 100vh;
13 | width: 100vw;
14 | }
15 |
16 | #container {
17 | width: 200px;
18 | padding: 8px 8px 20px 8px;
19 | margin: 20px auto;
20 | background-color: #ABABAB;
21 | border-radius: 4px;
22 | border-top: 2px solid #FFF;
23 | border-right: 2px solid #FFF;
24 | border-bottom: 2px solid #C1C1C1;
25 | border-left: 2px solid #C1C1C1;
26 | box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
27 | }
28 |
29 | #display {
30 | display: block;
31 | margin: 15px auto;
32 | height: 42px; width: 174px;
33 | padding: 0 10px;
34 | border-radius: 4px;
35 | border-top: 2px solid #C1C1C1;
36 | border-right: 2px solid #C1C1C1;
37 | border-bottom: 2px solid #FFF;
38 | border-left: 2px solid #FFF;
39 | background-color: #FFF;
40 | box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
41 | font-size: 28px;
42 | color: #666;
43 | text-align: right;
44 | font-weight: 400;
45 | }
46 |
47 | .button {
48 | display: inline-block;
49 | margin: 2px;
50 | width: 42px;
51 | height: 42px;
52 | font-size: 16px;
53 | font-weight: bold;
54 | border-radius: 4px;
55 | }
56 |
57 | .mathButtons {
58 | margin: 2px 2px 6px 2px;
59 | color: #FFF;
60 | text-shadow: -1px -1px 0px #44006F;
61 | background-color: #434343;
62 | border-top: 2px solid #C1C1C1;
63 | border-right: 2px solid #C1C1C1;
64 | border-bottom: 2px solid #181818;
65 | border-left: 2px solid #181818;
66 | box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
67 | }
68 |
69 | .digits {
70 | color: #181818;
71 | text-shadow: 1px 1px 0px #FFF;
72 | background-color: #EBEBEB;
73 | border-top: 2px solid #FFF;
74 | border-right: 2px solid #FFF;
75 | border-bottom: 2px solid #C1C1C1;
76 | border-left: 2px solid #C1C1C1;
77 | border-radius: 4px;
78 | box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
79 | }
80 |
81 | .digits:hover,
82 | .mathButtons:hover,
83 | #clearButton:hover {
84 | background-color: #FFBA75;
85 | box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
86 | border-top: 2px solid #FFF;
87 | border-right: 2px solid #FFF;
88 | border-bottom: 2px solid #AE5700;
89 | border-left: 2px solid #AE5700;
90 | }
91 |
92 | #clearButton {
93 | color: #FFF;
94 | text-shadow: -1px -1px 0px #44006F;
95 | background-color: #D20000;
96 | border-top: 2px solid #FF8484;
97 | border-right: 2px solid #FF8484;
98 | border-bottom: 2px solid #800000;
99 | border-left: 2px solid #800000;
100 | box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
101 | }
102 |
--------------------------------------------------------------------------------