Scribd
Cargar
75 vistas46 páginas

Superposición de Divs en HTML y CSS

El documento detalla la creación de una tienda de ropa y una biblioteca en línea utilizando HTML y CSS, incluyendo la estructura de múltiples páginas y ejemplos de código para cada sección. Se proporciona un esquema de archivos necesario, así como ejemplos de código HTML y CSS para las páginas de inicio, catálogo y detalles de productos y libros. Además, se enfatiza la importancia de un diseño consistente mediante el uso de una hoja de estilos compartida.

Cargado por

jule.vwxyz
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
75 vistas46 páginas

Superposición de Divs en HTML y CSS

El documento detalla la creación de una tienda de ropa y una biblioteca en línea utilizando HTML y CSS, incluyendo la estructura de múltiples páginas y ejemplos de código para cada sección. Se proporciona un esquema de archivos necesario, así como ejemplos de código HTML y CSS para las páginas de inicio, catálogo y detalles de productos y libros. Además, se enfatiza la importancia de un diseño consistente mediante el uso de una hoja de estilos compartida.

Cargado por

jule.vwxyz
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

EJERCITACIÓN HTML Y CSS

1. TIENDA DE ROPA

Construir una tienda de ropa en línea con varias páginas usando solo HTML y CSS implica
crear la estructura básica de cada página y luego estilizarla. Para tener un sitio con
múltiples páginas (como [Link], [Link], [Link], [Link]),
necesitarás lo siguiente:

1. Estructura de Múltiples Páginas (HTML)

Cada página del sitio requiere su propio archivo HTML con la estructura básica, el enlace a
la hoja de estilos ([Link]) y un sistema de navegación para conectar las páginas.

Ejemplo de [Link] (Página de Inicio)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Nombre de la Tienda | Inicio</title>
<link rel="stylesheet" href="[Link]"> </head>
<body>
<header>
<h1>Nombre de la Tienda</h1>
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Productos</a></li> <li><a
href="[Link]">Carrito</a></li> <li><a
href="[Link]">Contacto</a></li> </ul>
</nav>
</header>

<main>
<section class="hero">
<h2>Última Colección</h2>
<p>Descubre las tendencias de esta temporada.</p>
<a href="[Link]" class="button">Ver Productos</a>
</section>

</main>

<footer>
<p>&copy; 2025 Nombre de la Tienda. Todos los derechos
reservados.</p>
</footer>
</body>
</html>

Estructura de otras páginas (ejemplo [Link]) La estructura es similar, pero el


contenido dentro de la etiqueta <main> cambia para listar los productos.
EJERCITACIÓN HTML Y CSS

HTML
<body>
<header>
</header>

<main class="product-list">
<h2>Todos Nuestros Productos</h2>

<div class="product-item">
<img src="img/[Link]" alt="Camisa Clásica">
<h3>Camisa Clásica</h3>
<p class="price">$45.00</p>
<a href="#" class="add-to-cart">Añadir al Carrito</a>
</div>

<div class="product-item">
<img src="img/[Link]" alt="Pantalón Casual">
<h3>Pantalón Casual</h3>
<p class="price">$60.00</p>
<a href="#" class="add-to-cart">Añadir al Carrito</a>
</div>

</main>

<footer>
</footer>
</body>
</html>

2. Estilos Comunes (CSS)

El archivo [Link] es compartido por todas las páginas para mantener un diseño
consistente. Aquí se definen los estilos para la navegación, el pie de página y la
presentación general.

Ejemplo de [Link]

CSS
/* Estilos Globales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f4f4f4;
}

/* Encabezado y Navegación */
header {
background: #333;
color: #fff;
padding: 1em 0;
text-align: center;
EJERCITACIÓN HTML Y CSS

header h1 {
margin-bottom: 0.5em;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}

nav ul li a {
color: #fff;
text-decoration: none;
padding: 0.5em 1em;
display: block;
}

nav ul li a:hover {
background: #555;
}

/* Contenido Principal */
main {
padding: 20px;
}

/* Pie de Página */
footer {
text-align: center;
padding: 1em 0;
background: #333;
color: #fff;
margin-top: 20px;
}

/* Estilos Específicos para la lista de productos (en [Link]) */


.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}

.product-item {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
width: 250px;
}

.product-item img {
max-width: 100%;
EJERCITACIÓN HTML Y CSS

height: auto;
margin-bottom: 10px;
}

.price {
font-weight: bold;
color: #b12704;
margin: 5px 0;
}

.button, .add-to-cart {
display: inline-block;
background-color: #007bff;
color: white;
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
margin-top: 10px;
}

.button:hover, .add-to-cart:hover {
background-color: #0056b3;
}

Implementación

Para que esto funcione en tu ordenador, debes tener una estructura de carpetas como esta:

mi-tienda-online/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── img/
├── [Link]
└── [Link]

Cada archivo HTML tendrá el mismo código de cabecera y pie de página, variando
únicamente el contenido dentro de la etiqueta <main>. El archivo [Link] se encarga
de dar la apariencia visual a todas ellas.
EJERCITACIÓN HTML Y CSS

2. BIBLIOTECA

1. Estructura de Archivos

Necesitarás crear los siguientes archivos en una carpeta principal (por ejemplo,
biblioteca-online/):

1. [Link] (Página de Inicio)


2. [Link] (Página de listado de libros)
3. [Link] (Página de detalle de un libro)
4. [Link] (Hoja de estilos principal)

2. Código HTML

A. [Link] (Página de Inicio)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Biblioteca Virtual | Inicio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<h1> Biblioteca Digital</h1>
<nav>
<ul>
<li><a href="[Link]"
class="active">Inicio</a></li>
<li><a href="[Link]">Catálogo</a></li>
<li><a href="#">Mi Cuenta</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main class="container">
<section class="hero">
<h2>Bienvenido a tu Espacio de Lectura</h2>
<p>Explora miles de libros, documentos y recursos
académicos.</p>
EJERCITACIÓN HTML Y CSS

<a href="[Link]" class="button primary">Ver Catálogo


Completo</a>
</section>

