Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Hi, Although I have submitted this project, I have realised that when clicking on my nav links, the fixed header/navbar actually hides the part the link is meant to navigate to.
I also have trouble trying to get my products to go in columns, and tried many ways to get it, but gave up. I guess while I’m asking for help, maybe I can get help for that too. :slight_smile:
Thanks in advance.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <link href="styles.css" rel="stylesheet" types="text/css" />
   <header id="header">Kumihimo Products
     <img id="header-img" src="" alt="company logo" ><img>
    <div><nav id="nav-bar">

 <a class="nav-link" href="#form">Form</a>
 <a class="nav-link" href="#kumihimo">Kumihimo</a>
  <a class="nav-link" href="#video">Video</a>
  <a class="nav-link" href="#product-info">Products</a>
     <div id="page-break"></div>
     <form id="form" action="">
      <label> Enter your email:</label>
      <input id="email" type="email" name="email" placeholder=""></input>
   <input id="submit" type="submit"></input>
     <p id="kumihimo" >Kumihimo is the Japanese art of braiding cord, using a variety of yarns, silks and other materials, with different sized and shaped frames. </p>

     <!--video -->
              <iframe id="video" width="560" height="315" 
class="center"     src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!--product info-->
<section id="product-info">
<header class="center" id="product-header">Products Used for Kumihimo</header>
<div class="product" id="p1">
 <div><img id="product-img" src="" alt="frame-img"></div>
   <li>Different sizes</li>
   <li>Different shapes</li>
 <button class="btn">Explore more</button>
<div class="product">
 <div><img id="product-img" src=""> </div>
   <li>Different colours</li>
   <li>Different materials</li>
 <button class="btn">Explore more</button>

<p>For more information about Kumihimo, click <a href="" >here</a> </p>

/* file: styles.css */
header {
   font-size: 40px;
 font-weight: bold;
 width: 100%;
 background-color: rgb(169, 127, 169);
 position: fixed;

#header-img {
 height: 60px;
 margin-top: 10px;
 background-color:  rgb(151, 139, 151);
 text-align: center;
 width: 100%;
nav a {
 color: purple;
 text-decoration: none;
nav a:hover{
 text-decoration: underline;
.nav-link {
 font-size: 24;
#page-break {

#kumihimo {
 font-family: arial;
 font-weight: bold;
 font-size: 18;

#product-header {
  margin-top: 20px;
 background-color:rgb(169, 127, 169);
#product-info >.product {
 display: flex;

 align-items: center;
 text-align: center;
 width: calc(100%/2);
 margin: 10px;


#product-img {
 height: 200px;
 width: 200px;

.center {
 display: block;
 margin-left: auto;
 margin-right: auto; 

button {
 border: 2px solid black;
margin-left: 5px;
margin-bottom: 5px;

@media { background-color: white;

   **Your browser information:**

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

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