Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Hi there!

I’m trying to finish the task but when I run the test it always shows two warnings:

  • There’s no media queries (it is one)
    -There’s no flexbox (there’s too)

Can someone tell me what am I doing wrong?

Thanks!

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.

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

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

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
 font-family: 'Crimson Text', serif;
}

body {
    margin: 0 auto;
    font-family: 'Work Sans', sans-serif;
    margin-top: 80px;
}

/*INICIO DEL HEADER*/

header * {
    display: inline; 
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    margin: 0 auto;
    border-bottom: 1px solid grey;
}

a {
    text-decoration: none;
}

nav a {
    margin: 0 0 0 30px;
    font-weight: bold;
    color: grey;
}



/*INICIO DE INFORMACIÓN Y REGISTRO*/

main {
    width: 80%;
    margin: 0 auto;
}

#register-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 150px auto;
    
}

div#left {
    width: 50%;
    text-align: center;
    text-align: left;
}

div#left h1 {
    max-width: 300px;
}

div#left p#establecimiento {
    font-style: italic;
    margin-top: 20px;
}

form {
    width: 50%;
    right: 0;
    text-align: right;
    
}

form h2 {
    margin-bottom: 30px;
}

#submit {
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #bd0f0f;
    border: 0;
}

input, select {
    margin-top: 8px;
}


/*INICIO DE CARACTERÍSTICAS*/

#caract-titulo h2 {
    text-align: center;
    margin-bottom: 50px;
}

#caract-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
}

.caract h3 {
    text-align: center;
    margin-bottom: 20px;
}

/*INICIO DE IFRAME*/

section#iframe-contaniner {
    margin-top: 100px;
}

h3#action {
    text-align: center;
    color: #bd0f0f;
    font-size: 24px;
}

iframe {
    margin: 50px auto;
}

/*INICIO DE PRECIOS*/

#precio {
    margin-top: 100px;
}

#precio h2 {
    text-align: center;
    margin-bottom: 50px;
}

#precio-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract-precio {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
    border: 1px solid grey;
    padding: 20px;
    border-radius: 6px;
}

.caract-precio h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #bd0f0f;
}

.caract-precio p {
    text-align: center;
}

.caract-precio p.price {
    font-size: 28px;
    margin: 30px 0;;
    color: #bd0f0f;
    font-weight: bold;
}

.caract-precio span {
    font-size: 16px;
    font-style: italic;
    color: #bd0f0f;
}

/*FOOTER*/

footer {
    height: 100px;
    width: 100%;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

I don’t see a media query in your CSS.

3

I’m sorry

I copied the code incomplete.

Here’s all of it:

/*Here's the media query*/
@media screen and (max-width: 640px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }
}

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

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
 font-family: 'Crimson Text', serif;
}

body {
    margin: 0 auto;
    font-family: 'Work Sans', sans-serif;
    margin-top: 80px;
}

/*INICIO DEL HEADER*/

header * {
    display: inline; 
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    margin: 0 auto;
    border-bottom: 1px solid grey;
}

a {
    text-decoration: none;
}

nav a {
    margin: 0 0 0 30px;
    font-weight: bold;
    color: grey;
}



/*INICIO DE INFORMACIÓN Y REGISTRO*/

main {
    width: 80%;
    margin: 0 auto;
}

/*Here's one of the flexbox*/
#register-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 150px auto;
    
}

div#left {
    width: 50%;
    text-align: center;
    text-align: left;
}

div#left h1 {
    max-width: 300px;
}

div#left p#establecimiento {
    font-style: italic;
    margin-top: 20px;
}

form {
    width: 50%;
    right: 0;
    text-align: right;
    
}

form h2 {
    margin-bottom: 30px;
}

#submit {
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #bd0f0f;
    border: 0;
}

input, select {
    margin-top: 8px;
}


/*INICIO DE CARACTERÍSTICAS*/

#caract-titulo h2 {
    text-align: center;
    margin-bottom: 50px;
}

#caract-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
}

.caract h3 {
    text-align: center;
    margin-bottom: 20px;
}

/*INICIO DE IFRAME*/