<section class="featured-books">
<h3>Novedades Destacadas</h3>
<div class="book-grid">
<div class="book-card">
<img src="img/[Link]" alt="Imagen del
libro">
<h4>El Gran Libro del Código</h4>
<p class="author">Autor Ficticio</p>
<a href="[Link]" class="button
secondary">Ver Detalles</a>
</div>
<div class="book-card">
<img src="img/[Link]" alt="Imagen del
libro">
<h4>Mundos Olvidados</h4>
<p class="author">Autora Misteriosa</p>
<a href="[Link]" class="button
secondary">Ver Detalles</a>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Biblioteca Digital. Todos los derechos
reservados.</p>
</div>
</footer>
</body>
</html>

B. [Link] (Página de Catálogo)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Biblioteca Virtual | Catálogo</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<h1> Biblioteca Digital</h1>
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
EJERCITACIÓN HTML Y CSS

<li><a href="[Link]"
class="active">Catálogo</a></li>
<li><a href="#">Mi Cuenta</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main class="container">
<h2>Catálogo de Libros y Recursos</h2>

<section class="filters">
<input type="text" placeholder="Buscar por título, autor o
ISBN...">
<select>
<option>Filtrar por Género</option>
<option>Ficción</option>
<option>Ciencia</option>
<option>Historia</option>
</select>
<button class="button primary">Buscar</button>
</section>

<section class="book-list">
<div class="list-item">
<img src="img/[Link]" alt="Portada del libro"
class="list-cover">
<div class="info">
<h3>El Gran Libro del Código</h3>
<p class="author">Autor: Autor Ficticio</p>
<p class="snippet">Una guía esencial para
principiantes en el mundo de la programación y el desarrollo web.</p>
</div>
<div class="actions">
<a href="[Link]" class="button
secondary">Ver Detalles</a>
</div>
</div>

<div class="list-item">
<img src="img/[Link]" alt="Portada del libro"
class="list-cover">
<div class="info">
<h3>Mundos Olvidados</h3>
<p class="author">Autor: Autora Misteriosa</p>
<p class="snippet">Un viaje épico a través de
civilizaciones perdidas y secretos ancestrales...</p>
</div>
<div class="actions">
<a href="[Link]" class="button
secondary">Ver Detalles</a>
</div>
</div>

</section>
</main>
EJERCITACIÓN HTML Y CSS

<footer>
<div class="container">
<p>&copy; 2025 Biblioteca Digital. Todos los derechos
reservados.</p>
</div>
</footer>
</body>
</html>

C. [Link] (Página de Detalles)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Biblioteca Virtual | Detalles</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<h1> Biblioteca Digital</h1>
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Catálogo</a></li>
<li><a href="#">Mi Cuenta</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main class="container">
<section class="book-details-container">
<div class="cover-image">
<img src="img/[Link]" alt="Portada del libro">
</div>
<div class="details-content">
<h2>El Gran Libro del Código</h2>
<p class="meta">**Autor:** Autor Ficticio</p>
<p class="meta">**ISBN:** 978-1234567890</p>
<p class="meta">**Género:** Tecnología, Programación</p>
<p class="meta">**Publicación:** 2023</p>

<h3>Sinopsis</h3>
<p>Este libro es la introducción perfecta al mundo de la
programación. Cubre los fundamentos de HTML, CSS y la lógica básica de
JavaScript, ideal para cualquiera que busque empezar a construir sitios
web funcionales.</p>
EJERCITACIÓN HTML Y CSS

<div class="action-buttons">
<a href="#" class="button primary">Leer en Línea
(Demo)</a>
<a href="[Link]" class="button
secondary">Volver al Catálogo</a>
</div>
</div>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Biblioteca Digital. Todos los derechos
reservados.</p>
</div>
</footer>
</body>
</html>

3. Código CSS

[Link] (Estilos Visuales)

CSS
/* Variables y Reset */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--dark-color: #343a40;
--light-color: #f8f9fa;
}

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: var(--light-color);
color: var(--dark-color);
line-height: 1.6;
}

.container {
width: 90%;
max-width: 1200px;
margin: auto;
overflow: hidden;
}

