Product Landing Page - Issue with Code that was Not There When I Finished the Project

Tell us what’s happening:
I finished this project and when I glanced back at it while collecting my certification and I’m getting this instead:
window.__frameId = ‘fcc-main-frame’; window.onerror = function(msg) { const string = msg.toLowerCase(); if (string.includes(‘script error’)) { msg = ‘Build error, open your browser console to learn more.’; } console.log(msg); return true; }; document.addEventListener(‘click’, function(e) { let element = e.target; while(element && element.nodeName !== ‘A’) { element = element.parentElement; } if (element && element.nodeName === ‘A’ && new URL(element.href).hash === ‘’) { e.preventDefault(); window.parent.window.alert( i18nContent.t(‘misc.iframe-alert’, { externalLink: element.href }) ) } if (element) { const href = element.getAttribute(‘href’); if (!href || href[0] !== ‘#’ && !href.match(/^https?:///)) { e.preventDefault(); } } }, false); document.addEventListener(‘submit’, function(e) { const action = e.target.getAttribute(‘action’); e.preventDefault(); if (action || action.match(/https?:///)) { window.parent.window.alert( i18nContent.t(‘misc.iframe-form-submit-alert’, { externalLink: action }) ) } }, false);The Saxophone* {display: flex;} header { position: fixed; top: 0px; background-color: #ffffff } @media (hover: hover) { abbr:hover { color: limegreen; transition-duration: 1s; } } @media not all and (hover: hover) { abbr::after { content: ’ (’ attr(title) ‘)’; } }

Why would it change after it had already been completed and how can I fix it? I don’t know about you, but if I were checking on someone’s certification I would have an issue with this being an example of their ability…

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.0">
  <link href="styles.css" rel="stylesheet">
  <title>The Saxophone</title>
  <header id="header">
    <div>
    <nav id="nav-bar">
      <ul>
        <link class="nav-link" href="#types"><a href="#types">Types of Saxophones</a></link><div></div>
        <link class="nav-link" href="#shop"><a href="#shop">Check Out Our Pricing and Selection</a></link><div></div>
        <link class="nav-link" href="#newsletter-form"><a href="#newsletter-form">Sign Up for Our Newsletter!</a></link>
      </ul>
    </nav>
    <img id="header-img" src="https://cdn.shopify.com/s/files/1/0570/4518/8777/articles/84cd6a3ac29c03dd9cfc773424f6.jpg?v=1677701314" width="620">
    </header>
    <main>
    <h1>The Saxophone</h1>
  </main>
  <body>
    <section class="types" id="types">
      <h2 for id="types">Types of Saxophones<h2>
<video controls width="400" id="video" src="https://www.youtube.com/watch?v=efH1NE-fMBY" type="video/webm"></video>
    </section>
    <section id="shop" class="shop">
      <h2 for id="shop">Buy From Us</h2>
    </section>
    <section class="newsletter-form" id="newsletter-form">
      <h2 for id="newsletter-form">Sign Up for Our Newsletter</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" placeholder="Email" name="email" type="email"></input>
        <input id="submit" type="submit" action="https://www.freecodecamp.com/email-submit"></input>
      </form>
    </section>
  </body>
</html>
/* file: styles.css */
* {display: flex;}

header {
  position: fixed;
  top: 0px;
  background-color: #ffffff
}



@media (hover: hover) {
    abbr:hover {
        color: limegreen;
        transition-duration: 1s;
    }
}

@media not all and (hover: hover) {
    abbr::after {
        content: ' (' attr(title) ')';
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14695.187.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

problem for code has been given before Product Landing Page - Build a Product Landing Page

me tried your code in VScode and not same letters errors same as in answer from before in website added here
can be problem with * flex display or another thing can try and change code a little and use flex for list and than add some classes to div for better control of webpage me tried and added some extra code to your webpage and changed * flex display and was fixed
add some height to header than use margin for main or other div to give space and use background color than can know and see change on computer screen
Also try to use html document code good practices which can be using a head element and than body and than add what can want hope can help but your webpage is ok on vsCode thank you take care gn gm fren

hello and welcome to fcc forum :slight_smile:

  • your html “code” has “invalid” code structures in it, for instance it has not “head” section

if you need a refresher please refer to this docs, and im sure you will fix this in no time, happy reading :slight_smile:

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