HTML作品集博客企业官网

free-html-templates — HTML 作品集模板

作者 Novpix

Novpix 维护的免费 HTML 网站模板集合，包含 17 套纯 HTML/CSS 与少量原生 JavaScript 的响应式模板，覆盖落地页、作品集、企业站、博客、活动、婚礼、错误页和 HTML 邮件等场景，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图

桌面端首页1 / 3

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

桌面端截图首屏预览

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

17 套纯 HTML/CSS 模板，含少量原生 JavaScript，无框架、无构建步骤、无依赖

覆盖落地页、企业官网、作品集、博客、link-in-bio、婚礼、会议活动、错误页与 HTML 邮件等类型

使用 CSS 自定义属性集中控制主题色，便于替换品牌配色

README 说明从 320px 起响应式，包含语义化 HTML、跳转链接、带标签表单、AA 对比度与 reduced-motion 适配

表单默认以演示形式提供，可接入 Formspree 或 Netlify Forms

MIT 许可，允许免费使用、修改、商用和分发该版本代码

模板详细介绍

该项目在 GitHub 上以 MIT 许可发布，提供 17 套手写 HTML/CSS 模板，不依赖框架、无需构建步骤。模板类型包括 SaaS 与移动应用落地页、餐厅、房产中介、企业咨询、健身房、创意机构、摄影师与设计师作品集、开发者简历、个人博客、link-in-bio、婚礼、技术会议、错误页以及 5 种响应式 HTML 邮件模板。

每套模板使用 CSS 自定义属性在 style.css 顶部集中控制主题色，并附带原创 SVG 插画与文案。README 说明模板从 320px 起响应式，采用语义化 HTML、跳转链接、带标签的表单、AA 对比度以及 reduced-motion 适配。表单默认以 action="#" 作为演示，需按各模板 README 接入 Formspree 或 Netlify Forms 才能真实提交。

模板可复制 templates/<name>/ 目录或下载 ZIP，修改 HTML 文本与 CSS 变量后上传到任意静态托管（Netlify Drop、GitHub Pages、Cloudflare Pages、Vercel 或普通共享主机）。演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管、数据库、支付或 AI 等外部服务可能另行收费。

HTML作品集博客企业官网

适合你的项目吗？

适用场景

为个人或客户项目快速搭建静态落地页、企业官网或作品集站点
制作餐厅、健身房、房产中介、创意机构等行业展示型网站
搭建个人博客、开发者简历或 link-in-bio 页面
制作婚礼、技术会议等活动信息页
编写响应式 HTML 邮件，如新闻通讯、欢迎信、收据、密码重置和活动邀请

适合人群

希望使用纯 HTML/CSS 模板、不引入前端框架的开发者或设计者
需要快速交付静态网站原型的自由职业者或小型团队
为个人项目或客户项目寻找可商用免费模板的用户
需要响应式 HTML 邮件模板的营销或运营人员

上手与定制指南

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

1
从 templates/<name>/ 复制对应模板文件夹，或从 zumatools.com 下载 ZIP
2
在 HTML 文件中替换文本，在 assets/css/style.css 的 :root 变量中修改颜色
3
将文件夹上传到任意静态托管服务，如 Netlify Drop、GitHub Pages、Cloudflare Pages、Vercel 或共享主机
4
表单默认 action="#" 仅为演示，需按各模板 README 接入 Formspree 或 Netlify Forms 才能真实提交
5
演示图片、字体、图标等第三方素材需按各自许可单独核对；域名、托管、数据库、支付或 AI 等外部服务可能另行收费

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

表单默认仅为演示（action="#"），不会真实提交；需按各模板 README 接入 Formspree 或 Netlify Forms 等第三方服务才能收集数据，可能涉及外部账号或费用。
字体从 Google Fonts 加载，适用 SIL Open Font License，而非本项目的 MIT 许可；离线或自托管使用需另行遵守该字体许可。
分发或再发布代码副本时必须保留 MIT 许可与版权声明；在线站点上的署名属自愿，非强制要求。
README 提及 Formspree 表单服务；真实提交需配置服务端点，其使用额度与费用需单独核对。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

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

Forms are wired as demos (`action="#"`); each template's README explains how to connect Formspree or Netlify Forms.
README 原文

Fonts are loaded from Google Fonts under the SIL Open Font License.
README 原文

Keep the licence notice in copies of the code; attribution on the live site is appreciated but not required.
README 原文

https://github.com/Novpix/free-html-templates/blob/main/LICENSE https://github.com/Novpix/free-html-templates/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 562dc6d093aea0c063818cf158700f69d3846bdb525af76e0db359d2486e7e00