/* Header y Navegación */
header {
background: var(--dark-color);
color: #fff;
padding: 1rem 0;
border-bottom: 5px solid var(--primary-color);
EJERCITACIÓN HTML Y CSS

header h1 {
margin: 0;
float: left;
}

nav {
float: right;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}

nav ul li a {
color: #fff;
text-decoration: none;
padding: 0 15px;
display: block;
line-height: 38px;
transition: background 0.3s;
}

nav ul li a:hover, nav ul li [Link] {


background: var(--primary-color);
}

/* Botones Comunes */
.button {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}

.[Link] {
background-color: var(--primary-color);
color: #fff;
}

.[Link]:hover {
background-color: #0056b3;
}

.[Link] {
background-color: var(--secondary-color);
color: #fff;
}

.[Link]:hover {
background-color: #5a6268;
EJERCITACIÓN HTML Y CSS

/* Main Content */
main {
padding: 20px 0;
}

/* Hero Section ([Link]) */


.hero {
background: #e9ecef;
padding: 60px 20px;
margin-bottom: 30px;
text-align: center;
border-radius: 8px;
}

.hero h2 {
margin-top: 0;
font-size: 2.5rem;
}

/* Featured Books ([Link]) */


.featured-books h3 {
text-align: center;
margin-bottom: 20px;
color: var(--primary-color);
}

.book-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}

.book-card {
background: #fff;
border: 1px solid #ddd;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.book-card img {
width: 100%;
height: auto;
border-radius: 3px;
margin-bottom: 10px;
}

.book-card .author {
color: var(--secondary-color);
font-size: 0.9em;
}
EJERCITACIÓN HTML Y CSS

/* Catálogo ([Link]) */
.filters {
display: flex;
gap: 10px;
margin-bottom: 30px;
padding: 15px;
background: #fff;
border-radius: 5px;
border: 1px solid #ddd;
}

.filters input, .filters select {


padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
flex-grow: 1;
}

.book-list .list-item {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 15px;
padding: 15px;
border-radius: 5px;
}

.list-cover {
width: 80px;
height: 120px;
object-fit: cover;
margin-right: 20px;
border-radius: 3px;
}

.list-item .info {
flex-grow: 1;
}

.list-item .actions {
margin-left: 20px;
}

/* Detalles del Libro ([Link]) */


.book-details-container {
display: flex;
gap: 40px;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.cover-image img {
width: 250px;
height: auto;
EJERCITACIÓN HTML Y CSS

border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.details-content h2 {
margin-top: 0;
color: var(--primary-color);
}

.details-content .meta {
margin-bottom: 5px;
}

.action-buttons {
margin-top: 20px;
display: flex;
gap: 15px;
}

/* Footer */
footer {
background: var(--dark-color);
color: #fff;
text-align: center;
padding: 1rem 0;
margin-top: 30px;
}

/* Media Queries para Responsividad (Opcional, pero recomendado) */


@media (max-width: 768px) {
header h1, nav {
float: none;
text-align: center;
}

nav ul {
justify-content: center;
}

.list-item {
flex-direction: column;
text-align: center;
}

.list-cover {
margin: 0 auto 15px auto;
}

.list-item .actions {
margin-top: 15px;
margin-left: 0;
}

.book-details-container {
flex-direction: column;
text-align: center;
}
EJERCITACIÓN HTML Y CSS

.cover-image {
margin: 0 auto;
}
}

Notas Importantes:

1. Funcionalidad Real: Este código es solo el diseño y la estructura (frontend). La


búsqueda, los botones de "Leer en Línea" y la gestión de cuentas no funcionarán sin
JavaScript y un backend (servidor y base de datos).
2. Imágenes: Necesitarás crear una carpeta llamada img/ dentro de tu directorio
principal y colocar imágenes con los nombres [Link] y
[Link] (o reemplazarlas con tus propias imágenes y actualizar las rutas
en el HTML).
3. Navegación: Observa que los enlaces de navegación (<nav>) apuntan a los archivos
locales: [Link], [Link], y [Link].
EJERCITACIÓN HTML Y CSS

3. RED SOCIAL

1. Estructura de Archivos

Crea los siguientes archivos dentro de una carpeta principal (por ejemplo, red-social-
estatica/):

1. [Link] (Página Principal/Muro)


2. [Link] (Página de Perfil de Usuario)
3. [Link] (Hoja de estilos principal)

2. Código HTML

A. [Link] (Muro/Feed)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mi Red Social | Muro</title>
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet"
href="[Link]
beta3/css/[Link]">
</head>
<body>
<header class="navbar">
<div class="container">
<div class="logo">SocialNet</div>
<nav>
<ul>
<li><a href="[Link]" class="active"><i class="fas
fa-home"></i> Inicio</a></li>
<li><a href="[Link]"><i class="fas fa-user"></i>
Perfil</a></li>
<li><a href="#"><i class="fas fa-users"></i>
Amigos</a></li>
<li><a href="#"><i class="fas fa-bell"></i>
Notificaciones</a></li>
</ul>
</nav>
</div>
</header>

<main class="container main-content">


<div class="feed-container">
EJERCITACIÓN HTML Y CSS

<section class="create-post">
<h3>¿Qué estás pensando hoy?</h3>
<textarea placeholder="Escribe tu
publicación..."></textarea>
<button class="post-button">Publicar</button>
</section>

<article class="post">
<div class="post-header">
<img src="img/[Link]" alt="Avatar Usuario 1"
class="avatar-small">
<div>
<a href="[Link]" class="username">Laura
Pérez</a>
<span class="timestamp">Hace 2 horas</span>
</div>
</div>
<p class="post-text">¡Día increíble programando el
frontend de esta nueva web! HTML y CSS son la base de todo. #WebDesign
#Frontend</p>
<div class="post-actions">
<span class="action-link"><i class="fas fa-thumbs-
up"></i> Me gusta (15)</span>
<span class="action-link"><i class="fas fa-
comment"></i> Comentar (3)</span>
<span class="action-link"><i class="fas fa-
share"></i> Compartir</span>
</div>
</article>

<article class="post">
<div class="post-header">
<img src="img/[Link]" alt="Avatar Usuario 2"
class="avatar-small">
<div>
<a href="#" class="username">Carlos Dev</a>
<span class="timestamp">Ayer</span>
</div>
</div>
<p class="post-text">Aprendiendo sobre Flexbox para hacer
diseños responsivos. ¡Es mucho más fácil de lo que parece!</p>
<div class="post-image-container">
<img src="img/[Link]" alt="Post con imagen"
class="post-image">
</div>
<div class="post-actions">
<span class="action-link"><i class="fas fa-thumbs-
up"></i> Me gusta (42)</span>
<span class="action-link"><i class="fas fa-
comment"></i> Comentar (11)</span>
<span class="action-link"><i class="fas fa-
share"></i> Compartir</span>
</div>
</article>

</div>
EJERCITACIÓN HTML Y CSS

<aside class="sidebar">
<h3>Sugerencias para ti</h3>
<div class="suggestion-item">
<img src="img/[Link]" alt="Avatar Usuario 3"
class="avatar-small">
<a href="#">Marta Gómez</a>
<button class="add-friend-button">Seguir</button>
</div>
<div class="suggestion-item">
<img src="img/[Link]" alt="Avatar Usuario 4"
class="avatar-small">
<a href="#">Javier Soto</a>
<button class="add-friend-button">Seguir</button>
</div>
</aside>
</main>

<footer>
<div class="container">
<p>&copy; 2025 SocialNet. | <a href="#">Política de
Privacidad</a></p>
</div>
</footer>
</body>
</html>

B. [Link] (Página de Perfil)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mi Red Social | Mi Perfil</title>
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet"
href="[Link]
beta3/css/[Link]">
</head>
<body>
<header class="navbar">
<div class="container">
<div class="logo">SocialNet</div>
<nav>
<ul>
<li><a href="[Link]"><i class="fas fa-home"></i>
Inicio</a></li>
<li><a href="[Link]" class="active"><i
class="fas fa-user"></i> Perfil</a></li>
<li><a href="#"><i class="fas fa-users"></i>
Amigos</a></li>
EJERCITACIÓN HTML Y CSS

<li><a href="#"><i class="fas fa-bell"></i>


Notificaciones</a></li>
</ul>
</nav>
</div>
</header>

<main class="container profile-page">

<section class="profile-header">
<div class="cover-photo">
<img src="img/[Link]" alt="Foto de Portada">
</div>
<div class="profile-info-bar">
<img src="img/[Link]" alt="Avatar del Usuario"
class="avatar-large">
<div class="profile-details">
<h2>Laura Pérez</h2>
<p class="bio">Diseñadora Frontend apasionada por
CSS, HTML y la creación de interfaces de usuario limpias y modernas.
✨</p>
<div class="stats">
<span>**Amigos:** 345</span>
<span>**Siguiendo:** 89</span>
<span>**Publicaciones:** 67</span>
</div>
</div>
<div class="profile-actions">
<button class="edit-button"><i class="fas fa-
pen"></i> Editar Perfil</button>
</div>
</div>
</section>

<section class="profile-content">
<div class="left-sidebar">
<h3>Información</h3>
<p><i class="fas fa-map-marker-alt"></i> Vive en: Bogotá,
Colombia</p>
<p><i class="fas fa-briefcase"></i> Trabaja en: WebDev
Studios</p>
<p><i class="fas fa-graduation-cap"></i> Estudió en:
Universidad de Diseño</p>

<h3>Fotos</h3>
<div class="photo-grid">
<img src="img/[Link]" alt="Foto 1">
<img src="img/[Link]" alt="Foto 2">
<img src="img/[Link]" alt="Foto 3">
</div>
</div>

<div class="profile-feed">
<h3>Publicaciones de Laura</h3>

<article class="post">
<div class="post-header">
EJERCITACIÓN HTML Y CSS

<img src="img/[Link]" alt="Avatar Laura


Pérez" class="avatar-small">
<div>
<span class="username">Laura Pérez</span>
<span class="timestamp">Hace 2 horas</span>
</div>
</div>
<p class="post-text">¡Día increíble programando el
frontend de esta nueva web! HTML y CSS son la base de todo. #WebDesign
#Frontend</p>
<div class="post-actions">
<span class="action-link"><i class="fas fa-
thumbs-up"></i> Me gusta (15)</span>
<span class="action-link"><i class="fas fa-
comment"></i> Comentar (3)</span>
<span class="action-link"><i class="fas fa-
share"></i> Compartir</span>
</div>
</article>

</div>
</section>

</main>

<footer>
<div class="container">
<p>&copy; 2025 SocialNet. | <a href="#">Política de
Privacidad</a></p>
</div>
</footer>
</body>
</html>

3. Código CSS

[Link] (Estilos Visuales)

CSS
/* --- Variables y Reset Básico --- */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--bg-light: #f4f7f6;
--text-dark: #333;
--border-color: #ddd;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
EJERCITACIÓN HTML Y CSS

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
}

.container {
width: 90%;
max-width: 1200px;
margin: auto;
}

/* --- Navegación (Header) --- */


.navbar {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}

.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-color);
}

