#league-page-body { display: flex; flex-direction: column; height: 100vh; } #league-information-container { height: 100px; width: fit-content; margin: 20px; background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ padding: 10px 20px; /* Adjust padding as needed */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */ cursor: pointer; /* Change cursor to pointer on hover */ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4); display: flex; /* Use flexbox for layout */ align-items: center; /* Center content vertically */ /* 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 { margin: 0px 30px; transform: skewX(20deg); /* Skew the banner to create a triangular side */ height: 80%; } #league-title { transform: skewX(20deg); /* Skew the banner to create a triangular side */ margin-right: 200px; } #league-stats-container { display: flex; flex: 1; }