# 服務介紹

粉紅品牌色的公司／服務形象樣板，含交錯圖文區塊、服務卡片與聯絡表單，純 HTML/CSS 無 JS。

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-06-05 |
| 分類 | 商業網站範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230605](https://github.com/pardnio/demo-web/tree/main/target/20230605) |

## 即時預覽

<iframe src="/target/20230605/" title="服務介紹" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/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&gt;section 背景（第 5、7 個 section 的 ::after 模糊遮罩）；各 partial 對應區塊樣式。顏色與寬度變數定義在 index.html 的 inline &lt;style&gt;，不在 SCSS。編譯後 CSS 的 header background-image 在 _header.scss 中找不到。

```bash
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)

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)