Design a notification banner – Coding Practice

FIND THE BUG

A design-system update broke the checkout notification: its spacing disappeared, corners became square, and the heading no longer stands out. Find the invalid CSS values and repair it.

Acceptance criteria

1.Give .notice at least 16px of padding.
2.Round the banner corners by at least 8px.
3.Give the heading a bold font weight.
4.Keep the banner readable on a light background.

PrevNext

1

2

3

4

<section class="notice">
  <h1>Payment received</h1>
  <p>Your receipt has been sent to your email address.</p>
</section>

0 × 0

Output ready when you are

Press Run to render your code, or Submit to validate your solution.

Design a notification banner — find the bug

Acceptance criteria