Recreated this Dribbble-shot: https://dribbble.com/shots/7735602-GitBets-Match/attachments/438485?mode=media
A Pen by Håvard Brynjulfsen on CodePen.
Recreated this Dribbble-shot: https://dribbble.com/shots/7735602-GitBets-Match/attachments/438485?mode=media
A Pen by Håvard Brynjulfsen on CodePen.
<div class="container"> | |
<!-- code here --> | |
<div class="match"> | |
<div class="match-header"> | |
<div class="match-status">Live</div> | |
<div class="match-tournament"><img src="https://assets.codepen.io/285131/pl-logo.svg" />English Premier League</div> | |
<div class="match-actions"> | |
<button class="btn-icon"><i class="material-icons-outlined">grade</i></button> | |
<button class="btn-icon"><i class="material-icons-outlined">add_alert</i></button> | |
</div> | |
</div> | |
<div class="match-content"> | |
<div class="column"> | |
<div class="team team--home"> | |
<div class="team-logo"> | |
<img src="https://assets.codepen.io/285131/whufc.svg" /> | |
</div> | |
<h2 class="team-name">West Ham</h2> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="match-details"> | |
<div class="match-date"> | |
12 Aug at <strong>19:00</strong> | |
</div> | |
<div class="match-score"> | |
<span class="match-score-number match-score-number--leading">2</span> | |
<span class="match-score-divider">:</span> | |
<span class="match-score-number">0</span> | |
</div> | |
<div class="match-time-lapsed"> | |
72' | |
</div> | |
<div class="match-referee"> | |
Referee: <strong>Joseph Hicks</strong> | |
</div> | |
<div class="match-bet-options"> | |
<button class="match-bet-option">1.48</button> | |
<button class="match-bet-option">4.98</button> | |
<button class="match-bet-option">8.24</button> | |
</div> | |
<button class="match-bet-place">Place a bet</button> | |
</div> | |
</div> | |
<div class="column"> | |
<div class="team team--away"> | |
<div class="team-logo"> | |
<img src="https://assets.codepen.io/285131/chelsea.svg" /> | |
</div> | |
<h2 class="team-name">Chelsea</h2> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); | |
*, | |
*:after, | |
*:before { | |
box-sizing: border-box; | |
} | |
:root { | |
--color-text-primary: #1c2a38; | |
--color-text-secondary: #8A8F98; | |
--color-text-alert: #d72641; | |
--color-text-icon: #dbdade; | |
--color-bg-primary: #fff; | |
--color-bg-secondary: #f3f5f9; | |
--color-bg-alert: #fdeaec; | |
--color-theme-primary: #623ce6; | |
} | |
button, | |
input, | |
select, | |
textarea { | |
font: inherit; | |
} | |
img { | |
display: block; | |
} | |
strong { | |
font-weight: 600; | |
} | |
body { | |
font-family: "Inter", sans-serif; | |
line-height: 1.5; | |
color: var(--color-text-primary); | |
background-color: var(--color-bg-secondary); | |
} | |
.match { | |
background-color: var(--color-bg-primary); | |
display: flex; | |
flex-direction: column; | |
min-width: 600px; | |
border-radius: 10px; | |
box-shadow: 0 0 2px 0 rgba(#303030, 0.1), 0 4px 4px 0 rgba(#303030, 0.1); | |
} | |
.match-header { | |
display: flex; | |
border-bottom: 2px solid rgba(#303030, 0.1); | |
padding: 16px; | |
} | |
.match-status { | |
background-color: var(--color-bg-alert); | |
color: var(--color-text-alert); | |
padding: 8px 12px; | |
border-radius: 6px; | |
font-weight: 600; | |
font-size: 14px; | |
display: flex; | |
align-items: center; | |
line-height: 1; | |
margin-right: auto; | |
&:before { | |
content: ""; | |
display: block; | |
width: 6px; | |
height: 6px; | |
background-color: currentColor; | |
border-radius: 50%; | |
margin-right: 8px; | |
} | |
} | |
.match-tournament { | |
display: flex; | |
align-items: center; | |
font-weight: 600; | |
img { | |
width: 20px; | |
margin-right: 12px; | |
} | |
} | |
.match-actions { | |
display: flex; | |
margin-left: auto; | |
} | |
.btn-icon { | |
border: 0; | |
background-color: transparent; | |
color: var(--color-text-icon); | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.match-content { | |
display: flex; | |
position: relative; | |
} | |
.column { | |
padding: 32px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
width: calc(100% / 3); | |
} | |
.team { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.team-logo { | |
width: 100px; | |
height: 100px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
border-radius: 50%; | |
background-color: var(--color-bg-primary); | |
box-shadow: 0 4px 4px 0 rgba(#303030, 0.15), | |
0 0 0 15px var(--color-bg-secondary); | |
img { | |
width: 50px; | |
} | |
} | |
.team-name { | |
text-align: center; | |
margin-top: 24px; | |
font-size: 20px; | |
font-weight: 600; | |
} | |
.match-details { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.match-date, .match-referee { | |
font-size: 14px; | |
color: var(--color-text-secondary); | |
strong { | |
color: var(--color-text-primary); | |
} | |
} | |
.match-score { | |
margin-top: 12px; | |
display: flex; | |
align-items: center; | |
} | |
.match-score-number { | |
font-size: 48px; | |
font-weight: 600; | |
line-height: 1; | |
&--leading { | |
color: var(--color-theme-primary); | |
} | |
} | |
.match-score-divider { | |
font-size: 28px; | |
font-weight: 700; | |
line-height: 1; | |
color: var(--color-text-icon); | |
margin-left: 10px; | |
margin-right: 10px; | |
} | |
.match-time-lapsed { | |
color: #DF9443; | |
font-size: 14px; | |
font-weight: 600; | |
margin-top: 8px; | |
} | |
.match-referee { | |
margin-top: 12px; | |
} | |
.match-bet-options { | |
display: flex; | |
margin-top: 8px; | |
padding-bottom: 12px; | |
} | |
.match-bet-option { | |
margin-left: 4px; | |
margin-right: 4px; | |
border: 1px solid var(--color-text-icon); | |
background-color: #F9f9f9; | |
border-radius: 2px; | |
color: var(--color-text-secondary); | |
font-size: 14px; | |
font-weight: 600; | |
padding: 4px 8px; | |
} | |
.match-bet-place { | |
position: absolute; | |
bottom: -16px; | |
left: 50%; | |
transform: translateX(-50%); | |
border: 0; | |
background-color: var(--color-theme-primary); | |
border-radius: 6px; | |
padding: 10px 48px; | |
color: rgba(#fff, 0.9); | |
font-size: 14px; | |
box-shadow: 0 4px 8px 0 rgba(#303030, 0.25); | |
} | |
// Codepen spesific styling - only to center the elements in the pen preview and viewport | |
.container { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
// End Codepen spesific styling |