styling

Author: sanjeetkumaritoutlook-user

src/components/app-home-page/app-home-page.css

@@ -23,3 +23,41 @@ button:hover {
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
   transform: translateY(1px);
 }
+
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  font-size: 18px;
+  text-align: left;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+th, td {
+  padding: 12px 15px;
+  border-bottom: 2px solid #ddd;
+}
+
+th {
+  background-color: #007BFF;
+  color: white;
+  text-transform: uppercase;
+}
+
+tr:hover {
+  background-color: #f5f5f5;
+}
+
+a {
+  text-decoration: none;
+  color: #007BFF;
+  font-weight: bold;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}

src/components/app-home-page/app-home-page.tsx

@@ -17,7 +17,11 @@ export class AppHome {
         </p>
         <p><strong>Please Note:</strong> Currently, The routing to different pages is not working perfectly and you can navigate to each page, after clicking it from main Home page only. Direct URLs to each individual page is not working. </p>
 
-        <table style={{ border: '1px solid black', borderSpacing: '0', padding: '8px' }}>
+        <table>
+        <tr>
+        <th>Project</th>
+        <th>Link</th>
+        </tr>
           <tr>
             <td>Main Portfolio site</td>
             <td><a href="https://sanjeetkumarit.netlify.app/" target="_blank" rel="noopener noreferrer">Visit</a></td>