CursosEmpresasBlogLiveConfPrecios

Estructuración de Secciones y Tarjetas en HTML y CSS

Clase 18 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase
Resumen

Para empezar, revisemos un poco el diseño en Figma para conocer qué código necesitamos crear.

Análisis de la estructura

Al inicio nos encontramos con un logo flotante que ya aprendimos a posicionarlo con position: absolute. Tenemos algunos otros íconos que podemos almacenar en etiquetas span y varios contenedores con cajas de texto.

18.jpg

La imagen solo toma la primera caja, ya que las siguientes tienen la misma estructura. Mientras que aquí aprenderás a construir todo el diseño de la imagen, te harás cargo de terminar las otras tres cajas. ¡Vamos a nuestro archivo index.html!

Cómo hacer la maquetación

  • Abrimos la segunda sección y le damos una clase con base a su contenido. Como detalla lo que es el producto Batatabit, el nombre podría ser main-product-detail.
  • Creamos la clase para el contenedor del título principal con product-detail–title.
  • Creamos las etiquetas que anteriormente encontramos en el diseño como span, h2, p, section y article.
  • Creamos la clase product-detail–batata-logo para la etiqueta span que contendrá nuestro logo.

Dentro del primer artículo:

  • La primera etiqueta p será el título de la tarjeta, y el nombre de su clase será product–card-title, con la estructura bloque–elemento.
  • La segunda etiqueta p será el cuerpo de la tarjeta, y el nombre de su clase será product–card-body.
  • Por último, agregamos el contenido dentro de cada etiqueta de texto.
        <section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="clock"></span>
                    <p class="product--card-title">Tiempo real</p>
                    <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
            </section>
        </section>

No te olvides de crear los otros tres actículos para completar la estructura de la segunda sección.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).