Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section id="hero">
    <h1>Welcome to Our Product</h1>
    <p>A brief description of what the product does</p>
    <a href="#features" class="btn">Learn More</a>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    <div class="feature">
      <i class="fas fa-check-circle"></i>
      <h3>Feature 1</h3>
      <p>Description of feature 1</p>
    </div>
    <div class="feature">
      <i class="fas fa-check-circle"></i>
      <h3>Feature 2</h3>
      <p>Description of feature 2</p>
    </div>
    <div class="feature">
      <i class="fas fa-check-circle"></i>
      <h3>Feature 3</h3>
      <p>Description of feature 3</p>
    </div>
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    <div class="price-card">
      <h3>Basic</h3>
      <p>$9.99/month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a href="#" class="btn">Sign Up</a>
    </div>
    <div class="price-card">
      <h3>Pro</h3>
      <p>$19.99/month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a href="#" class="btn">Sign Up</a>
    </div>
    <div class="price-card">
      <h3>Premium</h3>
      <p>$29.99/month</p>
      <ul>
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <a href="#" class="btn">Sign Up</a>
    </div>
  </section>

  <section id="contact">
    <h2>Contact Us</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <label for="message">Message:</label>
      <textarea id="message" name="message" required></textarea>
      <button type="submit" class="btn">Submit</button>
    </form>
  </section>

  <footer>
    <p>&copy; 2022 Product Landing Page. All rights reserved.</p>
  </footer>
</body>
</html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hello and welcome to the community :smiley:!
Your code was too large to be imported from the challenge. Either follow the instructions above or paste your code between the ```` marks that appear when clicking the </> buttton:

Screenshot 2023-08-22 172147
Screenshot 2023-08-22 1721471134×431 36.7 KB

Hope this helps!

1 Like
3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.