feat: Add CSS layout exercises and corresponding HTML files

- Created multiple exercises under the CSS layout section, including:
  - Final page layout with CSS styles and HTML structure.
  - Display and flow concepts with examples of block, inline, and none display types.
  - Selectors and pseudo-classes with practical examples.
  - Overflow and sizing handling in CSS.
  - Grid layout basics for two-dimensional layouts.
  - Fixed and sticky positioning examples.
  - Centering techniques for common layout scenarios.

- Added README files for each exercise to outline objectives and file structures.
- Updated main README to include new sections and usage instructions.

02-css-layout/05-final-page/answer.css

@@ -0,0 +1,113 @@
+body {
+  margin: 0;
+  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
+  color: #0f172a;
+  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+}
+
+.page {
+  width: min(1100px, calc(100% - 40px));
+  margin: 32px auto 48px;
+}
+
+.site-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid #dbeafe;
+}
+
+.nav {
+  display: flex;
+  gap: 18px;
+}
+
+.nav a {
+  color: #1d4ed8;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  margin-top: 24px;
+  padding: 32px 28px;
+  border-radius: 24px;
+  background: #1d4ed8;
+  color: #ffffff;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #bfdbfe;
+}
+
+.hero h2 {
+  margin: 0 0 12px;
+  font-size: 36px;
+}
+
+.hero-link {
+  display: inline-block;
+  padding: 12px 18px;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #1d4ed8;
+  text-decoration: none;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.tracks {
+  display: flex;
+  gap: 18px;
+  margin-top: 24px;
+}
+
+.track-card {
+  flex: 1;
+  padding: 22px;
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid #dbe4f0;
+  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
+}
+
+.contact {
+  margin-top: 24px;
+  padding: 24px;
+  border-radius: 20px;
+  background: #ffffff;
+  border: 1px solid #dbe4f0;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+input,
+textarea {
+  padding: 12px 14px;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  font: inherit;
+}
+
+button {
+  width: 140px;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 12px;
+  background: #0f766e;
+  color: #ffffff;
+  font: inherit;
+  font-weight: 700;
+}