He realizado los ejercicios al pie de la letra y nada funciona, incluso me estoy guiando por el mismo index.html que realizo el profesor,...

Brodward asdasd

Pregunta

student•

He realizado los ejercicios al pie de la letra y nada funciona, incluso me estoy guiando por el mismo index.html que realizo el profesor, dejo los codigos html y css.

Alguien sabe donde esta el error ?

!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Este es un sitio de producto genial">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/mobile.css">
    <title>BRAND📦</title>

  </head> <!-- Cierra head -->
  <body>
    <nav class="fadeInDown">
      <img src="images/logo.png" alt="">
      <ul>
        <li>
          <a href="#">Faqs</a></li>
        <li>
          <a href="#">Producto y descripción</a></li>
      </ul>
    </nav>
    <h1 class="main_section">
      Este es un producto increible, no se que haces viendo que lo puedes tener
    </h1>
    <!-- Inicio productos -->
    <div class="products">
      <div class="product">
        <div class="content">
          <div class="image-product">
            <img src="images/box1.png" alt="">
          </div>
          <h3>Producto 1</h3>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          <button class="main_btn">
            Lo quiero
          </button>
        </div>
      </div>
      <div class="product">
        <div class="content">
          <div class="image-product">
            <img src="images/box2.png" alt="">
          </div>
          <h3>Producto 1</h3>
          <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          <button class="main_btn">
            Lo quiero
          </button>
        </div>
      </div>
    </div>
    <!-- Fin productos -->
    <!-- Inicia beneficios -->
    <div class="beneficios">
      <div class="beneficio">
        <div class="content_beneficio">
          <img src="images/b1.png" alt="">
          <h3>Los mas suavecitos</h3>
          <p class="text_beneficio">
            Miles de productos hay en el mercado, pero nada como una caja con gatitos
          </p>
        </div>
      </div>
      <div class="beneficio">
        <div class="content_beneficio">
          <img src="images/b2.png" alt="">
          <h3>Lo más increíble</h3>
          <p class="text_beneficio">
            Miles de productos hay en el mercado, pero nada como una caja con gatitos
          </p>
        </div>
      </div>
      <div class="beneficio">
        <div class="content_beneficio">
          <img src="images/b3.png" alt="">
          <h3>Lo mas confiable</h3>
          <p class="text_beneficio">
            Miles de productos hay en el mercado, pero nada como una caja con gatitos
          </p>
        </div>
      </div>
    </div>
    <!-- Fin beneficios -->
    <hr>
    <!-- Inicia menciones -->
    <h2 class="mention_title">Menciones</h2>
    <div class="mentions">
      <div class="mention">
        <div class="content_mention">
          <img src="images/p1.png" alt="">
          <div class="text">
            <h3>Mario</h3>
            <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          </div>
        </div>
      </div>
      <div class="mention">
        <div class="content_mention">
          <img src="images/p2.png" alt="">
          <div class="text">
            <h3>Mario</h3>
            <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          </div>
        </div>
      </div>
      <div class="mention">
        <div class="content_mention">
          <img src="images/p3.png" alt="">
          <div class="text">
            <h3>Mario</h3>
            <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          </div>
        </div>
      </div>
      <div class="mention">
        <div class="content_mention">
          <img src="images/p4.png" alt="">
          <div class="text">
            <h3>Mario</h3>
            <p>Miles de productos hay en el mercado, pero nada como una caja con gatitos</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Fin de menciones -->
    <!-- Inicio de footer -->
    <footer>
      <div class="option">Terminos y condiciones</div>
      <div class="option">contacto@brand.com</div>
    </footer>
    <!-- Fin de Footer -->

    <!-- Script -->
    <script src="scripts/script.js"></script>
  </body> <!-- Cierra body -->
</html> <!-- Cierra html -->

.fadeIn {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
} 

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.fadeInDown{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes .fadeInDown {
   from {
     opacity: 0;
     @-webkit-transform: traslate3d(0, -100%, 0);
     transform: translate3d (0,-100%,0);
   }
   to{
     opacity: 1;
     transform: translated (0,0,0);
   }

}``

Sebastián Mera

student•

Hola Brodward, He revisado tu código y este error se debe a que cuando escribes las etiquetas div no les das un espacio para escribir la clase y HTML toma esto como si fuera una etiqueta entera. Es decir, la sintaxis de los divs y de cualquier etiqueta a la que le vas a añadir clase o ID es así:

Tienes que ponerle mucho cuidado a estos pequeños errores del código que escribas ya que son los que mas pasan desaprecibidos y no nos enteramos hasta horas después.

He realizado los ejercicios al pie de la letra y nada funciona, incluso me estoy guiando por el mismo index.html que realizo el profesor,...

Curso de HTML y CSS 2019

Curso de HTML y CSS 2019