Guia de uso de after y diseño de los cards de la página web

1. DISEÑO PERSONALIZADO DE
PAGINA WEB – PARTE 1
Decorar con before y after

2. Saludo
Hola de nuevo Teilur! Nos alegra muchísimo que
hayas llegado a este punto.
Solo queríamos recordarte lo valioso que eres
para nosotros y decirte: Ánimo, sigue así, lo estás
haciendo perfecto.

3. En la guía anterior habías agregado estilos al
elemento p. Habías quedado en esta instrucción:
Continuaremos con el diseño

4. Pseudo elementos before y after
En inglés before significa antes y after significa
después.
Antes de continuar revisa en detalle los pseudo
elementos before y after. Para ello, analiza el
video citado arriba antes de iniciar esta
presentación.

5. Ya aclarados estos conceptos, ve a la página web
que estamos creando, veras que el elemento o
elementos que has nombrado con la clase .after
tienen el siguiente aspecto:

8. Sigue trabajando en el archivo estilos.css
Paso 1: Vamos a usar el pseudo elemento :after que
significa ‘después’. Eso quiere decir que para los
fragmentos de html que se les agregue este estilo,
aparecerá aquello que nosotros queramos justo
después de ese fragmento html.
En nuestro caso, los fragmentos html en cuestión
tienen la clase “decorativo” y por tanto, lo que
queremos agregar con ‘after’ aparecerá ‘después de’
estos fragmentos.

9. Los fragmentos que están bautizados con la clase
“decorativo”, son: “Conoce la gente asombrosa y
creativa”; “Siempre mejorando para ti”; “Hacemos
de algo simple algo extraordinario”. Corresponden a
un solo elemento que es p en el index.html.
Es posible que hayas cambiado estos textos
anteriormente, así que solo busca (Ctrl F) en el html
la palabra “decorativo”.

10. Fragmento código html clase “decorativo”

11. Como puede verse en la captura anterior, esas líneas
están en el index.html y tienen el nombre de clase
“decorativo”.
Bueno, lo que vamos a agregar después de esas p es
una caja de color naranja, tan delgada que parece una
línea. Parece mucho trabajo para agregar una simple
línea decorativa, pero realmente añade mucho más
estilo o caché a nuestra diseño web.

12. Esa caja (que se parecerá a una línea gruesa), se
visualizará en bloque (display:block) es decir
ocupará su propia línea independiente, centrada
(margin: auto), tendrá un ancho de 100 px (width:
100px), y la altura será tan pequeña (height: 2px)
que como ya dijimos no parecerá una caja sino
una línea gruesa.

13. Además esa caja tendrá un fondo ‘background: var(--
color1))’ cuyo color está almacenado al principio del
css en la variable –color1 que originalmente era
naranja. Es posible que, ya antes, lo hayas cambiado a
un color de tu gusto.
Digita lo siguiente en tu archivo css:

15. Ahora vas a centrar tu atención en el div
principal de la página y los div que se derivan
de él (o div hijos). El div principal se llama con
la clase “card”. Así aparece en el index.html.
Los div que se derivan de él tienen el nombre
de clase “content-card”. Si revisas el
index.html lo verás así:
Trabajando con el div principal de la página
y sus div hijos

17. Ahora ve a tu archivo estilos.css y digita lo
siguiente debajo de las líneas que ya habías
digitado según el punto 1:

19. Si vas al index.html notarás que hay unas
divisiones (div) específicas para contener las
imágenes utilizadas, en este caso son las imágenes
de unas personas o avatares:
Trabajando en los div donde están las
imágenes

21. A estos div se les ha bautizado con la clase people. Es posible
que en ejercicios de creatividad anteriores, hayas cambiado
esas imágenes de personas o avatares (people) por imágenes
de tu gusto o referentes al tema de su página web.
Cada caja o contenedor tendrá una sub caja o sub contenedor.
A su vez, esa sub caja o sub contenedor no ocupará toda la
altura de la principal sino el 80% (height: 80%). Por otra parte,
cada imagen ocupará el 100% tanto en ancho como en alto de
la sub caja donde está insertada. Digita las siguientes líneas de
código en estilos.css:

23. En el index.html cambia los títulos <h3>, si aún no lo
has hecho, (‘Nuestro Equipo’, ‘Nuestros Servicios’,
‘Nuestro Trabajo’) por títulos de tu gusto, acordes
con el tema de la página web que está creando.
A su vez, notarás que cada imagen de people en el
html va acompañada de las letras K, C y M, y los
textos Lorem ipsum dolor sit.

25. Cambia esas letras por textos descriptivos más
acordes con el tema de tu página web, si aún no lo
habías hecho.
Guarda y revisa los cambios en el navegador web.
Es importante que sigas colocando comentarios en
tus líneas css.
Nos vemos en el próximo paso, Teilur!!