League table imported in

ProjectSourceCode/src/resources/css/league-page/league-page.css

@@ -6,11 +6,29 @@
 
 #league-information-container {
     height: 100px;
-    background-color: #f0f0f0; /* Example background color */
+    margin: 20px;
-    display: flex;
+    background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
+    padding: 10px; /* Adjust padding as needed */
+    transform: skewX(-20deg); /* Skew the banner to create a triangular side */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+
+    display: flex; /* Use flexbox for layout */
+    align-items: center; /* Center content vertically */
+
     /* Add any other styling you need for the league information container */
 }
 
+#league-logo {
+    margin: 0px 10px;
+    transform: skewX(20deg); /* Skew the banner to create a triangular side */
+    height: 80%;
+}
+
+#league-title {
+    transform: skewX(20deg); /* Skew the banner to create a triangular side */
+}
+
 #league-stats-container {
     display: flex;
     flex: 1;
@@ -22,6 +40,20 @@
     /* Add any other styling you need for the league table container */
 }
 
+#table-logo {
+    width: 20px;
+    margin: 0;
+}
+
+#standings-table tbody tr.even {
+    background-color: #f2f2f2;
+}
+
+#standings-table tbody tr.odd {
+    background-color: #a2a1a1;
+}
+
+
 #top-scorers-container {
     flex: 1;
     background-color: #dcdcdc; /* Example background color */

ProjectSourceCode/src/views/pages/league-page.hbs

@@ -2,8 +2,8 @@
 
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
     <div class="container" id="league-information-container">
-        <img src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
+        <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
-        <h2>{{league.competition.league_name}}</h2>
+        <h1 id="league-title">{{league.competition.league_name}}</h2>
     </div>
 
     <!-- Container to display all stats for league <- bottom rest of the container -->
@@ -13,15 +13,24 @@
         <div class="container" id="league-table-container">
 
             <h3>Standings</h3>
-            <ol>
+            <table id="standings-table">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th></th>
+                        <th>Club</th>
+                    </tr>
+                </thead>
+                <tbody>
                     {{#each league.standings}}
-                    <li>
+                    <tr>
-                        <span>Position: {{table.league_position}}</span>
+                        <td>{{table.league_position}}</td>
-                        <span>Team Name: {{table.team_name}}</span>
+                        <td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
-                        <img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
+                        <td>{{table.team_name}}</td>
-                    </li>
+                    </tr>
                     {{/each}}
-            </ol>
+                </tbody>
+            </table>
 
         </div>