13. Style the Icons

Use a special code snippet for your icons.

Mentor Seraphina

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;
}
Scroll to Top