Estilos CSS para Sección Principal en Figma y HTML

¿Cómo crear una sección principal en tu proyecto web?

Cuando estamos desarrollando un proyecto web, la sección principal es fundamental. Esta es la parte que captura la atención del usuario y debe comunicar el propósito y los valores de la empresa de manera efectiva. En este tutorial, exploraremos cómo hacer esto paso a paso. Nos basaremos en un diseño previo de Figma y lo convertiremos en una pieza funcional con HTML y CSS (incluyendo Sass para un manejo más eficiente de nuestros estilos).

¿Qué hay en el diseño de Figma?

Para empezar, analizamos el diseño en Figma, donde la sección principal incluye:

• Un título grande (H1) que dice "Impacto tecnológico".
• Un párrafo que brinda información relevante.
• Un botón "call to action" que invita a obtener más información.
• Una imagen complementaria que equilibra el diseño visual.

Estos elementos están dispuestos de manera que el texto sea claro y atractivo, con una orientación visual llamativa.

¿Cómo implementar el diseño en HTML y CSS?

Para traducir el diseño a código:

1. HTML Estructura:

   • Usa un article para contener todo.
   • Incluye un div para el texto y otro para la imagen.
   • Dentro del texto div, agrega una estructura con H1, P y un botón.

2. Código en HTML:

   <article class="section-principal">
       <div class="text-container">
           <h1>Impacto tecnológico</h1>
           <p>Explicando el impacto ambiental...</p>
           <button type="button">Conoce más</button>
       </div>
       <div class="image-container">
           <img src="ruta/a/tu/imagen.jpg" alt="Descripción de la imagen">
       </div>
   </article>
   

¿Cómo estilizar nuestra sección usando Sass?

Para los estilos, trabajamos con el archivo main.scss. Aquí, utilizamos Flexbox para alinear los elementos de manera eficiente y cambiamos el tamaño de los textos y otros componentes para que se adapten al diseño deseado.

1. Article y Flexbox:

   .section-principal {
       display: flex;
       justify-content: space-between;
       padding: 50px 45px; // margen para separar del navbar y alineación
   }
   

2. Estilo de los textos e imagen:

   .text-container {
       width: 50%;
       h1 {
           font-size: 3em;
       }
       p {
           font-size: 1.5em;
       }
       button {
           width: 12vw;
           padding: 20px;
           background-color: $cuaternion-color;
           color: white;
           font-size: 1em;
           border-radius: 35px;
           border: none;
       }
   }
   
   .image-container {
       width: 50%;
       img {
           max-width: 100%;
           border-radius: 19px;
       }
   }
   

3. Variables de Sass: Utilizamos variables para tamaños y colores consistentes:

   $paragraph-size: 1.5em;
   $cuaternion-color: #f0f0f0; // Cambia este color según tu paleta
   

¿Qué detalles finales nos aseguran una mejor implementación?

1. Ajustes Responsivos: Asegúrate de usar unidades como vw y em que se ajustan bien a diferentes tamaños de pantalla. Esto hace que tu sección sea más responsiva.

2. Espaciado uniforme: Utiliza padding y margin para dar un respiro visual, y ajusta gap en Flexbox para separar elementos de manera consistente.

3. Optimización de imágenes: Asegúrate de que las imágenes no se alteren al escalar, estableciendo un max-width adecuado y manteniendo las proporciones con height en auto.

Con estos pasos y consejos, habrás creado una sección principal efectiva que no solo es funcional, sino que sigue un diseño visual atractivo. ¡Continúa explorando y ajustando para obtener resultados aun más pulidos!