Creando la sección de Rentas destacadas

¿Cómo estructurar la sección de rentas destacadas en un diseño móvil?

La creación de una sección visualmente atractiva y funcional para dispositivos móviles es un desafío único, y más cuando estamos hablando de componentes como las rentas destacadas. Utilizando Figma como herramienta, debemos tener en cuenta que en el diseño móvil empleamos un flex en columna.

¿Qué pasos seguir al codificar rentas destacadas?

1. Div Principal:

   • Crea un nuevo div dentro del elemento con el ID rentas destacadas.
   • Agrega un texto para la sección con recurso de clase. El texto podría ser "Rentas destacadas".

2. Estilizar el Texto Principal:

   • Tamaño de texto clase 3XL.
   • Color primario en el texto.
   • Fuente semi-bold.
   • Añade padding-bottom de tamaño 6.

¿Cómo diseñar las cartitas dentro de la sección?

1. Preparación del Div:

   • Asegúrate de que el div superior incluya clases: padding en el eje X de 6, height y width completos.

2. Crear una Cartita:

   • Dentro del div, crea un nuevo div para la primera cartita con múltiples paréntesis <p> en su interior.
   • Define las dimensiones: width completo, tamaño de 96 para ambas dimensiones.
   • Aplica un background temporal, como red 200, para entender su comportamiento inicial.

3. Incluir Imagen y Texto:

   • Utiliza background-image con una imagen representativa.
   • background cover para ajuste completo.
   • Agrega nombre y descripción: "Chicago", "dos habitaciones, un baño y cocina".

4. Ajustes de Diseño:

   • Añadir rounded grande (rounded-XL) para bordes curvados atractivos.
   • Estilos para texto: Clase cartitle para título común en todas las cartitas.

   .cart-title {
     @apply text-3xl px-8 py-8 pb-1 font-semibold text-white;
   }

   • Para descripción: text-medium, padding-left de 8, text-white, margin-right de 24.

¿Cómo implementar flexbox en el diseño?

1. Contenedor Flexbox:

   • Utiliza flex y flex-column en el contenedor principal de cartitas.
   • Space entre elementos con valor de 4, centrado con item-center y justify-center.

2. Ajuste de Espaciados:

   • Modifica padding de la clase rentas destacadas.
   • Usa margin para separación adecuada, probando valores (por ejemplo, 6).

Recomendaciones finales

A escala aprenderás a personalizar visualmente, maximizar el uso de flexbox para contenedores adaptativos y estilizar componentes individuales mediante clases de CSS. Sigue perfeccionando tus habilidades, agrega las cartitas que desees y mantén la estructura clara y visualmente atractiva para los usuarios. ¡Ánimo! La práctica lleva a la maestría.