Finance Tracker

venom2003op · venom2003op · commit 9c31be5fab88 · 2023-07-21T19:49:10.000+05:30
diff --git a/Projects/Finance Tracker/index.html b/Projects/Finance Tracker/index.html
@@ -13,7 +13,7 @@
 <body>
     <header>
         <img class="logo" src="https://i.pinimg.com/564x/61/ea/07/61ea07e06fa139ef7e4609c95f0ae8ed.jpg">
-        <h1>Personal Finance Tracker</h1>
+        <h1 class="hello-height">Personal Finance Tracker</h1>
         <p id="currentDateTime"></p>
     </header>
 
diff --git a/Projects/Finance Tracker/styles.css b/Projects/Finance Tracker/styles.css
@@ -22,19 +22,22 @@ header {
 
     height: 50px;
     transition: transform 0.3s ease;
-    margin-right: 25px;
+    margin-right: 15px;
     border: 1px solid black;
     border-radius: 50px;
 }
 #currentDateTime{
     margin-left: 400px;
+    margin-right:15px;
 }
 
 .logo:hover {
     transform: rotate(360deg);
 }
 main {
-    padding: 30px;
+    padding: 20px;
+    max-width: 1000px;
+    margin:0 auto;
 }
 
 h1, h2 {
@@ -45,36 +48,42 @@ h1, h2 {
     text-align: center;
     margin-bottom: 30px;
     display: flex;
-    flex-direction:row;
+    flex-wrap:wrap;
+    /* flex-direction:row; */
     justify-content: center;
 }
 .balance{
+    flex:1 1 200px;
     border:2px solid black;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* justify-content: center; */
     border-radius: 5px;
     background-color: azure;
-    margin-left:20px;
-    margin-right:20px;
+    /* margin-left:20px;
+    margin-right:20px; */
+    margin:10px;
+    padding: 10px;
     
 }
 #balanceAmount,#incomeAmount {
     font-size: 25px;
     font-weight: bold;
     color: green;
-    margin-top: 0px;
+    /* margin-top: 0px;
     margin-left:20px;
     margin-right:20px;
-    box-sizing: border-box;
+    box-sizing: border-box; */
 }
 #expenseAmount{
     font-size: 25px;
     font-weight: bold;
     color: red;
-    margin-top: 0px;
+    /* margin-top: 0px;
     margin-left:20px;
     margin-right:20px;
-    box-sizing: border-box;
+    box-sizing: border-box; */
 }
 
 .balance:hover {
@@ -123,20 +132,40 @@ h1, h2 {
 }
 
 @media (max-width: 600px) {
+    .logo{
+        height: 60px;
+        
+    }
+    #currentDateTime{
+        font-size:14px;
+        margin-left: 100px;
+    }
+    .hello-height{
+        font-size: 20px;
+    }
     #transactionListSection {
         max-width: 100%;
         padding: 0 10px;
     }
     #balanceSection{
-        max-width: 100%;
-        padding:10px 10px;
-        flex-direction: column;   
+        /* max-width: 100%;
+        padding:10px 10px; */
+        flex-direction: column; 
+        font-size: 17px;
+        
+    }
+    .balance{
+        flex:1 1 100%;
+        margin: 5px;
     }
     header{
-        max-width: 100%;
-        flex-direction: center;
+        height: 100px;
+        text-align: center;
+        display: flex;
+        justify-content:flex-start;
     }
 }
+
 .amount {
     font-weight: bold;
 }
