Página Barbería Alura - Finalizada | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

<head>
    <meta charset="utf8">
    <title>Productos - Barbería Alura  </title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="productos.css">
</head>
<body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png"></h1>
            <nav>
                <ul>
                    <li ><a href=index.html> Home</a></li>
                    <li ><a href=Productos.html>Productos</a></li>
                    <li ><a href=Contacto.html> Contacto</a></li>                     
                </ul>
            </nav>
        </div>    
     </header>
     <main>
        <ul class="productos">
            <li>
                <h2>Cabelo</h2>
                <img src="imagenes/cabello.jpg" >
                <p class="producto-descripcion">Con tijera o máquina a gusto del cliente</p>
                <p class="producto-precio">$ 10 usd</p>
                </li>
            <li>
                <h2>Barba</h2>
                <img src="imagenes/barba.jpg" >
                <p class="producto-descripcion">Corte y diseño profesional de barba</p>
                <p class="producto-precio">$ 8 usd</p>
            </li>
            <li>
                <h2>Cabello + Bar</h2>
                <img src="imagenes/cabello+barba.jpg" >
                <p class="producto-descripcion">Paquete completo de cabello y barba</p>
                <p class="producto-precio">$ 15 usd</p> 
            </li>
        </ul>   
     </main>
     <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright">&copy Copyright Barbería Alura - 2020</p>
     </footer>
</body>

============Código productos.css===== header{ background-color: #BBBBBB; padding: :20px 0; } .caja{ width: 940px; position: relative; margin: 0 auto;

} nav { position: absolute; top: 110px; right: 0; } nav a:hover{ color:#c78c19; text-decoration: underline; } nav li{ display: inline; margin: 0 0 0 15px; } nav a { text-transform: uppercase; color: #000000; 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: 30%; vertical-align: top; background: #cccccc; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box;

border: 2px solid #000000;
border-radius: 10px;

} .productos li:hover{ border-color:#c78c19; } .productos li:active{ border-color:#088c19; } .productos h2{ font-size: 30px; font-weight: bold; } .productos li:hover h2{ font-size: 33px; } .producto-descripcion{ font-size: 18px; }

.producto-precio{ font-size: 20px; font-weight: bold; margin-top: 10px; }

footer{ text-align: center; background: url(imagenes/bg.jpg); padding: 40px;

} .copyright{ color:#ffffff; font-size: 13px; margin: 20px; }