section#iframe-contaniner {
    margin-top: 100px;
}

h3#action {
    text-align: center;
    color: #bd0f0f;
    font-size: 24px;
}

iframe {
    margin: 50px auto;
}

/*INICIO DE PRECIOS*/

#precio {
    margin-top: 100px;
}

#precio h2 {
    text-align: center;
    margin-bottom: 50px;
}

#precio-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract-precio {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
    border: 1px solid grey;
    padding: 20px;
    border-radius: 6px;
}

.caract-precio h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #bd0f0f;
}

.caract-precio p {
    text-align: center;
}

.caract-precio p.price {
    font-size: 28px;
    margin: 30px 0;;
    color: #bd0f0f;
    font-weight: bold;
}

.caract-precio span {
    font-size: 16px;
    font-style: italic;
    color: #bd0f0f;
}

/*FOOTER*/

footer {
    height: 100px;
    width: 100%;
}
4

Ah, ok. First thing to say is that your media queries should always be at the bottom of your CSS file.

5

Welcome to our community!

Post the entire HTML and CSS code.

6

Sorry guys, I’m new! :smiling_face:

Here’s the html code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Guitarras artesanales Rossi</title>
  <meta name="description" content="freeCodeCamp landing page project">

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Work+Sans:400,700" rel="stylesheet">
</head>

<body>
  <!-- your content here... -->
  
  <header id="header">
    <div class="header-container">
      <img alt="" src="https://static.wixstatic.com/media/6e22cb_a6a4ffb7192f4d9da24d7531c721b44b~mv2.png/v1/fill/w_159,h_76,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Logo%20Homa-01.png" width="159" height="76"/ id="header-img">
    
    
      <nav id="nav-bar">
        <ul>
          <li><a href="#caract-titulo" class="nav-link">Características</a></li>
          <li><a href="#iframe-contaniner" class="nav-link">Rossi Star1</a></li>
          <li><a href="#precio-container" class="nav-link">Precios</a></li>
          
        </nav>
    </div>  
  </header>


<main>   

<div id="register-container"> 
  
  <div id="left">
    <h1>Guitarras artesanales Rossi</h1>
    <p id="establecimiento">
      Desde 1923
    </p>
  </div>
  
    <form action="https://www.freecodecamp.com/email-submit" id="form" method="post">
        <div class="title">
          <h2>¿Quieres una guitarra </br>personalizada Rossi?</h2>
        </div>
        
          <label class="label" for="name">Dinos tu nombre</label></br><input id="name" type="text" name="name" placeholder="Full name" required>
          </br></br>
          <label class="label" for="email">Dinos tu email</label></br><input id="email" type="email" name="email" placeholder="Email" required pattern="[^ @]*@[^ @]*">
          </br></br>
          
         <label for="tipo" class="label">¿Qué tipo de quitarra quieres?</label></br> <select name="tipo" id="tipo">
            <option value="basica" selected>Guitarra básica</option>
            <option value="flamenco">Guitarra flamenca</option>
            <option value="clasica">Guitarra clásica</option>
          </select>
          </br></br>
          <input id="submit" type="submit" href="/" value="Enviar"/>
        
      </form>
  </div>

  <section id="caract-titulo">
    
      <h2>Características de las guitarras artesanales Rossi</h2>
    </section>
  
  <section id="caract-container">
      <div class="caract">
        <h3>Maderas</h3>
        <p>Pellentesque a congue de ipsum sem una, nec imperdiet leo vulputate eu.</p>
      </div>
      <div class="caract">
        <h3>Handmade</h3>
        <p>Proin viverra, enim sed commodo un porttitor, risus tellus imperdiet est.</p>
      </div>
      <div class="caract">
        <h3>Calidad</h3>
        <p>Duis  eos demotun eo alluentur ino ultricies elementum commodo nulla posuere.</p>
      </div>
  </section>
  <section id="iframe-contaniner">

    <h3 id="action">Disfruta de la Rossi Star1 en acción</h3>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/00VfyNpRYmA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen id="video"></iframe>

      <section id="precio">
    
      <h2>Precios para modelos base</h2>
    </section>
  
  <section id="precio-container">
      <div class="caract-precio">
        <h3>Rossi R1</h3>
        <p>A partir de:</p>
        <p class="price">1.500<span>€</span></p>
      </div>
      <div class="caract-precio">
        <h3>Rossi R2</h3>
        <p>A partir de:</p>
        <p class="price">2.150<span>€</span></p>
      </div>
      <div class="caract-precio">
        <h3>Rossi R2.5</h3>
        <p>A partir de:</p>
        <p class="price">4.600<span>€</span></p>
      </div>

  
  
  </main>
  <footer>
    
  </footer>



