in

0

○CSS Rule Demo: Style an Exhibit Card ○Exercise: Write Your First CSS Rule ○CSS Selectors Demo: Target Exhibit Details ○Exercise: Target Exhibit Details ○Apply CSS Demo: Three Sources ○Exercise: Apply CSS Three Ways ○Specificity Demo: Resolve a Style Conflict ○Exercise: Resolve Specificity ✦Module Quiz

○Color Palette Demo ○Color Palette Exercise ○Background Layer Demo ●Background Layer Exercise ○Type Rhythm Demo ○Type Rhythm Exercise ○Borders and Shadows Demo ○Exercise: Borders and Shadows ✦Module Quiz

○Box Model Demo: Seed Packet Card ○Exercise: Space a Seed Packet ○Display Demo: Swap Table Labels ○Exercise: Arrange Swap Table Labels ○Positioning Demo: Pickup Pin ○Exercise: Pin the Pickup Location ○Sizing and Overflow Demo ○Exercise: Size a Seed-Swap Notice ✦Module Quiz

○Advanced Selectors Demo: Book Cart Sign ○Exercise: Target a Book Cart Sign ○Pseudo-Classes Demo: Night Cart States ○Exercise: Style Night Cart States ○Pseudo-Elements Demo ○Exercise: Add a Book-Quote Mark

○Lantern Market navigation demo ○Lantern Market navigation exercise

○Community garden request card demo ○Community garden request card exercise

○Flex Direction Demo ○Exercise: Flex Direction ○Main-Axis Spacing Demo ○Exercise: Main-Axis Spacing ○Cross-Axis Alignment Demo ○Exercise: Cross-Axis Alignment ○Wrapping and Flex Items Demo ○Exercise: Wrapping and Flex Items ○Flexbox Navigation Demo ○Exercise: Flexbox Navigation

○Grid Tracks Demo ○Exercise: Grid Tracks ○Grid Gaps Demo ○Exercise: Grid Gaps ○Grid Placement Demo ○Exercise: Grid Placement ○Responsive Grid Demo ○Exercise: Responsive Grid

○River radio schedule demo ○River radio schedule exercise

○Field note color system demo ○Field note color system exercise ○Transforms Demo ○Exercise: Rotate a Field Note

○Kite festival signal demo ○Kite festival signal exercise

○Garden forecast demo ○Harbor forecast exercise ○Fluid sizing demo ○Fluid weather bulletin exercise ✦Module Quiz

○Seed inventory table demo ○Tool checkout table exercise ✦Module Quiz

○Community maker profile demo ○Maker profile sheet exercise ✦Module Quiz

Background Layer Exercise

The demo showed a gradient as a background layer. Build a compact announcement panel with the same technique.

Run the preview when you finish. The panel should have a violet fallback, a diagonal violet-to-pink gradient, and readable white text.

Your Task

Set .announcement to a #7c3aed background color.
Add linear-gradient(135deg, #7c3aed, #ec4899) as .announcement’s background image.
Set .announcement text color to white.

Hint 1

1 / 2

HINT 1

Put the gradient in background-image, not color.

HINT 2

A gradient needs its angle followed by its color stops.

Loading editor…

READY

intercourses

html