Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  • Your #nav-bar should always be at the top of the viewport.

  • Failed:Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <header id="header" >
      <img src="" id="header-img"/>
      <nav id="nav-bar">
        <a href="#email" class="nav-link">Features</a>
        <a href="#video" class="nav-link">How it works</a>
        <a href="#form" class="nav-link">Pricing</a>
      </nav>
    </header>
    
  </head>
  <body id="nav-var">
    <video id="video" src=""></video>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" placeholder="Enter your email address" name="email"></input>
      <input id="submit" type="submit" ></input>
    </form>

  </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/117.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Please include your CSS.

Code can be added to a reply using three back tics ` before and after a code block.
If you cant find a back tic on your keyboard use ALT + 096 to display one.

1 Like
3

I shared a link to a helpful article for each of your bullet points in order.
When solving problems, you can search the web to find helpful technical documentation, and/or prompt ChatGPT, Bard, or a trustworthy LLM (although you should be aware that an LLM may respond inaccurately).

  • You can keep your #nav-bar always at the top of the viewport by setting a certain CSS position property on it.
    There is a position property that fixes an element in place.
    You can find out about it at this W3Schools link CSS Layout - The position Property.

  • I suggest that you code with a mobile-first design approach, and use a media query to adapt your rendered code to larger screen sizes. You can learn how to use media queries at this Mozilla Developer Network link Using media queries - CSS: Cascading Style Sheets | MDN.

  • CSS Flexbox involves setting a display property to flex on a container, which then allows additional properties to be added to customize the flex effect. I often use flexbox to center my HTML elements. Just below, I wrote some HTML and CSS to show how flexbox could be used to center elements nested in a container.

HTML right below

<div class="container">
<p>
Some text in the first paragraph element.
</p>
<p>
Some text in the second paragraph element.
</p>
</div>

CSS right below

.container{
display: flex;
flex-direction: column;
align-items: center;
}

You can learn how to use CSS Flexbox at this CSS Tricks link A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks.

4

Hello @mark11!

The issue can sometimes be solved by adding fixed to the header and nav-bar in css.

However, as @Guided suggested, it is best to provide the css code for a more direct and accurate guidance to resolve the problem.

Keep up the good progress!

Happy coding! :slight_smile:

5

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