Product Landing Page - Build a Product Landing Page

to my knowledge everything looks right up to the last 3 points were its asking me for css, however, when i submit for testing it saying the parts are worong ex: no href. i look at the errors and cant find anything wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intitial-scale=1.0">
    <title>Adopt A Cat</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://th.bing.com/th/id/OIP.rjDrGqCr-AVKwFcGt-v4bwAAAA?pid=ImgDet&rs=1" alt="adopt a cat logo">
      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#Abyssinian">Abyssinian</a></li>
          <li><a class="nav-link" href="#Aegean">Aegean</a></li>
          <li><a class="nav-link" href="#American_Bobtail">American Bobtail</a></li>
        </ul>
      </nav>
    </header>
    <div id="adopt">
      <iframe id="video" width="640" height="360" src="https://www.youtube.com/embed/DYZbRmwBpaE" title="GOING TO THE ANIMAL SHELTER TO ADOPT A CAT" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Enter your email address">
        <input id="submit" type="submit" value="Adopt Today">
      </form>
    </div>
    <section id="Abyssinian">
      <h2>Abyssinian</h2>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Gustav_chocolate.jpg/440px-Gustav_chocolate.jpg" alt="Abyssinian cat">
      <p>The Abyssinian is a breed of domestic short-haired cat with a distinctive "ticked" tabby coat, in which individual hairs are banded with different colors.</p>
      <p>The source of the name is because the first "Abyssinians" exhibited in shows in England were reported to have been imported to England from Ethiopia, whose name was formerly Abyssinia.</p>
    </section>
    <section id="Aegean">
      <h2>Aegean cat</h2>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Aegean_Island_Cat.jpg/440px-Aegean_Island_Cat.jpg" alt="Aegean cat">
      <p>Aegean cats are a naturally occurring landrace of domestic cat originating from the Cycladic Islands of Greece and western Turkey.</p>
      <p>Development of the Aegean cat as a formal breed began in the early 1990s by breeders in the fledgling Greek cat fancy, but the variety has yet to be recognized by any major fancier and breeder organization..</p>
    </section>
    <section id="American_Bobtail">
      <h2>American Bobtail</h2>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/American_bobtail_2.jpg/440px-American_bobtail_2.jpg" alt="American Bobtail cat">
      <p>The American Bobtail is an uncommon breed of domestic cat which was developed in the late 1960s.</p>
      <p>It is most notable for its stubby "bobbed" tail about one-third to one-half the length of a normal cat's tail.</p>
    </section>
  </body>
</html>
/* 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/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

1 Like

Hello Kevin,

Your code looks great, but there is no css submitted along with your html.

Nevertheless, the tests reveal three errors as indicated in the screenshot below:

Untitled

The first error is related to your css rules, and there are many good articles available online to help with anchoring the navbar.

The second error is about using media queries to make your design responsive. Again, lots of information available online for media queries.

The final error is about using CSS flexbox. The links in this reply all contain more than sufficient information to help you along your way.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

I am still getting errors for the project and i cant figure out why flexbox isnt working with my elements here is the updated code and the errors i get:

errors:

You should have at least 3 .nav-link elements within the #nav-bar.
You should have an input element with an id of email.
Your #submit should be a descendant of the #form.
Your #nav-bar should always be at the top of the viewport.

css

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  width: 600px;
  height: auto;
}

#header-img {
  width: 100px;
}

header {
  display: flex;
  flex-direction: row;
  background-color: #f03;
  position: fixed;
  width: 100%;
}

#nav-bar {
  background-color: #000;
  width: calc(100% - 100px);
}

#nab-bar ul {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  list-style-type: none;
}

li {
  background-color: blue;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
}

@media only screen and (max-width: 420px) {
  header {
    flex-direction: column;
  }
}

I just pasted your HTML and CSS code into the project and everything passes for me. Are you still getting errors?

yes, I even signed out of my account and still receive the same errors not sure why it does not want to pass me.

Hello @pacaud
Try the following:

  • Reset step
  • Refresh page (F5)
  • Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests.
  • If you are having problems, recommendation is to disable extensions that modify the content or layout of pages, while taking the course.
    • Try a different browser.

I hope this suggestion helps you move on in your coding journey.

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