Service Introduction
Lorem-ipsum company/service landing template with pink brand palette, alternating image-text blocks, service cards and a contact form; pure HTML/CSS.
Overview
| Item | Value |
|---|---|
| Created | 2023-06-05 |
| Category | Business Examples |
| HTML files | index.html |
| Source | target/20230605 |
Live Preview
Page Sections
| Section | Description |
|---|---|
| Fixed nav | Brand Pardn Ltd, 5 tab labels (Header, Section-1..4) and a hamburger button; no script wires them up. |
| Header | Background image with dark overlay and a white rounded card holding title, intro text and GitHub link. |
| Section 0 | Image plus two columns of text blocks; .col brand-colored boxes, .tablet / .mobile blocks shown or hidden by breakpoint, LinkedIn links. |
| Section 1 | Heading with mail link and brand box beside an image with caption, on a blurred background-image band. |
| Section 2 | Intro plus 4 service cards with Font Awesome icons (apple, laptop-code, server, code) and Mail buttons. |
| Section 3 | Image with bilingual self-introduction about iOS and full-stack web services and a contact mail button. |
| Section 4 (contact) | Contact form (name, email, message textarea, submit; no handler) and info columns: contact icons, address map link, services list, platform link joball.tw. |
| Footer | Copyright line. |
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 |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |
Styling
| Item | Value |
|---|---|
| SCSS entry | sass/index.scss |
| Output CSS | css/index.css |
| Partials | _nav.scss, _header.scss, _footer.scss, _section-0.scss, _section-1.scss, _section-2.scss, _section-3.scss, _section-4.scss |
index.scss holds reset and body>section backgrounds (blurred overlay ::after on sections 5 and 7); each partial styles the matching section via [num] blocks. Color/width vars (--width-max, --col-brand, --col-brand-light, --col-brand-dark) are defined in an inline <style> in index.html, not in SCSS. The compiled CSS sets a header background-image that _header.scss does not contain.
cd target/20230605
npx sass sass/index.scss css/index.css --no-source-map || exit 1
Techniques
- CSS custom properties declared in inline :root style for theming.
- Responsive show/hide helper classes .mobile / .tablet at 640px; layout breakpoints 480px and 800px.
- ::after overlay with backdrop-filter blur over background-image sections.
- @media (hover: hover) and (pointer: fine) for card hover; fixed nav with mobile overlay styles (.show) present but unused.
External Assets
- https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images in HTML and CSS backgrounds)
- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230605.jpg (og/twitter image)
