-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (42 loc) · 2.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<head>
</head>
<body>
<!-- User Story #1: My product landing page should have a header element with a corresponding id="header". -->
<header id="header">
<!-- User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here. -->
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png">
<!-- User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar". -->
<nav id="nav-bar">
<!-- User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link. -->
<ul class="nav-list">
<!-- User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page. -->
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#howitworks">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main id="main">
<h2 id="features">Features</h2>
<h2 id="howitworks">How It Works</h2>
<!-- User Story #6: I can watch an embedded product video with id="video". -->
<iframe id="video" height="360px" width="640px" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" allowfullscreen></iframe>
<h2 id="pricing">Pricing</h2>
<!-- User Story #7: My landing page has a form element with a corresponding id="form". -->
<form id="form" action="https://www.freecodecamp.com/email-submit">
<!-- User Story #8: Within the form, there is an input field with id="email" where I can enter an email address. -->
<!-- User Story #9: The #email input field should have placeholder text to let the user know what the field is for. -->
<!-- User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address. -->
<input id="email" name="email" type="email" placeholder="Email">
<!-- User Story #11: Within the form, there is a submit input with a corresponding id="submit". -->
<!-- User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully. -->
<input id="submit" type="submit">
</form>
</main>
</body>