Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  1. Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

Your code so far

<!-- file: index.html -->
<DOCTYPE HTML>
  <html>
     <head>
     <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three E's</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<header id="header">
  <img id="header-img" src="">
  <nav id="nav-bar">
    <ul>
        <li>
          <a class="nav-link" href="#Electronics" href="#video">Electronics</a>
        </li>
        <li>
          <a class="nav-link" href="#Education" href="#email" >Education</a>
        </li>
        <li>
          <a class="nav-link" href="#Editorial" href="#form" >Editorial</a>
        </li>
        </ul>
  </header>
  <video id="video" src="" href="Electronics">
  <form id="form">
    <input id="email" type="email" placeholder="email" href="Education">
    <input id="submit" href="https://www.freecodecamp.com/email-submit" href="Editorial">
    </form>
    </body>
    </html>


/* file: styles.css */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: indigo;
  padding: 1em;
  color: #fff
}
img {
  position: fixed;
  width: 40px;
  height: 30px;
  left: 18rem;
}
body {
  font-family: verdana, tahoma;
  position: relative;
  width: 100%;
  top: 25rem;
}
#submit {
  background-color: limegreen;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
     }
}

.flex-container {
  display: flex;
}

h1 {
  font-family: Trebuchet MS, Segoe UI;
  text-align: center;
}

@media (max-width: 600px) {

.flex-container {
  display: flex;
}

  header {
    flex-wrap: wrap;
     }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

I do not see the elements that the a elements should link to

3 
<DOCTYPE HTML>
  <html>
     <head>
     <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three E's</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<header id="header">
  <img id="header-img" src="">
  <nav id="nav-bar">
    <ul>
        <li>
          <a class="nav-link" href="#Electronics" href="#video">Electronics</a>
        </li>
        <li>
          <a class="nav-link" href="#Education" href="#email" >Education</a>
        </li>
        <li>
          <a class="nav-link" href="#Editorial" href="#form" >Editorial</a>
        </li>
        </ul>
  </header>
  <video id="video" src="" href="Electronics">
  <form id="form">
    <input id="email" type="email" placeholder="email" href="Education">
    <input id="submit" href="https://www.freecodecamp.com/email-submit" href="Editorial">
    </form>
    <section id="apple_seed">
        <h1>Electronics</h1>
        <p>We are in the future, get the latest robotics from well renounced tech corperations.</p>
        <h1>Education</h1>
        <p>We provide detailed explainations on the tech and software sold.</p>
        <h1>Editorial</h1>
        <p>Mistakes occur often, use our software to correct and prevent mistakes.</p>
        </section>
    </body>
    </html>
4

that doesn’t answer my question

can you use your words?

5

I added the elements when you asked
its the h1 and p elements

6

and how should the code now that those are the elements to link to? aren’t they missing something?

7

I see, I figured it out thank you