Maquetado

Ahora empezamos a maquetar la sección de Habilidades, que consta de un subtítulo, un párrafo y 3 secciones para cada uno de los proyectos.

Usamos un <h2> para el subtitulo como en la sección anterior, un párrafo, y un div con clase sides para contener los 3 proyectos. Luego, cada uno de los proyectos usaremos una clase project tendrá una imágen, un párrafo, y un link para ir al proyecto.

index.html

Si guardamos y recargamos la página en nuestro navegador, veremos que la sección de proyectos se ve asi:

Screenshot 2023-06-24 at 7.39.02 PM.png

Estilos

Empezamos borrando los estilos temporales de #projects en temp.css:

temp.css

Ahora en index.css, agregamos el selector #projects, con estilos para:

• Establecer el fondo azul
• Margen horizontal de 100px y vertical de 64px

Ademas tenemos que cambiarle el color al h2 de esta sección a blanco, al igual que el párrafo.

Y a .sides lo hacemos flex-box para distribuir las 3 cajas de los proyectos.

index.css

Y para cada proyecto, le damos dimensiones fijas a la caja y a la imagen, para que todo termine con el mismo tamaño. Usamos flex-column dentro de cada proyecto, y flex: 1 en el párrafo para que el botón quede abajo.

index.css

Resultado:

Screenshot 2023-06-24 at 7.58.13 PM.png