</body>
</html>

And here’s the CSS (with the query at the end, thanks!):

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

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
 font-family: 'Crimson Text', serif;
}

body {
    margin: 0 auto;
    font-family: 'Work Sans', sans-serif;
    margin-top: 80px;
}

/*INICIO DEL HEADER*/

header * {
    display: inline; 
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: white;
    position: fixed;
    top: 0;
    margin: 0 auto;
    border-bottom: 1px solid grey;
}

a {
    text-decoration: none;
}

nav a {
    margin: 0 0 0 30px;
    font-weight: bold;
    color: grey;
}



/*INICIO DE INFORMACIÓN Y REGISTRO*/

main {
    width: 80%;
    margin: 0 auto;
}

#register-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 150px auto;
    
}

div#left {
    width: 50%;
    text-align: center;
    text-align: left;
}

div#left h1 {
    max-width: 300px;
}

div#left p#establecimiento {
    font-style: italic;
    margin-top: 20px;
}

form {
    width: 50%;
    right: 0;
    text-align: right;
    
}

form h2 {
    margin-bottom: 30px;
}

#submit {
    padding: 10px;
    font-size: 16px;
    color: white;
    background-color: #bd0f0f;
    border: 0;
}

input, select {
    margin-top: 8px;
}


/*INICIO DE CARACTERÍSTICAS*/

#caract-titulo h2 {
    text-align: center;
    margin-bottom: 50px;
}

#caract-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
}

.caract h3 {
    text-align: center;
    margin-bottom: 20px;
}

/*INICIO DE IFRAME*/

section#iframe-contaniner {
    margin-top: 100px;
}

h3#action {
    text-align: center;
    color: #bd0f0f;
    font-size: 24px;
}

iframe {
    margin: 50px auto;
}

/*INICIO DE PRECIOS*/

#precio {
    margin-top: 100px;
}

#precio h2 {
    text-align: center;
    margin-bottom: 50px;
}

#precio-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.caract-precio {
    width: 30%;
    gap: 30px;
    text-align: justify;
    margin-bottom: 50px;
    border: 1px solid grey;
    padding: 20px;
    border-radius: 6px;
}

.caract-precio h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #bd0f0f;
}

.caract-precio p {
    text-align: center;
}

.caract-precio p.price {
    font-size: 28px;
    margin: 30px 0;;
    color: #bd0f0f;
    font-weight: bold;
}

.caract-precio span {
    font-size: 16px;
    font-style: italic;
    color: #bd0f0f;
}

/*FOOTER*/

footer {
    height: 100px;
    width: 100%;
}


@media only screen and (max-width: 600px) {

    nav a {
        font-size: 12px;
    }
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    .caract-precio h3 {
    text-align: center;
    margin-bottom: 16px;
    color: #bd0f0f;
    }

    .caract-precio p {
    text-align: center;
    font-size: 12px;
    }

    .caract-precio p.price {
    font-size: 18px;
    margin: 5px 0;;
    color: #bd0f0f;
    font-weight: bold;
    }

    .caract-precio span {
    font-size: 10px;
    font-style: italic;
    color: #bd0f0f;
    }
}

I really apreciate your help!
7

Your code has passed the test:

image
image1306×618 50.6 KB

Copy/paste the code to a different place. Restart the step. Paste the code back. If the code doesn’t pass follow the note and try again:

“Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.”

8

Thanks for the help.

I’ve tried everything you said, but nothing works.

I’ve even tried with different browsers, but still not working.

Any other idea?

Thanks!

9

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