2025-VibeCoding-Task2/index.html at main · hexschool/2025-VibeCoding-Task2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; max-width: 100%; }
    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", Arial, sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; display: block; }
    .container { width: 1920px; margin: 0 auto; padding: 16px; }
    nav a { margin-right: 12px; text-decoration: none; }
    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
    .col-12 { grid-column: span 12; }
    @media (min-width: 768px) { .col-md-6 { grid-column: span 6; } }
    .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
  </style>
</head>
<body>
  <header class="container" role="banner">
    <nav aria-label="主選單">
      <a href="#about">關於我</a>
      <a href="#projects">作品集</a>
      <a href="https://example.com/blog">技術部落格</a>
      <a href="mailto:me@example.com">聯絡我</a>
    </nav>
    <h1>你好，我是小明：前端工程師新手之路</h1>
    <h1>你好，我是小明：前端工程師新手之路</h1>
    <p>歡迎來到我的個人網站！這裡整理了學習紀錄、Side Project 與實作心得。</p>
  </header>

  <footer class="container" role="contentinfo">
    <p>© 2025 My Portfolio · <a href="#">GitHub</a></p>
    <img src="https://source.unsplash.com/600x200/?technology,abstract" alt="">
  </footer>
</body>
</html>