I've created a Product Landing Page by using HTML, CSS.
-
In my product landing page there's a
header
element with a correspondingid="header"
. -
Within the header element there's a image with corresponding id="header-img".
-
Within the
#header
element there's anav
element with a correspondingid="nav-bar"
.
Here’s how that would look:
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo"/>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
-
Whenever I'll click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
-
There's a
form
element with a correspondingid="form"
. -
Within the form, there is an input field with id="email" where I can enter an email address.
-
The
#email
input field has a placeholder text that let's user to know what the field is for. -
Within the form, there is a submit
input
with a correspondingid="submit"
. -
Whenever I'll click the
#submit
element, the email is submitted to a static page.
Here’s how that would look:
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required
/>
<input id="submit" type="submit" value="Get Started" class="btn"/>
</form>