Product Landing Page - Build a Product Landing Page

Cant put color to may navigation bar

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
  </head>
  <body>
    <header id="header">
      <div class="title">
        <img id="header-img" src="https://cdn2.iconfinder.com/data/icons/xbox-one-controllers/500/gamer_Blue-512.png">
        <h1> Just Controllers</h1>
      <nav id="nav-bar">
      <div id="navnav">
        <ul id="navlist" bgcolor="#0892D0">
          <li><a class="nav-link" href="#Features">Features</a></li>
          <li><a class="nav-link" href="#How_It_Works">How It Works</a></li>
          <li><a class="nav-link" href="#Pricing">Pricing</a></li>
        </ul>
      </div>
      </nav>
      </div>
    </header>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
         <div class="form">
         <h2>Handcrafted Masterpieces</h2>
         <input id="email" type="email" name="email" placeholder="Enter your email address...">
        <input id="submit" value="GET STARTED" type="submit">
        </div>
      </form>
      <section id="Features">
        <h2>Features</h2>
        <div id="material">
          <div class="top">
            <img src="https://t3.ftcdn.net/jpg/04/54/47/52/240_F_454475249_tUPguwRXcEsNVREQkeplrlYI5rYxlBDy.jpg">
            <h3>Premium Materials</h3>
          </div>
          <p>Our controllers use the most durable materials which are sourced locally. This will increase the longevity of your purchase.</p>
        </div>
        <div id="shipping">
          <div class="top">
            <img src="https://i.pinimg.com/originals/97/12/f1/9712f16cb5f6fd969ea56030f2afe0ca.png">
            <h3>Fast Shipping</h3>
          </div>
          <p>We make sure you recieve your controller as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
        <div id="quality">
          <div class="top">
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEX///9BaeE5ZODd4vg9ZuDo7ftph+eGn+yNpe0tXd+dse/u8fxsiuf09/7x9P29y/RJb+K6xvNigOWMoeuCmupTdeMmWd8zYODM1vbY3/iYrO62w/L5+/5XeuTT3PioufB4lOnDzvRzkOggVt5NceKuvfGaru6ktO9vd270AAADOklEQVR4nO3d7XKiMBhAYROjVsGPKogiKLZa7/8OV9vpbE0Ag+2uJD3PbyqcQaWgvnQ6AAAAAAAAAAAAAAAAAAAAAIBWyyZBzwHB+L683nY6GhRhv/VeonSz6mZN+7rHKE6kVC6QMhHhaNWosXfqC6mEQ5TMn7b2gfu+cCrvnVL5zvYFuXOw70KJYmIVuEgeval3k/Pe7b4sdXMHfpDzm3sxO85cLhSyuPVa3M6dDjzb1QcGA9cDVV5/0Ng/egO/Tz3VHfqDQj56A79N5auawrW7B4q/5Kh6J2apD4Uq7FYX5q6/z7ybVT9NAx92oRDJprJw5UehTCuP+htPCqOgqnBUcqw4n1+2m/nWoV4q//8uKYyjQbstzHdH1W9QqMI7r/L8Pwtzo5sVVj6l22JA4VcUthKFV7wpbHDEd7Mw3+yvbCef51OeFAqVXBvKaPtxXPel0CRF+v7a9LfwXBJdEn0uFGow9rxQqKn3hfPMonAqh5rlUL9mMI6X+kKvkf5xQmEss5yvtWWeS1b2fH+hWK5tCmfmH+orHZsfDMiFXhiVnNXpl8hsVtakUO5sCg//rtC4CPjjhSMKKaSQQgoppJBCCimkkEIKKaSQQgoppJBCCimkkEIKKaSQQgoppJBCCimkkEIKKaSQQgp/unBmzDAqKTSGL5UUmsuUfIP29sqaFCbPFoX7PDZM9cLwoC9ySPXChfEwh0IvtFlZo304sSjMxiZjgoHNMmUPZLOMOS7BulAubL7J3kLWv7eI137/GkHNNpnXhfJwvDzBfS1UMgk/Btb5UqiGy6+SQ/E5kM+TwpqN9qXwF/wOmEIK24XCK7+xUMSDp5Yzz7drCk8lc6IePSTpJiOwboqS/5Ow/J9mFgwfvXE/omYinf9TBbM366s6LVY3GbKz9mEfylN1YGcSub8T6ye0dvYll5kdUz9ltzMxJ9g5RuX6eA2N99Ouz//XuD2xPIlu3wTizeVCGdvc5eLk6K0RxOWswu42HrvYzbcbNTM+xKuyenFwNyo1P9oPW+0dQ+XYXViSPL1xmLiWdaeROe6pvUS4Wzeelht0XdJrfDckAAAAAAAAAAAAAAAAAAAAAMDj/QHwV7p/DRODbwAAAABJRU5ErkJggg==">       
          <h3>Quality Assurance</h3>
          </div>
          <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test every single input to make sure you get only the best</p>
        </div>
      </section>
      <section id="How_It_Works">
        <h2>How It Works</h2>
        <div class="video"><iframe id="video" src="https://www.youtube.com/embed/kWSIFh8ICaA">
        </iframe></div>
      </section>
      <section id="Pricing">
        <div class="pricing">
        <div class="controller">
          <header>Standard Controller</header>
          <p>A standard PS5 or Xbox Controller</p>
          <h3>60USD</h3>
          <input id="submit" value="SELECT" type="submit">
        </div>
        <div class="controller">
          <header>Custom Controller</header>
          <p>A PS5/Xbox controller in your favourite colour/design</p>
          <h3>80USD</h3>
          <input id="submit" value="SELECT" type="submit">
        </div>
        <div class="controller">
          <header>Custom Scuf Controller</header>
          <p>A completely customised controller in any colour/design and custom back buttons</p>
          <h3>100USD</h3> 
          <input id="submit" value="SELECT" type="submit">
          </div>
        </div>
      </section>
      <footer>
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <span>Copyright 2016, Just Controllers</span>
      </footer>
  </body>
