Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
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. Después 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….
