lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

Added styling for league page information header

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-13 17:39:57 -06:00
parent 48acfe6c49
commit 6e24a0f4d8
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ProjectSourceCode/src/resources/css/league-page/league-page.css
View File

@@ -6,9 +6,10 @@
#league-information-container { #league-information-container {
height: 100px; height: 100px;
width: fit-content;
margin: 20px; margin: 20px;
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ 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 */ padding: 10px 20px; /* Adjust padding as needed */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */
cursor: pointer; /* Change cursor to pointer on hover */ cursor: pointer; /* Change cursor to pointer on hover */
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
@@ -19,14 +20,25 @@
/* Add any other styling you need for the league information container */ /* Add any other styling you need for the league information container */
} }
#league-information-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 8px; /* Width of the red strip */
background-color: red; /* Red color */
}
#league-logo { #league-logo {
margin: 0px 10px; margin: 0px 30px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */ transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80%; height: 80%;
} }
#league-title { #league-title {
transform: skewX(20deg); /* Skew the banner to create a triangular side */ transform: skewX(20deg); /* Skew the banner to create a triangular side */
margin-right: 200px;
} }
#league-stats-container { #league-stats-container {

12
ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
View File

@@ -15,27 +15,27 @@
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" id="navbar-list"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0" id="navbar-list">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/premier-league">Premier League</a> <a class="nav-link" href="/league/2021">Premier League</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/bundesliga">Bundesliga</a> <a class="nav-link" href="/league/2002">Bundesliga</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/la-liga">La Liga</a> <a class="nav-link" href="/league/2014">La Liga</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/serie-a">Serie A</a> <a class="nav-link" href="/league/2019">Serie A</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/ligue-1">Ligue 1</a> <a class="nav-link" href="/league/2015">Ligue 1</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/league/brasileirao">Brasileirao</a> <a class="nav-link" href="/league/2013">Brasileirao</a>
</li> </li>
</ul> </ul>