Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Alineando productos en bloques

    <div class ="caja">
        <h1><img src="images/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>Cabello </h2>
            <img src="images/cabello.jpg">
            <p class = "producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
            <p class = "producto-precio">USD$ 10.00</p>
        </li>
        <li>
            <h2>Barba</h2>
            <img src="images/barba.jpg">
            <p class = "producto-descripcion">Corte y deiseño profesional de barba</p>
            <p class = "producto-precio">USD$ 8.00</p>
        </li>
        <li>
            <h2>Cabello + Barba</h2>
            <img src="images/cabello+barba.jpg">
            <p class = "producto-descripcion">Paquete completo de cabello y barba</p>
            <p class = "producto-precio">USD$ 15.00</p>
        </li>            
    </ul>
</main>
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:#000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
/* MAIN*/

.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;

}

.productos h2{


font-size: 30px;
font-weight: bold;

}

.producto-descripcion{


font-size: 18px;
}

.producto-precio{


font-size: 20px;
font-weight: bold;
margin-top: 10px;
}
1 respuesta

Gracias por compartir tu código con nosotros.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios