App Introduction (2023-03-06)
Red-accent corporate landing page: laptop mockup, feature grids, image+list split, dark promo block and email subscribe bar.
Overview
| Item | Value |
|---|---|
| Created | 2023-03-06 |
| Category | Business Examples |
| HTML files | index.html |
| Source | target/20230306 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Top navigation | Fixed top nav #nav-002: PARDNCHIU logo, ITEM buttons, GitHub link, hamburger button |
| Hero (header=1) | White hero with h1, text and --col-system GitHub button |
| Laptop mockup (num=9) | span.laptop frame with 16:10 screen holding a placeholder screenshot, arc-down divider |
| Feature icons (num=1) | Arc-up divider and 4-column icon cards |
| Feature cards (num=7) | Light-blue band with h2 title and 4 cards |
| Image + list (num=2) | Shadowed image beside a heading and four MORE-linked list items |
| Dark promo (num=4) | #212831 background, 2-column items and MORE button linking to joball.tw |
| Image band | 30rem bg-img section |
| Icon highlight cards (num=6) | 2 shadowed cards with gradient icons, pulled up -4rem |
| Subscribe bar (num=8) | Heading, email input and SEND button (no handler) |
| Footer (footer num=1) | Site title, social icons (Instagram/Facebook/GitHub), four link columns ABOUT / PRODUCTS / TECHNICAL / LEGAL, copyright row |
Interactions
- js/index.js: body.onscroll adds .scroll to the first <nav> once scrollTop > 48px (vanilla DOM)
- js/index.js: converts custom attributes top / bottom / bg-col / col / bg-img into inline padding-top, padding-bottom, background-color, color, background-image (values starting with -- become var(--x))
- js/index.js: replaces span[mask=arc|arc-up|arc-down|slash-left|slash-right|wave] with generated inline SVG dividers sized from the viewport width (64/128px above 1024px)
- js/index.js is plain vanilla DOM (querySelectorAll / getAttribute); PDRenderKit is loaded but not used by the page script
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 |
| PDRenderKit | 1.5.2 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.5.2/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | G-L5VYEZPVXX | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Page stylesheet (compiled SCSS) | - | ./css/index.css |
| Page script | - | ./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 ... section/_022.scss, section/_015-top.scss, section/_015-center.scss, section/_015-bottom.scss, 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 |
Shared section library: index.scss imports every nav/header/section/footer partial inside body; each partial is keyed by an attribute selector (nav[num], section[header=N], section[num=N], footer[num]); comp/* are mixin-like snippets imported inside sections (r2/r3/r4 responsive column widths, div-info title block). component/_info.scss, comp/_w-h-rate.scss and section/_rm-1st-top.scss exist but are not imported.
cd target/20230306
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- Theme via CSS custom properties in an inline <style> :root (--col-nav, --col-system, --col-txt, --col-border, --max-width)
- Attribute-driven layout: section[num=N] / section[header=N] / nav[num] select a pre-built SCSS block; ul.r2/.r3/.r4 pick 2/3/4 column cards
- Fixed top nav with collapsed hamburger button; media queries at 413/479/639/799/1023/1139px max-width and 480/640/768/1024px min-width
- JS-generated SVG section dividers (arc / slash / wave) via span[mask]
- SEO head: Open Graph, Twitter card, canonical, JSON-LD WebPage schema
- Laptop mockup built with CSS (section[num=9] > span.laptop) and 16:10 aspect wrapper
External Assets
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230306.jpg (og:image / twitter:image)
- https://pardn.io/web-template/target/20230306 (canonical / og:url)
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)
- https://joball.tw (link)
