服務介紹
粉紅品牌色的公司／服務形象樣板，含交錯圖文區塊、服務卡片與聯絡表單，純 HTML/CSS 無 JS。
概要
| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-05 |
| 分類 | 商業網站範例 |
| HTML 檔案 | index.html |
| 原始碼 | target/20230605 |
即時預覽
頁面區塊
| 區塊 | 說明 |
|---|---|
| 固定導覽列 | 品牌 Pardn Ltd、5 個分頁標籤與漢堡按鈕；沒有腳本綁定行為。 |
| 頂部主視覺 | 背景圖加暗色遮罩，白色圓角卡片放標題、介紹與 GitHub 連結。 |
| 區塊 0 | 圖片加兩欄文字塊；.col 品牌色區塊，.tablet / .mobile 依斷點顯示或隱藏，含 LinkedIn 連結。 |
| 區塊 1 | 標題、Mail 連結與品牌色區塊，旁邊是圖片與說明，背景為模糊遮罩圖。 |
| 區塊 2 | 介紹文字與 4 張服務卡，含 Font Awesome 圖示與 Mail 按鈕。 |
| 區塊 3 | 圖片搭配中英文自我介紹（iOS 與網站全端服務）與聯絡按鈕。 |
| 區塊 4（聯絡） | 聯絡表單（暱稱、信箱、訊息、送出，無處理邏輯）與資訊欄：聯絡圖示、地址地圖連結、服務項目、自營平台 joball.tw。 |
| 頁尾 | 版權文字。 |
相依資源
| 名稱 | 版本 | 來源 |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |
樣式
| 項目 | 內容 |
|---|---|
| SCSS 入口 | sass/index.scss |
| 輸出 CSS | css/index.css |
| Partials | _nav.scss, _header.scss, _footer.scss, _section-0.scss, _section-1.scss, _section-2.scss, _section-3.scss, _section-4.scss |
index.scss 含 reset 與 body>section 背景（第 5、7 個 section 的 ::after 模糊遮罩）；各 partial 對應區塊樣式。顏色與寬度變數定義在 index.html 的 inline <style>，不在 SCSS。編譯後 CSS 的 header background-image 在 _header.scss 中找不到。
cd target/20230605
npx sass sass/index.scss css/index.css --no-source-map || exit 1
使用技巧
- 以 inline :root 宣告 CSS 變數做主題色。
- 以 .mobile / .tablet 在 640px 顯示切換；版面斷點 480px、800px。
- 背景圖區塊以 ::after 疊加 backdrop-filter 模糊遮罩。
- 以 @media (hover: hover) and (pointer: fine) 做卡片 hover；固定導覽與行動版 .show 樣式存在但未被使用。
外部資源
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images in HTML and CSS backgrounds)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230605.jpg (og/twitter image)
