# 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](https://github.com/pardnio/demo-web/tree/main/target/20220409) | ## Live Preview [Open the example in a new tab](/target/20220409/) ## 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. ```bash 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. ## Related - [Project Structure](/project-structure) - [Styling Workflow](/styling-workflow) - [Frameworks](/frameworks)