Metaverse - NFT 产品组合和登陆页面 preview 1

Metaverse - NFT 产品组合和登陆页面

bookmark

Metaverse NFT Portfolio and Landing Page 是一款面向 NFT 项目的静态 HTML 模板，提供了 Mint 页面、Collection 展示、博客、联系表单等多种页面模板。模板内置 5 种首页轮播样式，支持钱包连接弹窗和响应式布局，适合加密货币、NFT 交易平台或元宇宙相关网站使用。

HTML

项目简介

Metaverse NFT Portfolio and Landing Page 是一款面向 NFT 项目的静态 HTML 模板，提供了 Mint 页面、Collection 展示、博客、联系表单等多种页面模板。模板内置 5 种首页轮播样式，支持钱包连接弹窗和响应式布局，适合加密货币、NFT 交易平台或元宇宙相关网站使用。

技术栈

  • HTML5 / CSS3 / JavaScript (jQuery)
  • Google Fonts (Heebo / Nunito)
  • CSS 变量自定义主题色
  • 响应式布局

项目结构

text
metaversehtml-10/
├── mainpack/
│   ├── doc/              # 模板文档目录
│   │   ├── index.html    # 说明文档入口
│   │   ├── css/          # 文档样式
│   │   ├── js/           # 文档脚本
│   │   └── img/          # 文档配图
│   └── html/             # 实际使用页面
│       ├── index.html    # 首页 (Sliced Slider)
│       ├── index-2.html  # 首页 (Full Slider)
│       ├── index-3.html  # 首页 (Cards Carousel)
│       ├── index-4.html  # 首页 (3D Carousel)
│       ├── index-5.html  # 首页 (ZigZag Carousel)
│       ├── nft-single.html  # Mint 页面
│       ├── collection.html  # NFT 合集页
│       ├── blog.html         # 博客列表
│       ├── blog-single.html  # 博客详情
│       ├── contact.html      # 联系页
│       ├── css/              # 主样式文件
│       ├── js/               # 交互脚本
│       ├── img/              # 页面图片
│       └── svg/              # SVG 图标

核心文件说明

  • html/index.html — 默认首页入口，Sliced Slider 样式
  • html/nft-single.html — NFT Mint 铸造页面
  • html/collection.html — NFT 合集展示页
  • html/css/style.css — 主样式表，定义全局配色、布局和组件
  • html/js/jquery.js — jQuery 库（核心依赖）
  • html/svg/ — 内置 SVG 图标集，用于导航、社交链接等

快速开始

  1. 将 mainpack/html 目录内容部署到服务器或本地 Web 根目录
  2. 通过本地服务器（如 XAMPP）或直接在浏览器打开 index.html
  3. 页面依赖本地服务器运行（SVG 图标颜色在直接打开文件时可能异常）

使用建议

  • 修改 --mc1 / --mc2 CSS 变量可快速更换主题色方案
  • 所有首页样式共享同一套 CSS，通过切换不同 HTML 文件即可切换轮播效果
  • 钱包弹窗和右侧导航为纯前端实现，连接链上钱包需自行接入 Web3.js / ethers.js
help_outline

常见问题