.l-wrapper
	.c-header
		img.c-logo(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/813538/km-logo-color.svg" draggable="false")
		button.c-button.c-button--primary Send Kudos
	.l-grid
		.l-grid__item.l-grid__item--sticky
			.c-card.u-bg--light-gradient.u-text--dark
				.c-card__body
					.u-display--flex.u-justify--space-between
						.u-text--left
							.u-text--small My Rank
							h2 3rd Place
						.u-text--right
							.u-text--small My Score
							h2 24
			.c-card
				.c-card__body
					.u-text--center#winner
		.l-grid__item
			.c-card
				.c-card__header
					h3 Received Kudos
					select.c-select
						option(selected) Sunday, Feb. 23 - Sunday, Feb. 30
				.c-card__body
					ul.c-list#list
						li.c-list__item
							.c-list__grid
								.u-text--left.u-text--small.u-text--medium Rank
								.u-text--left.u-text--small.u-text--medium Team Member
								.u-text--right.u-text--small.u-text--medium # of Kudos
View Compiled
html {
	--black: #000000;
	--white: #ffffff;
	--darkest: #101010;
	--darker: #16171A;
	--dark: #A3AFBF;
	--medium: #DFE7EF;
	--light: #CAD4E1;
	--lighter: #F5F8FC;
	--lightest: var(--white);
	
	--primary: #7B16FF;
	--primary-light: #DDD9FF;
	--primary-trans: rgba(123,22,255,0.4);
	
	--yellow: #FDCB6E;
	--orange: #E17055;
	--teal: #00CEC9;
	
	--bg: var(--darkest);
	--color: var(--lightest);
	--surface: var(--darker);
}

$states: (
	light: var(--lightest),
	primary: var(--primary),
	dark: var(--darkest),
	transparent: transparent,
	medium: var(--medium),
	yellow: var(--yellow),
	orange: var(--orange),
	teal: var(--teal),
	light-gradient: linear-gradient(to top, var(--light), var(--lightest)),
);

$spacing-unit: 0.8rem;

$spacers: (
	2: $spacing-unit/4,
	4: $spacing-unit/2,
	8: $spacing-unit,
	16: $spacing-unit*2,
	24: $spacing-unit*3,
	32: $spacing-unit*4
);

html {
	font-size: 62.5%;
	box-sizing: border-box;
}

*, *:before,*:after {
	box-sizing: inherit;
}

html,body {
	width: 100%;
	height: 100%;
}

body {
	background: var(--bg);
	color: var(--color);
	font-size: 1.6rem;
	font-family: 'Overpass Mono', system-ui;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: $spacing-unit;
	margin-bottom: $spacing-unit;
	font-family: 'Oswald', system-ui;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: all 120ms ease-out 0s;
	display: inline-block;
	border-radius: $spacing-unit/2;
	&:hover {
		background: var(--primary-trans);
		color: var(--primary-light);
		box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans);
	}
}

button, textarea, input, select {
	font-family: inherit;
	color: inherit;
	&:active, &:focus {
		outline: 0;
	}
}

button,select {
	cursor: pointer;
}

.l-wrapper {
	width: 100%;
	max-width: 960px;
	margin: auto;
	padding: $spacing-unit*2 $spacing-unit*2 $spacing-unit*4;
}

.l-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-column-gap: $spacing-unit*2;
	grid-row-gap: $spacing-unit*2;
	position: relative;
	@media screen and(max-width: 700px) {
		grid-template-columns: 1fr;
	}
}

.c-header {
	padding: $spacing-unit*2 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.4rem;
	position: relative;
	&:before {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: $spacing-unit/4;
		background: var(--primary-trans);
	}
}

.c-card {
	border-radius: $spacing-unit;
	background: var(--surface);
	width: 100%;
	margin-bottom: $spacing-unit*2;
	box-shadow: 0px 0px 0px 1px rgba(white, 0.12);
	&__body, &__header {
		padding: $spacing-unit*3;
		@media screen and(max-width: 700px) {
			padding: $spacing-unit*1.5;
		}
	}
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 0;
		@media screen and(max-width: 700px) {
			flex-direction: column;
		}
	}
}

.c-place {
	@media screen and(max-width: 700px) {
			transform: translateY(4px);
		}
}

.c-logo {
	display: inline-block;
	width: 100%;
	max-width: $spacing-unit*22;
	user-select: none;
}

