Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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

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

  • Waiting:Your Product Landing Page should use CSS Flexbox at least once.
    Hi, please help me with those test cases as i am unable to find out.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hello!

Please attach your code here.
You can do that by:
On a new line add 3 backticks.
Then on the next line paste your code
Then on the line after your code add 3 more backtics. Here is one backtick (`)

1 Like
3 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/9650a62e47.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
  <title>Product Landing Page - freecodecamp</title>
</head>

<body>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo" class="logo">
      <ul>
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#how-it-work">How It Works</a>
        <a class="nav-link" href="#pricing">Pricing</a>
      </ul>
    </nav>
  </header>

  <div id="container">
    <section class="message-box">
      <h1>Handcrafted, home-made masterpieces</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" name="email" placeholder="example@mail.com">
      <input id="submit" type="submit" value="Get Started" class="btn"></input>
      </form>
    </section>
4

We need you CSS too.

5 
/* css reset */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

#header {
  display: flex;
}

#nav-bar {
  position: fixed;
  top: 0px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
/*
@media only screen and (max-width:600px){
#nav-bar ul {
  display: flex;
}

#nav-bar ul li {
  padding: 1rem 2rem;
}

#nav-bar ul li a {
  color: #333;
  font-size: 1.2rem;
}     } */

/* UTILITY CLASSES */
#container {
  max-width: 960px;
  margin: 2rem auto 0;
  overflow: hidden;
}

.logo {
  width: 300px;
  cursor: pointer;
}

@media (min-width: 1200px) {
  body {
      background-color: rgb(255, 255, 255);
  }
}

.btn {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  color: #333;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f1c40f;
}

.nav-link {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


.message-box {
  margin: 1.5rem;
  padding: 0.8rem;
  text-align: center;
}

.message-box h1 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.message-box input {
  display: block;
  margin: auto;
  width: 30%;
  padding: 0.4rem;
  margin-bottom: 1rem;
}

#features {
  padding: 1rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
}

#features .feature {
  display: flex;
  justify-self: center;
  align-items: center;
}

#features .feature i {
  color: #ff8c00;
}

#features .feature div {
  padding: 1rem;
  margin-left: 3rem;
}

#features .feature div h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#how-it-work {
  padding: 3rem;
  margin: auto;
  text-align: center;
}

#how-it-work #video {
  width: 600px;
  height: 340px;
}

#pricing {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 0.2rem;
}

.price-box {
  border: solid #333 3px;
  border-radius: 2px;
  text-align: center;
}

.price-box:first-child {
  margin-right: 1.2rem;
}

.price-box:last-child {
  margin-left: 1.2rem;
}

.price-box h3 {
  background-color: #ddd;
  font-size: 1.05rem;
  padding: 1rem;
}

.price-box h2 {
  padding: 1rem;
}

.price-box p {
  padding: 0 4rem 1rem;
}

.price-box .btn {
  display: inline-block;
  margin: 1rem;
}

/* FOOTER */
#main-footer {
  background-color: #ccc;
  padding: 1rem 4rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

#main-footer div a {
  color: #333;
  padding: 0.5rem 1rem;
}

#fcs {
  text-decoration: underline;
  color: #333;
}

/* TABLET AND SMARTPHONE */
@media only screen and (max-width: 800px) {
  #navbar {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0.3rem;
  }

  #navbar ul li {
    padding: 1rem 1rem;
  }

  #features .feature {
    flex-direction: column;
  }

  #features .feature div {
    padding: 1rem;
    margin: 0.5rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  #how-it-work {
    padding: 1rem;
  }

  #how-it-work #video {
    width: 80%;
    height: 30%;
  }

  #pricing {
    flex-direction: column;
  }

  #pricing .price-box {
    margin: 1rem;
  }

  .price-box:first-child {
    margin-right: 0;
  }

  .price-box:last-child {
    margin-left: 0;
  }

  #main-footer {
    padding: 2.5rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #main-footer .my-name {
    margin: 1rem 0;
  }
}
6

Check the way you linked your CSS to HTML. The CSS file name is not correct, use the file name specified in the lesson.

1 Like
7

Hi @bmsrisravya ,

As the text says, your navigation bar (#nav-bar) is already fixed at the top of the viewport (position: fixed; top: 0;). This fulfils the condition that navigation bar should always be on top of the viewport.

#navbar is a typo in media query selector in your CSS. So you will need to change it to #nav-bar.

8

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