项目简介link

Monas 是一套静态 HTML 个人作品集模板，提供 4 种首页风格（设计师 / 开发 / 律师 / 摄影师），内置博客、作品集、服务、联系页面，支持响应式布局和表单邮件发送，适合快速搭建个人品牌或作品展示网站。

技术栈link

• HTML5 / CSS3
• Bootstrap 5
• SCSS 样式预处理器
• JavaScript（含 Swiper、Odometer、Magnific Popup 等插件）
• PHP（仅用于联系表单邮件发送）

项目结构link

monas-html/
  index.html          # 首页 - 设计师
  index2.html         # 首页 - 开发者
  index3.html         # 首页 - 律师
  index4.html         # 首页 - 摄影师
  about-us.html       # 关于页面
  blog.html           # 博客列表
  blog-details.html   # 博客详情
  contact-us.html     # 联系我们
  portfolio.html      # 作品集
  portfolio-details.html
  service.html        # 服务列表
  service-details.html
  mail.php            # 表单邮件处理
  assets/             # CSS、JS、图片等静态资源

核心文件说明link

• index.html ~ index4.html — 四套不同职业定位的首页模板
• contact-us.html — 表单页面，配合 mail.php 实现邮件发送
• mail.php — 邮件发送脚本，需修改收件邮箱为实际地址
• assets/scss/main.scss — SCSS 源码，可编译为 assets/css/main.css
• assets/css/ — 编译后的 CSS，包含 Bootstrap 及相关插件样式

快速开始link

1. 通过 FTP 将 monas-html/ 目录上传至服务器（通常为 public_html）
2. 修改 mail.php 中的 $recipient 为实际收件邮箱
3. 在浏览器直接打开 index.html 即可本地预览

使用建议link

• 若需定制样式，编辑 assets/scss/ 后执行 sass --watch assets/scss/main.scss:assets/css/main.css 实时编译
• 确保服务器环境支持 PHP（仅联系表单页面需要）