codigo HTML y CSS
1 - Personalizando el pie de página
footer {
background-color: #22D4FD;
color: #000000;
text-align: center;
padding: 24px;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
2 - Ajustando el espaciado interno
.presentacion {
padding: 5%;
/* Reemplaza el margin con padding */
}
3 - Eliminando el height para adaptar el diseño
body {
/* height: 100vh; /
/ Comentada para que el contenido se adapte a la pantalla */
}
4 - Estilizando el encabezado
header {
display: flex;
justify-content: center; /* Opcional: Centra los enlaces horizontalmente /
align-items: center; / Opcional: Centra los enlaces verticalmente /
padding: 15px; / Ejemplo de espaciado */
}
nav a {
font-size: 16px;
color: black;
text-decoration: none;
margin: 0 10px; /* Espacio entre enlaces /
padding: 5px 10px; / Espaciado interno para hacerlos más clicables */
display: inline-block;
}
nav a:hover {
color: blue; /* Cambia el color al pasar el ratón */
}
Claro, aquí tienes las soluciones a los desafíos de HTML y CSS.
1 - Personalizando el pie de página
Para estilizar el pie de página, usarás un selector de
CSS
footer {
background-color: #22D4FD;
color: #000000;
text-align: center;
padding: 24px;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
2 - Ajustando el espaciado interno
Para cambiar el espaciado de un elemento de margin a padding, simplemente reemplaza la propiedad. Usar un valor de porcentaje (%) para padding es útil para diseños responsivos, ya que el espacio se ajustará al tamaño del contenedor padre.
CSS
.presentacion {
padding: 5%;
/* Reemplaza el margin con padding */
}
3 - Eliminando el height para adaptar el diseño
Eliminar o comentar la propiedad height: 100vh del body es una práctica común para permitir que el contenido de la página fluya de forma natural. Esto asegura que la página se adapte a cualquier cantidad de contenido, incluido el nuevo pie de página.
CSS
body {
/* height: 100vh; /
/ Comentada para que el contenido se adapte a la pantalla */
}
4 - Estilizando el encabezado
Para alinear los enlaces de un encabezado horizontalmente, puedes usar la propiedad display: flex en el contenedor del encabezado (
CSS
header {
display: flex;
justify-content: center; /* Opcional: Centra los enlaces horizontalmente /
align-items: center; / Opcional: Centra los enlaces verticalmente /
padding: 15px; / Ejemplo de espaciado */
}
nav a {
font-size: 16px;
color: black;
text-decoration: none;
margin: 0 10px; /* Espacio entre enlaces /
padding: 5px 10px; / Espaciado interno para hacerlos más clicables */
display: inline-block;
}
nav a:hover {
color: blue; /* Cambia el color al pasar el ratón */
}
5 - Ajustando el espaciado interno de los enlaces
nav a {
/* Otros estilos... /
padding: 10px 15px; / Ejemplo de espaciado interno, ajuste los valores según diseño */
}
