Interesante las clases y creación de bloques | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

Home
Productos
Contacto

        </nav>
   </div>


</header>
<main>
    <ul class="productos">

        <li>
            <h2>Cabello</h2>
            <img src="C:/Lenguajes de Programacion/HTML/imagenes/imagenes/cabello.jpg">
            <p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
            <p class="producto-precio">$10.00</p>

        </li>
        <li>
            <h2>Barba</h2>
            <img src="C:/Lenguajes de Programacion/HTML/imagenes/imagenes/Barba.jpg">
            <p class="producto-descripcion">Corte y diseño profesional de barba</p>
            <p class="producto-precio">$08.00</p>                            

        </li>
        <li>
            <h2>Cabello + Barba</h2>
            <img src="C:/Lenguajes de Programacion/HTML/imagenes/imagenes/cabello+barba.jpg">
            <p class="producto-descripcion">Paquete completo de cabello y barba</p>
            <p class="producto-precio">$15.00 </p>                

        </li>
    </ul>


</main>
</body>

    CSS

    header{
   background-color: #BBBBBB;
   padding: 20px 0;

} .caja{ width: 940px; position: relative; margin: 0 auto;

} nav{ position: absolute; top: 110px; right: 0;

} nav li{ display:inline; margin:0 0 0 15px } nav a{ text-transform:uppercase; color:#00000; 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;

} .productos h2{ font-size: 30px; font-weight: bold;

} .producto-descripcion{ font-size: 18px;

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