企业官网与品牌落地页，能直接交付的前端题目

前面写了不少偏工具类的组件，这次回到最经典的场景------企业官网。别小看官网，从布局、字体、间距到移动端适配，一堆细节能抠半天。下面这5个题目都是真实接单时遇到的需求，没有花哨的动效，就是实打实的结构和样式。英文提示词放在前面，拿去给客户看或者自己练都行。

1. 科技公司产品展示页（三列卡片 + 响应式）

Design a product showcase page for a tech company. The page should have: a hero section with a headline ("Innovative Solutions for Modern Business"), a subheadline, and a "Contact Sales" button. Below the hero, three product cards in a row (desktop) / stacked on mobile. Each card has an icon (FontAwesome or SVG placeholder), product name (Cloud Platform, AI Analytics, Security Suite), a short description (2 sentences), and a "Learn More" link. At the bottom, a simple footer with copyright and links to Privacy and Terms. On hover over cards, only the border color changes to brand blue (#0066cc) and the background shifts to very light gray (#f9f9f9). No scaling, no translation. The hero button should have a hover color change only. Use CSS Grid for layout. Responsive breakpoints: desktop 1200px (3 columns), tablet 768px (2 columns), mobile (1 column). All content hardcoded in HTML/CSS. No JavaScript required except for basic interactivity (hover is CSS). Provide a clean sans-serif font (system default, or Google Fonts Open Sans). No animations.

说人话：就是那种科技公司官网的标准首页。三列卡片、大标题、联系按钮。移动端适配好了才算完事。

2. 餐饮品牌菜单展示页（图库 + 分类标签）

Build a restaurant menu showcase page with category filters. Hardcode 12 menu items, each with: name, description, price, category (Appetizer, Main Course, Dessert, Drink), and an image placeholder (solid color or emoji). Display items in a responsive grid (3 columns desktop). Above the grid, show category buttons: "All", "Appetizer", "Main Course", "Dessert", "Drink". Clicking a button filters the grid to show only items from that category (no animation, just re-render). Highlight the active category button with a different background color. Also provide a simple search input that filters items by name (case-insensitive substring match). The search and category filter should work together (AND logic). No backend, all data in a JavaScript array. Use vanilla JS to re-render the grid on filter changes. The page should also include a hero section with the restaurant name, tagline, and a full-width background color or subtle pattern. Footer with hours and location. No animations, no hover effects except button color change. Responsive layout required.

适合场景：餐厅或咖啡店官网的核心模块。分类筛选加搜索，做完了可以直接套到作品集里。

3. 咨询服务公司落地页（表单 + 信任标识）

Create a lead generation landing page for a consulting firm. Sections:

• Hero: headline "Grow Your Business with Expert Guidance", subheadline, and a bright call-to-action button "Get Free Consultation".

• A simple contact form: name, email, phone, message. Validate that all fields are non-empty and email format is valid. On submit, prevent default, show a success message ("Thank you! We'll contact you within 24 hours") and clear the form. Do not send data anywhere -- just front-end demo.

• "Why Choose Us" section: three columns with icons (Experience, Tailored Solutions, Proven Results) and short text.

• Trust bar: logos of 4 fake clients (or placeholder images) displayed in a row.

• Footer with address and social media icons (FontAwesome).

The form should not use any backend; all validation happens in JavaScript. On validation error, show inline red messages under each field. No animations, no popup modals. Use CSS Flexbox/Grid. Mobile responsive: form stacks below hero on mobile. Provide a "Reset" button to clear form. The page must look professional, with ample whitespace, consistent color scheme (navy blue + white + gold accent). No external libraries except FontAwesome for icons.

核心价值：企业官网的询盘表单是刚需。前端校验、成功提示、清空表单，逻辑简单但容易漏掉边界条件。

4. 个人作品集模板（项目案例 + 技能标签）

Design a personal portfolio page for a freelance developer or designer. Sections:

• Navigation (sticky on scroll? not required -- just static header with links: Work, About, Contact).

• Hero: name, title, short bio, and a "View Work" button that scrolls to projects section (smooth scroll allowed? To avoid animation, use instant jump with anchor links -- no smooth scroll).

• Projects section: 4 project cards (2x2 grid on desktop). Each card has project title, a brief description, and a list of tech tags (e.g., React, Node, MongoDB) styled as small rounded pills. No hover effect besides link color change.

• About section: profile picture placeholder, a few sentences about experience, and a list of skills (HTML, CSS, JS, etc.) displayed as tags.

• Contact section: email address (mailto link) and links to GitHub/LinkedIn (using FontAwesome icons).

• Footer.

All content hardcoded. No form, no JavaScript required (except possibly for mobile menu toggle? No -- keep navigation simple as inline links that wrap on mobile). Responsive: on mobile, navigation links stack or wrap, project cards become 1 column. Use CSS Grid for projects. No animations. The page must be self-contained in one HTML/CSS file.

说人话：就是你自己用的那种作品集页面。不用花里胡哨的动效，结构和内容干净就行。技能标签做成小圆块，看着专业。

5. 非营利组织活动推广页（倒计时 + 捐款按钮）

Build a charity event landing page. Features:

• Hero image placeholder (solid color with overlay text) featuring event name "Walk for Water 2025" and date "October 18, 2025".

• Countdown timer showing days, hours, minutes, seconds until the event date (hardcode target date as October 18, 2025, 09:00:00). The timer updates every second using JavaScript (no animation besides text update). When timer reaches zero, display "Event Started" instead.

• About section describing the cause.

• Registration section: a simple button "Register Now" that, when clicked, shows an alert "Registration opens soon!" (no actual form to keep simple).

• Donation section: a "Donate" button that opens a fake modal (no animation, just display: block on click, with a close button). The modal contains a paragraph with a mock payment message.

• Gallery: 3 placeholder images in a row (captions optional).

• Footer with social links.

Use vanilla HTML/CSS/JS. The countdown timer must be accurate using setInterval (update every second). Ensure that the modal works (open/close) with no animation. No external libraries. Responsive layout: gallery images stack on mobile. The donation modal should be centered, semi-transparent overlay, white box. Provide a "Close" button.

为什么选这个：活动推广页的倒计时和捐款弹窗是典型需求。倒计时涉及到时区问题（用本地时间即可，假设用户和活动同时间区）。弹窗的显示隐藏逻辑要简单可靠。

这5个题目覆盖了科技公司、餐饮品牌、咨询公司、个人作品集、非营利组织五个方向。每个都是真实的官网场景，不涉及复杂交互，重点在布局、响应式、表单校验和纯数据展示。英文提示词可以直接复制给设计师或后端同事看，中文说明方便你自己理解。选一个跟你当前接单方向最匹配的开干，做完记得把图片占位符换成真实素材，看着就更有说服力了。