# 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](https://github.com/pardnio/demo-web/tree/main/target/20230605) |

## Live Preview

<iframe src="/target/20230605/" title="Service Introduction" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20230605/)

## 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&gt;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 &lt;style&gt; in index.html, not in SCSS. The compiled CSS sets a header background-image that _header.scss does not contain.

```bash
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)

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)