Pagina WEB Con Sublime Text & CSS
Pagina WEB Con Sublime Text & CSS
2. Una vez ubicada la carpeta de XAMPP la abriremos y localizaremos la carpeta htdocs, ahí se
generará una nueva carpeta que será la que almacenará nuestro proyecto web (pon el
nombre que desees).
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
3. Una vez generada la carpeta almacenadora de nuestro proyecto, debemos activar apache
en XAMPP, y se activa la casilla de “star”, hasta que esté de color verde.
4. Una vez que esta activado APACHE abriremos el explorador para comprobar que esta activo,
dentro de la barra de direcciones pondremos: localhost y aparecerá como se muestra en la
imagen, carga la pagina de XAMPP porque aun no hemos generado nuestro proyecto.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
6. Para iniciar nuestro proyecto abriremos Sublime Text; File → Open Folder →
c:/xampp/htdocs/carpeta_proyecto, y seguidos damos seleccionar carpeta, posteriormente
se abrirá una pestaña ya con nuestro proyecto activado.
7. Debemos conocer que HTML es un lenguaje web basado en etiquetas y se representan: <>
etiqueta abierta, </> etiqueta cerrada. Ej. <body> </body>
8. Seguiremos generando nuestro archivo html, dando clic derecho en
nuestra carpeta del proyecto ubicada en la parte izquierda de
nuestro sublime text.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
9. Posteriormente nos abrirá una pestaña nueva, donde deberemos poner nuestro index.html,
como sabemos será nuestra página principal (pag. Contenedora),
Antes de seguir para realizar nuestro primer proyecto debemos instalar el Plugin emmet, el
cual no será muy útil para autocompletar muchas instrucciones y etiquetas en nuestro
código, la ruta es: Tools -> Command Palette -> Package Control -> Install
10. Una vez instalado el plugin, procedemos a realizar nuestro esquema de código, ponemos lo
siguiente: ! seguido de la tecla TAB y nos autocompletara toda la sintaxis básica de HTML.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Segunda Línea: Esta la etiqueta html <html lang="es">, dentro estará todo el diseño
de nuestra página web, la instrucción Lang nos esta indicando que estamos usando
el lenguaje español.
Como podrás ver tiene los puntos como viñetas y el subrayado, vamos a proseguir a
quitarlos, para esto hay que crear un nuevo archivo tipo CSS, de la misma manera que se
generó el index, se llamara: main.css
Los estilos de CSS se deberán estar referenciados dentro de la etiqueta <head>, se creará
una etiqueta <link>, <link rel="stylesheet" href="main.css">, indicando que ligue a la
referencia de la hoja de estilo CSS, el cual fue generado como main.css.
Nos brincamos a la pestaña main.css para darle el estilo a nuestro menú; en primer termino
le quitaremos los márgenes que nos da el explorador predefinido como se muestra en la
imagen: *: indica que deberá aplicarse a todo el cuerpo de la página, *{margin: 0; border: 0;}
Ahora retiraremos los puntos de las viñetas de nuestro menú, los cuales fueron creados por
la etiqueta <li>, y tendremos irnos a editar esa etiqueta, regresamos a la pestaña de
main.css y agregamos como lo mostramos en la imagen:
Guardamos Ctrl+s
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Ahora como verán están subrayados, debemos quitárselos y este atributo lo genera la
etiqueta <a>, por lo tanto, nos vamos nuevamente a la pestaña de main.css y le realizamos
la edición como se muestra en la imagen:
Ctrl+s : Guardar
Ahora editaremos la etiqueta <nav>, con el fin de ponerle un fondo para que vaya tomando
un buen diseño, nos regresamos a la pestaña de main.css y llamamos la etiqueta de la
siguiente manera:
Ahí elegimos el código del color que mas nos agrade, en este caso el código: #341198
corresponde al color azul, el cual se mostrara como fondo de nuestro menú.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Y una ves guardado el cambio nos vamos al navegador para visualizar lo generado:
vemos como la etiqueta <nav> sufrió el cambio.
Como podemos ver el color del texto se pierde, por lo que procederemos a realizarle una
edición al texto cambiándolo de color, así como alinearlos quitando estar uno encima del
otro, para este último, nos vamos a la pestaña del main.css y agregamos esos atributos a la
etiqueta <li> de la siguiente manera:
Ahora para cambiarle el color nos vamos a la etiqueta <a> y agregamos el siguiente atributo:
color: #ffffff, representando este código el color blanco.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
A la etiqueta <nav> se le aplicaran un padding (20 px), lo que significa hacer más grande el
recuadro azul que tiene nuestro menú, haciéndolo de la siguiente manera y actualizando el
navegador vemos el resultado:
Ahora para hacerlo más estético, queremos separar el menú un poco más, ramos al main.css
en la etiqueta <a> y le aplicamos también un padding (20px), con las mismas dimensiones
de PX, quedando de la siguiente forma:
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Dentro de la etiqueta <body> se generará otra como Titulo <h1></h1> y quedara ubicado
de la siguiente manera dentro de nuestra pestaña de index.html:
Ahora nos regresamos a la pestaña main.css y le daremos formato a la etiqueta <h1> color,
tamaño y tipo de letra. El color por el #codigo es blanco el texto, Font-size; tamaño de 30px
y la alineación; text-align-lasts centrado
Complemento: para darle el tipo de letra nos apoyamos con los estilos que Google Fonts
nos ofrece en línea, así como el código disponible, ingresamos a la página
http://fonts.google.com/ y ahí nos proveerá de distintos estilos para que elijamos la que
más nos guste.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Se elige y se le da click en el icono de + y se abrirá una pestaña como la imagen, ahí nos
dará el código con el que haremos el link para que nos aplique el estilo elegido, así como las
especificaciones que pondremos en la pestaña de main.css.
Se guarda Ctrl+s, actualizamos nuestro navegador y se ve como queda nuestro titulo <h1>
con las propiedades que le asignamos.
Se observa que el titulo se ve pequeño, le daremos más tamaño solo yéndonos a la pestaña
main.css y aumentamos el numero para afectar el tamaño. Font-size: 50px
Y para darle mejor orden separamos el título del recuadro del menú aplicándole un padding
(20px).
13. En este paso agregaremos imágenes que sirvan de enlace para otro frame, donde
busquemos dividir dos opciones para el visitante, por lo que para realizar esta actividad hay
que generar una carpeta con el Nombre de: imagen, para ahí almacenar por el momento 2
y cumplir con la práctica, tu puedes agregar las que más te convengan según tu diseño.
Seguimos creando una etiqueta <div> dentro del <body> asignándole una clase contendor
(<div class="contenedor">), dentro de, se generarán dos enlaces que vendrán a llamar las
fotos desde la carpeta imagen, y será una etiqueta <a>, dentro de, una etiqueta imagen
<img> habrá un atributo src que servirá de enlace y que nos direccionara a la carpeta
imagen, pondremos seguido la diagonal inversa (/) seguido del nombre de la imagen,
quedando el código como se ve en la imagen:
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Para darle más presentación se aplicarán estilos con el propósito de ponerlas más pequeñas
y centradas.
Para esto nos vamos a la pestaña de main.css y llamamos la clase contenedor (.contenedor)
le daremos un ancho (width) del 80%, un margen automático (margin: auto).
A las imágenes se les dará un ancho y alto en la etiqueta img (width: 500px).
Ahora daremos más presentación a nuestras imágenes, pondremos una a lado de la otra
aplicándole mas estilos, vamos a la pestaña de main.css para darle las propiedades a la clase
.contenedor aplicándole un display y justificación del contenido, como se muestra en la
figura:
Posteriormente se les asignara un subtitulo a cada una de las imágenes, para realizar esto
vamos a colocar a cada imagen dentro de una etiqueta <div> y dentro de cada etiqueta
<div> pondremos una <h2> (subtítulos), y a esos subtítulos le pondremos “Hombre” “Mujer”
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Ahora nos brincamos a la pestaña de main.css para darle estilos a eso subtítulos, primero
llamamos la etiqueta <h2> y aplicamos un text-aline: center (centrarlo), un margen
automático, y un color de fondo (back ground) con el patrón rgba (rojo, verde, azul,
transparencia),
Si queremos homologar la letra del título con los subtítulos solo agregamos el enlace de
Google-fonts que ya tenemos, font-family: 'Satisfy', cursive; quedando de esta manera
dentro del main.css para la etiqueta <h2> :
h2{text-align-last: center; margin: auto; background-color: rgba(250, 250, 250, .5); width:
350px; padding: 10px; font-family: 'Satisfy', cursive;}
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
14. Ahora generaremos los frames para direccionar nuestras imágenes haciendo la vinculación
de los subtítulos <h2> : “Hombres” / “Mujeres”.
Nos posicionamos en la barra izquierda y damos click derecho para generar Nuevo Archivo:
Le pondremos como Nombre “hombres.html”
Iniciamos a editar nuestra sintaxis básica con la etiqueta de <tittle>, poniéndole “Ropa para
Hombre”
Después de la etiqueta <nav> pondremos otra <h1> con el nombre de “Ropa para
Hombres”, después una etiqueta más <div> donde estará teniendo las imágenes, y dentro
generamos una clase que se llame: “class=”imágenes” en donde pondremos 5 imágenes
que deberás tener en la carpeta IMÁGENES que anteriormente generamos, quedando el
código de la siguiente manera:
Para darle el mismo estilo de la pagina inicial (index.html) ponemos el estilo css en el frame
de hombres dentro de la etiqueta <head>
Ctrl+s, y nos vamos a actualizar el navegador para visualizar los estilos asignados a la clase
e imágenes.
En este proceso iniciamos a vincular el menú que arrastramos desde el index.html, para
esto, nos posicionamos en la pestaña de hombres y dentro de la etiqueta <ul>, en el primer
“href” (referencia), de inicio le ponemos que nos mande a: index.html para regresarnos a
la página principal.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Ahora nos daremos a la tarea de hacer el mismo proceso con el frame de “Mujeres”, nos
vamos a la barra izquierda y damos click derecho para generar Nuevo Archivo, ponemos
como nombre mujeres.html guardamos e iniciamos el mismo proceso anterior.
Y para realizar el mismo proceso de regresarnos al inico mediante el menú, agregamos lo siguiente
dentro del href del Inicio: <li><a href="index.html">Inicio</a></li>.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
15. Ahora después de haber realizado los catálogos de la ropa de Hombre-Mujer, y con el link
al inicio, haremos la parte del footer, nos ubicamos antes de finalzar el body, se genera la
etiqueta <footer></footer> dentro de esta, generamos una <div></div>, una para
información de derechos de autor y otra para las redes sociales y contacto, y generamos el
código como sigue: una etiqueta con clase copy y otra con redes:
Dentro de la primera eqtique <div> con clase copy pondremos dos párrafos: 1 con “todos los
derechos reservados” la otra generaremos el símbolo de Copyrigt y esto lo generamos poniendo el
símbolo & seguido de la palabra copy y cerrado por el punto y coma (©), seguido le pondremos
el nombre de la página (©fashion):
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Ahora en la etiqueta donde esta la clase redes pondremos tres etiquetas de párrafos <p></p> con
enlace “href”, donde se pondrán “Facebook” “Instagram” “Twitter”;
Ctrol+s Guardamos y nos vamos a actualizar nuestro navegador y queda de la siguiente manera:
Ahora le daremos el estilo a nuestro footer nos brincamos a la pestaña de main.css y llamamos a la
etiqueta <footer>, para iniciar a darle estilo, podremos un tamaño, fondo y espaciado adecuado
para estilizar nuestra presentación:
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Actualizamos nuestro navegador y vemos que aun falta darle estilo a nuestro parramos, a los que
les daremos un color de texto (blanco al copy) y un padding vertical y horizontal y queda de la
siguiente manera:
Al footer se le agregara una alineación para ir estilizando nuestro proyecto, alinearemos de manera
vertical nuestros ítems del footer
Ahora iremos con el párrafo de las redes sociales, para igualar los estilos del copy, aplicaremos el
estilo pertinente como se ve:
Ahora le pondremos la ruta adecuada de nuestras redes sociales, cargaremos cada una de ellas en
el navegador y copiaremos la url correcta, nos ubicamos en la pestaña de index.html para pegar la
ruta dentro del “href” :
Pero si vemos que al darle a los enlaces de las redes sociales nos cierra la pagina principal de nuestro
proyecto, para corregir esto daremos la indicación de que abra una nueva pestaña en el navegador
con una instrucción “target” y queda de la siguiente manera:
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Pero cuando actualizamos el navegador con estas acciones aplicadas, el footer de posiciona en un
lugar no muy adecuado, entonces procederemos a darle la indicación que siempre se deberá
posicionar hasta la parte inferior de cada pagina.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Posteriormente enlazaremos los estilos de la pestaña main.css, con el propósito de tomar los estilos
que pondremos en este frame.
Ahora enlazaremos noticias.html dentro del index.html, para ir vinculando nuestros menús.
Ahora generaremos en noticias.html, una etiqueta <div> con una clase noticias, dentro de <body>,
ahí habrá 4 secciones tipo: <div>:
Dentro de cada <div> generaremos una clase imagen (<img src=” “ alt “ “>), además de una clase
descripción (<div class=“desc”>).
Para esto ya tenemos ubicado de donde iremos a visitar las noticias, para tener ya visualizadas las
imágenes que descargaremos a la carpeta contenedora de las imágenes.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Ya una vez guardadas en la carpeta las mandaremos llamar en cada clase para que se muestren en
cada una de las etiquetas creadas.
Posteriormente a cada una de las clases imagen las pondremos dentro de una etiqueta <a> </a>
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Dentro de la clase descripción (<div class=”desc”>) hay que agregar una etiqueta de título <tittle> y
párrafo <p>,
Seguido nos vamos a la pagina de donde extraeremos las noticias referente a las imágenes
descargadas y copiamos los títulos para copiarlo en la etiqueta <h1>,
Así de manera consecutiva a cada uno de las etiquetas <h1> de cada imagen.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
De manera seguida copiamos el párrafo en la etiqueta <p>, desde la pagina de noticias a la que
haremos el link.
De igual manera que el titulo nos vamos a la etiqueta <p> para pegar el contenido del párrafo:
Así de la misma manera hacemos el copiado y pegado de los títulos y párrafos en cada una de las
imágenes.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Si actualizamos el navegador una ves que guardamos todas las modificaciones y estilos que
aplicamos, nos queda un poco desorganizada, por lo que procederemos a darle los estilos para que
se visualice de mejor manera.
Como en todas las paginas o archivos que estamos generando, pondremos el footer para que vaya
dándose mas estandarización, para esto nos vamos a index.html y copiamos el código:
Seguidos nos vamos a main.html para aplicarle al <body> una posición relativa (position = relative;),
para que se aplique al final el footer como en las demás paginas.
Cada imagen tiene un “desc” , y nos iremos al main.css para aplicar estilos, llamamos la clase:
<div.noticias>, para darle mejor presentación a nuestra página “noticias”.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Agregaremos además un “flex-wrape”, esto para acomodar cada imagen de manera consecutiva si
no cabe en la pagina y evitar generar una barra de desplazamiento horizontalmente.
Ahora los <div.noticias div> le daremos una edición de los anchos y altos para darle mejor
presentación, los textos y párrafos también tendrán su estilo:
Modificamos también el margen que tiene el titulo debajo de la imagen para verlo mas estilizado:
Ahora el espaciado entre el titulo y el párrafo también se ve que esta muy amplio hay que aplicarle
un margen también.
Para hacerlo más atractivo podemos ponerle a la imagen, titulo y párrafo un fondo blanco.
Posteriormente podemos aplicarle un “padding” para que no queden tan pegados el titulo y el
párrafo.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Pero vemos que nuestras imágenes, títulos y párrafos están centrados, pero no alineados arriba por
lo que quitaremos el estilo que le dimos (align-items: center;),
Ahora le daremos el enlace a cada noticia hacia donde esta realmente esa información, damos clik
derecho en la imagen y seleccionamos copiar dirección de enlace, para esto nos regresamos a
noticias.html y nos posicionamos en la etiqueta <a href=” “ y dentro de las comillas pegamos la
dirección del enlace que copiamos.
De esa misma manera haremos con todas las demás imágenes de nuestras noticias.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Pero como en las demás enlaces externos que hacemos, vemos que se nos cierra la pagina inicial,
por lo que le daremos que al linkear la imagen de la noticia me la envié a otra pestaña sin cerrar la
nuestra, y para esto daremos un target. Posicionándolo después de la ruta de enlace.
De manera similar haremos para todos los enlaces de las imágenes que tenemos de nuestras
noticias.
Además agregaremos un titulo antes de la sección o etiqueta de noticias y que tenga un titulo
“Noticias Actuales”
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
18. Seguiremos dándole estilos a nuestra página, ahora pondremos los iconos que vendrán a
darle presentación a nuestro sitio, visitamos la pagina “fontello.com”, descargaremos de
ahí los iconos de Facebook, Instagram y Twiter.
Una vez que los seleccionamos nos brincamos a la pestaña “Customiza names”, donde tenemos
los iconos elegidos para descargar, y damos click al icono “Download webfont”,
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Una vez que le dimos en descargar arrojara un zip donde este contenido lo que vamos a
necesitar, abrimos el zip, ubicamos la carpeta Font y la abrimos, necesitaremos esa carpeta.
De ahí buscamos la carpeta CSS que esta dentro de nuestra carpeta raíz del proyecto,
Si nos regresamos a Sublime Text, visualizamos en la parte izquierda donde esta el contenedor
de nuestras carpetas, ya existen lo que descargamos en el proceso anterior.
Y para llamar lo que acabamos de descargar, nos ubicamos en la pestaña de “index.html” y nos
posicionamos en la etiqueta <head> para linkear el css descargado.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Haremos el mismo proceso en todos los archivos .html que tenemos en nuestro proyecto.
Noticias mujeres
Una ves que ya tenemos linkeado “fontello.css” en todas nuestros .html nos regresamos al
“index.html” para sustituir el nombre de nuestras redes sociales por el icono que descargamos.
vamos a quitar los nombres, y ahí vamos a general una etiqueta <span></span> esta llevara una
clase en la que contendrá el icono descargado, llamando la clase “.icon-facebook” y así
sucesivamente con las otras redes sociales.
Y de la misma manera haremos este proceso con los archivos .html que tengan el footer
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
19. Ahora estaremos generando la pagina de Contacto y para esto nos posicionamos en la parte
izquierda de Sublime text y seleccionamos la carpeta principal, damos click derecho para
generar un nuevo archivo, y se nos abrirá una pestaña nueva y le pondremos contacto.html,
Ctrl+s para guardarlo y se genere la página.
En este apartado de contacto utilizaremos el apoyo de Bootstrap para darle mejores estilos en
CSS, para esto nos vamos a “getbootstrap.com” -> Documentación -> CSS, y copiamos el enlace
que nos proporcionan (ver imagen).
Hecho esto ahora generaremos un formulario de contacto para enviar correos o mensajes al autor
de la página, se generara una etiqueta <form></form> dentro del cuerpo y antes de la etiqueta
<footer> , esa etiqueta form le daremos una acción que nos proporcionara lo que hará, y dentro
generamos unos campos de texto con la etiqueta <input> con un tipo de texto indicándonos que el
campo será de ese tipo, seguido de la propiedad “placeholder” que sirve para mostrar el mensaje
que estará en el cuadro de texto que servirá de guía al usuario, y de manera siguiente hacemos otro
input pero con el tipo de email y poniendo como mensaje guía “correo”, otro para el teléfono, y por
ultimo generamos un textarea este es para poner un mensaje mas amplio, y cerramos generando
una etiqueta <bottom> al que le pondremos “enviar”.
Como visualizamos la imagen del navegador, está presentándose sin estilo, ahora procedemos a
darle mejor presentación, y dentro de cada input aplicamos una clase “font control” y la etiqueta
<form> la ponemos dentro de un <div> para darle el estilo que nos facilito Bootstrap, ponemos una
clase: class = “container”,
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
A la etiqueta <bottom> le aplicaremos una clase, donde le aplicamos estilo y queda como aparece
en la imagen.
Ahora al textarea le aplicaremos un “placeholder” para que también tenga un mensaje guía para el
usuario.
Ese mismo estilo se lo pondremos a todos los inputs para que se vea mejor presentable.
Para hacerlo mas atractivo agregaremos un mapa de Google maps, (maps.google.com), y buscamos
nuestra ciudad y le damos click en la ubicación seleccionada y pondrá una bandera roja,
posteriormente nos vamos al icono de la parte izquierda “compartir”, de ahí nos posicionamos en
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
la ceja de incorporar mapa, y ponemos que no lo incorpore (mediano, chico o grande), y copiamos
la ruta HTML,
Una vez copiado la ruta nos pasamos a la página contacto.html y después de la etiqueta </form>
pondremos el mapa, y vemos que pega la etiqueta <iframe> que es la que contiene la ruta del mapa.
También pondremos un título <p>, para darle mejor estilo, “Encuéntrame aquí”
Y para cerrar, de manera opcional podemos poner información de quien genero la página o datos
personales, esto después del cierre de la etiqueta </iframe>
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
20. En este punto vamos a aplicar estilos CSS de animaciones en nuestro proyecto, nos
posicionamos en main.css buscamos la etiqueta div.contenedor img, lo copiamos y lo
ubicamos debajo de esta, aplicaremos una Pseudo clase “hover” este captura un evento y
lo proyecta, por ejemplo al pasar sobre la imagen o algún otro apartado de nuestro
proyecto, seguido pondremos un filtro “filter: blur” de 10 px, y después en la imagen
contenedora ponemos una transición de 1 seg.
Esta misma pseudo clase se quiere aplicar en el menú de navegación, para esto nos regresamos a
main.css y ubicamos nuestro menú (nav.nav ul li) seguido de ahí copiamos y pegamos en otro
evento. El color que ponemos de fondo es el mismo de nuestro cuerpo principal (#E9B105).
Ahora aplicaremos estos mismos efectos a las imágenes de nuestras noticias, buscamos el
contenedor de esas noticias en el mismo main.css, “div.noticias div img”, lo copiamos y lo pegamos
seguida de esta, aplicaremos un filtro “filter: contrast (70%)” así mismo su transición.
Mtro. Miguel Ángel Gómez Nápoles / Programación para Internet / 2022 / Cuciénega
Y para hacerle mejor presentación aplicamos un efecto de traslación hacia arriba para que tengamos
una mejor exposición de nuestro proyecto.