nav ul {
list-style: none;
display: flex;
}

nav ul li a {
text-decoration: none;
color: var(--text-dark);
padding: 10px 15px;
display: block;
border-radius: 5px;
}

nav ul li a:hover, nav ul li [Link] {


background-color: var(--bg-light);
color: var(--primary-color);
}

/* Iconos */
nav ul li a i {
margin-right: 5px;
}
EJERCITACIÓN HTML Y CSS

/* --- Estilos de Avatares y Botones --- */


.avatar-small {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-color);
}

.avatar-large {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #fff;
margin-top: -75px; /* Para superponer en la foto de portada */
}

.post-button, .add-friend-button, .edit-button {


padding: 8px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}

.post-button {
background-color: var(--primary-color);
color: white;
}

.post-button:hover {
background-color: #0056b3;
}

.add-friend-button {
background-color: #28a745;
color: white;
}

.edit-button {
background-color: var(--secondary-color);
color: white;
}

/* --- Contenido Principal (Muro) --- */


.main-content {
display: flex;
padding-top: 20px;
gap: 30px;
}

.feed-container {
flex: 2; /* Ocupa 2/3 del espacio */
EJERCITACIÓN HTML Y CSS

.sidebar {
flex: 1; /* Ocupa 1/3 del espacio */
padding-top: 10px;
}

.create-post {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.create-post textarea {
width: 100%;
min-height: 80px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
margin: 10px 0;
resize: vertical;
}

/* Estilos de Publicación */
.post {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.post-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.post-header img {
margin-right: 10px;
}

.username {
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
}

.timestamp {
display: block;
font-size: 0.8em;
color: var(--secondary-color);
}

.post-text {
EJERCITACIÓN HTML Y CSS

margin-bottom: 15px;
}

.post-image-container {
max-width: 100%;
margin-bottom: 15px;
text-align: center;
}

.post-image {
max-width: 100%;
height: auto;
border-radius: 5px;
}

.post-actions {
border-top: 1px solid var(--border-color);
padding-top: 10px;
display: flex;
justify-content: space-around;
font-size: 0.9em;
}

.action-link {
cursor: pointer;
color: var(--secondary-color);
transition: color 0.3s;
}

.action-link:hover {
color: var(--primary-color);
}

/* Sidebar Sugerencias */
.sidebar {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.suggestion-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--border-color);
}

.suggestion-item img {
margin-right: 10px;
}

/* --- Página de Perfil ([Link]) --- */

.profile-page {
EJERCITACIÓN HTML Y CSS

padding: 0;
}

.profile-header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
}

.cover-photo {
height: 250px;
width: 100%;
overflow: hidden;
}

.cover-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}

.profile-info-bar {
display: flex;
padding: 0 30px 20px;
align-items: flex-end;
}

.profile-details {
flex-grow: 1;
padding-left: 20px;
}

.profile-details h2 {
margin: 0;
font-size: 2rem;
}

.profile-details .bio {
color: var(--secondary-color);
margin-bottom: 10px;
}

.stats span {
margin-right: 20px;
font-size: 0.95em;
color: var(--primary-color);
}

.profile-actions {
align-self: flex-end;
}

.profile-content {
display: flex;
gap: 30px;
EJERCITACIÓN HTML Y CSS

padding-bottom: 20px;
}

.left-sidebar {
flex: 1;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
align-self: flex-start; /* Para que no se estire */
}

.left-sidebar p {
margin-bottom: 10px;
color: var(--secondary-color);
}

.left-sidebar i {
margin-right: 10px;
color: var(--primary-color);
}