2026-10-01T02:07:10.177Z

来源文件 / 仓库

# Free HTML website templates

17 hand-built, responsive website templates in plain HTML, CSS and a little vanilla JavaScript — no framework, no build step, no dependencies. MIT licensed: use them for personal and client work.

**Browse them live, change the colours and brand name, and download a customised ZIP at [zumatools.com/website-templates](https://zumatools.com/website-templates/).**

- Landing pages, business sites, portfolios, a blog, link-in-bio, wedding and event sites, error pages and responsive HTML emails
- Responsive from 320px up, accessible (semantic HTML, skip links, labelled forms, AA contrast, reduced-motion aware)
- Themed with CSS custom properties at the top of each `style.css`
- Original SVG artwork and copy — no stock photos to license, no lorem ipsum
- Works from any static host: Netlify Drop, GitHub Pages, Cloudflare Pages, Vercel, or plain shared hosting

## Use a template

1. Pick one below (or [preview them all](https://zumatools.com/website-templates/)).
2. Copy its folder from `templates/<name>/`, or download the ZIP.
3. Edit the text in the HTML files and the colours in `assets/css/style.css` (`:root` variables).
4. Upload the folder to any static host.

Forms are wired as demos (`action="#"`); each template's README explains how to connect Formspree or Netlify Forms.

## Templates

### Pulse — SaaS landing page

[![Pulse — SaaS landing page](templates/saas-landing/thumb.webp)](https://zumatools.com/website-templates/saas-landing/)

A dark, modern SaaS landing page with a hand-built product dashboard mock, features grid, pricing with a monthly/yearly toggle, testimonials and FAQ.

**Pages:** index.html · **Features:** Responsive, Dark design, CSS/SVG product mockup, Pricing monthly/yearly toggle, FAQ accordion, Animated stats counter

[Live preview & customise](https://zumatools.com/website-templates/saas-landing/) · [Download ZIP](https://zumatools.com/templates-zip/saas-landing.zip) · [Source](templates/saas-landing/)

### Sprout — mobile app landing page

[![Sprout — mobile app landing page](templates/app-landing/thumb.webp)](https://zumatools.com/website-templates/app-landing/)

A bright, friendly landing page for a mobile app with CSS-drawn phone mockups, feature sections, a screenshots carousel, reviews and download buttons.

**Pages:** index.html · **Features:** Responsive, Pure CSS phone mockups, Screenshots carousel (scroll-snap), Neutral iPhone/Android download buttons, Reviews, FAQ accordion

[Live preview & customise](https://zumatools.com/website-templates/app-landing/) · [Download ZIP](https://zumatools.com/templates-zip/app-landing.zip) · [Source](templates/app-landing/)

### Ember & Olive — Restaurant & café website

[![Ember & Olive — Restaurant & café website](templates/restaurant/thumb.webp)](https://zumatools.com/website-templates/restaurant/)

Warm restaurant and café template with menu page, dietary filters, reservation form, opening hours, food illustrations and a map block. Free, no build step.

**Pages:** index.html, menu.html · **Features:** Responsive, Mobile menu, Full menu page with categories, Dietary tags & filters, Reservation form (date, time, party size), Opening hours with today highlight

[Live preview & customise](https://zumatools.com/website-templates/restaurant/) · [Download ZIP](https://zumatools.com/templates-zip/restaurant.zip) · [Source](templates/restaurant/)

### Haven — Real estate agency website

[![Haven — Real estate agency website](templates/real-estate/thumb.webp)](https://zumatools.com/website-templates/real-estate/)

Real estate agency template with live property search and filters, listings grid, detail page with specs, mortgage calculator, agent cards and enquiry form.

**Pages:** index.html, listing.html · **Features:** Responsive, Mobile menu, Property search & filters (vanilla JS over JSON), Sort by price / size / newest, Listings grid with price, beds, baths, area, Listing detail page driven by ?id=

[Live preview & customise](https://zumatools.com/website-templates/real-estate/) · [Download ZIP](https://zumatools.com/templates-zip/real-estate.zip) · [Source](templates/real-estate/)

### Meridian — Corporate & consulting website

[![Meridian — Corporate & consulting website](templates/business/thumb.webp)](https://zumatools.com/website-templates/business/)

Crisp corporate website template for consulting and professional-services firms: services, stats, case studies, testimonials, team, pricing and contact pages.

**Pages:** index.html, services.html, about.html, contact.html · **Features:** Responsive, Mobile menu, 4 pages, Hero with data-dashboard visual, Services & engagement pricing, Animated stat counters

[Live preview & customise](https://zumatools.com/website-templates/business/) · [Download ZIP](https://zumatools.com/templates-zip/business.zip) · [Source](templates/business/)

### Volt — gym & fitness website

[![Volt — gym & fitness website](templates/fitness/thumb.webp)](https://zumatools.com/website-templates/fitness/)

An energetic one-page gym website with a tabbed class timetable, coach profiles, membership pricing, a BMI calculator, transformation stories and a free-trial signup.

**Pages:** index.html · **Features:** Responsive, Dark design, Mobile menu, Class timetable tabs (keyboard accessible), Monthly / yearly pricing toggle, BMI calculator (metric & imperial)

[Live preview & customise](https://zumatools.com/website-templates/fitness/) · [Download ZIP](https://zumatools.com/templates-zip/fitness.zip) · [Source](templates/fitness/)

### Wildcard — creative agency website

[![Wildcard — creative agency website](templates/agency/thumb.webp)](https://zumatools.com/website-templates/agency/)

A bold, big-type website for a creative agency or design studio: home, case-studies page with filters and a contact page with a project enquiry form.

**Pages:** index.html, work.html, contact.html · **Features:** Responsive, 3 pages, Big typography, Scrolling marquee, Services accordion, Filterable case studies

[Live preview & customise](https://zumatools.com/website-templates/agency/) · [Download ZIP](https://zumatools.com/templates-zip/agency.zip) · [Source](templates/agency/)

### Halvorsen — Photographer portfolio

[![Halvorsen — Photographer portfolio](templates/photography/thumb.webp)](https://zumatools.com/website-templates/photography/)

Immersive dark portfolio for photographers: full-bleed masonry galleries with keyboard and swipe lightbox, galleries index, about page and booking form.

**Pages:** index.html, galleries.html, gallery.html, about.html, booking.html · **Features:** Responsive, Full-bleed masonry gallery, Lightbox (keyboard + swipe), Galleries index, Single gallery page, Booking form with packages (demo)

[Live preview & customise](https://zumatools.com/website-templates/photography/) · [Download ZIP](https://zumatools.com/templates-zip/photography.zip) · [Source](templates/photography/)

### Mara — Designer & illustrator portfolio

[![Mara — Designer & illustrator portfolio](templates/designer-portfolio/thumb.webp)](https://zumatools.com/website-templates/designer-portfolio/)

Editorial portfolio template for designers and illustrators: staggered work grid with hover reveals, about, services, clients, contact form and a case study page.

**Pages:** index.html, project.html · **Features:** Responsive, Staggered work grid, Hover reveals, Case study page, Scroll reveal animations, Mobile menu

[Live preview & customise](https://zumatools.com/website-templates/designer-portfolio/) · [Download ZIP](https://zumatools.com/templates-zip/designer-portfolio.zip) · [Source](templates/designer-portfolio/)

### Terminal — Developer résumé & portfolio

[![Terminal — Developer résumé & portfolio](templates/developer-portfolio/thumb.webp)](https://zumatools.com/website-templates/developer-portfolio/)

Résumé website for software developers: terminal-style hero, experience timeline, projects with tech tags, skills, open-source stats, dark mode and print-ready CV.

**Pages:** index.html · **Features:** Responsive, Light/dark toggle (saved), Print stylesheet (1–2 page CV), Terminal-style hero, Experience timeline, Project cards with tech tags

[Live preview & customise](https://zumatools.com/website-templates/developer-portfolio/) · [Download ZIP](https://zumatools.com/templates-zip/developer-portfolio.zip) · [Source](templates/developer-portfolio/)

### Iris — Personal blog

[![Iris — Personal blog](templates/personal-blog/thumb.webp)](https://zumatools.com/website-templates/personal-blog/)

Clean, readable personal blog template with featured post, tag filtering, newsletter signup, article page with table of contents, code blocks, pull quotes and dark mode.

**Pages:** index.html, post.html, about.html · **Features:** Responsive, Dark mode toggle (saved), Featured post, Tag filtering, Newsletter form (demo), Table of contents with scroll-spy

[Live preview & customise](https://zumatools.com/website-templates/personal-blog/) · [Download ZIP](https://zumatools.com/templates-zip/personal-blog.zip) · [Source](templates/personal-blog/)

### Linkly — link in bio page (3 styles)

[![Linkly — link in bio page (3 styles)](templates/link-in-bio/thumb.webp)](https://zumatools.com/website-templates/link-in-bio/)

A tiny, fast link-in-bio page for creators in three styles — soft, glass and bold — with links, socials, a featured video and a newsletter form.

**Pages:** index.html, variant-glass.html, variant-bold.html · **Features:** Mobile-first, 3 style variants, Featured link badge, Social icons, Featured video card, Newsletter form

[Live preview & customise](https://zumatools.com/website-templates/link-in-bio/) · [Download ZIP](https://zumatools.com/templates-zip/link-in-bio.zip) · [Source](templates/link-in-bio/)

### Evermore — Wedding website

[![Evermore — Wedding website](templates/wedding/thumb.webp)](https://zumatools.com/website-templates/wedding/)

Romantic wedding website template with live countdown, love-story timeline, schedule, venue and travel, RSVP with meal choices, registry and FAQ.

**Pages:** index.html · **Features:** Responsive, Mobile menu, Live countdown, Story timeline, Event schedule, Venue & travel with hotels

[Live preview & customise](https://zumatools.com/website-templates/wedding/) · [Download ZIP](https://zumatools.com/templates-zip/wedding.zip) · [Source](templates/wedding/)

### SHIFT/26 — tech conference & event website

[![SHIFT/26 — tech conference & event website](templates/event-conference/thumb.webp)](https://zumatools.com/website-templates/event-conference/)

A bold, dark website for tech conferences and meetups with a live countdown, speaker grid, multi-track schedule tabs, ticket tiers, sponsors, venue map and FAQ.

**Pages:** index.html · **Features:** Responsive, Dark design, Mobile menu, Live countdown, Speaker grid with illustrated avatars, Multi-track schedule with day tabs

[Live preview & customise](https://zumatools.com/website-templates/event-conference/) · [Download ZIP](https://zumatools.com/templates-zip/event-conference.zip) · [Source](templates/event-conference/)

### Tandem — responsive HTML email templates (5-pack)

[![Tandem — responsive HTML email templates (5-pack)](templates/email-templates/thumb.webp)](https://zumatools.com/website-templates/email-templates/)

Five responsive HTML email templates — newsletter, welcome, receipt, password reset and event invite — table-based, 600px, dark-mode ready, with Outlook buttons.

**Pages:** index.html, newsletter.html, welcome.html, receipt.html, password-reset.html, event-invite.html · **Features:** Table-based layout, Inline styles + <style> block, 600px max width, fluid on mobile, Stacking columns on small screens, Bulletproof buttons (VML for Outlook), Dark-mode media query

[Live preview & customise](https://zumatools.com/website-templates/email-templates/) · [Download ZIP](https://zumatools.com/templates-zip/email-templates.zip) · [Source](templates/email-templates/)

### Aube — coming soon page

[![Aube — coming soon page](templates/coming-soon/thumb.webp)](https://zumatools.com/website-templates/coming-soon/)

An elegant coming soon page with a live launch countdown, waitlist email signup, social links and a softly animated background, in dark and light variants.

**Pages:** index.html, dawn.html · **Features:** Responsive, Live countdown (date set in main.js), Email waitlist form, Two colour variants (dusk/dawn), Animated gradient background, Animated botanical line art

[Live preview & customise](https://zumatools.com/website-templates/coming-soon/) · [Download ZIP](https://zumatools.com/templates-zip/coming-soon.zip) · [Source](templates/coming-soon/)

### Detour — 404, 500 & maintenance page pack

[![Detour — 404, 500 & maintenance page pack](templates/error-pages/thumb.webp)](https://zumatools.com/website-templates/error-pages/)

Six ready-made error pages: minimal, illustrated, playful (with a mini game) and dark 404s, plus a 500 server error page and a maintenance screen.

**Pages:** index.html, 404-minimal.html, 404-illustrated.html, 404-playful.html, 404-dark.html, 500.html, maintenance.html · **Features:** Responsive, 6 error pages + preview gallery, Original SVG illustrations, Catch-the-zero mini game, Glitch text and terminal log, Site search form

[Live preview & customise](https://zumatools.com/website-templates/error-pages/) · [Download ZIP](https://zumatools.com/templates-zip/error-pages.zip) · [Source](templates/error-pages/)

## Licence

MIT — see [LICENSE](LICENSE). Keep the licence notice in copies of the code; attribution on the live site is appreciated but not required. Fonts are loaded from Google Fonts under the SIL Open Font License.

Made by [ZumaTools](https://zumatools.com/) — free online tools for images, PDFs, text and more, by Novpix LLC.

反馈内容错误