<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Principal</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- Encabezado estilizado -->
<header class="header">
<nav class="nav">
<a href="index.html" class="nav__link">Home</a>
<a href="about.html" class="nav__link">Sobre mí</a>
</nav>
</header>
<!-- Contenido principal -->
<main class="contenido">
<h1>Bienvenido a mi sitio web</h1>
<p>Contenido de ejemplo...</p>
</main>
<!-- Pie de página estilizado -->
<footer class="footer">
<p>© 2024 Luis Eduardo Arocha Coronado</p>
</footer>
</body>
</html>
<!-- Página "Sobre mí" -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sobre mí</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- Encabezado reutilizado -->
<header class="header">
<nav class="nav">
<a href="index.html" class="nav__link">Home</a>
<a href="about.html" class="nav__link">Sobre mí</a>
</nav>
</header>
<!-- Contenido principal de "Sobre mí" -->
<main class="contenido">
<h1>Sobre mí</h1>
<p>Información sobre mí...</p>
</main>
<!-- Pie de página reutilizado -->
<footer class="footer">
<p>© 2024 Luis Eduardo Arocha Coronado</p>
</footer>
</body>
</html>
body {
font-family: 'Montserrat', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.header {
background-color: #22D4FD; /* Fondo del encabezado */
padding: 16px; /* Padding del encabezado */
}
.nav {
display: flex; /* Alinea los enlaces horizontalmente */
justify-content: center; /* Centra los enlaces horizontalmente */
gap: 24px; /* Espacio entre los enlaces */
}
.nav__link {
font-size: 18px; /* Tamaño de fuente */
color: #333; /* Color del texto */
text-decoration: none; /* Sin subrayado */
padding: 8px 16px; /* Espaciado interno de los enlaces */
transition: color 0.3s; /* Transición suave para el hover */
}
.nav__link:hover {
color: #007BFF; /* Cambia el color al pasar el ratón */
}
.footer {
background-color: #22D4FD;
color: #000000;
text-align: center;
padding: 24px;
}
/* Agregar espaciado al contenido para alinearlo con el encabezado */
.contenido {
padding: 20px; /* Ajusta el padding según sea necesario */
}
