Homepage card styling added

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

@@ -9,7 +9,6 @@
   font-family: 'Scottsdale-Italic';
   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 */
@@ -24,9 +23,7 @@
   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 */
@@ -36,21 +33,24 @@
   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 */
-  }
+  display: flex; /* Use flexbox for layout */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
 }
 
+/* Counter skew contents to keep inner content straight*/
+#card-contents {
+  display: flex; /* Use flexbox for layout */
+  align-items: center; /* Align items vertically */
+  transform: skewX(20deg); /* Skew the banner to create a triangular side */
+}
+
+
 #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 */
 }
 
-
-
-
-
 #league-card::after {
   content: '';
   position: absolute;
@@ -60,3 +60,21 @@
   width: 1%; /* Width of the red strip */
   background-color: red; /* Red color */
 }
+
+
+#logo {
+  width: 30%; /* Set width for logo */
+  max-height: 100px;
+  max-width: 120px;
+  margin-left: 20px;
+}
+
+.title-wrapper {
+  width: 70%; /* Set width for title wrapper */
+}
+
+#title-logo {
+  max-height: 80px;
+}
+
+

ProjectSourceCode/src/views/partials/footer.hbs

@@ -12,7 +12,7 @@
 
         <!-- Homepage Scripts -->
         <script src="/js/homepage/redirect-to-league-url.js"></script>
-        <script src="/js/homepage/generate-league-routes.js"></script>
+        <script src="/routes/league-pages/generate-league-routes.js"></script>
 
 
     </footer>

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

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