.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-top: 10px;
}

.photo-grid img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 3px;
}

.profile-feed {
flex: 2;
}

/* --- Footer --- */


footer {
background-color: var(--text-dark);
color: white;
text-align: center;
padding: 15px 0;
margin-top: 30px;
}

footer a {
color: white;
text-decoration: none;
margin-left: 10px;
}

/* --- Responsividad Básica --- */


EJERCITACIÓN HTML Y CSS

@media (max-width: 900px) {


.main-content, .profile-content {
flex-direction: column;
}
.profile-info-bar {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-actions {
margin-top: 20px;
}
.avatar-large {
margin-top: -100px; /* Ajustar posición en móvil */
}
}

@media (max-width: 600px) {


.navbar .container {
flex-direction: column;
}
.logo {
margin-bottom: 10px;
}
nav ul {
width: 100%;
justify-content: space-around;
}
}

Notas de Implementación:

1. Imágenes de Ejemplo: Para que el código funcione visualmente, debes crear una
carpeta llamada img/ y colocar imágenes con los nombres que aparecen en el
HTML ([Link], [Link], etc.).
2. Iconos: Se usa un enlace a Font Awesome en el <head> para mostrar los iconos (<i
class="fas fa-home"></i>). Sin este enlace (CDN), solo se verían cuadrados
vacíos.
3. Interactividad: Las acciones de "Me gusta", "Comentar", y el botón "Publicar" son
puramente estáticos. Para que estas acciones realicen algo (como actualizar un
contador o enviar datos), se necesita JavaScript y un servidor.
EJERCITACIÓN HTML Y CSS

4. COLEGIO

1. [Link] (Página de Inicio)


2. [Link] (Página Acerca de / Nuestra Historia)
3. [Link] (Página de Proceso de Admisión)
4. [Link] (Hoja de estilos principal)

1. Estructura de Archivos

Crea una carpeta principal (sitio-colegio/) y dentro los siguientes archivos:

• [Link]
• [Link]
• [Link]
• [Link]

2. Código HTML

A. [Link] (Página de Inicio)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Colegio | Inicio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<div class="logo">Colegio Modelo </div>
<nav>
<ul>
<li><a href="[Link]"
class="active">Inicio</a></li>
<li><a href="[Link]">Nosotros</a></li>
<li><a href="[Link]">Admisiones</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container">
EJERCITACIÓN HTML Y CSS

<h2>Formando el futuro de nuestros estudiantes</h2>


<p>Educación de calidad con valores y tecnología
avanzada.</p>
<a href="[Link]" class="button
primary">Inscripciones Abiertas</a>
</div>
</section>

<section class="features container">


<div class="feature-card">
<h3>Excelencia Académica</h3>
<p>Programas diseñados para potenciar el talento y la
curiosidad intelectual.</p>
</div>
<div class="feature-card">
<h3>Valores Sólidos</h3>
<p>Fomentamos el respeto, la responsabilidad y la empatía
en cada actividad.</p>
</div>
<div class="feature-card">
<h3>Instalaciones Modernas</h3>
<p>Aulas interactivas, laboratorios de ciencias y áreas
deportivas completas.</p>
</div>
</section>

<section class="news container">


<h2>Últimas Noticias</h2>
<article class="news-item">
<h4>Feria de Ciencias 2025</h4>
<p class="date">Octubre 10, 2025</p>
<p>Nuestros estudiantes de secundaria presentaron
proyectos innovadores en la feria anual.</p>
</article>
<article class="news-item">
<h4>Taller de Robótica para Primaria</h4>
<p class="date">Septiembre 28, 2025</p>
<p>Los más jóvenes exploraron los fundamentos de la
programación con Lego.</p>
</article>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Colegio Modelo. Dirección: Calle Ficticia 123.
Tel: (55) 5555-5555</p>
</div>
</footer>
</body>
</html>

B. [Link] (Página Acerca de / Historia)

HTML
EJERCITACIÓN HTML Y CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Colegio | Nosotros</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<div class="logo">Colegio Modelo </div>
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]"
class="active">Nosotros</a></li>
<li><a href="[Link]">Admisiones</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main class="container">
<section class="page-header">
<h1>Nuestra Historia y Misión</h1>
</section>

<section class="content-section history-mission">


<h2>Misión</h2>
<p>Ser una institución líder en educación integral,
comprometida con el desarrollo de ciudadanos responsables, críticos y con
la capacidad de adaptarse a un mundo en constante cambio. Garantizamos un
entorno seguro y estimulante para el aprendizaje.</p>

<h2>Visión</h2>
<p>Consolidarnos como el referente educativo por nuestra
excelencia académica, innovación pedagógica y la formación de líderes que
contribuyan positivamente a la sociedad global.</p>

<h2>Valores Fundamentales</h2>
<ul>
<li>Respeto y Tolerancia</li>
<li>Compromiso y Disciplina</li>
<li>Innovación y Creatividad</li>
<li>Solidaridad y Comunidad</li>
</ul>
</section>

<section class="content-section">
<h2>Nuestra Trayectoria</h2>
<p>Fundado hace más de 30 años, el Colegio Modelo ha
evolucionado para ofrecer un currículo bilingüe y tecnológico,
manteniendo siempre la calidez humana y la atención personalizada que nos
EJERCITACIÓN HTML Y CSS

caracteriza. Hemos graduado a miles de profesionales exitosos en diversas


áreas.</p>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Colegio Modelo. Dirección: Calle Ficticia 123.
Tel: (55) 5555-5555</p>
</div>
</footer>
</body>
</html>

C. [Link] (Página de Admisiones)

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Colegio | Admisiones</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="container">
<div class="logo">Colegio Modelo </div>
<nav>
<ul>
<li><a href="[Link]">Inicio</a></li>
<li><a href="[Link]">Nosotros</a></li>
<li><a href="[Link]"
class="active">Admisiones</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>

<main class="container">
<section class="page-header">
<h1>Proceso de Admisión 2026</h1>
<p>¡Únete a nuestra comunidad educativa! Sigue estos
sencillos pasos:</p>
</section>

<section class="content-section admission-steps">


<div class="step-card">
<span class="step-number">1</span>
<h3>Solicitud en Línea</h3>
EJERCITACIÓN HTML Y CSS

