Product Landing Page - Build a Product Landing Page

i dont know how to make the nav-bar at the top of viewport and use css flexbox

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <header id="header">
    <img src="" alt="original trombone" id="header-img" />
    <nav id="nav-bar">
      <p><a class="nav-link" href="#features">Features</a></p>
      <p><a class="nav-link" href="#how-it-works">How It Works</a></p>
      <p><a class="nav-link" href="#pricing">Pricing</a></p>
  <form id="form" action="">
    <div>Handcrafted, home-made masterpieces
    <input id="email" name="email" type="email" placeholder="enter your email" required /></div>
    <input type="submit" id="submit" value="Get Started">
    <section id="features">
      <div><h1>Premium Materials</h1>
      <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      <section id="how-it-works">
      <video id="video">
        <source src="" />
      <section id="pricing">
        <div class="tenor">
          <h2>TENOR TROMBONE</h2>
          <ul>Lorem ipsum.</ul>
          <ul>Lorem ipsum.</ul>
          <input type="submit" value="SELECT" />

/* file: styles.css */

  **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:


Let’s start with flexbox.

If you’re stuck on flexbox, I’d go though the Learn CSS Flexbox by Building a Photo Gallery section of the course again. This article by Mozzilla might help.

Also I’d advise refreshing your knowledge on html list elements, the ul element isn’t supposed to be used alone. Or have text inside it that isn’t inside a li element.

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