diff --git a/ProjectSourceCode/src/resources/css/homepage/homepage.css b/ProjectSourceCode/src/resources/css/homepage/homepage.css index f53aac8..ac70e3e 100644 --- a/ProjectSourceCode/src/resources/css/homepage/homepage.css +++ b/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; +} + + diff --git a/ProjectSourceCode/src/resources/img/homepage/bundesliga/icon.png b/ProjectSourceCode/src/resources/img/homepage/bundesliga/icon.png new file mode 100644 index 0000000..e3ef167 Binary files /dev/null and b/ProjectSourceCode/src/resources/img/homepage/bundesliga/icon.png differ diff --git a/ProjectSourceCode/src/resources/img/homepage/bundesliga/title.png b/ProjectSourceCode/src/resources/img/homepage/bundesliga/title.png new file mode 100644 index 0000000..e7f2e99 Binary files /dev/null and b/ProjectSourceCode/src/resources/img/homepage/bundesliga/title.png differ diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs index 513f2f3..3f78c75 100644 --- a/ProjectSourceCode/src/views/partials/footer.hbs +++ b/ProjectSourceCode/src/views/partials/footer.hbs @@ -12,7 +12,7 @@ - + \ No newline at end of file diff --git a/ProjectSourceCode/src/views/partials/homepage/league-card.hbs b/ProjectSourceCode/src/views/partials/homepage/league-card.hbs index 1683562..b759a5a 100644 --- a/ProjectSourceCode/src/views/partials/homepage/league-card.hbs +++ b/ProjectSourceCode/src/views/partials/homepage/league-card.hbs @@ -1,7 +1,9 @@
\ No newline at end of file +