.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
This Pen doesn't use any external JavaScript resources.