Merge pull request #453 from Princi123sharma/main

change the layout
Ayushparikh-code · Sep 17, 2024 · 9665c7d · 9665c7d
2 parents b78c8a6 + 677c2bc
commit 9665c7d
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 18 deletions.
diff --git a/CALCULATOR/gif.gif b/CALCULATOR/gif.gif
diff --git a/CALCULATOR/index.html b/CALCULATOR/index.html
@@ -9,9 +9,12 @@
     <title>Calculator99</title>
 </head>
 <body>
+  <div id="bgc">
+
     <div class="App">
+
         <div class="display" id="display"></div>
-
+           
           <div class="buttons">
             <button id="1" class="btn">1</button>
             <button id="2" class="btn">2</button>
@@ -33,5 +36,6 @@
             <button class="btn highlight Del">Del</button>
           </div>
       </div>
+      </div>
 </body>
 </html>
diff --git a/CALCULATOR/style.css b/CALCULATOR/style.css
@@ -1,47 +1,106 @@
 *{
-    margin: 0;
-    padding: 0;
-    font-size: 20px;
-  }
+  margin:0px;
+  padding:0px;
+  box-sizing: border-box;
+}
+html,body{
+  height:100%;
+  width:100%;
+ background-image: url(./gif.gif);
+ background-size: cover;
+ background-position: center;
+  position: fixed;
+}
+
+
+
 
 .App {
     text-align: center;
-    background-color: black;
-    width: 256px;
+    background-color:#010101af;
+    width: 450px;
+    height:630px;
     border: black 2px solid;
+    margin-left: 39%;
+    margin-top:8%;
+    border-radius: 10%;
+    position: relative;
+
+
   }
 
 .buttons{
     display: grid;
+    position: absolute;
+    top:28%;
+    left:15%;
+
+    margin:20px;
+
     grid-template-columns: repeat(4,1fr);
     grid-auto-rows: minmax(60px, auto);
   }
+
 
-.buttons button{
-    background-color: skyblue;
+.btn{
+    background-color: palevioletred;
     color: white;
-    margin: 2px;
+
+    margin: 10px;
     border-radius: 3px;
     border: none;
+    height:60px;
+    width:60px;
+    margin-left: 0px;
+    font-size: 15px;
+    font-family: monument;
+    border-radius: 50px;
+    cursor: pointer;
+  }
+  .btn:hover{
+    background: #efeeee;
+    color: #010101;
+    scale: 0.8;
+    transition: all ease 0.5s;
   }
+
 
 .Clear{
     grid-column: 1/span 2;
+
+
 }
 
+
 .Del{
     grid-column: 3/span 2;
 }
-
 .highlight{
-    background-color: rgb(15, 80, 153) !important;
+  background-color: rgb(246, 243, 243);
+  color:rgb(14, 13, 13);
+  font-size: 12px;
+
 }
+
+
+
 
 .display{
-    border: none;
-    background-color: black;
-    color: white;
-    width: 250px;
-    height: 50px;
-    text-align: right;
+
+
+    font-size: 40px;
+    background-color: #fff;
+    position: absolute;
+    top:10%;
+    color: rgb(16, 16, 17);
+    width: 380px;
+    height: 60px;
+    text-align: center;
+
+
+    left: 8%;
+    border-radius: 50px;
+    border: 1px solid black;
+    font-family: gilroy;
   }
+