modified css

nikhil-tayal · Jan 17, 2019 · 9b26272 · 9b26272
1 parent 8ddd998
commit 9b26272
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -4,37 +4,39 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
+    <link rel="stylesheet" href="main.css" type="text/css">
+    <title>Calculator</title>
 </head>
-<body>
+<body> 
+    <div class="bg"></div>
     <div class="main">
         <form name="form">
             <input class="textview">
         </form> 
         <table>
             <tr>
-                <td><input type="button" value="C"></td>
-                <td><input type="button" value="<"></td>
-                <td><input type="button" value="/"></td>
-                <td><input type="button" value="x"></td>
+                <td><input class="button" type="button" value="C"></td>
+                <td><input class="button" type="button" value="<"></td>
+                <td><input class="button" type="button" value="/"></td>
+                <td><input class="button" type="button" value="x"></td>
             </tr> 
             <tr>
-                <td><input type="button" value="7"></td>
-                <td><input type="button" value="8"></td>
-                <td><input type="button" value="9"></td>
-                <td><input type="button" value="-"></td>
+                <td><input class="button" type="button" value="7"></td>
+                <td><input class="button" type="button" value="8"></td>
+                <td><input class="button" type="button" value="9"></td>
+                <td><input class="button" type="button" value="-"></td>
             </tr>
             <tr>
-                <td><input type="button" value="4"></td>
-                <td><input type="button" value="5"></td>
-                <td><input type="button" value="6"></td>
-                <td><input type="button" value="+"></td>
+                <td><input class="button" type="button" value="4"></td>
+                <td><input class="button" type="button" value="5"></td>
+                <td><input class="button" type="button" value="6"></td>
+                <td><input class="button" type="button" value="+"></td>
             </tr> 
             <tr>
-                <td><input type="button" value="1"></td>
-                <td><input type="button" value="2"></td>
-                <td><input type="button" value="3"></td>
-                <td><input type="button" value="="></td>
+                <td><input class="button" type="button" value="1"></td>
+                <td><input class="button" type="button" value="2"></td>
+                <td><input class="button" type="button" value="3"></td>
+                <td><input class="button" type="button" value="="></td>
             </tr>
         </table>
     </div>

diff --git a/main.css b/main.css
@@ -1,21 +1,34 @@
-.{
+* {
     margin: 0;
     padding: 0;
 
 }
 .button{
-    width:50;
-    height: 50;
-    font-size: 25;
-    margin: 2;
+    widows: 50px;
+    height: 50px;
+    font-size: 25px;
+    margin: 2px;
     cursor:pointer;
     background: #607d8b;
     border:none;
     color:white;
 } 
+.bg
+{
+    background: linear-gradient(to right,#e91e63,#3f51b5);
+    height: 100%;
+}
 .textview{
-    width:217;
-    margin:5;
-    font-size: 25;
-    padding: 5;
+    width:217px;
+    margin:5px;
+    font-size: 25px;
+    padding: 5px;
+    border:none;
+    color: #607d8b;
+} 
+.main{
+position:absolute;
+top:50%;
+left:50%;
+transform: translateX(-50%) translateY(-50%);
 }