Vamos a continuar con nuestro proyecto y vamos a darle estilos a lo que es la parte de testimoniales
puede ser que tenemos testimoniales el primer paso fue quitar las TGD no lo requerimos.
Voy a crear un dip llamado testimoniada para poderlo seleccionar como el padre y darle algunos estilos
CSS tanto el bloqueo como el párrafo que de esta forma vamos a abrir lo que es la hoja de estilos no
suponer que un comentario que va a ser testimoniales
y ponemos un punto testimonial le vamos a colocar el color verde de fondo va a tener un color y ponemos
el color verde.
Guardamos cambios abrimos nuestro proyecto y el que se ve esta forma.
Era importante colocar un dip que rodeara tanto el texto como quien lo escribe para poder aplicar un
fondo ambos.
Siguiente paso es que voy a hacer las letras un poco más grandes.
Por lo tanto Foncea es 2.4 Reem guardamos cambios processes que se hacen un poco más grande.
También un poco de Pardines decir espacio hacia adentro dos guardamos cambios el que se ve de esta forma
y también quiero que todo el texto sea blanco color puros F6 y guardamos cambios podés ver que se va
viendo bastante bien la verdad y también puedes ver que si vemos el diseño tenemos las esquinas redondeadas
aquí existe una propiedad del CSS que te permite hacerlo Border reviews y por ejemplo le puedes poner
x 50 por ciento y eso va a ser como un balón redondo aquí es decir lo que hace es que toma o divide
tu elemento digamos esta imagen la divide en cuatro así y así aplican 50 por ciento de aquí aquí y aquí
aquí es que es una opción la que puedes crear un círculo siempre y cuando la imagen sea totalmente cuadrada
similar a esta de aquí bueno no la queremos tan redonda aunque se ve bien en algunos proyectos lo cual
te puede servir entonces digamos 20 pixeles en cada esquina.
2 Puede ser que se ven las esquinas pequeñas ahora bordes 2 lo va a aplicar en todas las direcciones
pero digamos que nada más quieres que esté en esto de arriba a la derecha puedes ver que si le pones
border radius te aparecen diferentes opciones.
Entonces si lo quisieras aquí arriba a la derecha tienes esta opción de Border top right es decir arriba
a la derecha reunio si digamos te pones 2 Reem si guardas cambios puedes ver que las esquinas están
cuadradas pero esta está redonda y si lo quieres por ejemplo abajo puedes poner el deporte bottom left
Radius y ponerle dos FLAM y vas a tener esquinas redondeadas aquí abajo y aquí arriba puedes ponerte
creativo con esto y obviamente también le puedes poner digamos 20 aquí se ve diferente puedes jugar
con estos valores son propiedades muy útiles en mi caso solamente con equipos de reviews digamos de
todas las direcciones que de esta forma y después puedes ver que por ejemplo lo que es el texto de la
persona que escribe está alineada hacia la derecha testimonial lo rompe para el párrafo si recuerdas
el texto del testimonial es un blog este es un párrafo nada más solamente tenemos 1 entonces puedes
ver que esa línea hacia la derecha se ve bien.
Ahora tenemos esta comilla que está aquí en esta parte hay muchas formas de hacerlo lo podríamos hacer
con un elemento una imagen ponerla ahí entre muchas otras.
Anteriormente vimos lo que era after after the crea un elemento inmediatamente después de la misma forma
que existe after.
Existe uno que se llama CIFOR y te permite crear un elemento antes del del elemento en cuestión.
Por ejemplo aquí tenemos el blog me gustaría que la comilla estuviera aquí por lo tanto va a ser block
out before testimonial Blackout y por qué vamos a ponerles un contén va a estar vacío porque lo vamos
a inyectar por medio de una imagen.
Pero aquí les puedes poner o las digamos para probarlo.
Hola y Guardar cambios y poder.
Hola.
Luego viene el personal.
Este es el segundo elemento porque puede ser que no lo puedo seleccionar después de ver que CIFOR lo
crea antes.
After lo queda después va a estar vacío de nueva cuenta porque va a ser una imagen que vamos a poner
vagaron y Mazz R.L los puntos en una línea diagonal aquí ponemos comillas a punto ese es un archivo
que va a estar disponible ahora si guardas cambios pues el que no se ve nada.
Esto pasa porque bueno este es un pseudo elemento tenemos que decirle cuánto va a medir el trasforman
no sabe lo que viene siendo la hoja de estilos.
Por lo tanto aquí ponemos UIT-T 4 Reem y Jaitt 4 ram.
Ahora estoy dando un ancho y un alto por lo tanto requiere un display Blok guardamos cambios abrimos
el proyecto y puede ser que aparecen las comillas pero necesito posicionarla junto al texto puede ser
que aquí está junto al texto sea eliminar esta parte de este display y para ello vamos a utilizar lo
que se conoce como posición absoluta y relativa es un tema un poco complicado de entender.
Por lo tanto vamos a hacerlo un poco más práctico.
Puedes ver que tenemos aquí el Bloc.
Por lo tanto copio este texto de aquí y voy a poner aquí posición relativa.
Y acabar en una posición absoluta ahorita lo vemos bien para que sepas bien cuándo utilizarlo y cómo
utilizarlo entonces guardamos cambios y abrimos el proyecto desde el que aparecen las comillas.
Si me meto aquí a inspeccionar el código inspeccionó este elemento del que tengo el Bloc 4 el Bloc que
viene siendo el padre de la comilla si lo haces un poco más grande puede ser que se Difonso.
A pesar de que dice CIFOR no se crea antes de esta etiqueta sino se crea aquí al inicio.
Por lo tanto este before viene siendo un hijo del blog Cott.
Siempre que juegas con posición relativa y absoluta el padre el elemento padre debe tener una posición
relativa.
Es sólo para decirle al navegador ok ponlo en posición relativa y no cambia su posición por default
posición relativa no cambia nada pero esto ya le dice al navegador en qué coordenadas en qué lugar se
encuentra ubicado este elemento después al hijo que quieres posicionarlo pones en absoluto y éste posición
absoluta te permite acceder a otras propiedades que se conocen como TEP top left Boron right no necesitas
utilizar todas solamente las que necesites.
Por ejemplo puedo eliminar estas aquí y digamos que voy a utilizar top o poner aquí top y ponerle un
píxel.
Entonces puedes ver que lo posicionan un píxel de lo que viene siendo mi blog quoted la parte del Ruocco
va a ser la parte que está dentro de lo anaranjado.
Entonces lo va a posicionar en un pixel puedes ponerle cantidades positivas si lo ves recorriendo hacia
abajo porque detecta cuál es la parte de arriba del bloqueo y dice OK me posiciona arriba y de ahí tomó
20 píxeles y me voy corriendo hacia abajo ahora de la misma forma que tienes estos 20 puedes tener menos
20 y eso va a ser ok me posicionó arriba y de ahí me coloco 20 pixeles más hacia arriba por lo tanto
el elemento se recorre hacia arriba algo que no puedes hacer solamente con Margin o con patines.
Es esta parte de aquí esta parte composición relatividad absoluta va a permitir posicionar un elemento
en un lugar en específico.
Ahora cuál es la importancia de que el padre tenga posición relativa si no lo tiene.
Puedes ver que nuestro elemento se ha ido se va a posicionar aquí arriba hasta arriba porque va a tomar
como referencia la página completa.
Es importante que coloques posición relativa en el padre posición absoluta en el hijo y utilices estas
propiedades que están aquí volver hacia abajo primer paso para poderlo posicionar bienes.
Este blog.
Le voy a agregar un página a la izquierda para poner 5 Rubem eso va a ser lo puedes ver como que no
empuja el bloqueo.
Tenemos este espacio entonces aquí es donde quiero posicionar mi coma mi comilla voy a seleccionar de
nueva cuenta lo que viene siendo el before.
Aquí por ejemplo puedo ponerle la cuenta seleccionar en esta parte puedo poner por ejemplo Top y lo
voy a dejar como cero es el default y el Leff lo va a poner por ejemplo 20 píxeles.
Puedes ver que mientras más voy agregando valores se va posicionando es decir píxel por pixel o ir agregando
un valor para posicionarlo correctamente.
En mi caso el valor que me gustó fue de menos 2 Reem que serían menos 20 píxeles es decir toma como
referencia esta parte de aquí se posiciona 20 píxeles hacia atrás vamos a ver copiar aquí va a ser Leff
menos RAM con eso suficiente entonces de que se ve bastante bien y lo que viene siendo el blog.
Para finalizar debe tener un fondo waited de 300 lo de trabajar un poco más delgada pues es que se ve
bastante bien tenemos lista esta parte también y se ve bastante genial.
Entonces recuerda lo que son los elementos pseudo elementos Before after before lo crea antes del contenido
de ese elemento.
After lo crea después de ese elemento y no son elementos como tal son pseudo elementos no los puedes
seleccionar y no son parte en realidad del HTML además posición relativa absoluto.
Siendo honestos cada cinco proyectos que hago lo utilizo se utiliza poco pero en algunos casos como
en éste puede llegar a ser muy útil para posicionar un elemento exactamente en un lugar en el siguiente
vídeo vamos a finalizar ya esta página principal estaremos trabajando con el Führer así que veámoslo
en el siguiente vídeo.