<p>Complete el formulario de pre-inscripción y adjunte


los documentos requeridos (cédula, boletín anterior).</p>
</div>
<div class="step-card">
<span class="step-number">2</span>
<h3>Entrevista y Evaluación</h3>
<p>Agende una entrevista con el departamento de
psicología y una prueba de conocimientos básicos para el estudiante.</p>
</div>
<div class="step-card">
<span class="step-number">3</span>
<h3>Confirmación de Cupo</h3>
<p>Una vez aceptado, proceda a la matrícula formal y al
pago de la inscripción.</p>
</div>
</section>

<section class="content-section contact-admissions">


<h2>Documentación Requerida (Ejemplo)</h2>
<ul>
<li>Acta de nacimiento original.</li>
<li>Certificado de notas del último año.</li>
<li>Copia del documento de identidad de padres y
acudientes.</li>
<li>Formulario de salud debidamente diligenciado.</li>
</ul>

<a href="#" class="button secondary">Descargar Formulario de


Solicitud</a>
<p class="important-note">Para más información, contáctenos
al correo admisiones@[Link] o llame al número principal.</p>
</section>
</main>

<footer>
<div class="container">
<p>&copy; 2025 Colegio Modelo. Dirección: Calle Ficticia 123.
Tel: (55) 5555-5555</p>
</div>
</footer>
</body>
</html>

3. Código CSS

[Link] (Hoja de Estilos)

CSS
/* --- Variables y Reset Básico --- */
:root {
--primary-color: #004d99; /* Azul marino */
--secondary-color: #ffc107; /* Amarillo/Dorado */
--bg-light: #f4f7f6;
--text-dark: #333;
EJERCITACIÓN HTML Y CSS

--border-color: #ddd;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
}

.container {
width: 90%;
max-width: 1200px;
margin: auto;
}

/* --- Encabezado y Navegación --- */


header {
background-color: var(--primary-color);
color: white;
padding: 15px 0;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 1.8rem;
font-weight: bold;
}

nav ul {
list-style: none;
display: flex;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
display: block;
transition: background-color 0.3s;
border-radius: 5px;
}

nav ul li a:hover, nav ul li [Link] {


background-color: #003366; /* Azul más oscuro */
}
EJERCITACIÓN HTML Y CSS

/* --- Botones --- */


.button {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
margin-top: 15px;
}

.[Link] {
background-color: var(--secondary-color);
color: var(--primary-color);
}

.[Link]:hover {
background-color: #e0ac08;
}

.[Link] {
background-color: var(--primary-color);
color: white;
border: 1px solid white;
}

.[Link]:hover {
background-color: #0066cc;
}

/* --- Sección Hero (Inicio) --- */


.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('img/[Link]') no-repeat center center/cover; /* Nota:
Requiere una imagen '[Link]' */
color: white;
text-align: center;
padding: 100px 20px;
margin-bottom: 30px;
}

.hero h2 {
font-size: 3rem;
margin-bottom: 15px;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 20px;
}

/* --- Características (Inicio) --- */


.features {
display: flex;
justify-content: space-around;
gap: 20px;
EJERCITACIÓN HTML Y CSS

margin-bottom: 30px;
text-align: center;
}

.feature-card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
flex: 1;
}

.feature-card h3 {
color: var(--primary-color);
margin-bottom: 10px;
}

/* --- Noticias (Inicio) --- */


.news h2 {
text-align: center;
color: var(--primary-color);
margin-bottom: 20px;
}

.news-item {
background: white;
padding: 15px;
border-left: 5px solid var(--secondary-color);
margin-bottom: 15px;
border-radius: 5px;
}

.news-item h4 {
margin-bottom: 5px;
}

.news-item .date {
font-size: 0.8em;
color: var(--secondary-color);
margin-bottom: 5px;
}

/* --- Estilos Generales de Contenido --- */


main {
padding: 20px 0;
}

.page-header {
text-align: center;
padding: 40px 0;
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color);
}

