Acá va el título de la lección
Trabajo de Posicionamiento CSS
Instrucciones:
En este desafío vamos a usar las propiedades "display", "position" y "flexbox", para posicionar nuestros elementos
correctamente en la página. El único archivo que necesitas modificar para este desafío es el archivo "styles.css"
que se encuentra en esta misma carpeta.
Debes usar las clases, y selectores de elemento que vimos en clase.
Ejercicio 1:
En este primer ejercicio deberás asegurarte que el texto dentro de este parrafo este centrado en la página. La
clase de este parrafo es "contenedor__span_uno". El texto solo tiene una forma de alinear conocido como
"text-align", para el cual podemos definir los valores "left", "right", "center" o "justify", pero esto solo
funcion dentro de los elementos "block" y el span inicialmente es un elemento "inline". Define la propiedad
"display" para que sea "block" y centra el texto usando "text-align".
Ejercicio 2:
Hay una caja con un texto en la parte superior de la pantalla. Eso se supone que es un "placeholder" hasta que
tengamos el título de la sección definido. Desafortunadamente no tenemos acceso al HTML, por lo que no podemos
ocultarlo modificando el HTML. Usando solo CSS, asegúrate que la caja no sea mostrada. La clase de lo que tienes
que ocultar es "titulo".
Ejercicio 3:
Debajo verás una caja, la cual contiene dentro una imagen, queremos asegurar que esa imagen se
posicione dentro de la cajita roja, para ello debes cambiar el atributo "position", y después ajustar la imagen
acorde a la caja.
La caja roja está a 100 píxeles del margen superior y 200 píxeles desde la izquierda. La clase de la imagen es
"contenedor_objetivo__ejercicio_tres".
Esta es la imagen de un mas tierna de un zorro ártico. Esperamos que la disfrutes XD
Ejercicio 4:
La caja azul que esta debajo, se supone que debe ser nuestro header, por lo que debe estar fijo en la parte
superior izquierda de la página, y la posición no debería variar cuando la página sea scrolleada.
El id de la caja es "ejercicioCuatro". Cambia la posición de esa caja a la esquina superior izquierda.
LarnU
Desafío de posicionamiento
Ejercicio 5:
En el header hay tres elementos; "Desafío de posicionamiento", el logo de "LarnU".
Usando la clase "contenedor__ejercicio_cinco", configuraremos este container con "flexbox", y nos aseguraremos que
cada elemento está distanciado de manera proporcional entre ellos. También queremos que cada elemento aparezca
centrado verticalmente en la línea.
Ejercicio 6:
Ahora que los elementos del header están espaciados adecuadamente, vemos que quedaron desordenados. "Desafío de
posicionamiento" debería estar a la izquierda, y LarnU a la derecha. Usando la misma clase que en el ejercicio
anterior, cambia la dirección en el cual aparecen los elementos.
Ejercicio 7:
Este es un "playground" de la propiedad flexbox, la clase es "ejercicioSiete". No hay un objetivo final en este
ejercicio, puedes jugar con estos elementos y las diferentes opciones de flexbox. La clase de los elementos están
escritos en los mismos. Prueba usando los conceptos que aprendimos sobre flexbox, incluyendo: "justify-content",
"align-items", "align-self", y "flex-direction".
clase "elementoUno"
clase "elementoDos"
clase "elementoTres"
clase "elementoCuatro"
Punto extra 1:
Hay bastantes opciones de flexbox y pueden complicarse, pero a través de la prática puedes aprender
a ajustar rápidamente el posicionamiento de tus elementos con facilidad. Te recomendamos el tutorial
"Flexbox Froggy", el cual te enseñará en profundidad cómo funciona el elemento de posicionamiento "flexbox":
Flexbox Froggy