Linking the navbar to a section

HTML-CSS
1

In the nav section, i linked each section using the href attribute. So far, it’s working because i can navigate to any section using the nav links. But i can’t seem to pass the test. Pls, i need my code to be reviewed.

Your code so far
Here is the code for review:
`

`

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 lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Product Landing Page</title>
 <!-- links -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&family=Lato&display=swap" rel="stylesheet"> 
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
  <div class="page-wrapper">
    <header id="header">
      <div class="logo">
        <img src="https://adc3ef35f321fe6e725a-fb8aac3b3bf42afe824f73b606f0aa4c.ssl.cf1.rackcdn.com/tenantlogos/28276.png" alt="DKNY logo" id="header-img"/>
      </div>
      <nav id="nav-bar">
        <ul>
          <li class="nav-link">
            <a href="#Features">Features</a>
          </li>
          <li class="nav-link">
            <a href="#Category">Category</a>
          </li>
          <li class="nav-link">
            <a href="#Deals">Deals</a>
          </li>
          <li class="nav-link">
            <a href="#Pricing">Pricing</a>
          </li>
          <li class="nav-link">
            <a href="#Shipping">Shipping </a>
          </li>
        </ul>
      </nav>
    </header>

    <div class="container"></div>
    
    <!-- Main Sections -->
    <main class="container my">
      <!-- 1st section -->
      <section id="Features">
        <header>Features</header>
        <div class="flex">
          <div class="icons">
            <i class="fa fa-3x fa-fire"></i>
          </div>
          <div class="desc">
            <h4>Quality materials</h4>
            <p>Our products are a produce of quality (fine) raw materials sourced both locally and internationally.Perfect measures are taken during production to ensure proper handling of raw materials to avoid damage.Our products speaks for itself.</p>
          </div>
        </div>
        <div class="flex">
          <div class="icons">
            <i class="fa fa-3x fa-battery-full" ></i>
          </div>
          <div class="desc">
            <h4>Durablity</h4>
            <p >One of the core objectives of this establishment is to make products which are durable. This is one of the measures we consider when sourcing the raw materials ranging from alloys, woods, leather etc. We go for the best that would last longer and better.</p>
          </div>
        </div>
        <div class="flex">
          <div class="icons">
            <i class="fa fa-3x fa-truck"></i>
          </div>
          <div class="desc">
            <h4>Shipment Accessibility</h4>
            <p>Our products can be accessed anywhere in the globe.We have an effective delivery program which delivers your package anywhere and anytime or on your doorstep if need be.  </p>
          </div>
        </div>
        <!-- Video frame -->
      <div class="video-div">
        <iframe
        id="video"
        width="400"
        height="315"
        src="https://www.youtube.com/embed/3irVy7zN47w" frameborder="0" allowfullscreen>
        </iframe>
      </div>
      </section>
      <!-- 2nd section -->
      <section id ="Category">
        <header>Category</header>
        <div class="cat-container">
          <div class="cat-desc">
            <p>For easily access, our products are divided into 2 sections:</p>
            <ul>
              <li>Outdoors</li>
              <li>Indoors</li>
            </ul>
            <p>Each sections are packed with related equipments depending on which sport/game you are interested in.Search each category with sports name.</p>
          </div>
          <div class="sports">
            <div id="outdoors">
              <div class="out-form">
                <form action="">
                  <h4>Outdoors</h4>
                    <input type="text" name="outdoors" placeholder="Search by sports">
                </form>
              </div>
              <div class="img-container">
              <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.5xYO-UWoOwL1e9liEUkPWQHaHa?w=215&h=215&c=7&r=0&o=5&pid=1.7" alt="Volleyball image" class="image">
              </div>
              <div class="img-1">
                <img src="http://www.pngall.com/wp-content/uploads/2016/03/Baseball-PNG-Clipart.png" alt="baseball image" class="image">
              </div>
              <div class="img-1">
                <img src="https://www.freepnglogos.com/uploads/basketball-png/basketball-basket-ball-png-image-adidas-nike-cosco-25.png" alt="basketball image" class="image">
              </div>
              <div class="img-1">
                <img src="https://pluspng.com/img-png/rugby-ball-png-rugby-ball-500.png" alt="rugby ball" class="image">
              </div>
              <div class="img-1">
                <img src="https://www.pngarts.com/files/2/Golf-Ball-Transparent-Images.png" alt="golf ball" class="image">
              </div>
              <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.wzjgtIw-MP8OLEsgzyRD6QHaHK?pid=ImgDet&rs=1" alt="Football image" class="image">
              </div>
            </div>
            </div>
            <div id="indoors">
              <div class="in-form">
                <form action="">
                  <h4>Indoors</h4>
                  <input type="text" name="indoors" placeholder="Search by sports">
                </form>
              </div>
              <div class="img-container">
                <div class="img-1">
                  <img src="https://th.bing.com/th/id/OIP.1fDK8pleKGZpzna78pu4dwHaHa?w=187&h=187&c=7&r=0&o=5&pid=1.7" alt="baseball image" class="image">
                </div>
                <div class="img-1">
                  <img src="https://th.bing.com/th/id/OIP.mqPnjhQEDC9fkuteC2rubQHaHa?w=204&h=204&c=7&r=0&o=5&pid=1.7" alt="basketball image" class="image">
                </div>
                <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.Mq47YX92FYgLhaUPV_JOVwHaFn?w=238&h=180&c=7&r=0&o=5&pid=1.7" alt="rugby ball" class="image">
              </div>
              <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.YJKd4eN1NENjJcC0eMX4owHaHa?pid=ImgDet&rs=1" alt="Indoor tennis trainer" class="image">
              </div>
              <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.I8vkLsuWNrqR86oS4-RPLwHaHa?w=208&h=208&c=7&r=0&o=5&pid=1.7" alt="Bike tool" class="image">
              </div>
              <div class="img-1">
                <img src="https://th.bing.com/th/id/OIP.y87Xw8NhKV7zQ-OxV5WsdAHaFD?w=302&h=206&c=7&r=0&o=5&pid=1.7" alt="Indoor hockey stick" class="image">
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 3rd section -->
      <section id="Deals">
        <header>Deals</header>
        <div class="deals">
          <p>We offer options for sports equipments of different sizes, weight and purpose. Our options ranges from;</p>
            <ul>
              <li>Outdoor(Park) equipments</li>
              <li>Indoor(Gym, personal)equipments</li>
            </ul>
            <p>Installations services can be rendered if required. Our personnel(expert) will be assigned to serve this purpose depending on the location.</p>
          </div>
      </section>
      <!-- 4th section -->
      <section id="Pricing">
        <header>Pricing</header>
        <div class="detail">
          <p>The prices of the sports utilities varies. The price of accessories differ from that of equipments. An overview of how things are priced is shown below;</p>
        </div>
        <div class="prices">
          <div class="price-container">
            <h4>Sports Accessories</h4>
            <div class="imgs-1">
              <img src="https://www.elitesportsocks.com/wp-content/uploads/2020/02/sock-elements-black-768x657.jpg" alt="Socks" class="image">
            </div>
            <div class="price">
              <p>$25 - $100</p>
            </div>
          </div>
          <div class="price-container">
            <h4>Small scale package</h4>
            <div class="imgs-1">
                <img src="https://th.bing.com/th/id/OIP.tIalpMcK5rnNWzHxOe200AHaHa?w=195&h=195&c=7&r=0&o=5&pid=1.7" alt="" class="image">
            </div>
            <div class="price">
                <p>$250 - $ 500</p>
              </div>
          </div>
          <div class="price-container">
            <h4>Medium scale package</h4>
            <div class="imgs-1">
              <img src="https://th.bing.com/th/id/OIP.1fDK8pleKGZpzna78pu4dwHaHa?w=187&h=187&c=7&r=0&o=5&pid=1.7" alt="" class="image">
            </div>
            <div class="price">
              <p>$1000 - $5000</p>
            </div>
          </div>
          <div class="price-container">
            <h4>Large scale package</h4>
            <div class="imgs-1">
              <img src="https://th.bing.com/th/id/OIP.Dk0e28dRFfRvAQT7ASQ-NwHaIh?w=163&h=186&c=7&r=0&o=5&pid=1.7" alt="" class="image">
            </div>
            <div class="price">
              <p>$10000 - $20000</p>
            </div>
          </div>
        </div>
      </section> 
      <!-- last section -->
      <section id="Shipping">
        <header>Shipping</header>
        <div class="ship">
          <p>Each product(equipment inclusive) are shipped depending on the size, weight, fragility and location. Bulky equipments are done via water (or air plus extra charges).</p>
        </div>
      </section>
    </main>
    <footer>
      <div>
        <p>For further enquiries, follow us on our social media platforms.</p>
        <div class="social-icons">
          <ul>
            <li>
              <a href="#">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li>  
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li>  
              <a href="#">
                <i class="fab fa-pinterest"></i>
              </a>
            </li>
            <li>  
              <a href="#">
                <i class="fab fa-youtube"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <p>For news on new products and shipment details, fill in your details below.</p>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
            <input type="email" name="email" id="email" placeholder="Email"  required>
          <input type="submit" name="button" value="Submit" id="submit">
        </form>
      </div>
    </footer>
  </div>
