Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

haga lo que hicimos en aula

por Marcelo Alberto Yubano Guerrero
| 75.6k xp | 53 posts
  1. Personalizando el pie de página de tu sitio web html

    Desarrollado por Marcelo Yubano

css .footer { background-color: #22D4FD; /* Fondo azul claro / color: #000000; / Texto en negro / text-align: center; / Texto centrado / font-family: 'Montserrat', sans-serif; / Fuente Montserrat / font-size: 24px; / Tamaño de fuente / font-weight: 400; / Peso de la fuente / padding: 24px; / Espaciado de 24px */ }

  1. Ajustando el espaciado interno de la presentación .presentacion { padding: 5%; }

  2. Eliminando el height para adaptar el diseño body { margin: 0; font-family: 'Montserrat', sans-serif; }

  3. Estilizando el encabezado con CSS html

    Home Sobre mí

css .cabecera { padding: 20px; background-color: #f5f5f5; }

.cabecera__menu { display: flex; gap: 20px; justify-content: center; }

.cabecera__menu__link { font-size: 18px; color: #000000; text-decoration: none; padding: 10px 15px; transition: color 0.3s ease; }

.cabecera__menu__link:hover { color: #22D4FD; }

  1. Ajustando el espaciado interno de los enlaces .cabecera__menu__link { font-size: 18px; color: #000000; text-decoration: none; padding: 15px 25px; transition: color 0.3s ease; }
1 respuesta
por Brenda Souza
| 5752.4k xp | 20854 posts
Instructor

Hola Marcelo, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en personalizar diferentes partes de tu sitio web. Veamos cada uno de los puntos que mencionaste:

  1. Pie de página personalizado: Tu código HTML y CSS para el pie de página se ve bien. Has especificado un fondo azul claro y texto negro, lo cual debería funcionar correctamente. Si quieres ver cómo se ve, asegúrate de que el archivo CSS esté correctamente vinculado a tu HTML.

  2. Ajuste de espaciado interno de la presentación: Has aplicado un padding del 5% a la clase .presentacion, lo cual es una buena manera de asegurarte de que haya un espaciado uniforme alrededor del contenido. Solo asegúrate de que la clase .presentacion esté aplicada al elemento correcto en tu HTML.

  3. Eliminación del height para adaptar el diseño: Al eliminar el height, permites que el contenido se ajuste automáticamente según su tamaño. Esto es útil para un diseño más flexible y adaptable.

  4. Estilización del encabezado con CSS: Tu encabezado parece estar bien estructurado. La clase .cabecera__menu utiliza flexbox para centrar los enlaces, lo cual es una excelente práctica. Además, el efecto hover en los enlaces añade una interacción agradable.

  5. Ajuste del espaciado interno de los enlaces: Has aumentado el padding de los enlaces para mejorar el espaciado interno. Esto debería hacer que los enlaces sean más fáciles de hacer clic y mejorar la experiencia del usuario.

Si estás buscando replicar exactamente lo que hicimos en clase, asegúrate de que todos los elementos y clases estén correctamente implementados y vinculados. Puedes probar el código en un entorno local o en un editor en línea como CodePen para ver los resultados en tiempo real.

Espero que esto te haya ayudado y que puedas continuar mejorando tu sitio web. ¡Bons estudos!