HTML企业官网

aurelia-house-template — HTML 企业官网模板

作者 Muhammad112233-creator

Aurelia House 是一个面向高端住宅、精品酒店与私人会所的单页房地产落地页模板，使用纯 HTML/CSS/JS 编写，无需构建步骤，可直接部署到静态托管。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

纯 HTML/CSS/JS 实现，无框架、无构建步骤，可直接放入任意静态托管

自定义光标带上下文标签（View / Drag / Play），配合预加载器与滚动遮罩揭示动画

六格马赛克画廊可展开为全屏弹窗滑块，支持方向键与键盘导航

六套 SVG 户型图配合标签页规格说明，覆盖单间到顶层公寓

自托管 Cormorant Garamond 与 Manrope 字体，离线渲染一致

包含全屏菜单、优惠弹窗、视频弹窗与 Cookie 条等附加交互组件

模板详细介绍

该模板以暗色电影感视觉为基调，整页内容集中在单个 index.html 中，配合 assets/css/style.css 与 assets/js/main.js 两个核心文件。页面包含预加载器、自定义光标、视差英雄区、滚动标题遮罩、地点卡片与手绘 SVG 区域地图、材质色板、六格画廊弹窗、时间轴交叉淡入滑块、扇形卡片组、横向拖拽滑块、六套 SVG 户型图标签页、顶层公寓海报、浮动标签联系表单，以及全屏菜单、优惠弹窗、视频弹窗和 Cookie 条等附加组件。字体 Cormorant Garamond 与 Manrope 自托管在 assets/fonts/，离线渲染一致。

HTML企业官网

适合你的项目吗？

适用场景

高端住宅项目的单页展示与预约看房入口
精品酒店或私人会所的品牌形象落地页
房地产营销活动中的临时推广页面
需要暗色电影感视觉的静态站点原型或作品集

适合人群

希望直接部署静态托管、不引入构建工具的前端开发者
需要快速替换文案与图片即可上线的房地产营销团队
为高端住宅、酒店或会所制作展示页的设计师

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
将仓库文件放入静态托管目录即可运行，无需安装依赖或执行构建命令
2
替换 assets/img/ 中的图片时保持文件名一致，建议宽度不低于 1600px 并使用暗色调
3
视频弹窗需自行添加 assets/video/aurelia-film.mp4，否则显示提示信息
4
联系表单为前端演示，需在 assets/js/main.js 第 14 节接入实际提交端点
5
上线前替换虚构品牌名、电话号码与文案，并核对演示图片、字体等第三方素材的许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

联系/预约表单仅为前端演示，不含后端处理；需自行在 assets/js/main.js 第 14 节将 submit 处理函数接入自有 CRM 或后端端点，否则表单无法真正提交数据。
视频弹窗依赖自行提供的 assets/video/aurelia-film.mp4 文件；仓库未附带该视频，未添加前弹窗仅显示提示信息，需自备视频素材。
模板内品牌名、电话号码与文案均为虚构示例，上线前必须替换为真实信息，否则会展示错误内容。
演示图片需自行替换为自有素材并保持文件名一致；仓库内图片为示例素材，其许可需单独核对，不可默认随 MIT 代码许可一并商用。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

The tour form is a front-end demo — wire the `submit` handler in `assets/js/main.js` (section 14) to your CRM endpoint.
README 原文

add `assets/video/aurelia-film.mp4`; the _About the project_ modal picks it up automatically (a graceful notice shows until you do).
README 原文

Replace the fictional brand, phone numbers and copy with your own before going live.
README 原文

replace files in `assets/img/` keeping the same names and everything keeps working.
README 原文

https://github.com/Muhammad112233-creator/aurelia-house-template/blob/main/LICENSE https://github.com/Muhammad112233-creator/aurelia-house-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 83 / 100
技术栈: HTML
网站类型: 企业官网

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-09-22
截图检查日期: 2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 51d7870f6a92647f278df74feca3bd6b8d33fc009306bad1f9fb3c7184b7f306

2026-10-02T07:21:01.583Z

来源文件 / 仓库

<div align="center">
# Aurelia House — Real-Estate Landing Template

A dark, cinematic single-page template for premium residential projects, boutique
hotels and private clubs. Pure HTML/CSS/JS — **no frameworks, no build step** —
drop it on any static host and it just works.

![Preview](assets/img/hero.jpg)

</div>

---

## What's inside

| Piece          | Details                                                                   |
| -------------- | ------------------------------------------------------------------------- |
| Preloader      | Serif wordmark, live counter, curtain lift                                |
| Custom cursor  | Dot + drifting ring, contextual labels (View / Drag / Play)               |
| Hero           | Sticky poster, parallax cloud light, Ken Burns zoom, ghost outline words  |
| Scroll system  | Line-mask title reveals, image curtain reveals, soft parallax             |
| Location       | Card grid with hover zoom + hand-drawn SVG district map with pulsing pins |
| Statement      | Sticky typography block + infinite marquee                                |
| Architecture   | Material swatches painted in pure CSS (stone / brass / glass / crystal)   |
| Gallery        | 6-tile mosaic → fullscreen modal slider with arrows + keyboard nav        |
| Daily schedule | Timed crossfade slider (06:30 → 22:00), auto-plays until touched          |
| Advantages     | Fanned card deck — drag, swipe or arrow through 5 cards                   |
| Fitness        | Alternating sticky image rows                                             |
| Infrastructure | Horizontal drag slider with thumb bar + fraction counter                  |
| Residences     | 6 SVG floor plans with tabbed specs (studios → penthouse)                 |
| Penthouses     | Stat blocks, full-bleed posters sliding under rounded sheets              |
| Contact        | Floating-label form with success state (front-end demo)                   |
| Extras         | Fullscreen menu, offers modal, video modal, cookie bar, rotate-phone note |

**Typography** — Cormorant Garamond (display serif) + Manrope (UI sans),
self-hosted in `assets/fonts/` so the site renders identically offline.

**Palette**

```
--bg    #0b0a08   near-black, warm
--ink   #ece5d6   ivory
--gold  #c8a15f   champagne
--gold2 #e6c88a   highlight
```

## File map

```
aurelia-house/
├── index.html            # the entire page — semantics first, one file
├── assets/
│   ├── css/style.css     # design tokens + every section, commented
│   ├── js/main.js        # single vanilla file, one IIFE per module
│   ├── fonts/            # self-hosted woff2 + fonts.css
│   ├── img/              # generated photography (jpg)
│   └── video/            # drop aurelia-film.mp4 here (see README inside)
├── README.md             # this file
├── PUBLISHING.md         # drag-and-drop GitHub Pages guide
├── .gitignore
└── LICENSE               # MIT
```

## Customise in 4 steps

1. **Text** — everything lives in `index.html`. Search for a headline, retype it.
2. **Colours & radii** — edit the tokens at the top of `assets/css/style.css`.
3. **Photos** — replace files in `assets/img/` keeping the same names and
   everything keeps working. Aim for ≥1600 px wide, dark grade.
4. **Video** — add `assets/video/aurelia-film.mp4`; the _About the project_
   modal picks it up automatically (a graceful notice shows until you do).

The tour form is a front-end demo — wire the `submit` handler in
`assets/js/main.js` (section 14) to your CRM endpoint.

## Accessibility & performance

- Semantic landmarks, skip link, aria on every control
- `prefers-reduced-motion` disables the choreography
- Lazy-loaded imagery, `fetchpriority` on the hero only
- Zero runtime dependencies, zero external requests

## License

MIT — see `LICENSE`. Replace the fictional brand, phone numbers and copy with
your own before going live.

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

反馈内容错误