Basic (2022-04-09)

Static business page assembled from PDWebsitemplate modules (T002, C004, C013, C006, C014, C007, B001), selected by sn attributes, green theme.

Overview

Item	Value
Created	2022-04-09
Category	Business Examples
HTML files	`index.html`
Source	target/20220409

Live Preview

Open the example in a new tab

Page Sections

Section	Description
T002 hero + fixed navbar	Background-image hero with a fixed 4rem navbar (title, links, hover dropdown '列表'), subtitle, heading, text and Code / GitHub buttons.
C004 icon cards	6 cards in a 3-column list (df="x3"), each with a Font Awesome icon, title and text.
C013 service steps	Background-image block with 4 icon + text service items beside an image.
C006 pricing table	Three VPS plans (888 / 1688 / 3360 per month) with spec lists and Email buttons.
C014 two promo cards	Two figure cards (image + caption) with description text on a background image.
C007 article cards	Two article cards with image, linked title, author / company / tag meta list and excerpt.
B001 footer	3-column footer: BC001 company intro, BC005 links + social icons, BC002 link list, then copyright bar.

Dependencies

Name	Version	Source
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
Noto Sans TC (Google Fonts)	wght 100;300;400;500;700;900	https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap
Google Analytics gtag	-	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX

Styling

Item	Value
SCSS entry	`sass/PDWebsitemplate.min.scss`
Output CSS	`css/PDWebsitemplate.min.css`
Partials	`function/_hsbTohsl.scss`, `_init.scss`, `_PDModuleTop.scss (top/_T-001, _T-002, _T-003, _T004)`, `_PDModuleColum.scss (colum/_C001..._C019)`, `_PDModuleBottom.scss (bottom/_B001-_B003, _BC001-_BC006)`, `_PDModuleAnimation.scss`, `_PDModuleComp.scss (comp/_a[btn], _dev.a[shadow], _div[bg], _img[ic], _to, _wh)`, `_header-0.scss`, `_section-1.scss`

The full module library is compiled even though the page uses only 7 modules; each module is scoped by div[sn=XXXX] and prints its code via ::after controlled by --module-hint. sass/index.scss (+ _header-0, _section-1) is a separate leftover entry not linked by the page.

cd target/20220409
npx sass sass/PDWebsitemplate.min.scss css/PDWebsitemplate.min.css --no-source-map || exit 1

Techniques

Attribute-driven modules: sn="T002" etc. select module styles; df="x2/x3" column layouts, df="btn fff col xl" button variants, wh="1" image wrappers, df="sd" shadow cards.
Theme via CSS custom properties in an inline <style> on *: --col-sys (green rgb(30,120,50)), --max-width 1140px, --default-radius 0.25rem, --module-hint 1.
Desktop-first max-width breakpoints (413 / 479 / 639 / 767 / 959 / 1023px) and (hover: hover) and (pointer: fine) hover rules with keyframe color transitions.
CSS-only hover dropdown in the navbar; links collapse (display: none) below 640px.

External Assets

https://fakeimg.pl/1024/282828/eae0d0/?text=sample
https://pardn.io/image/head.png
https://pardn.io/web-template/image/20220409.jpg
/sample2, /sample2/gallery, /sample2/blog (root-absolute nav links)
../icon/watch/1/fff.svg, ../image/bg-l.svg, ../image/bg-m.svg (referenced by compiled CSS, not present in the folder)

Known Issues

Nav links /sample2, /sample2/gallery and /sample2/blog are root-absolute and point to pages that do not exist. CSS url(../icon/watch/1/fff.svg), url(../image/bg-l.svg) and url(../image/bg-m.svg) resolve to <folder>/icon and <folder>/image, which are not in the folder (bg-l.svg is overridden by inline background-image). The mobile menu <img df="nvb"> has an empty src, its icon CSS is commented out and no JS is loaded, so links are unreachable below 640px.