Added name changes to game card containers to make thei rpurposes more clear
This commit is contained in:
@@ -1,10 +1,11 @@
|
|||||||
#game-card {
|
#game-card {
|
||||||
display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
|
display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 10px;
|
border-radius: 4px;
|
||||||
margin: 10px 10px; /* Remove horizontal margin */
|
padding: 6px;
|
||||||
|
margin: 2.5px 2.5px; /* Remove horizontal margin */
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
min-width: 200px;
|
min-width: 150px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
transition: transform 0.4s ease; /* Add transition for smooth effect */
|
transition: transform 0.4s ease; /* Add transition for smooth effect */
|
||||||
@@ -21,13 +22,13 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-side {
|
.card-team-container {
|
||||||
flex: 70%;
|
flex: 70%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-side {
|
.card-game-information-container {
|
||||||
flex: 30%;
|
flex: 30%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="score-card-body">
|
<div class="score-card-body">
|
||||||
|
|
||||||
<!-- Left side (70%) -->
|
<!-- Left side (70%) -->
|
||||||
<div class="left-side">
|
<div class="card-team-container">
|
||||||
<!-- Team 1 Name with Score -->
|
<!-- Team 1 Name with Score -->
|
||||||
<div class="team">
|
<div class="team">
|
||||||
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
|
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right side (30%) -->
|
<!-- Right side (30%) -->
|
||||||
<div class="right-side">
|
<div class="card-game-information-container">
|
||||||
<!-- Time -->
|
<!-- Time -->
|
||||||
<div class="score" style="text-align: center;">
|
<div class="score" style="text-align: center;">
|
||||||
<p id="time">{{ minute }}</p>
|
<p id="time">{{ minute }}</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user