Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

warn:
1.Each .nav-link element should have an href attribute.
2.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).

I’ve added a href element for each .nav-link and linked each .nav-link element to the corresponding element on the landing page.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>test</title>
</head>
<body>
  <header id="header">

    <div id="logo">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
    alt="logo">
    </div>

    <nav id="nav-bar">
      <div class="nav-link"><a href="#login">Log in</a></div>
      <div class="nav-link"><a href="#register">register</a></div>
      <div class="nav-link"><a href="#visitor">visitor</a></div>
    </nav>

  </header>

  <div id="main">

    <div id="login">
      <h2>This is a login information</h2>
      <form id="forma">
      <ul>
        <li>
          <label>account</label>
          <input required>
        </li>
        <li>
          <label>password</label>
          <input required>
        </li>
      </ul>
      <input class="button" type="submit" value="login">
      </form>
    </div>

    <div id="register">
      <h2>This is a registered information</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <ul class="registerul">
        <li>
          <label>name</label>
          <input required>
        </li>
        
        <li>
          <label>account</label>
          <input required>
        </li>
        <li>
          <label>password</label>
          <input required>
        </li>
        <li>
          <label for="email">email</label>
          <input type="email" id="email" required placeholder="xx@xx.xx" name="email">
        </li>
      </ul>
      <input id="submit" type="submit" value="register" action="https://www.freecodecamp.com/email-submit">
      </form>
      <h3>Video display:</h3>
      <iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"></iframe>
    </div>

    <div id="visitor">
      <h2>This is a tourist information</h2>
    </div>

  </div>
</body>
</html>


/* file: styles.css */
*{
  margin:0;
  padding:0;
}

html{
  min-width:270px;
}

#header{
  display:flex;
  position:fixed;
  width:100%;
  background:green; 
  top:0;
}

#logo{
  width:100%;
}

.nav-link{
  background:white;
  
}

#nav-bar{
  justify-content:space-evenly;
  display:flex;
  align-items:center;
  background:red;
  width:75%;
  min-width:270px;
}

#header-img{
  width:300px;
  margin-left:10px;
}

#main{
  background-color:orange;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  height:300%;
}

h2::before{
  content:"";
  height:58.88px;
  display:block;
}

#login{
  background:pink;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:space-evenly;
}

#register{
  background:blue;
  width:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  height:100%;
  justify-content:space-evenly;
}

#visiter{
  background:rgb(200,200,200);
  width:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
  height:100%;
  justify-content:space-evenly;
}


#video{
  width:560px;
  height:315px;
  border:0;
}

ul{
  list-style:none;
}

label{
  display:block
}

#submit{
  width:80px;
  margin:auto;
  display:block;
}



@media(max-width:768px){
  #header{
  display:flex;
  flex-direction:column;
}
  #nav-bar{
    width:100%;
  }
  #header-img{
    margin:auto;
    display:block;
  }  


}

@media(max-width:560px){
  #video{
  width:460px;
}
  #header-img{
  width:270px;
}
}

@media(max-width:460px){
  #video{
  width:270px;
}
}


/* User Editable Region */



/* User Editable Region */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi,
The first error says every .nav-link should have an href attribute. Now your nav-link is inside a div and your href is inside an a tag. You should add your nav-link classes inside your a elements I think. See if it works.

2 Likes
3

I seem to have gotten used to using div tags and have now passed it, thanks for the help!

2 Likes