diff --git a/Calculator/README.md b/Calculator/README.md
new file mode 100644
index 0000000..7a31384
--- /dev/null
+++ b/Calculator/README.md
@@ -0,0 +1,2 @@
+# Calculator
+made using simple html and css
diff --git a/Calculator/assets/styles.css b/Calculator/assets/styles.css
new file mode 100644
index 0000000..9b72848
--- /dev/null
+++ b/Calculator/assets/styles.css
@@ -0,0 +1,74 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: darkgreen;
+}
+
+.calculator {
+ position: relative;
+ display: grid;
+}
+
+.calculator .values {
+ grid-column: span 4;
+ height: 100px;
+ text-align: right;
+ border: none;
+ outline: none;
+ padding: 10px;
+ font-size: 20px ;
+}
+
+.calculator span {
+ display: grid;
+ place-items: center;
+ width: 61px;
+ height: 61px;
+ color: whitesmoke;
+ font-weight: bold;
+ background-color: lightgreen;
+ border: 1px solid rgba(24, 114, 6, 0.5);
+ cursor: pointer;
+}
+
+.calculator span:hover {
+ background-color: blue;
+ color: yellow;
+}
+
+.calculator span:active {
+ background-color: darkblue;
+}
+
+.calculator span.clear {
+ grid-column: span 2;
+ width: 122px;
+ background-color: tomato;
+}
+
+.calculator span.equals {
+ grid-column: span 2;
+ width: 122px;
+ background-color: #03b1ff;
+}
+
+@media (min-width: 600px) {
+ span {
+ font-size: 1.25rem;
+ }
+}
+
+@media (min-width: 800px) {
+ span {
+ font-size: 1.5rem;
+ }
+}
diff --git a/Calculator/index.html b/Calculator/index.html
new file mode 100644
index 0000000..55a0053
--- /dev/null
+++ b/Calculator/index.html
@@ -0,0 +1,30 @@
+
+
+
+ Calculator
+
+
+
+
+
+
\ No newline at end of file