Formatting to make homepage cards take up more space horizontally

ProjectSourceCode/src/resources/css/homepage/homepage.css

@@ -1,6 +1,32 @@
-.banner {
+/* Container for all page contents */
+#page-container {
+  width: 100%;
+  text-align: center; /* Center the content horizontally */
+}
+
+/* Styling for text at top of the page */
+#leagues-header {
+  font-family: 'Golos Text';
+  display: inline-block; /* Ensure the width is based on content */
+  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
+  
+}
+
+/* Position cards in the center of the screen */
+#card-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Stylize League Cards */
+#league-card {
   width: 500px; /* Set width of the banner to 100% of viewport width */
   height: 150px;
+  margin: 20px;
+
+  text-align: center; /* Center the content horizontally */
+
   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 */
   position: relative; /* Needed for absolute positioning */
@@ -8,30 +34,24 @@
   transform: skewX(-20deg); /* Skew the banner to create a triangular side */
   transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
   cursor: pointer; /* Change cursor to pointer on hover */
+  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
+
+  /* Counter skew contents to keep inner content straight*/
+  #card-contents {
+    transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
+  }
 }
 
-.banner:hover {
+#league-card:hover {
   transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
 }
 
-.underlined-header {
-  font-family: 'Golos Text';
-  display: inline-block; /* Ensure the width is based on content */
-  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
-  width: 165px; /* Adjust the width as needed, for example, 50% of the header's width */
-}
 
-.content {
-  transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
-}
 
-.banner .content {
-  display: flex;
-  align-items: center;
-}
 
-.banner::after {
+
+#league-card::after {
   content: '';
   position: absolute;
   top: 0;

ProjectSourceCode/src/views/pages/home.hbs

@@ -1,34 +1,34 @@
-<div class="container mt-5">
+<div class="container mt-5" id="page-container">
     <h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
     <div class="card-container">
         <div class="row g-3" id="card-row">
             <!-- 🇬🇧 Premier League -->
-            <a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link" id="league-card">
                 {{> homepage/league-card leaguename="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
             </a>
 
             <!-- 🇪🇸 La Liga -->
-            <a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link" id="league-card">
               {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇩🇪 Bundesliga -->
-            <a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
               {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇮🇹 Serie A -->
-            <a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
               {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇫🇷 Ligue 1 -->
-            <a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
               {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇧🇷 Brasileirao -->
-            <a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link">
+            <a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
               {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 

ProjectSourceCode/src/views/partials/homepage/league-card.hbs

@@ -1,5 +1,5 @@
 <div class="banner">
-   <div class="content">
+   <div class="content" id="card-contents">
       <img src={{logo}} height="120">
       <img src={{title}} height="80">
       {{flag}}