SASS Containers Homework: Parade Hub Page (~30 min)

Rebuild the broken Poway Scripps Rotary Parade starter using only OCS container grammar.

Required tasks

  • Use exactly one ocs__container holding one ocs__card
  • Title as ocs__section-title plus a one-line ocs__description
  • A cols-3 standard grid with a --header cell, one --accent cell, and one --muted cell
  • Table rebuilt with ocs__table-wrap + ocs__table (header row + two body rows)
  • One ocs__callout line at the end

Do / Don’t

  • Do use only OCS container grammar classes, test narrow and wide widths, and keep the Poway Rotary Capstone theme
  • Don’t use inline style attributes, invent classes like wrap or tile, or use more than one ocs__container

Grading (1 point)

  • 0.4 structure: one container, one card, title, description, callout
  • 0.4 grammar: grid with header/accent/muted cells; table uses wrap + table with header and two body rows
  • 0.2 cleanliness: no inline styles or made-up classes
  • Optional +0.2: custom SCSS container variant (only counts if the required part gets full marks)

Poway Rotary Parade

Join the Poway Scripps Rotary Club for a morning of community and celebration.

Location: Poway Road
Start time: 9:00AM
Parade floats
EntryStatus
Parade FloatsConfirmed
Food DriveCollecting donations
One container holds the whole page, so it looks the same on phones and computers with no custom CSS.