Product Landing Page - Build a Product Landing Page

Hey, I’m trying to finish this project so I’m near to get my certificate. But two errors display and I can’t find my mistake. The errors are:

  1. Each .nav-link element should have an href attribute.
  2. Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

Here are my navs:

<header id="header">
    <nav id="nav-bar">
        <ul id="navbar_ul">
            <li class="nav-link"><a href="#about">Sobre Adhara</a></li>
            <li class="nav-link"><a href="#product">Prendas</a></li>
            <li class="nav-link"><a href="#prices">Promos</a></li>
        </ul>
        </nav>
        <div id="navbar_r_container"></div>
        <ul id="navbar_responsive_ul">

            <li class="nav-link-r"><a href="#about">Sobre Adhara</a></li>
            <li class="nav-link-r"><a href="#product">Prendas</a></li>
            <li class="nav-link-r"><a href="#prices">Promos</a></li>
        </ul>
    <div class="logo">
        <img id="header-img" src="https://i.ibb.co/bHnSjxy/logo.png" alt="Adhara indumentaria femenina logo">
    </div>
</header>

Thanks in advance!!

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/111.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Post the entire html and css code here.

It’s kinda long… But here it is:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>Adhara | Indumentaria</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
        <body>
<header id="header">
    <nav id="nav-bar">
        <ul id="navbar_ul">
            <li class="nav-link"><a href="#about">Sobre Adhara</a></li>
            <li class="nav-link"><a href="#product">Prendas</a></li>
            <li class="nav-link"><a href="#prices">Promos</a></li>
        </ul>
        </nav>
        <div id="navbar_r_container"></div>
        <ul id="navbar_responsive_ul">

            <li class="nav-link-r"><a href="#about">Sobre Adhara</a></li>
            <li class="nav-link-r"><a href="#product">Prendas</a></li>
            <li class="nav-link-r"><a href="#prices">Promos</a></li>
        </ul>
    <div class="logo">
        <img id="header-img" src="https://i.ibb.co/bHnSjxy/logo.png" alt="Adhara indumentaria femenina logo">
    </div>
</header>
<div class="form_container">
    <section id="form_area">
        <h2 class="form_title">Prendas únicas, hechas con amor</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" name="email" type="email" placeholder="Introducí tu mail" required>
        <br>
        <input type="submit" id="submit" value="Quiero recibir información">
        </form>
    </section>
</div>
<div class="container">
    <section id="about">
        <h1 class="section_title">Sobre Adhara</h1>
        <p class="about_p1">Mi nombre es Emilia, y soy la fundadora de Adhara. Soy una modista autodidacta: aprendí mirando videos de YouTube y haciendo cursos online, a prueba y error. Comencé creando mis propias prendas: las personas de mi entorno me preguntaban dónde compraba mi ropa, por lo que decidí empezar este pequeño emprendimiento de indumentaria femenina.</p>
        <h3 class="fact">La mejor calidad</h3>
        <p class="about_p2">Me caracterizo por hacer cada pieza con mucho amor: presto atención a todos los detalles y utilizo los mejores materiales. Confeccionar prendas es mi pasión, por lo que hago todo con esfuerzo y cariño.</p>
        <h3 class="fact">Cuando comprás Adhara, comprás la prenda de tus sueños.</h3>
        <p class="about_p3">A la hora de comprar una de mis prendas, adquirís calidad y durabilidad. Te aseguro que durarán cientos de puestas y mucho tiempo en tu armario sin un solo detalle.</p>
    <div id="video_container">
        <iframe title="video" id="video" src="https://www.instagram.com/reel/Cpxw4Jqtj4G/embed/"></iframe>
    </div>
    </section>
</div>
<div class="separator"></div>
        <section id="product">
            <h1 class="section_title">Prendas</h1>
            <div class="image_container">
            <div class="image">
            <h2 class="product_title">Vestido Marsella</h2>
            <img class="clothe_img" src="https://i.ibb.co/bPggTYR/4.png" alt="Vestido Marsella">
            </div>
            <div class="image"><h2 class="product_title">Jumper Lisa</h2>
            <img class="clothe_img" src="https://i.ibb.co/BNLmQ5R/1.png" alt="Jumper Lisa"></div>
            <div class="image"><h2 class="product_title">Palazzo Atenea</h2>
            <img class="clothe_img" src="https://i.ibb.co/86kF96T/3.png" alt="Palazzo Atenea"></div>
            <div class="image"><h2 class="product_title">Top Atenea</h2>
            <img class="clothe_img" src="https://i.ibb.co/B2tQvcF/2.png"  alt="Top Atenea"></div>
            </div>
            <div class="separator"></div>
        </section>
            <section id="prices">
                <div id="prices_container">
                    <div class="item">
                <h4 class="price_title">Vestido Marsella</h4>
                <p class="description">Vestido color blanco confeccionado con tela de gasa doble premium. La gasa ya viene confeccionada con doble paño. Talle único.</p>
                <p class="price">$6600</p>
                </div>
                <div class="item">
                <h4 class="price_title">Jumper Lisa</h4>
                <p class="description">Jumper de tela gabardina 8 onzas de excelente calidad. Talle único. Las tiras se atan a medida, podes regular el largo que quieras. </p>
                <p class="price">$8000</p>
                </div>
                <div class="item">
                <h4 class="price_title">Palazzo Atenea</h4>
                <p class="description">El diseño de este palazzo está hecho para que te calce suelto y cómodo. La tela es panamina %100 algodón premium . Color natural. </p>
                <p class="price">$6400</p>
                    </div>
                <div class="item">
                    <h4 class="price_title">Top Atenea</h4>
                <p class="description">Este top es de tela de jean y tiene unas perlas bordadas. Las tiras se atan a medida.</p>
                <p class="price">$4000</p></div>
            </div>
            </section>
        </body>
