---
id: 587d78af367417b2b2512b04
title: Build a Product Landing Page
isRequired: true
challengeType: 3
forumTopicId: 301144
localeTitle: 制作一个产品登录页
---
## Description
目标:使用 CodePen.io 搭建一个与这个功能上相似的 app:https://codepen.io/freeCodeCamp/full/RKRbwL。
在满足以下需求并通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目。由于目前你只学到了 CSS 课程,所以我们建议你只使用 CSS 来完成这个项目,同时巩固一下你之前所学的内容。你也可以使用 Bootstrap 或者 SASS。我们不推荐你在这个项目中使用其他技术(比如 jQurey、React、Angular 或 Vue),否则,如果在编码中出现问题,你需要自行解决。在后续的其他项目中,你将有机会使用各种技术栈(比如 React)。如果你在使用上述推荐的技术栈编码的过程中发现问题,请提交给我们来处理。祝你编码愉快!
需求 1:我的产品主页应该有id="header"
的header
元素。
需求 2:在header
元素内应该有个id="header-img"
的图像,这里通常用来放置一个公司的 logo。
需求 3:在#header
元素内,我需要能看见对应带有id="nav-bar"
的nav
元素。
需求 4:我可以在nav
元素中看见至少三个能点击的元素,每个都有类名nav-link
需求 5:当我在nav
元素内点击.nav-link
按钮,会跳转到产品主页的相应部分。
需求 6:我可以看到一个id="video"
的嵌入式视频。
需求 7:我的产品主页有一个id="form"
的form
元素。
需求 8:我可以在对应id="email"
的input
区域内填写我的邮箱。
需求 9:在#email
输入框内应有描述该区域用途的占位符文字。
需求 10:#email
输入框应该用 HTML5 验证来确认输入的内容是否为邮箱。
需求 11:在表单中,有一个对应id="submit"
的input
提交按钮。
需求 12:当我点击#submit
元素,邮箱会被提交到一个静态页面 (使用这个模拟 URL: https://www.freecodecamp.com/email-submit)。
需求 13:导航栏应保持在视窗的顶部。
需求 14:我的产品主页应至少有一个媒体查询。
需求 15:至少使用一次 flexbox 布局。
你可以通过 fork 这个项目 CodePen 来构建你的项目,也可以使用此 CDN 链接在任何你喜欢的环境中运行测试:https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js
。
完成之后,将你的 URL 提交到相应的项目,并测试通过。
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```