<!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.css">
</head>
<body>
<!-- Encabezado -->
<header class="header">
<nav class="nav">
<a href="#inicio" class="nav__link">Inicio</a>
<a href="#regalo" class="nav__link">Página de Regalo</a>
<a href="#tiendita" class="nav__link">Tiendita</a>
<a href="#favoritos" class="nav__link">Favoritos</a>
</nav>
</header>
<!-- Sección de Inicio -->
<main id="inicio" class="contenido">
<h1>Bienvenido a mi sitio web</h1>
<p>Explora los diferentes proyectos que he creado para practicar HTML y CSS.</p>
</main>
<!-- Página de Regalo -->
<section id="regalo" class="contenido">
<header>
<h1>¡Feliz [Ocasión], [Nombre]!</h1>
</header>
<main>
<section class="galeria">
<h2>Galería de Fotos</h2>
<img src="foto1.jpg" alt="Foto 1">
<img src="foto2.jpg" alt="Foto 2">
</section>
<section class="mensaje">
<h2>Un Mensaje Especial</h2>
<p>[Escribe aquí un mensaje emotivo para la persona]</p>
</section>
<section class="enlaces">
<h2>Enlaces a Cosas que Te Gustan</h2>
<a href="https://enlace1.com">Enlace 1</a>
<a href="https://enlace2.com">Enlace 2</a>
</section>
</main>
</section>
<!-- Tiendita -->
<section id="tiendita" class="contenido">
<header>
<h1>Tiendita de [Marca Ficticia]</h1>
</header>
<main>
<section class="productos">
<div class="producto">
<img src="producto1.jpg" alt="Producto 1">
<h2>Producto 1</h2>
<p>Descripción breve del producto 1.</p>
<p>$20.00</p>
</div>
<div class="producto">
<img src="producto2.jpg" alt="Producto 2">
<h2>Producto 2</h2>
<p>Descripción breve del producto 2.</p>
<p>$30.00</p>
</div>
<!-- Más productos -->
</section>
</main>
</section>
<!-- Página de Favoritos -->
<section id="favoritos" class="contenido">
<header>
<h1>Mis Favoritos</h1>
</header>
<main>
<section class="favoritos">
<h2>Películas</h2>
<ul>
<li><a href="https://enlace-pelicula1.com">Película 1</a></li>
<li><a href="https://enlace-pelicula2.com">Película 2</a></li>
</ul>
</section>
<section class="favoritos">
<h2>Música</h2>
<ul>
<li><a href="https://enlace-musica1.com">Canción 1</a></li>
<li><a href="https://enlace-musica2.com">Canción 2</a></li>
</ul>
</section>
</main>
</section>
<!-- Pie de página -->
<footer class="footer">
<p>© 2024 Luis Eduardo Arocha Coronado</p>
</footer>
</body>
</html>
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f8ff;
}
.header {
background-color: #22D4FD;
padding: 16px;
}
.nav {
display: flex;
justify-content: center;
gap: 24px;
}
.nav__link {
font-size: 18px;
color: #333;
text-decoration: none;
padding: 8px 16px;
transition: color 0.3s;
}
.nav__link:hover {
color: #007BFF;
}
.contenido {
padding: 20px;
}
.galeria img,
.producto img {
width: 100%;
max-width: 300px;
margin: 10px;
}
.enlaces a,
.favoritos a {
color: #1e90ff;
text-decoration: none;
}
.favoritos ul {
list-style-type: none;
padding: 0;
}
.favoritos li {
margin-bottom: 10px;
}
footer {
background-color: #22D4FD;
color: #000000;
text-align: center;
padding: 24px;
}
