Esta es una de las primeras páginas del curso que tiene cierto acabado estético. Hasta el momento, en general, hemos las páginas web tenían un objetivo muy concreto: una botonera, una distribución de tres columnas, una página web de dos columnas… por primera vez unimos todo lo aprendido para hacer una página web completa… y no es tan difícil 😀
¿Qué haremos en esta página?
Para resolver este ejercicio debemos hacer uso de técnicas de maquetación fundamentales. Por un lado tenemos la cabecera que consta de dos componentes, el logo y la botonera. Sería fácil maquetarlo dándole float:left a la botonera y float:right al logo. Pero recuerda que cuando a un componente le das el estilo float, la capa que lo envuelve no tendrá en consideración su altura. Por tanto, si quieres que la capa que envuelve al logo y a la botonera tenga la altura correcta, tendrás que darle el estilo overflow hidden. Despues hay una fotografía que ocupa toda la columna central. Las fotografías tienen por defecto estilo display:inline-block. Yo le cambiaría su valor por defecto a display:block, ya que la fotografía está en vertical con el resto de los componentes. De todas formas, no hay mucha diferencia si no le cambiamos el display. Y luego tenemos tres columnas de información. Este diseño de tres columnas es muy típico y lo podemos encontrar en muchas páginas web.
Finalmente, tenemos el footer. El footer de esta página web es muy parecido a la cabecera. Está compuesto de una fila que en su interior tiene dos elementos, uno pegado a la izquierda y el otro pegado a la derecha. Puedo ubicar estos elementos en el sitio correcto con el estilo float:left y float:right, respectivamente, con display flex, etc….