.content-section {
background: white;
padding: 30px;
EJERCITACIÓN HTML Y CSS

margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content-section h2 {
color: var(--primary-color);
margin-bottom: 15px;
}

.content-section ul {
list-style: disc;
margin-left: 20px;
padding: 10px 0;
}

.important-note {
margin-top: 20px;
padding: 10px;
background-color: #ffe082; /* Tono suave de amarillo */
border-left: 4px solid var(--secondary-color);
border-radius: 4px;
}

/* --- Admisiones ([Link]) --- */


.admission-steps {
display: flex;
justify-content: space-around;
gap: 20px;
text-align: center;
}

.step-card {
background: var(--bg-light);
padding: 20px;
border-radius: 8px;
border: 1px solid var(--border-color);
flex: 1;
}

.step-number {
display: inline-block;
background-color: var(--primary-color);
color: white;
font-size: 1.5rem;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
margin-bottom: 10px;
}

/* --- Pie de Página (Footer) --- */


footer {
background-color: var(--text-dark);
color: white;
text-align: center;
EJERCITACIÓN HTML Y CSS

padding: 20px 0;
margin-top: 30px;
}

/* --- Responsividad --- */


@media (max-width: 768px) {
header .container {
flex-direction: column;
}
nav ul {
flex-wrap: wrap;
justify-content: center;
margin-top: 10px;
}
nav ul li a {
padding: 5px 10px;
}

.features, .admission-steps {
flex-direction: column;
}

.hero {
padding: 60px 10px;
}
}

Este código es una maqueta estática (diseño y estructura). Si deseas tener funciones reales
(como formularios que envíen datos o contenido que cambie), necesitarías incorporar
JavaScript y un Backend (servidor, base de datos). Para la sección hero en el
[Link], asegúrate de tener una imagen llamada [Link] en una carpeta img/
o ajusta la ruta en el CSS.
EJERCITACIÓN HTML Y CSS

5. BELLEZA

ejemplo detallado de la estructura de un sitio web de belleza con el código completo de


la página principal ([Link]) y los archivos esenciales ([Link] y [Link]).

Este código es responsive (se adapta a móviles) y sigue las mejores prácticas modernas.

Estructura de Archivos del Proyecto

El sitio web tendrá la siguiente organización de carpetas:

sitio-web-belleza/
├── [Link] <-- Página de inicio
├── [Link] <-- Página de servicios (solo la estructura, el
contenido es similar)
├── [Link] <-- Página de contacto (solo la estructura)
├── assets/
│ ├── css/
│ │ └── [Link] <-- Hoja de estilos principal
│ ├── js/
│ │ └── [Link] <-- Archivo de JavaScript para interactividad
│ └── img/
│ └── [imágenes_aqui] <-- Carpeta para imágenes (logo, fondo, etc.)

1. Código HTML ([Link])

Este archivo es la página principal (Inicio).

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Glow - Tu Santuario de Belleza y Estética</title>
<link rel="stylesheet" href="assets/css/[Link]">
<link
href="[Link]
700&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>

<header class="main-header">
<div class="logo">Glow Estética</div>
<nav class="main-nav">
<button class="menu-toggle" aria-label="Abrir
menú">☰</button>
EJERCITACIÓN HTML Y CSS

<ul class="nav-list">
<li><a href="[Link]" class="active">Inicio</a></li>
<li><a href="[Link]">Servicios</a></li>
<li><a href="#testimonios">Testimonios</a></li>
<li><a href="[Link]">Contacto</a></li>
<li><a href="#" class="btn-cita">Reservar Cita</a></li>
</ul>
</nav>
</header>

<main>

<section class="hero">
<div class="hero-content">
<h1>Tu Momento de Brillar</h1>
<p>Descubre tratamientos de belleza y estética diseñados
solo para ti.</p>
<a href="[Link]" class="btn-primary">Ver Nuestros
Servicios</a>
</div>
</section>

<section class="destacados">
<h2>Nuestros Servicios Más Solicitados</h2>
<div class="servicios-grid">
<div class="servicio-card">
<img src="assets/img/[Link]"
alt="Tratamiento Facial">
<h3>Faciales Personalizados</h3>
<p>Limpieza profunda, hidratación y cuidado anti-
edad.</p>
</div>
<div class="servicio-card">
<img src="assets/img/[Link]"
alt="Manicura y Pedicura">
<h3>Manicura y Pedicura Spa</h3>
<p>El cuidado perfecto para tus manos y pies.</p>
</div>
<div class="servicio-card">
<img src="assets/img/[Link]"
alt="Depilación">
<h3>Depilación Láser</h3>
<p>Resultados duraderos y piel suave garantizada.</p>
</div>
</div>
</section>

<section class="testimonios" id="testimonios">


<h2>Lo que Dicen Nuestras Clientes</h2>
<div class="testimonio-carrusel">
<p class="cita">"El mejor facial que he tenido. Piel
radiante desde el primer momento."</p>
<p class="autor">- Ana G.</p>
</div>
</section>

<section class="cta-banner">
EJERCITACIÓN HTML Y CSS

<h2>¿Lista para Consentirte?</h2>


<p>Agenda tu cita hoy y transforma tu rutina de belleza.</p>
<a href="[Link]" class="btn-secondary">¡Contactar
Ahora!</a>
</section>

</main>

<footer>
<div class="footer-content">
<p>Glow Estética | 123 Calle de la Belleza, Ciudad</p>
<p>Tel: (555) 123-4567 | Email: info@[Link]</p>
</div>
<p class="copyright">&copy; 2025 Glow. Todos los derechos
reservados.</p>
</footer>

<script src="assets/js/[Link]"></script>
</body>
</html>

2. Código CSS (assets/css/[Link])

Este archivo maneja todos los estilos visuales, incluyendo el diseño responsive con Media
Queries.

CSS
/* ---------------------------------- */
/* 1. ESTILOS GENERALES Y TIPOGRAFÍA */
/* ---------------------------------- */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
--color-primario: #FFC0CB; /* Rosa Suave/Pastel */
--color-secundario: #C39BD3; /* Morado claro */
--color-texto: #333;
--color-fondo: #f9f9f9;
--color-blanco: #fff;
--font-heading: 'Playfair Display', serif;
--font-body: 'Roboto', sans-serif;
}

body {
font-family: var(--font-body);
color: var(--color-texto);
line-height: 1.6;
background-color: var(--color-fondo);
}

h1, h2, h3 {
EJERCITACIÓN HTML Y CSS

font-family: var(--font-heading);
color: var(--color-secundario);
text-align: center;
margin-bottom: 1em;
}

/* Enlaces y Botones Base */


a {
text-decoration: none;
color: var(--color-texto);
}

.btn-primary, .btn-secondary, .btn-cita {


display: inline-block;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s ease;
}

.btn-primary {
background-color: var(--color-secundario);
color: var(--color-blanco);
}

.btn-primary:hover {
background-color: #A569BD; /* Morado más oscuro */
}

.btn-secondary {
background-color: var(--color-blanco);
color: var(--color-secundario);
border: 2px solid var(--color-secundario);
}

.btn-secondary:hover {
background-color: var(--color-secundario);
color: var(--color-blanco);
}

/* ---------------------------------- */
/* 2. CABECERA (HEADER y NAV) */
/* ---------------------------------- */

.main-header {
background-color: var(--color-blanco);
padding: 15px 5%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo {
font-family: var(--font-heading);
font-size: 1.8em;
EJERCITACIÓN HTML Y CSS

color: var(--color-primario);
font-weight: 700;
}

.main-nav {
display: flex;
align-items: center;
}

.nav-list {
list-style: none;
display: flex;
gap: 20px;
align-items: center;
}

.nav-list a {
padding: 5px 0;
position: relative;
}

.nav-list a:hover, .nav-list [Link] {


color: var(--color-secundario);
}

.menu-toggle {
display: none; /* Oculto en escritorio */
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
color: var(--color-secundario);
}

.btn-cita {
background-color: var(--color-primario);
color: var(--color-blanco);
padding: 8px 15px;
}
.btn-cita:hover {
background-color: #F8BBD0;
}

/* ---------------------------------- */
/* 3. SECCIONES PRINCIPALES */
/* ---------------------------------- */

section {
padding: 60px 5%;
max-width: 1200px;
margin: 0 auto;
}

/* SECCIÓN HERO */
.hero {
background: url('../img/[Link]') no-repeat center
center/cover;
EJERCITACIÓN HTML Y CSS

height: 60vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--color-blanco);
position: relative;
/* Oscurecer un poco la imagen para que el texto resalte */
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3); /* Capa oscura */
}
.hero-content {
position: relative; /* Para que esté sobre la capa oscura */
z-index: 10;
}
.hero h1 {
font-size: 3.5em;
color: var(--color-blanco);
margin-bottom: 0.2em;
}
.hero p {
font-size: 1.3em;
margin-bottom: 1.5em;
}