.c-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	&__item {
		padding: $spacing-unit*2 0;
		.c-flag {
			margin-top: $spacing-unit;
		}
		@media screen and(max-width: 700px) {
			.c-flag {
				margin-top: $spacing-unit/2;
			}
		}
	}
	&__grid {
		display: grid;
		grid-template-columns: $spacing-unit*6 3fr 1fr;
		grid-column-gap: $spacing-unit*3;
		@media screen and (max-width: 700px) {
			grid-template-columns: $spacing-unit*4 3fr 1fr;
			grid-column-gap: $spacing-unit;
		}
	}
}

.c-media {
		display: inline-flex;
	align-items: center;
	&__content {
		padding-left: $spacing-unit*2;
		@media screen and(max-width: 700px) {
			padding-left: $spacing-unit;
		}
	}
	&__title {
		margin-bottom: $spacing-unit/2;
		@media screen and(max-width: 700px) {
			font-size: 1.4rem;
		}
	}
}

.c-avatar {
	$size: $spacing-unit*6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $size;
	height: $size;
	box-shadow: inset 0px 0px 0px 1px currentColor;
	border-radius: 50%;
	background: var(--lightest);
	color: var(--dark);
	@media screen and (max-width: 700px) {
		$size: $spacing-unit*4;
		width: $size;
		height: $size;
	}
	&--lg {
		$size: $spacing-unit*12;
		width: $size;
		height: $size;
	}
}

.c-button {
	display: inline-block;
	background: var(--dark);
	border: 0;
	border-radius: $spacing-unit/2;
	padding: $spacing-unit*1.5 $spacing-unit*2.5;
	transition: all 120ms ease-out 0s;
	&--block {
		display: block;
		width: 100%;
	}
	&:hover, &:focus {
		filter: brightness(0.9);
	}
	&:focus {
		box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans);
	}
	&:active {
		box-shadow: 0px 0px 0px $spacing-unit/2 var(--primary-trans), inset 0px 0px $spacing-unit rgba(black, 0.2);
		filter: brightness(0.8);
	}
}

.c-select {
	background: transparent;
	padding: $spacing-unit*1.5;
	appearance: none;
	font-size: 1.4rem;
	border-color: rgba(white, 0.2);
	transition: all 120ms ease-out 0s;
	&:hover {
		background: var(--darkest);
	}
}

.c-flag {
	$size: $spacing-unit*4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: $size;
	height: $size;
	background: var(--lightest);
	color: var(--dark);
	border-radius: $spacing-unit/2;
	@media screen and (max-width: 700px) {
		$size: $spacing-unit*3;
		width: $size;
		height: $size;
	}
}

@each $key,$val in $states {
	.c-button--#{$key} {
		background: $val;
	}
}

.u-text--title {
	font-family: 'Oswald', system-ui;
}

.u-text {
	&--left {
		text-align: left;
	}
	&--center {
		text-align: center;
	}
	&--right {
		text-align: right;
	}
}

@each $key,$val in $states {
	.u-bg--#{$key} {
		background: $val !important;
	}
	.u-text--#{$key} {
		color: $val !important;
	}
}

.u-display--flex {
	display: flex;
}

$flex-directions: (center,flex-end,flex-start,space-between);

@each $direction in $flex-directions {
	.u-align--#{$direction} {
		align-items: $direction;
	}
	.u-justify--#{$direction} {
		justify-content: $direction;
	}
}

.u-text--small {
	font-size: 1.4rem;
}

$directions: (
	l: left,
	r: right,
	b: bottom,
	t: top
);

@each $key,$val in $spacers {
	@each $abbr,$direction in $directions {
		.u-p#{$abbr}--#{$key} {
			padding-#{$direction}: $val;
		}
		.u-m#{$abbr}--#{$key} {
			margin-#{$direction}: $val;
		}
	}
}
View Compiled
console.clear();

