Maquetado

Continuamos con la sección de Habilidades, donde tenemos un subtitulo, una lista de skills del lado izquierdo, y una imagen del lado derecho.

En esta oportunidad empezaremos agregando un <h2> para el subtitulo, y luego para dividir ambos lados deberiamos tener los 2 <div> encapsulados en otro <div> contenedor para solo separar esos dos. Al div contenedor le pondremos la clase sides para ponerle flex-box. Nos quedaría asi:

index.html

En el lado izquierdo agregamos el párrafo de texto, y utilizaremos los elementos <ul> y <li> para listar las skills. Dentro de cada <li> pondremos la imagen de la tecnología, y un span con el nombre. Descargamos una imagen para cada skill y la llamamos <skill>.png.

Y en le lado derecho simplemente agregamos la imagen. En este caso la llamé skills.png:

index.html

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

Screenshot 2023-06-24 at 4.20.44 PM.png

Estilos

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

temp.css

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

• Establecer el fondo transparente, para que , al igual que el anterior, se vea el fondo que agregaremos luego en el body.
• Margen horizontal de 100px y vertical de 64px

Ademas podemos establecer estilos para h2 reusables en las otras secciones.

Y para .sides es donde pondremos flex-box para distribuir el contenido en ambos lados.

index.css

El resultado por el momento se ve mejor:

Screenshot 2023-06-24 at 7.11.34 PM.png

En el lado izquierdo solamente tenemos que arreglar la lista de skills. Para eso tenemos que:

• Borrar las viñetas
• Ordenarlas horizontalmente
• Resetear el espaciado por defecto de los ul
• Centrar el nombre de cada item respecto a su logo

index.css

Para ul usamos flex horizontal (row) para alinear los 4 items uno al lado del otro. Y luego dentro de cada item li usamos flex vertical (column) para que quede la imagen arriba y el texto abajo. Ademas los separamos un poco entre sí con margin-right.

Resultado:

Screenshot 2023-06-24 at 7.20.02 PM.png