Can someone help me at Product Landing Page?


What I must edit? - My navbar must be always at the top…

please don’t ask people to debug from a screenshot, post the link to your project instead, thank you

1 Like

ok… I will try this …

<img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img" ><nav id="nav-bar" href="#ul">
    <ul>
        <a class="nav-link" href="#features" style= "color: black">Features</a>
        <a class="nav-link" href="#how-it-works" style= "color: black">How It Work</a>
        <a class="nav-link" href="#pricing" style= "color: black">Pricing</a>
    </ul>
  </nav>
  
</header>
<h2>Handcrafted, home-made masterpieces<br><form id= "form" ><input type="email" placeholder="Enter your email adress" id= "email" required><br><input type="submit" id= "submit" action="https://www.freecodecamp.com/email-submit"></input></form></h2>
<br><br>
<h3>Premium Materials</h3>
<h4><svg viewBox="0 0 384 512" width="4%" title="fire" >
  <path d="M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z" />
</svg> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</h4>
<br><br>
<h3>Fast Shipping</h3>
<h4><svg viewBox="0 0 640 512" width="5%" title="truck">
  <path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z" />
</svg>  We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</h4>
<br><br>
<h3>Quality Assurance</h3>
<h4><svg viewBox="0 0 640 512" width="5%" title="battery-full">
  <path d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z" />
</svg>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</h4>
<div>
  <iframe src= "https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" allow fullscreen id="video"></iframe>
</div>

can you please give the link to your project?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

<header id="header"> 
   <nav id="nav-bar" href="#ul">
      <ul>
        <a class="nav-link" href="#h3" style= "color: black">Features</a>
        <a class="nav-link" href="#how-it-works" style= "color: black">How It Work</a>
        <a class="nav-link" href="#pricing" style= "color: black">Pricing</a>
      </ul>
    </nav>
</header>
<h2>Handcrafted, home-made masterpieces<br><form id= "form" ><input type="email" placeholder="Enter your email adress" id= "email" required><br><input type="submit" id= "submit" action="https://www.freecodecamp.com/email-submit"></input></form></h2>
<br><br>
<h3>Premium Materials</h3>
<h4><svg viewBox="0 0 384 512" width="4%" title="fire" >
  <path d="M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z" />
</svg> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</h4>
<br><br>
<h3>Fast Shipping</h3>
<h4><svg viewBox="0 0 640 512" width="5%" title="truck">
  <path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z" />
</svg>  We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</h4>
<br><br>
<h3>Quality Assurance</h3>
<h4><svg viewBox="0 0 640 512" width="5%" title="battery-full">
  <path d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z" />
</svg>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</h4>
<div>
  <iframe src= "https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" allow fullscreen id="video"></iframe>
</div>
p {
  text-align: right;
}
nav {
  display: flex;
  flex-direction: column;
}
img {
  max-width: 28%;
}
ul {
  text-align: right;
}
h2 {
  text-align: center;
}
h3 {
  position: relative;
  left: 50px;
}
div {
  text-align: center;
}
.nav-bar {
  position: top;
}

(That’s css)

My code must have an image inside the header element and the navbar should always be at the top of the viewport.

https://codepen.io/codeposter/pen/eYgxxXZ

so, you are passing 12 of 16 tests

you will need to remove this .nav-link or have a section

your #form element does not have an action attribute

you need to have the navbar always visible, stuck at the top of the page even when you have scrolled all the way to the bottom. You could look into position for this

no media queries are present

yes, but I tried action attribute for form but it doesn’t work

It’s not there tho

<form id= "form" >

also, don’t put the form in an h2, an h2 can have as children only inline elements, like img or span

input is self closing, delete all closing input tags you have </input>

Here are the relevant challenges:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/change-an-elements-relative-position

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets

https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning

But you still need to check a documentation site like MDN or W3 Schools for another property that will affix something to a specific location.

1 Like

As said, you can review challenges again if needed.

1 Like

freeCodeCamp refused the connection now…

<form action="https://www.freecodecamp.com/email-submit" name="email-submit" id="form"></form>

A post was split to a new topic: Help with Landing Page

@stefan2007octavian I edited your code. I think you were was just missing a new line after the first backticks.

The form submission URL is not real, it’s just an mock. You can’t actually submit the form.

Look at the error message:

The #email input should have a name attribute : expected false to equal true

1 Like

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