const team = [
	{
		rank: 1,
		name: 'Lewis Hamilton',
		handle: 'lewishamilton',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/L/LEWHAM01_Lewis_Hamilton/lewham01.png.transform/2col-retina/image.png',
		kudos: 36,
		sent: 31
	}, {
		rank: 2,
		name: 'Kimi Raikkonen',
		handle: 'kimimatiasraikkonen',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/K/KIMRAI01_Kimi_R%C3%A4ikk%C3%B6nen/kimrai01.png.transform/2col-retina/image.png',
		kudos: 31,
		sent: 21
	}, {
		rank: 3,
		name: 'Sebastian Vettel',
		handle: 'vettelofficial',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/S/SEBVET01_Sebastian_Vettel/sebvet01.png.transform/2col-retina/image.png',
		kudos: 24,
		sent: 7
	}, {
		rank: 4,
		name: 'Max Verstappen',
		handle: 'maxverstappen1',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/M/MAXVER01_Max_Verstappen/maxver01.png.transform/2col-retina/image.png',
		kudos: 22,
		sent: 4
	}, {
		rank: 5,
		name: 'Lando Norris',
		handle: 'landonorris',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/L/LANNOR01_Lando_Norris/lannor01.png.transform/2col-retina/image.png',
		kudos: 18,
		sent: 16
	}, {
		rank: 6,
		name: 'Charles Leclerc',
		handle: 'charles_leclerc',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/C/CHALEC01_Charles_Leclerc/chalec01.png.transform/2col-retina/image.png',
		kudos: 16,
		sent: 6
	}, {
		rank: 7,
		name: 'George Russell',
		handle: 'georgerussell63',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/G/GEORUS01_George_Russell/georus01.png.transform/2col-retina/image.png',
		kudos: 10,
		sent: 21
	}, {
		rank: 8,
		name: 'Daniel Ricciardo',
		handle: 'danielricciardo',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/D/DANRIC01_Daniel_Ricciardo/danric01.png.transform/2col-retina/image.png',
		kudos: 7,
		sent: 46
	}, {
		rank: 9,
		name: 'Alexander Albon',
		handle: 'alex_albon',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/A/ALEALB01_Alexander_Albon/alealb01.png.transform/2col-retina/image.png',
		kudos: 4,
		sent: 2
	}, {
		rank: 10,
		name: 'Carlos Sainz Jr.',
		handle: 'carlossainz55',
		img: 'https://www.formula1.com/content/dam/fom-website/drivers/C/CARSAI01_Carlos_Sainz/carsai01.png.transform/2col-retina/image.png',
		kudos: 1,
		sent: 24
	}
];

const randomEmoji = () => {
	const emojis = ['👏','👍','🙌','🤩','🔥','⭐️','🏆','💯'];
	let randomNumber = Math.floor(Math.random() * emojis.length);
	return emojis[randomNumber]
}

team.forEach(member => {
	let newRow = document.createElement('li');
	newRow.classList = 'c-list__item';
	newRow.innerHTML = `
		<div class="c-list__grid">
			<div class="c-flag c-place u-bg--transparent">${member.rank}</div>
			<div class="c-media">
				<img class="c-avatar c-media__img" src="${member.img}" />
				<div class="c-media__content">
					<div class="c-media__title">${member.name}</div>
					<a class="c-media__link u-text--small" href="https://instagram.com/${member.handle}" target="_blank">@${member.handle}</a>
				</div>
			</div>
			<div class="u-text--right c-kudos">
				<div class="u-mt--8">
					<strong>${member.kudos}</strong> ${randomEmoji()}
				</div>
			</div>
		</div>
	`;
	if(member.rank === 1) {
		newRow.querySelector('.c-place').classList.add('u-text--dark')
		newRow.querySelector('.c-place').classList.add('u-bg--yellow')
		newRow.querySelector('.c-kudos').classList.add('u-text--yellow')
	} else if(member.rank === 2) {
		newRow.querySelector('.c-place').classList.add('u-text--dark')
		newRow.querySelector('.c-place').classList.add('u-bg--teal')
		newRow.querySelector('.c-kudos').classList.add('u-text--teal')
	} else if(member.rank === 3) {
		newRow.querySelector('.c-place').classList.add('u-text--dark')
		newRow.querySelector('.c-place').classList.add('u-bg--orange')
		newRow.querySelector('.c-kudos').classList.add('u-text--orange')
	}
	list.appendChild(newRow)
})

// Find Winner from sent kudos by sorting the drivers in the team array
let sortedTeam = team.sort((a, b) => b.sent - a.sent)
let winner = sortedTeam[0]

// Render winner card
const winnerCard = document.getElementById('winner')
winnerCard.innerHTML = `
	<div class="u-text-small u-text--medium u-mb--16">Top Sender Last Week</div>
	<img class="c-avatar c-avatar--lg" src="${winner.img}"/>
	<h3 class="u-mt--16">${winner.name}</h3>
	<span class="u-text--teal u-text--small">${winner.name}</span>
`
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Oswald|Overpass+Mono&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.