Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  • Your #nav-bar should always be at the top of the viewport.

  • Failed:Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.
    Your #form should have an action attribute of https://www.freecodecamp.com/email-submit .
    You should have a video or iframe element with an id of video.
    Failed:Your #video should have a src attribute.
    Failed:You should have a form element with an id of form.
    I ALREADY HAVE ALL OF THIS

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Telecaster Guitar Vibe 50s</title>
 
</head>
<body>
  <header id="header">
    <div><h1>GUITAR</h1> <img id="header-img" src="/landing-page/media/img/png-clipart-guitar-hero-rock-band-bass-guitar-logo-guitar-text-logo.png" alt="The Company Logo"></div>
    <nav id="nav-bar">
      <a class="nav-link" href="#features">Features</a>
      <a class="nav-link" href="#benefits">Benefits</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
  </header>

  <section id="hero">
    <h1>Introducing Squier Classic Vibe 50s Telecaster</h1>
    <p>A product that captures the iconic sound of the 50s Telecaster at an affordable price.</p>
    <button class="More"><b>Learn More</b></button>
  </section>

  <section id="video">
    <h2>See it in Action</h2>
    <iframe id="video" width="928" height="522" src="https://www.youtube.com/embed/N7fdi_ymtlE" 
    title="Squier Classic Vibe 50s Telecaster | Guitar Review" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen></iframe>
  </section>

  <section id="features">
    <h2>Powerful Features</h2>
    <p>Classic Telecaster design with Alder or Pine body.<br>
      Comfortable maple neck with vintage "C" profile.<br>
      Authentic vintage sound with two single-coil pickups.<br>
      Versatile tone control setup with volume, tone knobs, and a three-position selector switch.<br>
      Vintage-style bridge with three compensated saddles.<br>
      Chrome-plated hardware for durability and classic aesthetics.</p>
    </section>

  <section id="benefits">
    <h2>Unlock the Benefits</h2>
    <p>Recreate the iconic sound and style of 1950s Telecasters.<br>
      Enjoy comfortable playability with the vintage neck profile and maple fingerboard.<br>
      Experience versatile tone options suitable for various music styles.<br>
      Access classic Telecaster tones for both rhythm and lead playing.<br>
      Add a touch of vintage flair to your performance with the authentic design and finish options.<br>
      Invest in a reliable and affordable instrument that captures the essence of Telecaster history.</p>
    </section>

  <section id="form">
    <h2>Stay Updated</h2>
    <p>Sign up for our newsletter to receive exclusive offers and updates.</p>
    <form action="https://www.freecodecamp.com/email-submit" method="post">
      <input type="email" id="email" name="email" placeholder="Enter your email address">
      <input type="submit" id="submit" value="Sign Up">
    </form>
  </section>

  <section id="contact">
    <h2>Get in Touch</h2>
    <!-- Adicione o formulário de contato aqui conforme necessário -->
  </section>

  <footer>
    <p>&copy; [Your Company Name] 2024</p>
  </footer>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You have missing <link> tag for style.css file.
@pantherafamily

3

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