Top Board

Live Commentary

by Marco Abate

HTML

<div class='board'>
	<div class='row'>
		<div class='team left'>
			<div class='badge' style='background-image: url(https://www.thesportsdb.com/images/media/team/badge/wvspur1448806617.png)'></div>
			<span>AC Milan</span>
		</div>
		<div class='center'>
			<div class='time'>37:12</div>
			<div class='score'>1:0</div>
			<div class='period'>1st</div>
		</div>
		<div class='team right'>
			<div class='badge' style='background-image: url(https://www.thesportsdb.com/images/media/team/badge/dd6d6q1535186317.png)'></div>
			<span>Juventus</span>
		</div>
	</div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

html, body {
	font-size: 16px;
	background-color: #000;
	color: #fff;
	height: 100vh;
	font-family: 'Roboto', sans-serif;
}

.board {
	.row {
		background-color: #2c2e37;
		min-height: 5rem;
		display: flex;
		.team {
			flex: 2;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-direction: row;
			&.right {
				flex-direction: row-reverse;
				padding-left: 5%;
				.badge {
					margin-right: 10%;
				}
			}
			&.left {
				padding-right: 5%;
				.badge {
					margin-left: 10%;
				}
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				width: 5%;
			}
			&.left {
				&::before {
					left: 0;
					background-color: blue;
				}
			}
			&.right {
				&::before {
					right: 0;
					background-color: red;
				}
			}
			.badge {
				height: 3rem;
				width: 3rem;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				margin: 0.5rem 0;
			}
			span {
				padding: 0.5rem 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.center {
			display: flex;
			flex-direction: column;
			.score, .time, .period {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				text-transform: uppercase;
			}
			.score {
				flex: 4;
				font-size: 2rem;
				position: relative;
			}
			.time, .period {
				flex: 2;
				font-size: 0.8rem;
			}
			.time {
				padding: 0.5rem 0 0.1rem 0;
			}
			.period {
				padding: 0.1rem 0 0.5rem 0;
			}
		}
	}
}