切版作品 📏 單頁、手刻、純 CSS

✡️ 六角學院 2023 切版夏季班

僅作為個人學習、作品集，無商業用途，設計稿版權屬六角學院。

📝 第一週作業：Vito 的履歷

Website｜Code｜設計稿

• 單欄式
• 風格：客製化（語意化）

Vito.demo.webm

📝 第二週作業：William 的個人網頁

Website｜Code｜設計稿

• 多欄式（Flex 排版）
• 風格：客製化（語意化）、components、原子化（utility）
• 嘗試不寫死寬度，而是透過 CSS 的 calc() 計算出百分比，並將重複用到的數值、運算包成變數放到 :root。

相關技巧練習範例

• Flex box
• background-image
• border-radius
  • border-radius 四個角分別設定
  • border-radius 簡寫
• box-shadow
• linear-gradient

Willam.demo.webm

📝 第三週作業：眼鏡官網 (首頁)

Website｜Code｜設計稿

• 多欄式（Flex 排版）
• 格線系統
• RWD：桌機（優先）、平板、手機
• 風格：客製化（語意化）、原子化（utility）、components

相關技巧練習範例

• resize
• accent-color

Glasses.demo.desktop.webm

Glasses.demo.mobile.pad.webm