diff --git a/Calculator/README.md b/Calculator/README.md index 41d85c0..c1a1bbf 100644 --- a/Calculator/README.md +++ b/Calculator/README.md @@ -1,4 +1,7 @@ # Calculator project made using HTML CSS Javascript here are some images for it -![Main page](image.png) +![Alt text](image-1.png) +![Alt text](image-2.png) +![Alt text](image-3.png) +![Alt text](image-4.png) \ No newline at end of file diff --git a/Calculator/image-1.png b/Calculator/image-1.png new file mode 100644 index 0000000..4072ab4 Binary files /dev/null and b/Calculator/image-1.png differ diff --git a/Calculator/image-2.png b/Calculator/image-2.png new file mode 100644 index 0000000..07bac81 Binary files /dev/null and b/Calculator/image-2.png differ diff --git a/Calculator/image-3.png b/Calculator/image-3.png new file mode 100644 index 0000000..9b6544f Binary files /dev/null and b/Calculator/image-3.png differ diff --git a/Calculator/image-4.png b/Calculator/image-4.png new file mode 100644 index 0000000..ddfcc1d Binary files /dev/null and b/Calculator/image-4.png differ diff --git a/Calculator/index.html b/Calculator/index.html index f60df34..ef198bf 100644 --- a/Calculator/index.html +++ b/Calculator/index.html @@ -4,6 +4,9 @@ Calculator + + + @@ -14,23 +17,24 @@ - -
- - - +
+
+ + + -
+ -
- - - +
+ + + +
- - - + + +
@@ -40,7 +44,6 @@
- \ No newline at end of file diff --git a/Calculator/style.css b/Calculator/style.css index 80b342e..3d1916d 100644 --- a/Calculator/style.css +++ b/Calculator/style.css @@ -1,40 +1,41 @@ * { - - margin: 0px; padding: 0px; box-sizing: border-box; - font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; -} + font-family: 'Poppins', sans-serif;} body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; - background: white; + background-color: rgb(201, 251, 251); } .calculator{ + background-color: white; border: 1px solid #f2f4f8; padding: 25px; border-radius: 16px ; - background: transparent; - box-shadow: 8px 3px 15px, rgba(248, 249, 250, 0.5); + /* background: transparent; */ + -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); } input{ width: 320px; - border: transparent; + border: 2px solid black; + border-radius: 10px; + -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); padding: 24px; margin: 10px; - background: transparent; font-size: 40px; text-align: right; - cursor: pointer; - color:deepskyblue; + color:rgb(250, 102, 116); + background-color: #f6de88; } input::placeholder{ - color: darkcyan; + color: rgb(13, 59, 59); } button{ border: none; @@ -45,39 +46,107 @@ button{ background: transparent; color: black; font-size: 20px; - box-shadow: -2px -5px 15px rgba(37, 63, 61, 0.2); + -webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 13px 2px rgba(0, 0, 0, 0.3); cursor:pointer; } .equal{ background-color: orange; + border: 2px solid black; +} +.equal:hover{ + background-color: rgb(228, 8, 8); + color: rgb(0, 5, 9); } .sum{ - color: skyblue; + color: rgb(126, 248, 177); + background-color: white; + border: 2px solid black; +} +.sum:hover{ + background-color: black; + color: rgb(8, 136, 248); } .minus{ - color: skyblue; + color: rgb(126, 248, 177); + background-color: white; + border: 2px solid black; +} +.minus:hover{ + background-color: black; + color: rgb(8, 136, 248); } .divide{ - color: skyblue; + color: rgb(126, 248, 177); + background-color: white; + border: 2px solid black; +} +.divide:hover{ + background-color: black; + color: rgb(8, 136, 248); } .multiply{ - color: skyblue; + color: rgb(126, 248, 177); + background-color: white; + border: 2px solid black; +} +.multiply:hover{ + background-color: black; + color: rgb(8, 136, 248); } .mod{ - color: skyblue; + color: rgb(126, 248, 177); + background-color: white; + border: 2px solid black; +} +.mod:hover{ + background-color: black; + color: rgb(8, 136, 248); } .AC{ color: cornflowerblue; + background-color: white; + border: 2px solid black; +} +.AC:hover{ + background-color: black; + color: rgb(8, 136, 248); } .DEL{ color: cornflowerblue; + background-color: white; + border: 2px solid black; +} +.DEL:hover{ + background-color: black; + color: rgb(8, 136, 248); } .zeroo{ border-radius: 10%; width: 43%; color: royalblue; + background-color: white; + border: 2px solid black; +} +.zeroo:hover{ + background-color: black; + color: rgb(8, 136, 248); } .dot{ color: steelblue; + background-color: white; + border: 2px solid black; +} +.dot:hover{ + background-color: black; + color: rgb(8, 136, 248); +} +.but{ + background-color: white; + border: 2px solid black; +} +.but:hover{ + background-color: black; + color: aliceblue; } \ No newline at end of file