</body>
</html>

 *,
::before,
::after{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html{
 font-size: 62.5%;
}
body{
 font-family: "Lato", serif;
 line-height: 1.6;
 color: #000;
 background-color: #f8f0f0;
 font-size: 1.25rem;
}
img{
 display: block;
}
img:not(#header-img){
 width: 100%;
}
li{
 list-style: none;
}
a{
 text-decoration: none;
 font-size: 1.5rem;
}
.page-wrapper{
 position: relative;
}
.image{
 width: 100%;
 height: 100%;
 object-fit: contain;
}
.container {
 max-width: 1170px;
 width: 100%;
 margin: 0 auto;
}
.container header{
 text-transform: uppercase;
 font-size: 2.25rem;
 text-decoration: underline;
 font-weight: 700;
 margin-top: 5rem;
 padding-bottom: .5rem;
 text-align: center;
}
.flex{
 display: flex;
}
/* header styling */
#header{
 position: fixed;
 top: 0;
 min-height: 20px;
 max-height: 50px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: rgb(204, 204, 204);
 margin: 0;
 padding: 0;
}
.logo{
 width: 40vw;
 height: 50px;
}
#header-img{
 width: 100%;
 height: 100%;
 max-width: 300px;
 margin: 0 3.5rem;
 object-fit: cover;
}

