Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

“Your Product Landing Page should use CSS Flexbox at least once.”
i’ve tried so many different combinations in the styelsheet but none worked.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <link rel="stylesheet" src="styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <header id="header">
    <img id="header-img" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.freepik.com%2Ffree-photos-vectors%2Flogo&psig=AOvVaw3Ryc3VTi4NMBtUco8yxl-p&ust=1714634262741000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCKDe2cL064UDFQAAAAAdAAAAABAE">
    </img>
    <nav id="nav-bar">
      <button class="nav-link" href="#home">home</button>
      <button class="nav-link" href="#browse">browse</button>
      <button class="nav-link" href="#about">about</button>
      </nav>
      <p>some arbitrary sentence</p>
      <video id="video" controls>
<source  src="link" type="video/mp4" mute>
</video> 
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="email@email.com etc..." type="email" name="email"></input>
<input id="submit"type="submit"></input>
  </form>
  <p id="home">this is home </p>
  <p id="browse">browsing area</p>
  <p id="about"> idk megan fox lol</p>
    </header>
    </meta>
  </html>

/* file: styles.css */
.nav-bar {
  position: fixed;
  top: 0px;
}
header {
  display: flex;
}
@media only screen and (max-width: 700px) {
  p {
    font-size: 6rem;
  }
}
p {
  display: flex;
align-items: center;
justify-content: space evenly;
flex-wrap: wrap;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to the forum @pxris

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

Try using href instead of src.

Happy coding

3

Hello @pxris!

Your code was used to create a codepen so that I can better assist you and so that you might be able to chop and change it at will.

The first thing I realised is that your HTML is missing the <head> element that is used to contain the link to your css file.

Note: the codepen platform only requires the contents of the body element, as the remainder of the standard HTML is “contained behind the scenes” - this allows one to concentrate on the crux of what one is writing.

The css file you submitted uses a nav-bar class selector that doesn’t exist in the HTML. The media query in the css might be better placed at the end to improve readability. And finally, a flex-box is set on the paragraph (p) element which means that flex-box will “apply” to every p element in the HTML document.

Check out this great article on flex box.

Does this help?

Keep up the good progress!

Happy Coding! :slightly_smiling_face:

4

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