AIvent - AI 活动、会议和聚会 HTML 模板 preview 1

AIvent - AI 活动、会议和聚会 HTML 模板

bookmark

AIvent 是一款专为 AI 主题活动、会议和聚会设计的静态 HTML 网站模板，基于 Bootstrap 5 框架，包含首页（6 种变体）、票务、新闻、联系页等完整页面，支持深色/浅色主题切换。

HTML

项目简介

AIvent 是一款专为 AI 主题活动、会议和聚会设计的静态 HTML 网站模板，基于 Bootstrap 5 框架，包含首页（6 种变体）、票务、新闻、联系页等完整页面，支持深色/浅色主题切换。

技术栈

  • Bootstrap 5（CSS 框架）
  • jQuery（交互逻辑）
  • Swiper（轮播组件）
  • Marquee（跑马灯动画）
  • Manrope（Google Fonts）
  • FontAwesome / Elegant Icons（图标库）

项目结构

text
aiventhtml-10/AIvent/AIvent HTML/
├── index.html              # 首页（默认）
├── index-slider.html       # 首页-滑块版
├── index-static-background.html
├── index-slider-text.html
├── index-countdown.html
├── index-select.html
├── news.html / news-single.html
├── tickets.html
├── contact.php
├── css/
│   ├── bootstrap.min.css
│   ├── style.css           # 主样式（CSS 变量定义）
│   ├── vendors.css
│   └── swiper.css / swiper-custom-1.css
├── js/
│   ├── designesia.js       # 核心交互
│   ├── countdown-custom.js # 倒计时逻辑
│   ├── custom-marquee.js   # 跑马灯
│   ├── custom-swiper-1.js  # Swiper 配置
│   └── validation-contact.js
└── images/ / fonts/ / video/

核心文件说明

  • index.html — 主入口页面，含导航、Hero、倒计时等完整结构
  • css/style.css — 主样式文件，定义了配色、字体、间距等 CSS 变量
  • js/designesia.js — 导航、滚动、菜单等核心交互
  • js/countdown-custom.js — 活动倒计时功能（默认指向 2025 年 12 月 10 日）
  • js/custom-swiper-1.js — Swiper 轮播插件的初始化配置
  • index-countdown.html — 专门的倒计时落地页变体

快速开始

直接在浏览器中打开 aiventhtml-10/AIvent/AIvent HTML/index.html；或使用任意本地服务器（如 Live Server）运行。模板无需构建步骤，修改 css/style.css 中的 CSS 变量即可换肤。

使用建议

模板预置了 6 种首页变体，建议根据活动类型选择最匹配的版本并替换 images/ 下的 logo、背景图和视频素材；倒计时日期需在 js/countdown-custom.js 中手动调整为实际活动时间。

help_outline

常见问题