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 |
Live Preview
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 <nav> when scrollTop > 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.
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 <style> :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.pnghttps://pardn.io/web-template/image/20230301.jpg- image/header.png (relative, written as src=" image/header.png" with a leading space; included in folder)