Phase 6 — Allowed

This file is the gauge for everything in phase6/. Phase 6 builds on the completed Advanced Flexbox chapter.

Learning goal

Practice inheritance, web fonts, local fonts, inline span styling, image backgrounds, overlays, and background sizing.

Inherited tools

Everything from ../flexbox/allowed.md remains available, including Phase 5 sizing and overflow plus wrapping, flexible sizing, item/line alignment, and order.

New HTML

• span
• Additional stylesheet and preconnect link elements

New CSS

• font-family
• font-style
• background-size
• Background images and overlays through the existing background property

Allowed at-rules

• @font-face with font-family, src, font-weight, and font-style descriptors

Not allowed

• JavaScript
• Positioning properties (position, offsets, and z-index)—introduced in Phase 7
• Any HTML tag or CSS property not inherited or listed above
• Media queries and inline styles

Pages

• 01-landing.html — photo hero, overlay, and Google Fonts
• 02-article.html — typography, inheritance, and inline accents
• 03-motion.html — motion media board and attribution
• 04-event.html — event poster and local font
• 05-studio.html — background sizing with cover and contain