Website: Style the Progress

17. Show Progress

Use Grid and clever effects to show progress

Mentor Seraphina

Seraphina glances at the draft, then at you.
“This isn’t a side note. We need to show that we’re winning.
Defeating our enemies, bringing them to our side, making progress visible.”

She smirks.
“Do it right, and it won’t take much code. Do it wrong, and I’ll have Tinker make everything blink in rainbow colors.”

Your task

This is the parent element that holds all enemy cards.

You’ll use a CSS Grid to create a layout with multiple columns. Use repeat() with 1fr to distribute all columns evenly – in this case, six columns.
Round the corners with a border-radius variable (–border-large). Anything that sticks out of the grid should be hidden (overflow: hidden) – so everything stays clean.

This is the actual card for each enemy.

Center the content horizontally and vertically.
The height is fixed: 450px – remember how to set fixed pixel heights.
Change the cursor on hover – this is a good
moment to learn the word crosshair in English.
(Tip: cursor: crosshair)

Adjust the layout of the .enemy class responsively in multiple steps:

Under 1200px: reduce from 6 columns to 3
Under 768px: 2 columns
Under 576px: 1 column
For very small screens (under 576px), limit the total width of the grid to 320px and center it.

Here’s how to style the enemy names:

Use the font from the variable –headline
Set the font size to 2.5rem
Use a text color variable from your cheat sheet
Add text-shadow so the text remains readable on dark backgrounds
Transform the text to small caps

This is hidden text that only appears on hover.

Start with opacity: 0 to make it invisible
Use –green as the background color
The text should be light, uppercase, and have small padding
Use your existing variables
Apply transition for a smooth reveal effect

Here, each enemy is assigned a background image using child selectors. Order of images (located in img/enemies):

tharnok.jpg
kragor.jpg,
vorath.jpg,
zayara.jpg,
umbra.jpg,
cobol.jpg

Each enemy card gets a smooth transition effect – perfect for hover interactions.

Set transition: 0.3s
The images should use background-size: cover, be centered, and no-repeat
(Important to know this pattern – you’ll use it often)

When hovering over a card:

The enemy name (h3) disappears
The icon (i) also disappears
The hidden text (p) becomes visible

Solve the task here in the console [–> Open in a new tab]

CSS

/* Progress */
.enemy {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   border-radius: var(--border-large);
   overflow: hidden;
}

.enemy-card {
   align-items: center;
   justify-content: center;
   cursor: crosshair;
   height: 450px;
}

@media(width<1200px) {
   .enemy {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media(width<768px) {
   .enemy {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(width<576px) {
   .enemy {
      max-width: 320px;
      margin: auto;
      grid-template-columns: repeat(1, 1fr);
   }
}

.enemy-card h3 {
   font-family: var(--headline);
   font-size: 2.5rem;
   color: var(--light);
   text-shadow: var(--shadow-dark);
   font-variant: small-caps;
}

.enemy-card p {
   opacity: 0;
   background-color: var(--green);
   border-radius: var(--border-small);
   color: var(--light);
   padding: var(--spacing-small);
   font-family: var(--headline);
   transition: 0.3s;
   text-transform: uppercase;
}

.enemy>div {
   transition: 0.3s;
   background-size: cover;
}

.enemy>div:nth-child(1) {
   background-image: url("img/enemies/tharnok.jpg");
}

.enemy>div:nth-child(2) {
   background-image: url("img/enemies/kragor.jpg");
}

.enemy>div:nth-child(3) {
   background-image: url("img/enemies/vorath.jpg");
}

.enemy>div:nth-child(4) {
   background-image: url("img/enemies/zayara.jpg");
}

.enemy>div:nth-child(5) {
   background-image: url("img/enemies/umbra.jpg");
}

.enemy>div:nth-child(6) {
   background-image: url("img/enemies/cobol.jpg");
}

/* Show and Hide */
.enemy-card:hover p {
   opacity: 1;
}

.enemy-card:hover i {
   opacity: 0;
}

.enemy-card:hover h3 {
   opacity: 0;
}