昨天我們學習了如何架設 GitHub Pages，
並加入文字和圖片。
今天就要來挑戰打造專屬的個人網站!

在今天這篇，目標為學會使用 GitHub Pages 提供的內建主題，
並練習在 index.html 中加入 圖片、超連結、排版，
撰寫 CSS 樣式，讓網站更有設計感。

GitHub Pages 的主題

GitHub自己有許多內建主題，可供使用者自由使用。
不過，如果是自己新建 html，可能就無法使用內建主題...
這個主題設定只對：
Markdown (README.md) 當首頁
才會生效。
所以如果想要自訂主題，還是要自己寫CSS!
如果你是用READ.md，下圖的內建主題可以提供參考，選擇適合的主題!!

因為我們昨天是自己建html，所以我們就乖乖寫CSS叭XD

CSS 的建立方式

CSS 可以用三種方式套用到網頁：
1. 內嵌（inline style）

<p style="color:red;">這是紅色文字</p>

這個方法適合臨時測試，但不建議大量使用。

2. 內部樣式表（style 標籤）

<style>
    body { background-color: #f0f0f0; }
</style>

適合單一頁面修改，方便快速調整。

3. 外部樣式表（.css 檔案）

<link rel="stylesheet" href="style.css">

這個方法適合多頁面共用，是專業網站最推薦的方式。

小技巧：對 GitHub Pages，建議先用內部樣式表，熟悉後再拆成外部 CSS 檔，方便管理。

顏色與字型的選擇

字型：
優先選用系統字型，如 "Arial, sans-serif" 或 "Microsoft JhengHei"，兼容性好。
重要文字可以用粗體 (font-weight: bold) 或增大字體 (font-size: 1.5em)。

顏色：
背景與文字要有對比度，例如深色文字配淺色背景。
不要超過 3~4 種顏色，保持整體一致性。

漸層背景：
用 CSS 的 linear-gradient 可以快速增加設計感：

body {
    background: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

排版與版面設計

分區（section）：
每個功能區塊用 包起來，清楚分隔內容。

• 置中對齊：常用 text-align: center，讓內容看起來整齊。
• 卡片式設計：作品集可以用白底卡片（box）排列，搭配陰影增加層次感。
• 彈性排版：

.projects {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

這樣畫面會自動換行，手機版也能看得舒服。

我們剛才介紹了許多css的設計，
各位邦友可以挑選自己喜歡的設計來撰寫囉~

記得!!做完之後一定要提交 + 推送!!!