#nav-bar{
 font-weight: bold;
 margin: 1.5rem auto;
 padding: 2rem;
}
#nav-bar > ul{
 width: 60vw;
 height: 50px;
 display: flex;
 align-items: center;
}
.nav-link{
 margin: 1.5rem;
}
.nav-link a{
 font-size: 1.75rem;
 color: #3b323b;
}
.nav-link a:hover{
 color: #3b3bff;
}
.sub-menu1{
 display: none;
}
.menu:hover > .sub-menu1{
 display: block;
 position: absolute;
 background-color: #ccc;
 margin-top: -0.5rem;
 margin-right: -1.5rem;
}
.menu:hover >.sub-menu1 ul{
 display: block;
 margin: 1rem;
}
.menu:hover >.sub-menu1 ul li{
 width: 100px;
 padding: 1rem;
 border-bottom: 1px dotted #fff;
 background: transparent;
}
.menu:hover > .sub-menu1 li:last-child{
 border-bottom: 0;
}
@media(max-width: 550px) {
 #header {
  flex-wrap: wrap;
  width: 100%;
  /* min-height: 6rem; */
  max-height: 6rem;
 }
 .logo{
  width: 100%;
  margin: 1rem auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
 }
#header-img{
 width: 100%;
 height: 100%;
 max-width: 400px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-left:  2rem;
}
#nav-bar{
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 margin: 0;
 padding-bottom: 0;
 background-color: #ccc;
}
#nav-bar > ul{
 width: 100%;
 height: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.nav-link{
 width: 100%;
 margin: 0;
 padding: 1rem;
 border-bottom: 1px solid #000;
}
.nav-link:last-child{
 border-bottom: 0;
}
.menu:hover > .sub-menu1{
 display: none;
}
}

