Combined practice pages

These pages apply the earlier lessons together instead of introducing another isolated phase.

• 01-product-cards.html — independent product articles use flex: 1 1 14rem to grow, shrink, and wrap around an anchored badge
• 02-signup-form.html — semantic labels, focus states, safe overflow, and flexible action buttons that share space and wrap
• 03-article-hero.html — an article and sticky aside use explicit flex ratios and bases alongside inherited typography
• 04-event-guide.html — schedule links wrap and grow evenly while labels, sticky navigation, and fixed utilities use deliberate layers
• 05-team-dashboard.html — a responsive dashboard Grid contains wrapping Flexbox metrics, a named-area profile, a narrow-screen media query, and decorative generated accents
• 06-resource-library.html — an auto-fitting resource Grid contains Flexbox card columns, consistently aligned metadata, responsive filters, and decorative generated accents
• 07-aurora-landing.html — a dark AI-product landing page combines a sticky Flexbox navbar, split hero, CSS dashboard, feature and pricing Grids, anchored badges, gradients, and responsive rearrangement
• 08-terra-landing.html — an editorial travel landing page combines a photographic hero overlay, flexible journey search, asymmetrical destination Grid, split story, responsive cards, and serif/sans-serif typography
• 09-pulse-landing.html — a high-energy fitness landing page combines an offset hero, positioned metrics, Bento-style program Grid, trainer figures, flexible schedules, memberships, and a CSS phone preview
• 10-learning-dashboard.html — a light editorial learning dashboard combines an ops status strip, border-only KPI cards with trend pills, datalist search, grouped course filters, progress and meter status, ordered lessons, and a learner table
• 11-project-dashboard.html — a compact SaaS operations dashboard combines dense filters, project status, a specialized task form, description data, milestones, and a workload table
• 12-wellness-dashboard.html — a warm wellness dashboard combines daily metrics, goal controls, activity suggestions, progress and readiness status, description data, and workout history
• 13-velocity-landing.html — a bold sneaker launch uses transitioned controls, transformed product imagery, finite hero motion, colourway cards, technical details, and purchase calls to action
• 14-graeon-landing.html — a playful no-code SaaS page uses staged interface cards, moving decorative shapes, a finite drag demonstration, workflow steps, templates, and pricing
• 15-moselle-landing.html — an editorial tourism page uses colour-in-motion cues, CSS image reveals, destination storytelling, regional facts, journal cards, and trip planning

Each page has one main, keeps repeated navigation and the page footer outside it, and uses headings to identify sections. Meaningful source order remains unchanged: Advanced Flexbox controls one-dimensional sizing and wrapping, while Grid coordinates rows and columns without reordering practical content. A content-driven media query improves narrow navigation and filters; empty ::before boxes add optional decoration without replacing text. The first six pages share styles.css. That stylesheet favors reusable classes, low-specificity selectors, and a small layer scale: ordinary content, anchored labels, sticky navigation, then fixed utilities.

The first three landing pages share landing-pages.css. A common responsive foundation prevents repeated layout rules, while page-level theme classes provide distinct font pairings, palettes, gradients, card treatments, and section rhythms. At narrow widths, each navbar swaps its desktop links for a native details/summary hamburger disclosure, preserving keyboard access without JavaScript. Aurora opens a compact scale-and-fade card, Terra expands a full-width dropdown, and Pulse slides in a non-modal edge panel. The pages use the combined semantic, box-model, typography, Flexbox, Grid, responsive-image, pseudo-class, pseudo-element, positioning, and stacking lessons.

The three dashboard pages share dashboard-pages.css while using separate learning, project, and wellness theme variables. Their desktop sidebars become native disclosure navigation on narrow screens. Decorative symbol and CSS icon tiles use aria-hidden="true" and remain paired with visible text or accessible button names. Forms retain visible labels even when placeholders provide examples, and wide tables keep native semantics inside labelled, keyboard-focusable overflow regions. Across the suite, native output, progress, and meter elements expose relationships that are also repeated in text rather than communicated only through colour or shape.

The combined-project chapter now follows the CSS Motion chapter. New combined work may add explicit transitions, transforms, or finite keyframe animations when they support feedback or emphasis, while keeping the same final meaning under prefers-reduced-motion: reduce. Projects 13–15 demonstrate that layer: they share the earlier landing-page foundation and add their distinct themes in motion-landing-pages.css. Their motion remains optional, finite, and transform-based where practical. The earlier projects retain their original scope and remain valid examples of interfaces that do not require motion. Their mobile navigation also demonstrates three more disclosure treatments: Velocity fans open a graphic offset card, Graeon presents a playful tile grid, and Moselle reveals a wide editorial menu. Every treatment keeps the native summary control, morphs the hamburger into a close icon, and removes nonessential movement when reduced motion is requested.

The motion pages use public design work as directional inspiration rather than as copied templates: Velocity draws on a Dribbble interactive shoe case study, Graeon adapts the broad idea of a Dribbble no-code landing-page animation, and Moselle combines a Dribbble colour-in-motion identity system with a Pinterest image-reveal reference. All branding, copy, page structures, and CSS implementations in this workbook are original.