Website: Style the Icons

13. Style the Icons

Use a special code snippet for your icons.

Mentor Seraphina

Seraphina taps the code with her brush.
“Alright, now let’s give those icons a bit of fire. Try applying this gradient to them.
By the way, this is also how you can style your text with background images.”

Your task

Apply the following code to the icons so they glow:

CSS

.about-card .material-icons-rounded {
    background: linear-gradient
(45deg, var(--highlight) 60%, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

And your columns? They need to adapt flexibly.
Set their width to 15rem, but let them grow and shrink.

That’s all you need to write.
No unnecessary frills.
And if your icons aren’t glowing afterwards?
Then somewhere, you messed up.

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

CSS

.about-card .material-icons-rounded {
   background: linear-gradient(45deg, var(--highlight)60%, var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.about-container {
   flex-wrap: wrap;
   gap: var(--spacing-large);
}

.about-container>div {
   flex: 1 1 15rem;
}