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: