Website: Flip-Cards - Text Magic

18. Flip-Cards

Complicated but striking

Mentor Seraphina

Seraphina leans on the table, arms crossed, her gaze sharp as a freshly honed dagger. “This section isn’t just some playful extra,” she says with a crooked grin.
“But don’t worry — we’ll handle it together. Step by step.” With one finger, she draws an invisible rectangle in the air.
“This is where we show our face. Because we’re not afraid. And because it’s time Aetheron knew who we are.”

She smirks and points at Tinker, who’s proudly twirling in tiny pirouettes.
“She already prepared the HTML. Hiram now calls her The Queen of Nesting.
And for once, no one disagrees.”

Seraphina leans over your code with a grin, raising an eyebrow.
“So this is what it looks like in HTML. Completely unremarkable — so let’s turn it into something.”

She snaps her fingers, and for a moment, you could swear the code shifts before your eyes.
“You’ve got the structure. Now it just needs style, rotation, and a bit of drama. Bring the cards to life.”

Your Task

This is the entire section that contains all heroes.

Use a linear gradient (tip: linear-gradient()), angled at 135 degrees
It starts with the secondary color and switches to the light color exactly at 55%
Combine it with a mix-blend mode to let the section blend smoothly into the background (tip: mix-blend-mode)
Add large inner padding (–spacing-large)
Use vertical margin (–spacing-extra-large) for space above and below
Finally, add a 5px top and bottom border in the secondary color

This is just about the size of the headline:
Pick a bold, round value in rem.
Tip: 3rem is a solid starting point.

This container holds all individual hero elements.

Space out the children: gap: 3rem
Let the cards wrap on smaller screens: flex-wrap: wrap
Center the cards
Keep the layout compact with a max-width (e.g. 1200px) to prevent overflow

Each hero card gets some flexibility:

Minimum width: 20rem
Maximum width: 300px
Allow it to grow, but don’t let it stretch too far

The hero’s profile picture:

Perfectly round with border-radius: 50%
Max width: 18rem
A dark border, 5px thick
Soft shadow using –shadow-light

This is the rotatable card structure:

Fixed width and height: 300px
Use position: relative so the child elements can be positioned absolutely
Enable 3D perspective: transform-style: preserve-3d
Add a smooth transition (e.g. 0.6s)

On hover, the card should rotate horizontally:

Rotate by 180° along the X-axis
Change the cursor to a pointer (cursor: pointer)

Applies to both the front and back of the card:

Set position: absolute, with
width and height: 100%
Hide the back when rotating:
backface-visibility: hidden
Center the text, add some padding (e.g. 1rem
Slightly rounded corners (e.g. border-radius: 10px)

The front of the card:

Use Flex to center content both horizontally and vertically

The back of the card – what you see after rotation:

Use a dark background with light text
Rotate the back 180° horizontally
Center all content vertically
Use flex-direction: column for layout

Style it however you like – this is your space to experiment.

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

CSS

/* heroes */
#heroes {
   background: linear-gradient(135deg, var(--secondary) 55%, var(--light) 55%);
   mix-blend-mode: multiply;
   padding: var(--spacing-large);
   margin: var(--spacing-extra-large) 0;
   border-bottom: 5px solid var(--secondary);
   border-top: 5px solid var(--secondary);
}

.hero-title {
   font-size: 3rem;
}

.heroes {
   gap: 3rem;
   flex-wrap: wrap;
   justify-content: center;
   max-width: 1200px;
}

.heroes>div {
   flex: 1 1 20rem;
   max-width: 300px;
}

.img-round {
   border-radius: 50%;
   max-width: 18rem;
   border: 5px solid var(--dark);
   box-shadow: var(--shadow-light);
}

.card {
   width: 300px;
   height: 300px;
   position: relative;
   transform-style: preserve-3d;
   transition: transform 0.6s;
}

.card-container:hover .card {
   transform: rotateY(180deg);
   cursor: pointer;
}

.card-face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   text-align: center;
   padding: 1rem;
   border-radius: 10px;

}

.card-front {
   display: flex;
   align-items: center;
   justify-content: center;
}

.card-back {
   background-color: var(--dark);
   color: var(--light);
   transform: rotateY(180deg);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

q {
   background: var(--dark);
   color: var(--light);
   border-bottom: 2px solid var(--secondary);
   padding: 1rem;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-style: italic;
}

cite {
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-style: italic;
   font-size: var(--font-size-title);
   margin-top: var(--spacing-base);
}