Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
some code appear in my preview window… at the top and left corner… it disappear when i comment out the display:flex in my CSS code

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); Original Trumbones *{ display:flex; flex-direction:column; } #nav-bar { position: fixed; top: 350px; height:50px; flex-direction:row; } #header-img{ height:40px; } .flexcont{ }

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Original Trumbones</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <header id="header">
      <nav id="nav-bar">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trumbones-logo">
        
        <a id="nav-link1" class="nav-link" href="#Features">section1</a>
        <a id="nav-link2" class="nav-link" href="#How-it-works" >section2</a>
        <a id="nav-link3" class="nav-link" href="#Pricing" >section3</a>
      </nav>
    </header>


    <main>
      <div class="flexcont">
      <section id="Features"></section>
      <h1>Handcrafted</h1>
      
      <section id="How-it-works"></section>
      <h1>HOWITWORKS</h1>
      
      <section id="Pricing"></section>

      <section>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="Submit">
      </form>
      </section>


       <video id="video" width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          
          </video>
      </div>
    </main>
  </body>
</html>
/* file: styles.css */
*{
  display:flex;
  flex-direction:column;
}

#nav-bar {
  position: fixed;
  top: 350px;           
  height:50px;
  flex-direction:row;
}

#header-img{
  height:40px;
}

.flexcont{

}


Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like

It looks like this js code is injected by live server. I tried publishing this and weird js code does not show up in published code. I hope this helps

Thanks, only wanted to know if i did anything wrong.

1 Like

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