@media (max-width: 800px) {
 #header-img{
  margin: 0;
 }
 #nav-bar ul{
  margin-right: 1rem;
 }
 .nav-link{
  margin: .5rem;
 }
 .nav-link a{
  font-size: 1.45rem;
 }
}
@media (max-width: 650px) {
 .nav-link a{
  font-size: 1.5rem;
 }
}

/* Section Styling */
/* 1st section */
.my{
  margin-top: 20rem;
}
#features{
 margin-top: 2rem;
 margin-bottom: 2rem;
 padding-bottom: 2rem;
}
.desc h4{
 font-size: 1.75rem;
 margin-top: 1rem;
 padding-top: 1rem;
 padding-bottom: .5rem;
}
.desc p{
 font-size: 1.5rem;
 padding-bottom: .75rem;
}
#features .icons {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 height: 90px;
 width: 20vw;
 color: #f00;
}
#features .desc{
 display: flex;
 flex-direction: column;
 justify-content: center;
 width: 80vw;
 height: 100px;
 padding: .5rem 0;
}
.video-div{
 width: 70vw;
 margin: 2rem auto;
 display: flex;
 justify-content: center;
 background-color: #fff;
 padding: 2.5rem 1.5rem;
}
.video-div > iframe{
 max-width: 600px;
 width: 100%;
}
@media (max-width: 550px) {
 .my {
  margin-top: 30rem;
  padding-top: 5rem;
 }
 #features{
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding-bottom: 0;
 }
 #features .icons{
  display: none;
 }
 #features .desc{
  margin: 0 auto;
  width: 100%;
  height: 200px;
  text-align: center;
 }
 .desc h4{
  font-size: 2rem;
  margin-top: 1rem;
 }
 .desc p{
  font-size: 1.75rem;
 }
 .video-div{
  width: 100%;
 }
}
@media (max-width: 800px) {
 #features .desc{
  margin-top: 3rem;
  text-align: center;
  margin: 1rem auto;
 }
 #features .icons{
  display: none;
 }
}


