CursosEmpresasBlogLiveConfPrecios

Creación de Sección de Planes con HTML y CSS

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

Clase anteriorSiguiente clase
Resumen

Nos encontramos en la última sección de nuestro proyecto en el que vamos a estar creando la estructura HTML para posteriormente aplicar los estilos necesarios. Primero, analicemos el contenido visual para determinar las etiquetas que usaremos.

Análisis del diseño para la sección de planes

Tenemos varios elementos a observar:

  • Un primer contenedor con el título principal y la descripción.
  • Luego una section para las tres tarjetas con los precios, cada tarjeta en su propio contenedor article.
  • Dentro de cada tarjeta encontramos un texto en caja flotante, otro con el tipo de pago, otro con el valor, otro con la descripción del plan y por último un button con un ícono a lado.
ejemplo de diseño de sección

Cómo hacer la maquetación

Conociendo las etiquetas que debemos usar, empezamos a maquetar nuestra estructura:

        <section id="plans" class="main-plans-container">
            <div class="plans--title">
                <h2>Escoge el plan que mejor se ajuste a ti.</h2>
                <p>Cualquier plan te da acceso completo a nuestra plataforma.</p>
            </div>
            <section class="plans-container--slider">
                <article class="plans-container--card">
                    <p class="recomended">Recomendado</p>
                    <div class="plan-info-container">
                        <h3 class="plan-card--title">Pago Anual</h3>
                        <p class="plan-card--price"><sup>$</sup> 99</p>
                        <p class="plan-card--saving">*Ahorras $129 comparado al plan mensual.</p>
                        <button class="plan-card--ca">Escoge este <span></span></button>
                    </div>
                </article>
            </section>
        </section>

Recuerda que puedes crear toda estructura con una sola línea de código utilizando Emmet, de esta forma:

(div>h2+p)+section>article>p+div>h3+p*2+button
  • Agregamos un id a la sección principal para poder enlazarla con el botón “Conoce nuestros planes” que diseñamos en la sección del header. Colocamos el mismo nombre tanto en el ancla del botón, como en el id de la sección.
  • Creamos una etiqueta sup para el signo de dólar que se muestra junto al precio. Esta etiqueta define un fragmento de texto que se debe mostrar, por razones tipográficas, más alto, y generalmente más pequeño, que el tramo principal del texto.
  • Agregamos nombres descriptivos a cada etiqueta genérica y completamos los espacios con el contenido respectivo.

Y así terminamos de crear la estructura de esta última sección. Ahora vamos a por esos estilos.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor) con aportes de Sneyder Alfonso Barreto Buitrago y Jean Paul Yepes.