Challenge

Success Toast

Easy

css
animation
javascript
design-match

Match the target: a dark toast in the corner with a success icon, a title and a supporting line, and a dismiss button — sliding and fading in rather than just appearing.

Check your work against

A colored success icon/badge sits at the toast's leading edge
A bold title line and a smaller, muted supporting line
A dismiss (×) control at the toast's trailing edge
The toast animates in (slide + fade) on load, and clicking dismiss fades it back out

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.