</html>

header {
    position: static;
    top: 0;
    min-height: 80px;
    padding: 0px 20px;
    justify-content: space-around;
    align-items: center;
}

.logo > img {
    width: 100%;
    height: 100%;
    max-width: 600px;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

#form_area {
    background-color: #fffaf5;
    width: 500px;
    display: block;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid black;
}
.form_title {
    font-family: 'Baskervville';
    text-align: center;

}

input {
    display: block;
    margin: 0 auto;
  }

input[type="submit"] {
    color: #000;
    border: 1px solid black;
    background-color: #b1e0b1;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.4rem;
    padding: 10px;
}

input[type="submit"]:hover {
    color: #000;
    border: 1px solid black;
    background-color: #8bad8b;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.4rem;
    padding: 10px;
    
}

input[type="email"] {
    color: #000;
    border: 1px solid black;
    background-color: #b1e0b1;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1rem;
    padding: 10px;
}

#nav-bar {
    display: flex;
    justify-content: center;
    background-color: #fffaf5;
}
#navbar_responsive_ul {
    display: none;
}

.nav-link {
    display: inline-block;
    padding: 2rem;
    
}


nav > ul > li > a {
    color: #000;
    text-decoration: none;
    font-family: 'Lato', 'sans-serif';
    font-size: 1.3rem;
    text-align: center;
    text-transform: uppercase;
    font-style: bold;


}


.section_title {
    font-family: 'Lato', 'sans-serif';
    font-size: 2rem;
    text-align: center;

}

p {
    font-family: 'Lato', 'sans-serif';
    font-size: 1.4rem;
    text-align: justify;
    padding: 0 10rem;
    margin-left: 3rem;
    margin-right: 3rem;

}

.fact {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #556B2F;
    text-align: center;
    font-size: 1.6rem;
}

.product_title {
    font-family: 'Baskervville', 'sans-serif';
    text-align: center;
}

.image_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .image {
    width: 40%;
    margin: 10px;
    text-align: center;
  }
  
  .image img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 550px;
    height: 600px;
    margin: auto;
    border: 2px solid #556B2F;
  }

  .image img:hover {
    opacity: 70%;
  }

#prices_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
  }
  
  .item {
    width: calc(50% - 10px);
    margin-bottom: 20px;
    padding: 20px;
    border: 2px solid #556B2F;
    box-sizing: border-box;
  }

  .item p {
    font-size: 1.2rem;
    font-family: 'Lato', 'Lucida Sans';
    text-align: center;

  }

  .item h4 {
    font-family: 'Lato', 'Lucida Sans';
    font-size: 1.6rem;
    text-transform: uppercase;
    text-align: center;
}

    .price {
        font-family: 'Lato', 'Lucida Sans';
        font-size: 1.6rem;
        color: #556B2F;
        text-shadow: 1px 1px 1px #000;
    }

    .separator {
        margin-bottom: 5rem;
        height: 0;
        
        overflow: hidden;
      }

  @media (max-width: 768px) {
    .item {
      width: 100%;
    }
  }
  
  @media only screen and (max-width:580px) {
    #nav-bar {
        display: none;
    }
    
    #navbar_r_container {
        text-align: center;
    }

    #navbar_responsive_ul {
        display: block;
        list-style-type: none;
        background-color: #b1e0b1;
        padding: 50px;
        border: 2px dotted black;

    }

    .nav-link-r a {
        text-decoration: none;
        color: #000;
        font-family: 'Lato', 'sans-serif';
        font-size: 1.4rem;
        text-align: center;
        display: block;
        padding-bottom: 2rem;
        
    }
}

@media only screen and (max-width:960px) {
    p {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0 3rem;
    font-size: 0.8rem;
    font-family: 'Lato', 'sans-serif';
    }

    .image img {
        width: 250px;
        height: 300px;
    }
}

#video_container {
    display: flex;
    justify-content: center;
    align-items: center;
  
  }

#video {
    width: 300px;
    height: 500px;
}

If read that hint carefully again, you will conclude that the instruction suggests the same element, which is the ‘a’ element that has href attribute. Cut the class from ‘li’ elements and add them to the corresponding anchor elements in you navbar_li.

2 Likes

Thank you SO MUCH. Thanks to your answer, I could finally finish that project. Only one left to gain my certificate!!! :laughing: Thanks for always helping.

2 Likes

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