Pagina culminada | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style/reset.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/products.css">
    <title>Productos - Barberia Alura</title>
</head>
<header>
    <div class="caja">
     <h1><img src="imagenespro/logo.png" alt=""></h1>
     <nav>
     <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="produxtos.html">Productos</a></li>
        <li><a href="contactos.html">Contactos</a></li>
     </ul>
    </nav>
</div>
</header>
<body>
    <main>
    <ul class="productos">
        <li>
            <h2>Cabello</h2>
            <img src="imagenespro/cabello.jpg" alt="">
            <p class="producto-descrip">Con tijera o maquina a gusto del cliente</p>
            <p class="producto-precio">10$</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="/imagenespro/barba.jpg" alt="">
            <p class="producto-descrip" >Corte y Diseño profesional de barba</p>
            <p class="producto-precio">8$</p>
        </li>
        <li>
            <h2>Cabeloo + Barba</h2>
            <img src="/imagenespro/cabello+barba.jpg" alt="" srcset="">
            <p class="producto-descrip">Corte completo de cabello y barba</p>
            <p class="producto-precio">15$</p>
        </li>

</ul>
</main>
<footer>
    <img src="/imagenespro/logo-blanco.png" alt="">
    <p class="copyright">&copy Copyght Barberia Alura 2022</p>
</footer>
</body>
</html>

`header{ background-color: #BBBBBB; padding: 20px 0; } .caja{ width: 940px; position: relative; margin: 0 auto; } nav{ position: absolute; top: 140px; right: 0px; } nav li{ display: inline; margin: 0 0 0 15px; } nav a{ text-transform: uppercase; color :black; font-weight: bold; font-size: 22px; text-decoration: none; } .productos{ width: 940px; margin: 0 auto; padding: 50px; } .productos li{ display: inline-block; text-align: center; width: 25%; vertical-align: top ; margin: 0 1.5%; padding: 30px 20px; box-sizing: boder-box; border:2px solid black; border-radius: 20px; } .productos h2{ font-size: 30px; font-weight: bold; } .productos h2{ font-size: 30px; font-weight: bold; } .producto-descrip{ font-size: 18px;

} .producto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; } nav a:hover{ color: #c78c19; text-decoration:underline; } .productos li:hover{ border-color:#c78c19; } .productos li:active{ border-color: #0869; } .productos li:hover h2{ font-size: 32px; } footer{ text-align: center; background:url(/imagenespro/bg.jpg); padding: 40px; } .copyright{ color: #ffffff; font-size: 13px; margin: 20px; }