Merge pull request #32 from aryanksanghvi/e-com

Updated HTML , CSS
shrey141102 · Oct 3, 2023 · b4500ca · b4500ca
2 parents 6c6feb2 + 24d83b0
commit b4500ca
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 33 deletions.
diff --git 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)
diff --git a/Calculator/image-1.png b/Calculator/image-1.png
diff --git a/Calculator/image-2.png b/Calculator/image-2.png
diff --git a/Calculator/image-3.png b/Calculator/image-3.png
diff --git a/Calculator/image-4.png b/Calculator/image-4.png
diff --git a/Calculator/index.html b/Calculator/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Calculator</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -14,23 +17,24 @@
             <button class="DEL">DEL</button>
             <button class="mod">%</button>
             <button class="divide">÷</button>
-    </div>
-    <div>
-        <button>7</button>
-        <button>8</button>
-        <button>9</button>
+        </div>
+        <div>
+        <button class = "but">7</button>
+        <button class = "but">8</button>
+        <button class = "but">9</button>
         <button class="multiply">×</button>
-    </div>
+        </div>
 
-    <div>
-        <button>4</button>
-        <button>5</button>
-        <button>6</button>
+        <div>
+        <button class = "but">4</button>
+        <button class = "but">5</button>
+        <button class = "but">6</button>
         <button class="minus">-</button>
+        </div>
         <div>
-            <button>1</button>
-            <button>2</button>
-            <button>3</button>
+            <button class = "but">1</button>
+            <button class = "but">2</button>
+            <button class = "but">3</button>
             <button class="sum">+</button>
         </div>
         <div>
@@ -40,7 +44,6 @@
             <button class="equal">=</button>
         </div>
     </div>
-    </div>
     <script src="script.js"></script>
 </body>
 </html>
diff --git 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;
 }