# 练习 5：综合页面

## 目标

把前面的 CSS 知识拼起来，做一个完整页面。

## 项目名称

前端学习路线页

## 任务

请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：

- 页面有明显的内容容器
- 页头、主视觉、课程卡片、进度表单区分明显
- 使用 Flex 做卡片区布局
- 使用颜色、留白、边框和圆角提升可读性
- 不要为了排版去破坏 HTML 结构

## 建议顺序

1. 先给 `body` 和主容器设置基础样式
2. 再写 `header`、`hero`
3. 再写课程卡片布局
4. 最后写表单和按钮

## 文件

- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.html)
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.css)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.html)
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.css)