morrow-studio — HTML 企业官网模板

SHA-256: 86da42e00d6522606f4ca57578d22d68a4df44b483d2e8530d9fd8df4bb7f216

2026-10-01T04:26:15.310Z

<div align="center">
# Morrow Studio — Static Website Template

A polished, dependency-free, one-page creative-studio website template. It is designed to be uploaded directly to **GitHub Pages** — no Node.js, build command, framework or command line needed.

> The site uses original Morrow content, custom CSS interface artwork, and locally stored original image assets. It is an independently created template inspired by the **general interaction patterns** of the reference supplied for this project; it does not include copied source code, client logos, copy, or visual assets from that site.

</div>

## Recommended GitHub repository details

| Field                   | Value                                                                                   |
| ----------------------- | --------------------------------------------------------------------------------------- |
| **Repository name**     | `morrow-studio-template`                                                                |
| **Description**         | `A premium, animated static creative-studio website template — ready for GitHub Pages.` |
| **Visibility**          | Public (required for GitHub Free Pages)                                                 |
| **Template repository** | Turn on after upload if you want visitors to create their own copy                      |

## Included

- Responsive single-page design for desktop, tablet and mobile
- Animated particle/orbit hero and ambient cursors
- Smooth custom cursor on desktop, magnetic call-to-action buttons, marquee and scroll reveals
- Working desktop dropdown and mobile navigation
- Working service, project and contact dialogs
- Contact form that opens the visitor’s email app with their message pre-filled
- Newsletter, cookie-preference and sample-article interactions
- Local assets only — no CDN dependency and no tracking library
- `404.html`, `.nojekyll`, `.gitignore`, MIT `LICENSE`, and GitHub Pages instructions

## Folder map

```text
morrow-studio-template/
├── index.html                 # Main website page
├── 404.html                   # Branded GitHub Pages error page
├── .nojekyll                  # Keeps GitHub Pages from processing the site with Jekyll
├── .gitignore                 # Sensible ignores for future local development
├── LICENSE                    # MIT license for this template
├── README.md                  # Project overview and quick setup
├── DEPLOYMENT-GUIDE.md        # Click-by-click GitHub Pages publishing guide
├── css/
│   └── style.css              # All design, responsive layout and animation styles
├── js/
│   └── script.js              # All navigation, modal and motion behaviour
└── assets/
    ├── favicon.svg
    ├── hero-orbit.png
    ├── project-ember.png
    ├── project-field.png
    ├── project-tide.png
    └── team-studio.png
```

### Brand and contact details

Search `index.html` for these values:

- `morrow` — studio name / wordmark
- `[email protected]` — email destination for buttons and the contact form
- `© 2026 Morrow Studio` — footer copyright

### Change text and navigation labels

All visible copy is in `index.html`. Search for the sentence you want to change and edit only the words between the HTML tags. Preserve the surrounding tags, classes, IDs and `data-*` attributes so the motion and interactions continue to work.

### Replace images

1. Put your replacement image in the matching `assets/` folder via GitHub upload.
2. Use simple lowercase names with hyphens, e.g. `new-project.jpg`.
3. Update the relevant `src="assets/..."` in `index.html`.
4. For a clean layout, use images at least 1600px wide. Portrait work should be near 4:5; landscape work should be near 16:9.

The existing images are stored locally. You can delete them once no `<img src>` in `index.html` refers to them.

### Change the colour direction

The first section of `css/style.css` contains colour variables, for example:

```css
:root {
  --ink: #10111a;
  --paper: #f1f0eb;
  --acid: #c7fa48;
  --coral: #f46a51;
}
```

Update those values to reskin the full template consistently. Do not rename the variables unless you also update every place they are used.

### Add real form handling

The included form is intentionally static and opens the user’s email program. To use Formspree, Netlify Forms, Basin, a serverless function, or your own API, replace the submit listener at the `// Contact dialog and simple mail-to form` section of `js/script.js`.

## Local preview (optional)

No installation is needed. Double-click `index.html` to open it in a browser. For the closest browser behaviour, use VS Code’s “Live Server” extension or run any static-file server from this root folder.

## Browser and accessibility notes

- Uses native `<dialog>` elements supported by current Chrome, Edge, Firefox and Safari.
- Respects `prefers-reduced-motion`.
- Includes keyboard-visible focus states, skip link, named controls and semantic headings.
- The decorative animated hero canvas is ignored by assistive technology.

## License

This template is released under the [MIT License](LICENSE). Replace the sample content and assets before using the site as a real business website.

<div align="center">
⭐ If this template is useful, please leave a star!
</div>