https://github.com/githubplayerzero/web-layout-single-hand

切版 - 單頁式手刻作品
https://github.com/githubplayerzero/web-layout-single-hand

Last synced: about 19 hours ago
JSON representation

切版 - 單頁式手刻作品

• Host: GitHub
• URL: https://github.com/githubplayerzero/web-layout-single-hand
• Owner: GitHubPlayerZero
• Created: 2024-03-25T13:11:58.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-08T15:51:48.000Z (9 months ago)
• Last Synced: 2024-04-08T19:09:33.078Z (9 months ago)
• Language: HTML
• Size: 97.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

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

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




### 📝 第一週作業：Vito 的履歷

[Website](https://githubplayerzero.github.io/web-layout-single-hand/w1/)｜[Code](https://github.com/GitHubPlayerZero/web-layout-single-hand/tree/main/w1)｜[設計稿](https://www.figma.com/file/eB5X8OYO4whPx3btCZdr3w/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W1---%E5%80%8B%E4%BA%BA%E5%B1%A5%E6%AD%B7?type=design&node-id=0-1&mode=design&t=Ra2WvqXTBiCNffSe-0)

- 單欄式

- 風格：客製化（語意化）

[Demo](https://github.com/GitHubPlayerZero/web-layout-single-hand/assets/65072506/ea97f557-75d7-402d-bb1e-d3ac7b1872d9)




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

[Website](https://githubplayerzero.github.io/web-layout-single-hand/w2/)｜[Code](https://github.com/GitHubPlayerZero/web-layout-single-hand/tree/main/w2)｜[設計稿](https://www.figma.com/file/7t6ft6HEHeWkpFs7OQrdKp/2023-%E5%88%87%E7%89%88%E5%A4%8F%E5%AD%A3%E7%8F%AD-W2---%E5%80%8B%E4%BA%BA%E7%B6%B2%E9%A0%81?type=design&node-id=0-1&mode=design&t=4h4kJBnGCzidkXCD-0)

- 多欄式（Flex 排版）

- 風格：客製化（語意化）、components、原子化（utility）

- 嘗試不寫死寬度，而是透過 CSS 的 `calc()` 計算出百分比，並將重複用到的數值、運算包成變數放到 `:root`。

#### 相關技巧練習範例

- [Flex box](https://codepen.io/collection/ZMebzz)

- [background-image](https://codepen.io/codepenplayer/pen/gOQzLxV)

- border-radius

    - [border-radius 四個角分別設定](https://codepen.io/codepenplayer/pen/KKYRBwL)

    - [border-radius 簡寫](https://codepen.io/codepenplayer/pen/LYXryzd)

- [box-shadow](https://codepen.io/codepenplayer/pen/rNQKYMv)

- [linear-gradient](https://codepen.io/codepenplayer/pen/ZEmjqWE)

[Demo](https://github.com/GitHubPlayerZero/web-layout-single-hand/assets/65072506/1897670a-e66d-4d9d-9c1a-418614ac8d73)




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

[Website](https://githubplayerzero.github.io/web-layout-single-hand/w3/)｜[Code](https://github.com/GitHubPlayerZero/web-layout-single-hand/tree/main/w3)｜[設計稿](https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/screen/0c592e9b-6edc-48d1-9540-27cef649efb7/)

- 多欄式（Flex 排版）

- 格線系統

- RWD：桌機（優先）、平板、手機

- 風格：客製化（語意化）、原子化（utility）、components

#### 相關技巧練習範例

- [resize](https://codepen.io/codepenplayer/pen/JjQjGMB)

- [accent-color](https://codepen.io/codepenplayer/pen/mdZdEKK)

[Demo - 桌機](https://github.com/GitHubPlayerZero/web-layout-single-hand/assets/65072506/24a45a05-c70e-4d58-b932-063e10851e9f)

[Demo - 手機 > 平板](https://github.com/GitHubPlayerZero/web-layout-single-hand/assets/65072506/1902a310-564b-47c5-a170-eaa5ac477548)