Estilos CSS para Sección "Por Qué Nosotros" en HTML

¿Cómo manejar la sección "Por qué nosotros" en HTML y CSS?

Desarrollar sitios web tiene su magia, y una buena estructura es crucial para un funcionamiento adecuado. En esta clase, veremos cómo trabajar en la sección "Por qué nosotros" de nuestro proyecto web. Exploraremos la incorporación de imágenes, el uso de divs y la aplicación de estilos para mantener un aspecto limpio y profesional.

¿Cómo integrar imágenes y texto en HTML?

Primero, es fundamental ir al archivo index.html y añadir los elementos que componen nuestra sección. Aquí, usaremos etiquetas <p> para el texto descriptivo y <img> para las imágenes, ubicadas en el directorio assets/IMG. A continuación, organizaremos nuestro contenido:

<div class="about-us">
  <div class="mission-section">
    <div class="earth">
      <img src="assets/IMG/earth.jpg" alt="Tierra">
      <p>Innovación ecológica para un futuro mejor.</p>
    </div>
    <div class="innovation">
      <img src="assets/IMG/innovation.jpg" alt="Innovación">
      <p>Innovando con estilo.</p>
    </div>
  </div>
</div>

¿Cómo estilizar con CSS para mejorar la presentación?

Una vez estructurado nuestro HTML, el siguiente paso es aplicar estilos con CSS o SASS. La idea es crear un diseño atractivo utilizando las propiedades de Flexbox, además de otros ajustes como el color de fondo y la alineación de texto. Antes de aplicar el Flexbox, podemos definir elementos básicos:

.mission-section {
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.earth, .innovation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

img {
  max-width: 100%; /* Para asegurar que las imágenes no se distorsionen */
}

p {
  color: #333;
  text-align: center;
}

¿Es importante la jerarquía en CSS?

Definitivamente. La herencia en CSS puede ser un arma de doble filo. Es crucial entender qué estilos queremos heredar y bajo qué condiciones. En este ejemplo, al usar la clase Healthcare, notamos que ciertas propiedades no se aplicaban como esperábamos. En lugar de confiar en la herencia que complicaba el mantenimiento del código, decidimos aplicar estilos directamente.

.about-us h2 {
  font-weight: bold;
  padding-bottom: 60px;
}

¿Cómo ajustar el layout con Flexbox?

Flexbox proporciona una gran capacidad para acomodar contenidos tanto horizontal como verticalmente. En nuestra sección, utilizaremos las propiedades de este modelo para centrar elementos y ajustarlos según nuestras necesidades:

.mission-section {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.earth, .innovation {
  width: 30vw; /* Ajusta el tamaño al viewport */
  display: flex;
  flex-direction: column;
}

¿Cómo validar la correcta aplicación de estilos?

Para confirmar que los cambios se reflejan, usa herramientas de desarrollo del navegador como el Inspector de Elementos (Ctrl + Shift + I). Esto te permitirá ver el resultado en tiempo real y ajustar cualquier cosa que no esté funcionando como debe.

Al concluir esta sección, habrás creado una estructura sólida con estilo visual atractivo, haciendo uso eficiente de las herramientas HTML y CSS. Si tienes alguna duda, no dudes en preguntar en los comentarios. ¡Sigue adelante con tu aprendizaje y mejora constantemente!