Added name changes to game card containers to make thei rpurposes more clear

This commit is contained in:
2024-04-03 23:43:02 -06:00
parent 0e126f95ce
commit d6faa3e2d4
2 changed files with 8 additions and 7 deletions

View File

@@ -1,10 +1,11 @@
#game-card {
display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
border: 1px solid #ccc;
padding: 10px;
margin: 10px 10px; /* Remove horizontal margin */
border-radius: 4px;
padding: 6px;
margin: 2.5px 2.5px; /* Remove horizontal margin */
min-height: 100px;
min-width: 200px;
min-width: 150px;
box-sizing: border-box;
transition: transform 0.4s ease; /* Add transition for smooth effect */
@@ -21,13 +22,13 @@
align-items: center;
}
.left-side {
.card-team-container {
flex: 70%;
display: flex;
flex-direction: column;
}
.right-side {
.card-game-information-container {
flex: 30%;
display: flex;
align-items: center;

View File

@@ -2,7 +2,7 @@
<div class="score-card-body">
<!-- Left side (70%) -->
<div class="left-side">
<div class="card-team-container">
<!-- Team 1 Name with Score -->
<div class="team">
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
@@ -18,7 +18,7 @@
</div>
<!-- Right side (30%) -->
<div class="right-side">
<div class="card-game-information-container">
<!-- Time -->
<div class="score" style="text-align: center;">
<p id="time">{{ minute }}</p>