</html>





header img {
  display:inline;
  width:150px;
  filter: opacity(1.0) drop-shadow(0 0 0 gray);
}
header h1{
  display:inline;
}
.top{
  display:flex;
  align-items:center;
  margin-left:150px;
}
*{
  Font-family: sans-serif;
  background-color:#eee;
}
img{
  filter: opacity(0.85) drop-shadow(0 0 0 gray);
  width:50px;
  display:inline;
}
h3{
  display:inline;
}
h1{
  font-family:palatino;
  background-color:#0892D0;
  color:white;
}
nav{
  position:absolute;
  top:60px;
  right:60px;
  background-color:#0892D0;
}
input{
  margin:10px;
  width:300px;
}
.form{
  display:block;
  padding-top:150px;
  margin-left:auto;
  margin-right:auto;
}
#email{
  height:30px;
  display:block;
  text-align:center;
  background-color:white;
  margin-left:auto;
  margin-right:auto;
}
#submit{
  background-color:#0892D0;
  display:block;
  width:150px;
  margin-left:auto;
  margin-right:auto;
  height:35px;
  color:white;
  font-weight:600;
  
}
h2{
  text-align:center;
}
li{
  display:inline-block;
}
.title {
  display:flex;
  align-items:center;
  margin-left:20px;
  width:100%;
  background-color:#0892D0;
}
.controller{
  border:1px solid black; 
  margin:5px;
  width:20%;
  display:inline-block;
  height:300px;
  text-align:center;
  vertical-align: middle;
}
.pricing {
  text-align: center;
  align-items:center;
}
.controller header{
  font-size:25px;
  padding-top:10px;
  background-color:rgb(210,210,210);
  padding-bottom:10px;
}
.controller p {
  width:200px;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  height:100px;
  font-size:20px;
  color: rgb(100,100,100);
  margin-bottom:25px;
}
.video {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
iframe{
  width:500px;
  height:300px;
  padding-bottom:50px;
  border:none;
}
#header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color:#0892D0;
}
#Features{
  padding-top:20px;
}
#header a {
  background-color:#0892D0;
  color:white;
}
#header li{
  background-color:#0892D0;
  padding: 0 8px;
}
#navnav{
  background-color:#0892D0;
  
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Can you be more specific? Explain your intention in detail:

In the navigation bar can you see the white spots between ‘features’ and ‘how it works’?
I need to add the same color to those spots

Delete the second property in the following css rule:

* {
    Font-family: sans-serif;
    /* background-color: #eee;*/
}

If you want to get something like this:

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