add css to main page

Relates #31
FACN7 · Oct 30, 2019 · 8e2202a · 8e2202a
1 parent e297fff
commit 8e2202a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 15 deletions.
diff --git a/public/private.html b/public/private.html
@@ -1,24 +1,58 @@
 <!DOCTYPE html>
+
 <html>
   <head>
     <meta charset="utf-8" />
     <title>FACN7 Credit Card</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
+    <link rel="stylesheet" href="style.css" />
     <script src="private.js"></script>
-
   </head>
 
   <body>
-<div class="table-container">
-    <table id="transactions-table">
-      <tr>
-        <th>Date</th>
-        <th>Description</th>
-        <th>Balance</th>
-      </tr>
-    </table>
+
+    <div class="navbar">
+      <div class="left">
+        <h1>Logo</h1>
+      </div>
+      <div class="right">
+        <div >Home</div>
+        <div>About</div>
+        <div>
+            <form class="form" action="/logout" method="POST">
+              <button type="submit" class="logout-btn" >Log out</button>
+            </form>
+        </div>
+
+      </div>
+    </div>
 
+    <div id="login-form">
+      <form class="form" action="/add-transaction" method="POST">
+        <input
+          type="text"
+          id="desc"
+          name="Description"
+          placeholder="Enter Description"
+        />
+        <input
+          type="text"
+          id="balance"
+          name="Balance"
+          placeholder="Enter Balance"
+        />
+        <button type="submit" name="button" class="btn login">ADD</button>
+      </form>
+    </div>
 
-</body>
-</html>
+    <div class="table-container">
+      <table id="transactions-table">
+        <tr>
+          <th>Date</th>
+          <th>Description</th>
+          <th>Balance</th>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/public/style.css b/public/style.css
@@ -181,7 +181,7 @@ body{
 
 /* end of form styling */
 
-/* navbar styling */
+
 * {
     margin:0;
     padding:0;
@@ -190,7 +190,7 @@ body{
   .navbar {
     width:100%;
     height:60px;
-    background: #57b846;;
+    background: #57b846;
   background: radial-gradient(circle, #57b846 0%);
     color: white;
      margin: auto;
@@ -214,7 +214,22 @@ body{
   .right div:hover{
     background: #00203fa0
   }
+
+ .logout-btn{
+    background: none;
+    border:none;
+    color:white;
+    font-size: 16px;
+ }
+
+
+ .table-container {
+    padding-top: 20px;
+  }
 
+  #transactions-table tr td {
+    padding: 10px;
+    border: 1px solid black;
+  }  
 
 
-/* end of navbar styling */