Omnifood

一个提供个性化营养方案的健康餐订阅网站(教学项目)

Omnifood 首页,展示健康餐订阅服务
平台:
Web 网站
技术栈:
HTML、CSS、JavaScript
开发时间:
2025

网站完整展示了 Omnifood 的健康餐订阅服务,包括三步订餐流程、推荐菜品及营养信息、多种饮食偏好支持、用户评价、餐食图片、订阅套餐和服务优势。用户可以比较不同套餐,并通过注册表单申请免费体验首餐。

整体采用温暖的橙色与米白色作为主色调,搭配高质量美食图片、清晰的卡片布局和醒目的行动按钮,营造健康、亲切且富有食欲的品牌氛围。页面适配桌面端、平板和手机,并加入吸顶导航、移动端菜单和轻量悬停动效,让浏览与转化路径更加流畅。

项目使用原生 HTML、CSS 和 JavaScript 构建,通过 CSS Grid、Flexbox、媒体查询和 Intersection Observer 实现响应式布局与交互效果。技术亮点是在不依赖前端框架的情况下完成完整的营销落地页,并兼顾语义化结构、平滑锚点导航、Netlify 表单支持与旧版 Safari 兼容处理。

Omnifood 移动端个性化饮食偏好流程
Omnifood 移动端餐食推荐与营养信息
Omnifood 订阅套餐与价格对比
Omnifood 用户评价与餐食展示