Challenge - Advanced capstone
Build a portfolio page combining all advanced topics.
Portfolio page: bring it all together
In this capstone you combine all advanced topics in a single portfolio page. The .hero container gets a linear-gradient; the title slides in with @keyframes. Cards align with subgrid.
The .card::before pseudo-element draws a decorative line. The .menu > li child selector styles the menu. @media (prefers-color-scheme: dark) adds a dark theme. Six topics merge into one coherent portfolio.
Exercise Complete the portfolio hero
Complete the portfolio hero. Give .hero a background: linear-gradient(135deg, #1e293b, #4338ca) gradient. Write @keyframes titleSlide; in the from stop use opacity: 0 and transform: translateY(20px), in the to stop use opacity: 1 and transform: translateY(0). Add animation: titleSlide 1s ease-out to .hero-title.
Show example solution
/* hero section */
.hero {
background: linear-gradient(135deg, #1e293b, #4338ca);
}
/* animation */
@keyframes titleSlide {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* title */
.hero-title {
animation: titleSlide 1s ease-out;
}Exercise Complete the portfolio card decoration
Complete the portfolio card. Give .card a position: relative. In .card::before add content: "", position: absolute, width: 4px and background: linear-gradient(180deg, #6366f1, #8b5cf6).
Show example solution
/* card container */
.card {
position: relative;
}
/* decorative line */
.card::before {
content: "";
position: absolute;
width: 4px;
background: linear-gradient(180deg, #6366f1, #8b5cf6);
}Test yourself
-
When does @media (prefers-color-scheme: dark) apply?
@media (prefers-color-scheme: dark) { body { background: #0f172a; color: #f8fafc; } }- Only when printing
- When the user picks a dark theme
- When the screen narrows
- When the connection is slow
Show answer
When the user picks a dark theme — Correct. prefers-color-scheme: dark applies when the user's device is set to a dark theme.
-
Write the @keyframes name
@keyframes ____ { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }Show answer
@keyframes titleSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } -
Match all advanced topics
- @keyframes
- Animation stops
- ::before
- Pseudo-element
- linear-gradient
- Gradient background
- subgrid
- Inherits parent grid
- prefers-color-scheme
- Theme preference