三項 Task 進度

TASK-01已完成

讓導覽連結橫向排列

預計修改：style.css

完成後：三個導覽連結排成同一列

TASK-02已完成

分開品牌與選單

預計修改：style.css

完成後：品牌靠左、選單靠右

TASK-03本步驟處理

建立介紹區左右兩欄

預計修改：style.css

完成後：照片與文字並排且有間距

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟無異動

檔案：index.html

修改前

前一步與本步驟沒有實質差異。

修改後

本步驟不需修改此語言。

CSS本步驟有異動

檔案：style.css

修改前

.about-layout { padding: 72px 0; }
.about-layout__image { display: block; width: 100%; max-width: 480px; border-radius: 18px; }

修改後

.about-layout { display: flex; align-items: center; gap: 40px; padding: 72px 0; }
.about-layout__image { display: block; width: 50%; max-width: 480px; border-radius: 18px; }

JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

怎麼看到結果

準備
先重新整理本階段頁面，記住目前畫面，再開始操作。
操作
把視窗拉到桌機寬度，確認照片與文字並排且有間距。
預期
照片與文字並排且有間距

Solution TASK-03

建立介紹區左右兩欄

完成後可見：照片與文字並排且有間距

小安作品集

ABOUT ME

我把想法整理成容易使用的畫面

目前練習 HTML 與 CSS，並持續把每堂成果合回作品集。

作品

這裡會整理已完成的網站作品。

聯絡

聯絡方式將在後續章節補上。