# Service Info

Business / web-hosting landing page using attribute-driven sections (num, top, bottom, bg-col, col) styled by vanilla JS, with JS-generated SVG arc dividers.

## Overview

| Item | Value |
|---|---|
| Created | 2023-03-01 |
| Category | Business Examples |
| HTML files | `index.html` |
| Source | [target/20230301](https://github.com/pardnio/demo-web/tree/main/target/20230301) |

## Live Preview

<iframe src="/target/20230301/" title="Service Info" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20230301/)

## Page Sections

| Section | Description |
|---|---|
| Nav (nav[num=1]) | Brand 'PARDN CHIU', ITEM buttons with angle icons, 'My Page' link and a hamburger button; gains 'scroll' class (nav-001-show animation) after scrolling. |
| Header (section[header=1]) | Red-to-purple .linear-bg-1 gradient hero with heading, text, Code / GitHub buttons and a Freepik illustration (image/header.png). |
| Services (num=1) | 4 icon cards (Apple / desktop / database / server) in .r4 with an arc-down divider. |
| Image + info list (num=2) | Shadowed image beside a heading, text and 4 sub-items with MORE links, on #F2F6FC. |
| VPS pricing (num=3) | 租用VPS / 網站代管: 基本 888 / 進階 1688 (highlighted) / 高階 3360 plans with checked spec lists in .r3. |
| Steps + CTA (num=4) | Dark #212831 band with 4 numbered items (fa-1..fa-4) in .r2 and a text block with MORE button. |
| Profile cards (num=5) | 3 cards with image, bold name line and text. |
| Feature highlights (num=6) | Two shadowed cards with gradient icon badges, pulled up with top: -4rem. |
| CTA row (num=8) | Heading + text with a right-aligned MORE button. |
| Footer (footer[num=1]) | Site name, credit and social icons; ABOUT / PRODUCTS / TECHNICAL / LEGAL link columns; copyright row with Privacy Policy / Contact. |

## Interactions

- js/index.js: document.body.onscroll toggles 'scroll' on &lt;nav&gt; when scrollTop &gt; 48.
- Attribute styling pass: elements with top / bottom / bg-col / col / bg-img get inline padding, background-color, color or background-image; values starting with -- become var(--...).
- span[mask=arc / arc-up / arc-down / slash-left / slash-right / wave] replaced by inline SVG dividers sized from viewport width and filled with the parent background colour.
- [unhover="1"] elements get an 'unhover' class for 500ms on mouseleave.
- The hamburger button has no active handler (its toggle code in js/index.js is commented out).

## Dependencies

| Name | Version | Source |
|---|---|---|
| PDRenderKit (loaded, active page code does not use it) | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| Google Analytics gtag | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| js/index.js (local) | - | js/index.js |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `nav/_001.scss`, `nav/_002.scss`, `nav/_body.scss`, `header/_001.scss`, `header/_002.scss`, `header/_003.scss`, `section/_000.scss ... _022.scss (incl. _015-top / _015-center / _015-bottom, _rm-1st-top)`, `footer/_001.scss`, `comp/_div-info.scss`, `comp/_innerText.scss`, `comp/_li-r2.scss`, `comp/_li-r3.scss`, `comp/_li-r4.scss`, `comp/_ul-button.scss`, `comp/_w-h-rate.scss`, `component/_info.scss` |

Entry defines --size-* / --h-* type-scale variables, resets, .shadow / .border utilities and imports a numbered library: nav 001-002, header 001-003, section 000-022, footer 001 (selected by section[num=N] / header=N). comp partials (r2 / r3 / r4 lists, buttons, info) are imported inside sections. Only a subset is used by this page.

```bash
cd target/20230301
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## Techniques

- Numbered section modules selected by attribute (section[num="N"], section[header="1"], footer[num="1"]).
- Runtime inline SVG generation (quadratic arcs, slashes, triple-layer waves) for section dividers.
- CSS variables in inline &lt;style&gt; :root: --col-nav #212831, --col-system #00BB95, --col-border, --max-width 1100px; .linear-bg-1 gradient utility.
- Mixed min-width / max-width breakpoints (413 / 479 / 639 / 799 / 1023 / 1139px and 480 / 640 / 768 / 1024 / 1040px).
- a::before content: attr(freepik) watermark label for attribution overlays.

## External Assets

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- https://www.freepik.com/free-vector/programmer-working-with-css_5480318.htm (illustration link)
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20230301.jpg`
- image/header.png (relative, written as src=" image/header.png" with a leading space; included in folder)

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)