diff --git a/ProjectSourceCode/src/resources/css/home-screen.css b/ProjectSourceCode/src/resources/css/home-screen.css index 9f7ef93..9b4eb25 100644 --- a/ProjectSourceCode/src/resources/css/home-screen.css +++ b/ProjectSourceCode/src/resources/css/home-screen.css @@ -1,3 +1,42 @@ -.card-container { - margin-bottom: 35px; +.banner { + width: 500px; /* Set width of the banner to 100% of viewport width */ + height: 150px; + 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 */ + overflow: hidden; /* Hide the overflowing skewed content */ + 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 */ +} + +.banner: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 { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 1%; /* Width of the red strip */ + background-color: red; /* Red color */ } \ No newline at end of file diff --git a/ProjectSourceCode/src/resources/img/Laliga_Icon.png b/ProjectSourceCode/src/resources/img/Laliga_Icon.png new file mode 100644 index 0000000..f666d86 Binary files /dev/null and b/ProjectSourceCode/src/resources/img/Laliga_Icon.png differ diff --git a/ProjectSourceCode/src/resources/img/Laliga_Title.png b/ProjectSourceCode/src/resources/img/Laliga_Title.png new file mode 100644 index 0000000..d208f2b Binary files /dev/null and b/ProjectSourceCode/src/resources/img/Laliga_Title.png differ diff --git a/ProjectSourceCode/src/resources/img/Premier_Icon.png b/ProjectSourceCode/src/resources/img/Premier_Icon.png new file mode 100644 index 0000000..dece17b Binary files /dev/null and b/ProjectSourceCode/src/resources/img/Premier_Icon.png differ diff --git a/ProjectSourceCode/src/resources/img/Premier_Title.png b/ProjectSourceCode/src/resources/img/Premier_Title.png new file mode 100644 index 0000000..7689c72 Binary files /dev/null and b/ProjectSourceCode/src/resources/img/Premier_Title.png differ diff --git a/ProjectSourceCode/src/views/pages/home.hbs b/ProjectSourceCode/src/views/pages/home.hbs index f3f5ce2..47e1257 100644 --- a/ProjectSourceCode/src/views/pages/home.hbs +++ b/ProjectSourceCode/src/views/pages/home.hbs @@ -1,28 +1,28 @@
-

Welcome

+

Leagues

-
- - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - - - {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} - -
+
+ + + {{> league_table leagueName="Premier League" logo="./img/Premier_Icon.png" title="./img/Premier_Title.png"}} + + + {{> league_table leagueName="La Liga" logo="./img/Laliga_Icon.png" title="./img/Laliga_Title.png"}} + + + {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} + + + {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} + + + {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} + + + {{> league_table eventName="Event Name" eventDateTime="Date and Time"}} + +
diff --git a/ProjectSourceCode/src/views/partials/league_table.hbs b/ProjectSourceCode/src/views/partials/league_table.hbs index b53675e..47ecebe 100644 --- a/ProjectSourceCode/src/views/partials/league_table.hbs +++ b/ProjectSourceCode/src/views/partials/league_table.hbs @@ -1,6 +1,6 @@ -
+{{!--
-
+
League Name
@@ -29,6 +29,11 @@ View League - - - + --}} + \ No newline at end of file