/* SECCIÓN DESTACADOS */
.destacados {
text-align: center;
}
.servicios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 30px;
}
.servicio-card {
background-color: var(--color-blanco);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.servicio-card:hover {
transform: translateY(-5px);
}
.servicio-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
EJERCITACIÓN HTML Y CSS

.servicio-card h3 {
margin: 15px 0 5px;
font-size: 1.5em;
color: var(--color-secundario);
}
.servicio-card p {
padding: 0 15px 20px;
}

/* SECCIÓN TESTIMONIOS */
.testimonios {
background-color: var(--color-primario);
color: var(--color-blanco);
text-align: center;
}
.testimonios h2 {
color: var(--color-blanco);
}
.cita {
font-style: italic;
font-size: 1.2em;
margin-bottom: 10px;
}
.autor {
font-weight: 300;
}

/* SECCIÓN CTA BANNER */


.cta-banner {
background-color: var(--color-secundario);
color: var(--color-blanco);
text-align: center;
padding: 40px 5%;
}
.cta-banner h2 {
color: var(--color-blanco);
font-size: 2em;
}
.cta-banner p {
margin-bottom: 20px;
font-size: 1.1em;
}

/* ---------------------------------- */
/* 4. PIE DE PÁGINA (FOOTER) */
/* ---------------------------------- */

footer {
background-color: #333;
color: #ccc;
padding: 30px 5%;
text-align: center;
}
.footer-content p {
margin-bottom: 10px;
}
.copyright {
EJERCITACIÓN HTML Y CSS

margin-top: 20px;
font-size: 0.9em;
}

/* ---------------------------------- */
/* 5. DISEÑO RESPONSIVE (MÓVILES) */
/* ---------------------------------- */

@media (max-width: 768px) {

/* CABECERA en móvil */
.main-header {
flex-wrap: wrap;
}

.nav-list {
display: none; /* Ocultar el menú por defecto */
flex-direction: column;
width: 100%;
padding: 10px 0;
text-align: center;
}

.[Link] .nav-list {
display: flex; /* Mostrar el menú cuando tenga la clase 'active'
*/
}

.nav-list li {
margin: 10px 0;
}

.menu-toggle {
display: block; /* Mostrar el botón de menú en móvil */
}

/* SECCIÓN HERO en móvil */


.hero {
height: 50vh;
}
.hero h1 {
font-size: 2.5em;
}
.hero p {
font-size: 1em;
}

/* SECCIONES en móvil */
section {
padding: 40px 5%; /* Menos padding vertical */
}

.servicios-grid {
grid-template-columns: 1fr; /* Una columna en móvil */
}
}
EJERCITACIÓN HTML Y CSS

3. Código JavaScript (assets/js/[Link])

Este archivo añade interactividad, como el menú de hamburguesa para dispositivos


móviles.

JavaScript
[Link]('DOMContentLoaded', function() {
const menuToggle = [Link]('.menu-toggle');
const mainNav = [Link]('.main-nav');
const navList = [Link]('.nav-list');

// Función para alternar el menú en dispositivos móviles


[Link]('click', function() {
// Alterna la clase 'active' en el contenedor principal de
navegación
[Link]('active');

// Cambia el texto del botón (opcional: a 'X' si está abierto)


if ([Link]('active')) {
[Link] = '✕'; // Símbolo de cierre
[Link]('aria-label', 'Cerrar menú');
} else {
[Link] = '☰'; // Símbolo de menú
[Link]('aria-label', 'Abrir menú');
}
});

// Ocultar el menú al hacer clic en un enlace (para mejor UX en


móvil)
[Link]('a').forEach(link => {
[Link]('click', () => {
[Link]('active');
[Link] = '☰';
[Link]('aria-label', 'Abrir menú');
});
});

// --- Puedes añadir más funciones aquí ---

// Ejemplo: Alerta simple al hacer clic en "Reservar Cita"


const btnCita = [Link]('.btn-cita');
if (btnCita) {
[Link]('click', function(e) {
[Link]();
alert('¡Gracias por tu interés! Serás redirigido a nuestra
página de reservas.');
// En un proyecto real, se usaría [Link] =
'[Link]';
});
}

});

Explicación de la Estructura (Separación de Preocupaciones)


EJERCITACIÓN HTML Y CSS

El código sigue la arquitectura estándar de un sitio web:

1. HTML ([Link], [Link], etc.):


o Propósito: Define la estructura y el contenido del sitio.
o Etiquetas clave: <header>, <nav>, <main>, <section>, <footer>.
o Navegación: Los enlaces (<a href="...">) son la clave para tener "varias
páginas". Cada enlace apunta a un archivo HTML diferente (ej:
[Link]).
o Responsive: Incluye la metaetiqueta <meta name="viewport"
content="width=device-width, initial-scale=1.0"> para asegurar la
correcta visualización en móviles.
2. CSS ([Link]):
o Propósito: Define el diseño y la apariencia (colores, fuentes, disposición).
o Clases específicas: Utiliza nombres de clases descriptivos (ej: .hero,
.servicio-card, .btn-primary) para facilitar el mantenimiento.
o Variables CSS (:root): Define colores y fuentes de forma centralizada para
que los cambios de diseño sean rápidos.
o Media Queries (@media (max-width: 768px)): Esto es crucial para el
responsive. Cambia la forma en que se muestran los elementos (como el
menú de navegación) cuando el ancho de la pantalla es pequeño (móvil).
3. JavaScript ([Link]):
o Propósito: Añade interactividad y comportamiento dinámico.
o Manipulación del DOM: Se usa para seleccionar elementos HTML (ej:
[Link]) y modificar sus clases (ej:
[Link]('active')), permitiendo que el menú de hamburguesa
funcione en móviles.

También podría gustarte