En este screencast final de la construcción del pie de página, trabajamos en el pie de página inferior donde están las áreas de CodePen y ShopTalk.
Tenemos que cambiar un poco el HTML a medida que nos damos cuenta de que los cuatro trozos a lo largo de la parte inferior (logotipo, texto, logotipo, texto) tendrían sentido para ser una serie de elementos de bloque en línea que están centrados entre sí ( vertical-align: middle;).
Nos encontramos con el problema de que hay espacio adicional entre los elementos del bloque en línea, por lo que usamos el tamaño de fuente: 0; truco de este artículo.
Conseguimos que el diseño funcione al final, pero en realidad no me ves caer en las imágenes reales. Como hicimos con Photostar, hago un nuevo archivo de Photoshop solo para estos logotipos de pie de página. Esto solo hace que sea más fácil de manejar y las futuras actualizaciones de estos logotipos más fáciles. También los hago 2x en tamaño y los reduzco para que se vean bien en las pantallas Retina. Los coloco en las etiquetas de imagen de marcador de posición que tenemos y funciona muy bien.
Archivos
- Logos.psd.zip de 74 pies de página