Landing pages: beneficios

Como es habitual lo primero será escribir el contenido de la página sin preocuparse del aspecto. Quedará un esquema completo de lo que debe aparecer. Después vas colocando las clases para darle el aspecto que deseas.

Par rellenar he usado un Lorem Ipsum, lógicamente eso se debe sustituir por texto relativo al curso, pero no andaba muy inspirado. Pero la idea en este diseño es que el apartado tenga dos filas de tres celdas, cada una de las cuales es a su vez una columna con una cabecera y un cuerpo.

Bueno en pantalla grande, en el móvil todo se convierte a columnas.

Observa que tiene el elemento article con su id="beneficios" y dentro tienes las section a las que asigno una clase fila. Cada section posee tres div que serán las columnas, con sus div anidadas para titulo y cuerpo.

Al escribir el código HTML he ido asignando nombres de clases pensando en la función que ha de cumplir. Esta práctica debes usarla con cuidado para no repetir definiciones de estilos CSS (no es que eso sea malo pero da más trabajo). Usa también clases muy genéricas para aplicar a cualquiere elemento, como bg-black, para fondo negro por ejemplo. Y si quieres particularizar un elemento concreto pues utilizas el atributo id, por ejemplo #beneficios

Ya habíamos definido algunas clases al crear el módulo menu y el hero. No la repetimos, claro. Solo ajustamos a las condiciones particulares de esta sección, por ejemplo .columna para el apartado #beneficios modifico las propiedades padding y margin.

Con esto creamos una banda a todo el ancho a la que doy un color de fondo clarito. Rompemos así un poco el flujo de la página, es muy larga y un continuo puede cansar. No es algo oblligatorio, pero puede venir bien. El color va dentro del esquema elegido.

Las celdas de las columnas van a tener un título y un cuerpo, más adelante se repetirá el mismo esquema. Así que defino las clases .titulo y .cuerpo dentro de la clase .columna. Les doy los colores, tipos y tamaños que me parezcan más adecuado. Para los títulos uso iconos dentro del contexto, les he puesto el color naranja que junto con el azul forma el esquema de color básico.

Para pantallas pequeñas la estructura de filas no es aconsejable, la solución más simpe es colocar los bloques en vertical. Como son filas basadas en flex-box, pues redefino la la propiedad flex-direction al valor column. Las restantes propiedades son para ajustar los contenidos al ancho de la pantalla.

Si quieres puedes definir más puntos de ruptura (breakpoints) para otros tamaños de pantalla. Yo, por simplicidad, solo he usado uno.