/* 2nd section */
.cat-container{
 margin: 2rem auto;
}
.cat-desc{
 width: 50vw;
 text-align: center;
 margin: 0 auto;
 padding: 0;
}
.cat-desc > p, .deals > p, .detail > p, .ship > p{
 font-size: 1.75rem;
}
.cat-desc > ul, .deals > ul{
 padding: 1rem;
}
.cat-desc > ul > li, .deals > ul > li{
 font-size: 1.5rem;
 font-weight: 600;
 font-family: Tahoma;
}
#outdoors h4, #indoors h4{
 font-size: 1.5rem;
 font-family: Tahoma;
}
input[type="text"]{
 width: 100%;
 max-width: 150px;
 padding: .5rem;
 margin-left: .5rem;
 font-family: "Inconsolata";
 border: 1px solid #000;
 border-radius: 3px;
}
.out-form, .in-form{
 margin-top: 1.5rem;
 padding-top: 1rem;
}
.sports{
 width: 85vw;
 margin-left: 5rem;
}
.img-container{
 display: flex;
 padding: 0 2rem;
 align-items: flex-start;
 flex-wrap: wrap;
 margin: 0 1rem 1rem 1rem;
}
.img-1{
 width: 325px;
 height: 250px;
 border: 1px solid #ccc;
 background-color: #fff;
 margin: 1rem;
 padding: 1rem;
 border-radius: 3px;
 transition: all 1s ease-in-out;
}
/* .img-1:hover,
.imgs-1:hover{
 transform: scaleY(2rem);
} */
@media (max-width: 550px) {
 .cat-container{
  margin-top: 0;
  margin: 0 auto;
 }
 .cat-desc{
  width: 100%;
 }
 .cat-desc > p{
  font-size: 1.85rem;
 }
 .sports{
  width: 100%;
  text-align: center;
  margin: 0 auto;
 }
 .img-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
 .img-1{
  width: 100%;
 }
}
/* 3rd/last section */
.deals, .ship{
 width: 75vw;
 margin: 1rem auto;
 padding-bottom: 1rem;
 text-align: center;
}
/* 4th section styling */
.detail{
 width: 60vw;
 margin: 0 auto;
 text-align: center;
}
.prices{
 width: 70vw;
 display: flex;
 margin: 2rem auto;
}
.price-container{
 margin-top: 1rem;
 padding: 2rem;
}
.imgs-1{
 width: 225px;
 height: 200px;
 border: 1px solid #ccc;
 background-color: #fff;
 padding: 1rem;
}
.prices h4,.price {
 font-size: 1.75rem;
 margin-bottom: .5rem;
 padding-bottom: .5rem;
 text-align: center;
}
.price{
 color: #a71333;
 padding-top: 1rem;
}
@media (max-width: 550px) {
 .deals,
 .ship {
  width: 100%;
 }

 .detail {
  width: 100%;
 }

 .detail p {
  font-size: 1.85rem;
 }

 .prices {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
 }
 .price-container{
  width: 100%;
 }
 .imgs-1{
  width: 100%;
 }
  .price{
   font-size: 1.85rem;
  }
}

@media (max-width: 800px) {
 .prices{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 }
 .imgs-1{
 width: 100%;
 }
}


/* footer styling */
footer{
 background-color: #3b323b;
 margin: 10rem auto 0 auto;
 padding: 2rem;
 color: #fff;
 display: flex;
 justify-content: space-between;
 font-size: 1.75rem;
}
.social-icons ul{
 display: flex;
 justify-content: center;
}
.social-icons li{
 margin: 2.5rem;
}
.social-icons li a{
 color: #40caca;
}
.fab{
 font-size: 2.5rem;
}
#form{
 text-align: center;
}
#form input[type="email"]{
 display: block;
 width: 100%;
 max-width: 300px;
 margin: 1rem auto;
 padding: .65rem 1rem;
 border: 1px solid #000;
 border-radius: 5px;
}
#form input[type="submit"]{
 padding: 1rem 2.5rem;
 font-size: 1.65rem;
 font-weight: 600;
 /* background-color: transparent; */
 border: 2px solid #3b323b;
 border-radius: 10px;
 cursor: pointer;
}
#form input[type="submit"]:hover{
 background-color: #40caca;
 color: #fff;
}
@media (max-width: 550px) {
 footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
 }
 .fab{
  font-size: 3rem;
 }
  #form input[type="email"]{
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   max-width: 400px;
  }
 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Challenge: Build a Product Landing Page

Link to the challenge:

2

In order to review your HTML you’ll need to copy into this thread. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

3

Thank you. I’d like to ask if i’m to copy the whole html code or just the link to the page for review below the back ticks.

4

It’s probably best to paste both all of your HTML and all of your CSS so we can see everything that you are doing.

5

Ok. i’ll do just that.

6

I keep getting this message that new users can only add 2 links. I’m adding both the html code and the css code in between the back ticks like you said.

7

Hmm, if you have links in your HTML then maybe that’s what it is referring to? I’m not sure what the best solution is here? Do you use codepen? If so, you could put your HTML and CSS in there and give us the codepen link.

8

I’ve fixed it. I just edited it now.

9

“Each .nav-link element should have an href attribute.”

I think the issue here is that you have the nav-link class on the li element instead of the a element.

10

Okay, let me fix it right away.

11

Thank you so much. It worked !!!

12

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