Maquetación Web Profesional: Crea un Sitio Inmobiliario con HTML y CSS
Inicia sesión para descargarAprende a maquetar un sitio web profesional y responsive desde cero. Este tutorial se enfoca exclusivamente en el diseño y la estructura front-end con HTML y CSS. Te guiaré en la creación …
¡Hola, comunidad de Tu Código Cotidiano, y bienvenidos a este nuevo tutorial completo! En esta guía, construiremos juntos y paso a paso un sitio web totalmente responsive para "LUXEPROPS", una inmobiliaria de lujo ficticia. A lo largo de las siguientes secciones, desglosaremos todo el proyecto: desde la arquitectura profesional de archivos y el HTML semántico de cada página, hasta el CSS modular. Verás cómo organizar los estilos con variables, componentes reutilizables y hojas de estilo específicas para lograr un resultado profesional, cohesivo y, lo más importante, fácil de mantener.
Estructura de Archivos del Proyecto
El proyecto está organizado de forma clara y escalable, separando el contenido (archivos HTML en la raíz) de la presentación (código CSS en su propia carpeta). La carpeta css adopta una arquitectura modular: un archivo principal styles.css importa todos los demás en un orden lógico. Los estilos se dividen en subcarpetas: modules para componentes reutilizables en todo el sitio (como botones y encabezados) y pages para estilos que aplican únicamente a una página específica. Esta estructura hace que el código sea fácil de encontrar, mantener y escalar a futuro.
│ agendar-cita.html
│ guias.html
│ inicio.html
│ leer_guia.html
│ nosotros.html
│ propiedad.html
│ tienda.html
│
└───css
│ estilos-globales.css
│ pie-de-pagina.css
│ styles.css
│ utilidades.css
│ variables.css
│
├───modules
│ botones.css
│ encabezado.css
│ fab-whatsapp.css
│ input-field.css
│ tarjeta-propiedad.css
│
└───pages
agendar-cita.css
guias.css
inicio.css
leer_guia.css
nosotros.css
propiedad.css
tienda.cssinicio.html
A continuación, se presenta el código fuente del archivo inicio.html. Esta es la página principal de un sitio web para "LUXEPROPS", una inmobiliaria de lujo. El documento está estructurado con HTML semántico para definir el contenido, como la cabecera, las secciones de propiedades, el blog y el pie de página. Utiliza CSS para el diseño visual y un pequeño script de JavaScript para la funcionalidad del menú móvil.
LUXEPROPS: Código de la Página de Inicio (inicio.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inmobiliaria de Lujo | Inicio</title>
<meta name="description" content="Encuentra propiedades y casas de lujo. Ofrecemos asesoría experta para tu próxima inversión.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main>
<section class="hero">
<div class="hero-content">
<span class="subtitle">Encuentra tu próximo hogar</span>
<h1 class="h1">El lugar de tus sueños te espera</h1>
<p>Explora nuestra exclusiva selección de propiedades de lujo diseñadas para un estilo de vida inigualable.</p>
<a href="#properties" class="btn btn-primary">Ver Propiedades</a>
</div>
<div id="search-section">
<h2>Busca tu Propiedad Ideal</h2>
<form class="search-form">
<input type="text" class="input-field" placeholder="Ubicación (ej: Ciudad, Barrio)">
<select class="input-field">
<option value="">Tipo de Propiedad</option>
<option value="casa">Casa</option>
<option value="apartamento">Apartamento</option>
<option value="penthouse">Penthouse</option>
</select>
<select class="input-field">
<option value="">Habitaciones</option>
<option value="1">1+</option>
<option value="2">2+</option>
<option value="3">3+</option>
<option value="4">4+</option>
</select>
<div class="checkbox-group">
<input type="checkbox" id="con-piscina">
<label for="con-piscina">Con Piscina</label>
</div>
<button type="submit" class="btn btn-primary">Buscar</button>
</form>
</div>
</section>
<section id="properties" class="container">
<div class="text-center">
<span class="subtitle">Selección Exclusiva</span>
<h2 class="h2">Propiedades Destacadas</h2>
</div>
<div class="properties-grid mt-xl">
<article class="property-card">
<div class="property-card-image property-img-1"></div>
<span class="vis-vip-tag">VIP</span>
<div class="property-card-content">
<h3 class="property-card-title">Villa Moderna en la Colina</h3>
<p class="property-card-price">$1,200,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 4 habs</span>
<span><i class="fas fa-bath"></i> 5 baños</span>
<span><i class="fas fa-ruler-combined"></i> 500 m²</span>
</div>
<a href="#" class="btn btn-outline">Ver Detalles</a>
</div>
</article>
<article class="property-card">
<div class="property-card-image property-img-2"></div>
<div class="property-card-content">
<h3 class="property-card-title">Penthouse con Vista al Mar</h3>
<p class="property-card-price">$850,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 3 habs</span>
<span><i class="fas fa-bath"></i> 3 baños</span>
<span><i class="fas fa-ruler-combined"></i> 280 m²</span>
</div>
<a href="#" class="btn btn-outline">Ver Detalles</a>
</div>
</article>
<article class="property-card">
<div class="property-card-image property-img-3"></div>
<span class="vis-vip-tag">NUEVO</span>
<div class="property-card-content">
<h3 class="property-card-title">Apartamento de Diseño Urbano</h3>
<p class="property-card-price">$620,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 2 habs</span>
<span><i class="fas fa-bath"></i> 2 baños</span>
<span><i class="fas fa-ruler-combined"></i> 150 m²</span>
</div>
<a href="#" class="btn btn-outline">Ver Detalles</a>
</div>
</article>
</div>
</section>
<section class="asesorias-section container">
<div class="asesorias-image-wrapper">
<img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=2670&auto=format&fit=crop" alt="Agente inmobiliario mostrando una casa" class="asesorias-image">
</div>
<div class="asesorias-content">
<span class="subtitle">Servicio Personalizado</span>
<h2 class="h2">Asesoría Experta Para Ti</h2>
<p>Nuestro equipo de expertos está aquí para guiarte en cada paso del proceso de compra. Desde la selección inicial hasta el cierre del trato, te ofrecemos un servicio integral y confidencial para asegurar que tomes la mejor decisión.</p>
<a href="#" class="btn btn-primary mt-xl">Agendar una Cita</a>
</div>
</section>
<section id="blog" class="container">
<div class="text-center">
<span class="subtitle">Nuestro Blog</span>
<h2 class="h2">Guías y Tendencias del Mercado</h2>
</div>
<div class="blog-grid mt-xl">
<article class="property-card blog-post-card">
<div class="property-card-image blog-img-1"></div>
<div class="property-card-content">
<h3 class="property-card-title">5 Claves para Invertir en Propiedades de Lujo</h3>
<p>Descubre los secretos del mercado inmobiliario de alta gama y cómo maximizar tu retorno de inversión.</p>
<a href="#" class="btn btn-outline">Leer Más</a>
</div>
</article>
<article class="property-card blog-post-card">
<div class="property-card-image blog-img-2"></div>
<div class="property-card-content">
<h3 class="property-card-title">Tendencias de Diseño de Interiores para 2025</h3>
<p>Minimalismo cálido, tecnología integrada y sostenibilidad son los pilares del diseño que viene.</p>
<a href="#" class="btn btn-outline">Leer Más</a>
</div>
</article>
<article class="property-card blog-post-card">
<div class="property-card-image blog-img-3"></div>
<div class="property-card-content">
<h3 class="property-card-title">¿Comprar o Construir? Ventajas de Cada Opción</h3>
<p>Analizamos los pros y contras de adquirir una propiedad existente frente a construir la casa de tus sueños desde cero.</p>
<a href="#" class="btn btn-outline">Leer Más</a>
</div>
</article>
</div>
</section>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página de Inicio (inicio.html)
1. <!DOCTYPE html> y <html lang="es">
Declara que el documento es de tipo HTML5 y establece el español como el idioma principal de la página.
2. <head>
Contiene la metainformación del documento, como el título de la página, la codificación de caracteres, enlaces a hojas de estilo y fuentes.
3. meta tags
Configuran la codificación de caracteres (UTF-8), la adaptabilidad a dispositivos móviles (viewport) y una descripción para los motores de búsqueda (description).
4. link rel="preconnect" y link href="..." (Google Fonts)
Importan las tipografías personalizadas Montserrat y Playfair Display desde el servicio de Google Fonts para ser usadas en la página.
5. link rel="stylesheet" href="css/styles.css"
Enlaza la hoja de estilos externa que define la apariencia visual y el diseño de todos los elementos de la página.
6. link rel="stylesheet" href="..." (Font Awesome)
Importa la librería de iconos Font Awesome, que se usa para mostrar los iconos de redes sociales, camas, baños, etc.
7. <header class="main-header">
Define la cabecera principal del sitio, que contiene el logotipo, el menú de navegación y los enlaces a redes sociales.
8. <nav class="main-nav">
Contiene el menú de navegación principal con enlaces a las diferentes secciones del sitio web como "Inicio", "Tienda" y "Nosotros".
9. <button class="mobile-menu-toggle">
Este es el botón (ícono de hamburguesa) que se muestra en dispositivos móviles para desplegar u ocultar el menú de navegación.
10. <section class="hero">
Es la primera sección visible y de gran impacto (Hero Section). Contiene el eslogan principal, una breve descripción y un formulario de búsqueda.
11. <div id="search-section">
Define el contenedor del formulario de búsqueda de propiedades, permitiendo a los usuarios filtrar por ubicación, tipo, habitaciones y otras características.
12. <section id="properties">
Esta sección muestra una cuadrícula con las "Propiedades Destacadas", presentando una vista previa de cada una.
13. <article class="property-card">
Representa una tarjeta individual para una propiedad. Contiene una imagen, título, precio, detalles (habitaciones, baños) y un botón para ver más información.
14. <span class="vis-vip-tag">
Es una etiqueta visual que se superpone a la imagen de la propiedad para resaltar ofertas especiales como "VIP" o "NUEVO".
15. <section class="asesorias-section">
Promociona el servicio de asesoría personalizada. Se compone de una imagen a la izquierda y un texto descriptivo a la derecha con un llamado a la acción.
16. <section id="blog">
Presenta una selección de artículos del blog, utilizando una estructura de tarjetas similar a la de las propiedades para mantener la consistencia en el diseño.
17. <footer class="main-footer">
Define el pie de página del sitio. Está organizado en una cuadrícula con varias columnas: información de la empresa, enlaces de navegación, avisos legales y redes sociales.
18. <div class="footer-bottom">
La parte final del pie de página, donde se muestra el aviso de derechos de autor (copyright).
19. <a href="https://wa.me/..." class="fab-whatsapp">
Crea un botón de acción flotante (FAB) que permanece visible en la esquina de la pantalla. Al hacer clic, abre una conversación de WhatsApp.
20. <script> ... </script>
Contiene el código JavaScript de la página. Su función es añadir interactividad al sitio.
21. menuToggle.addEventListener('click', ...)
Este código hace que al hacer clic en el botón del menú móvil (mobile-menu-toggle), se agregue o elimine la clase active en la cabecera (main-header), lo que provoca que el menú se muestre o se oculte mediante CSS.
inicio.css
A continuación, se presenta el código fuente del archivo inicio.css. Esta hoja de estilos se encarga de definir toda la apariencia visual y el diseño de la página de inicio (inicio.html) de la inmobiliaria "LUXEPROPS". Incluye las reglas para la sección principal (hero), el formulario de búsqueda flotante, las cuadrículas de propiedades y el blog, y las media queries que hacen que el diseño sea adaptable (responsive) a diferentes tamaños de pantalla, como tabletas y móviles.
LUXEPROPS: Código de Estilos de la Página de Inicio (inicio.css)
.hero {
position: relative;
height: 100vh;
min-height: 700px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.8)), url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop') no-repeat center center/cover;
padding: 0 5%;
margin-bottom: 140px;
}
.hero-content {
width: 100%;
max-width: 800px;
z-index: 1;
}
#search-section {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
width: 85%;
max-width: 1100px;
z-index: 10;
background-color: var(--color-secondary-background);
padding: var(--space-xl);
border-radius: 16px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
border: 1px solid var(--color-utility-border);
}
#search-section h2 {
text-align: center;
font-size: clamp(1.2rem, 4vw, 1.5rem);
margin-bottom: var(--space-xl);
}
.search-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-md);
align-items: center;
}
.search-form .btn {
width: 100%;
}
.properties-grid,
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-xl);
}
.asesorias-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xxl);
align-items: center;
}
.asesorias-image-wrapper {
overflow: hidden;
border-radius: 8px;
}
.asesorias-image {
height: 500px;
width: 100%;
object-fit: cover;
border-radius: 8px;
transition: transform 0.4s ease;
}
.asesorias-image:hover {
transform: scale(1.05);
}
@media (max-width: 992px) {
.asesorias-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero {
flex-direction: column;
height: auto;
min-height: 0;
padding: var(--space-xxxl) var(--space-lg);
justify-content: center;
margin-bottom: 0;
}
.hero-content {
margin-bottom: var(--space-xxl);
}
#search-section {
position: relative;
bottom: auto;
left: auto;
transform: none;
width: 100%;
max-width: 500px;
margin-top: 0;
}
.search-form {
grid-template-columns: 1fr;
}
}Explicación del código: LUXEPROPS: Código de Estilos de la Página de Inicio (inicio.css)
1. .hero
Establece el estilo del banner principal. Lo posiciona de forma relative para contener elementos absolutos, le da una altura que ocupa toda la pantalla (100vh), y usa flexbox para centrar su contenido. El fondo es una imagen con una capa de color oscuro semitransparente (linear-gradient) para mejorar la legibilidad del texto.
2. #search-section
Define el estilo del contenedor de búsqueda. Se posiciona de forma absolute en la parte inferior del hero. La combinación de left: 50% y transform: translateX(-50%) lo centra horizontalmente. Tiene un fondo, padding, bordes redondeados y una sombra para darle un efecto "flotante".
3. .search-form
Aplica un diseño de cuadrícula (CSS Grid) al formulario. La regla repeat(auto-fit, minmax(180px, 1fr)) es clave para la responsividad: crea tantas columnas como quepan, con un ancho mínimo de 180px, y las ajusta para que ocupen todo el espacio disponible.
4. .properties-grid, .blog-grid
Define un estilo de cuadrícula reutilizable para las secciones de propiedades y blog. Al igual que el formulario, usa repeat(auto-fit, minmax(320px, 1fr)) para crear una cuadrícula responsive que se adapta automáticamente al ancho de la pantalla sin necesidad de media queries.
5. .asesorias-section
Crea un diseño de dos columnas iguales (grid-template-columns: 1fr 1fr) para la sección de asesorías, colocando la imagen a un lado y el texto al otro.
6. .asesorias-image:hover
Aplica un sutil efecto de zoom a la imagen de la sección de asesorías cuando el usuario pasa el cursor sobre ella (transform: scale(1.05)), haciéndola más interactiva.
7. @media (max-width: 992px)
Primera media query para responsividad. En pantallas de 992px o menos (tabletas), la sección de asesorías cambia de dos columnas a una sola (grid-template-columns: 1fr), apilando la imagen y el texto verticalmente.
8. @media (max-width: 768px)
La media query principal para dispositivos móviles. Realiza los cambios más significativos en el diseño.
9. (Móvil) .hero
En pantallas de 768px o menos, el hero deja de ocupar toda la altura de la pantalla (height: auto) y se elimina su margen inferior para que el diseño fluya de forma natural.
10. (Móvil) #search-section
Este es el cambio más importante. El contenedor de búsqueda deja de ser flotante (position: relative, se quita el transform) y se convierte en un bloque normal que se muestra debajo del texto del hero, ocupando todo el ancho disponible.
11. (Móvil) .search-form
Dentro del contenedor de búsqueda, el formulario se reajusta para mostrar un solo campo por fila (grid-template-columns: 1fr), lo que facilita su uso en pantallas pequeñas.
tienda.html
A continuación, se presenta el código fuente del archivo tienda.html. Esta página funciona como el catálogo principal de propiedades de "LUXEPROPS". Su diseño se basa en una vista de dos paneles: un panel izquierdo con pestañas para filtros de búsqueda y una lista de resultados, y un panel derecho que muestra un mapa interactivo con la ubicación de las propiedades. La página importa la librería Leaflet.js para la funcionalidad del mapa y contiene un script complejo para gestionar la interactividad del encabezado, las pestañas y la renderización de los marcadores en el mapa.
LUXEPROPS: Código de la Página de Tienda (tienda.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tienda | LUXEPROPS</title>
<meta name="description" content="Explora nuestro catálogo exclusivo de propiedades y casas de lujo.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-tienda">
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main class="store-view-container">
<aside class="left-panel">
<div class="panel-tabs">
<button class="tab-link active" data-tab="filters">Filtros</button>
<button class="tab-link" data-tab="list">Resultados (3)</button>
</div>
<div id="filters-content" class="panel-content active">
<form class="filters-form">
<div class="filter-group">
<h4 class="filter-title">Ubicación</h4>
<input type="text" class="input-field" placeholder="Ciudad, Barrio o Código Postal">
</div>
<div class="filter-group">
<h4 class="filter-title">Rango de Precio</h4>
<div class="price-range-labels">
<span>$100,000</span>
<span>$5,000,000+</span>
</div>
<div class="price-slider-track">
<div class="price-slider-range"></div>
</div>
</div>
<div class="filter-group">
<h4 class="filter-title">Tipo de Propiedad</h4>
<div class="custom-checkbox">
<input type="checkbox" id="tipo-casa" checked>
<label for="tipo-casa">Casa</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="tipo-apartamento" checked>
<label for="tipo-apartamento">Apartamento</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="tipo-penthouse">
<label for="tipo-penthouse">Penthouse</label>
</div>
</div>
<div class="filter-group">
<h4 class="filter-title">Habitaciones</h4>
<div class="custom-checkbox">
<input type="checkbox" id="habs-2">
<label for="habs-2">2+ habs</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="habs-3" checked>
<label for="habs-3">3+ habs</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="habs-4">
<label for="habs-4">4+ habs</label>
</div>
</div>
<div class="filter-group">
<h4 class="filter-title">Amenidades</h4>
<div class="custom-checkbox">
<input type="checkbox" id="amenidad-piscina" checked>
<label for="amenidad-piscina">Con Piscina</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="amenidad-gym">
<label for="amenidad-gym">Gimnasio</label>
</div>
</div>
<div class="filter-actions">
<button type="submit" class="btn btn-primary">Aplicar Filtros</button>
<button type="reset" class="btn btn-outline">Limpiar</button>
</div>
</form>
</div>
<div id="list-content" class="panel-content">
<div class="results-list">
<a href="propiedad.html" class="property-list-item" aria-label="Ver detalles de Villa de Lujo en Yarumal">
<div class="list-item-image property-img-1"></div>
<div class="list-item-content">
<h3 class="list-item-title">Villa de Lujo en Yarumal</h3>
<p class="list-item-price">$1,200,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 4</span>
<span><i class="fas fa-bath"></i> 5</span>
</div>
</div>
</a>
<a href="propiedad.html" class="property-list-item" aria-label="Ver detalles de Casa Campestre Cerca al Parque">
<div class="list-item-image property-img-2"></div>
<div class="list-item-content">
<h3 class="list-item-title">Casa Campestre Cerca al Parque</h3>
<p class="list-item-price">$850,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 3</span>
<span><i class="fas fa-bath"></i> 3</span>
</div>
</div>
</a>
<a href="propiedad.html" class="property-list-item" aria-label="Ver detalles de Apartamento Moderno">
<div class="list-item-image property-img-3"></div>
<div class="list-item-content">
<h3 class="list-item-title">Apartamento Moderno</h3>
<p class="list-item-price">$620,000 USD</p>
<div class="property-card-details">
<span><i class="fas fa-bed"></i> 2</span>
<span><i class="fas fa-bath"></i> 2</span>
</div>
</div>
</a>
</div>
</div>
</aside>
<section class="right-panel-map">
<div id="interactive-map"></div>
</section>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
document.addEventListener('DOMContentLoaded', function () {
const pageHeader = document.getElementById('page-header');
if (pageHeader) {
const handleHeaderSticky = () => {
if (window.scrollY > 50) {
pageHeader.classList.add('is-sticky');
} else {
pageHeader.classList.remove('is-sticky');
}
};
window.addEventListener('scroll', handleHeaderSticky);
}
const menuToggle = document.querySelector('.mobile-menu-toggle');
if (menuToggle && pageHeader) {
menuToggle.addEventListener('click', () => {
pageHeader.classList.toggle('active');
});
}
const tabLinks = document.querySelectorAll('.tab-link');
const panelContents = document.querySelectorAll('.panel-content');
tabLinks.forEach(link => {
link.addEventListener('click', () => {
tabLinks.forEach(l => l.classList.remove('active'));
panelContents.forEach(p => p.classList.remove('active'));
link.classList.add('active');
const tabId = link.getAttribute('data-tab');
document.getElementById(tabId + '-content').classList.add('active');
});
});
const properties = [
{ id: 1, title: 'Villa de Lujo en Yarumal', price: '$1,200,000 USD', image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2670&auto=format&fit=crop', coordinates: [6.965, -75.420] },
{ id: 2, title: 'Casa Campestre Cerca al Parque', price: '$850,000 USD', image: 'https://images.unsplash.com/photo-1598228723793-52759bba239c?q=80&w=2574&auto=format&fit=crop', coordinates: [6.962, -75.415] },
{ id: 3, title: 'Apartamento Moderno', price: '$620,000 USD', image: 'https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?q=80&w=2670&auto=format&fit=crop', coordinates: [6.968, -75.419] }
];
const map = L.map('interactive-map').setView([6.964, -75.418], 14);
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).addTo(map);
properties.forEach(property => {
const popupContent = `<div class="map-popup"><img src="${property.image}" alt="${property.title}" class="popup-image"><div class="popup-content"><h4>${property.title}</h4><p>${property.price}</p></div></div>`;
const customIcon = L.divIcon({
className: 'custom-div-icon',
html: "<div class='marker-pin'></div><i class='fa-solid fa-location-dot'></i>",
iconSize: [30, 42],
iconAnchor: [15, 42]
});
L.marker(property.coordinates, { icon: customIcon }).addTo(map).bindPopup(popupContent);
});
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página de Tienda (tienda.html)
1. link y script para Leaflet.js
Importan la librería Leaflet. El archivo CSS (leaflet.css) contiene los estilos necesarios para los controles del mapa, y el archivo JS (leaflet.js) contiene toda la lógica para crear y manejar mapas interactivos.
2. body class="page-tienda"
Aplica una clase específica al body de esta página. Esto permite crear estilos en el archivo CSS que afecten únicamente a la página de la tienda, sin interferir con otras páginas como el inicio.
3. main class="store-view-container"
Es el contenedor principal que envuelve los dos paneles de la página (filtros a la izquierda y mapa a la derecha). Su clase se usa en CSS para aplicar el layout de dos columnas.
4. aside class="left-panel"
Define el panel lateral izquierdo. Contiene las pestañas que permiten al usuario alternar entre la vista de "Filtros" y la lista de "Resultados".
5. .panel-tabs y .tab-link
Estructura de las pestañas. Los botones con la clase tab-link y el atributo data-tab son controlados por JavaScript para mostrar u ocultar los paneles de contenido correspondientes.
6. form class="filters-form"
Contiene todos los campos y controles que el usuario puede usar para filtrar las propiedades, como la ubicación, el rango de precios, el tipo de propiedad y las amenidades.
7. .results-list y .property-list-item
Dentro de la pestaña "Resultados", este contenedor muestra una lista vertical de las propiedades encontradas. Cada propiedad es un enlace (a) que dirige a la página de detalles de esa propiedad.
8. section class="right-panel-map"
Define el panel lateral derecho, que está dedicado exclusivamente a mostrar el mapa interactivo.
9. div id="interactive-map"
Este es el elemento HTML clave donde la librería Leaflet.js dibujará y renderizará el mapa interactivo.
10. script principal
Contiene toda la lógica de JavaScript para la interactividad de la página, envuelta en un evento DOMContentLoaded para asegurar que el código se ejecute solo cuando la página esté completamente cargada.
11. Lógica de Header Pegajoso (Sticky)
Este bloque de código detecta el desplazamiento (scroll) del usuario. Si el desplazamiento vertical es mayor a 50 píxeles, añade la clase is-sticky al encabezado, permitiendo que se fije en la parte superior de la pantalla mediante CSS.
12. Lógica de Pestañas (Tabs)
El script asigna un evento de clic a cada botón de pestaña (tab-link). Al hacer clic, elimina la clase active de todas las pestañas y paneles, y luego la añade solo a la pestaña seleccionada y a su panel de contenido correspondiente, creando el efecto de cambio de vista.
13. Lógica del Mapa (Leaflet.js)
Esta es la parte más compleja del script. Primero, define un arreglo de objetos (properties) con los datos de cada propiedad, incluyendo sus coordenadas geográficas. Luego, inicializa el mapa en el div "interactive-map", lo centra en Yarumal y le añade una capa de mapa base con estilo oscuro.
14. Creación de Marcadores y Popups
El código recorre el arreglo de propiedades. Por cada una, crea un marcador con un ícono personalizado (custom-div-icon) y una ventana emergente (popup) que muestra la imagen, título y precio de la propiedad. Finalmente, añade cada marcador al mapa.
tienda.css
Este es el código CSS que aplica los estilos específicos a la página de la tienda (tienda.html). Este archivo es responsable de crear el complejo diseño de dos paneles, el comportamiento del encabezado fijo, el estilo de las pestañas interactivas y todos los detalles de los formularios, como los checkboxes personalizados. Además, incluye reglas para sobreescribir los estilos por defecto de la librería Leaflet.js, asegurando que los popups y los marcadores del mapa se integren perfectamente con el diseño oscuro del sitio. Finalmente, contiene las media queries necesarias para adaptar este complejo diseño a pantallas más pequeñas.
LUXEPROPS: Código de Estilos de la Página de Tienda (tienda.css)
.page-tienda .main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: transparent;
transition: background-color 0.4s ease;
border-bottom: 1px solid transparent;
}
.page-tienda .main-header.is-sticky {
background-color: rgba(33, 33, 33, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-utility-border);
}
.store-view-container {
display: grid;
grid-template-columns: 400px 1fr;
height: 100vh;
padding-top: 80px;
}
.left-panel {
background-color: var(--color-primary-background);
border-right: 1px solid var(--color-utility-border);
display: flex;
flex-direction: column;
overflow-y: auto;
height: calc(100vh - 80px);
}
.right-panel-map {
background-color: var(--color-secondary-background);
height: calc(100vh - 80px);
position: relative;
z-index: 1;
}
#interactive-map {
width: 100%;
height: 100%;
}
.panel-tabs {
display: flex;
border-bottom: 1px solid var(--color-utility-border);
flex-shrink: 0;
position: sticky;
top: 0;
background-color: var(--color-primary-background);
z-index: 10;
}
.tab-link {
flex-grow: 1; padding: var(--space-md) var(--space-lg); background: none; border: none;
color: var(--color-secondary-foreground); font-family: var(--font-secondary);
font-size: 0.9rem; font-weight: 600; text-transform: uppercase; cursor: pointer;
transition: all 0.3s ease; border-bottom: 3px solid transparent;
}
.tab-link:hover { color: var(--color-primary-foreground); }
.tab-link.active {
color: var(--color-primary-foreground);
border-bottom-color: var(--color-accent-main);
}
.panel-content { display: none; padding: var(--space-xl); }
.panel-content.active { display: block; }
.filters-form { display: flex; flex-direction: column; gap: var(--space-xl); }
.filter-title {
font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.1em;
font-size: 0.8rem; margin-bottom: var(--space-md); color: var(--color-secondary-foreground);
}
.price-range-labels { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--color-secondary-foreground); }
.price-slider-track { height: 4px; background-color: var(--color-utility-border); border-radius: 2px; margin-top: var(--space-sm); }
.custom-checkbox { display: flex; align-items: center; margin-bottom: var(--space-sm); }
.custom-checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
.custom-checkbox label { position: relative; padding-left: 30px; cursor: pointer; font-size: 1rem; color: var(--color-primary-foreground); }
.custom-checkbox label::before {
content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
border: 1px solid var(--color-utility-border); border-radius: 2px; transition: all 0.2s ease;
}
.custom-checkbox label::after {
content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
position: absolute; left: 3px; top: 3px; font-size: 12px;
color: var(--color-accent-contrast); opacity: 0; transition: opacity 0.2s ease;
}
.custom-checkbox input:checked + label::before { background-color: var(--color-accent-main); border-color: var(--color-accent-main); }
.custom-checkbox input:checked + label::after { opacity: 1; }
.filter-actions { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.filter-actions .btn { flex-grow: 1; }
.results-list { display: flex; flex-direction: column; gap: var(--space-md); }
.property-list-item {
display: flex; gap: var(--space-md); background-color: var(--color-secondary-background);
padding: var(--space-md); border-radius: 8px; transition: background-color 0.3s ease; cursor: pointer;
}
.property-list-item:hover { background-color: #424242; }
.list-item-image { width: 120px; height: 90px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 4px; }
.list-item-content { display: flex; flex-direction: column; }
.list-item-title { font-family: var(--font-primary); font-size: 1.1rem; margin-bottom: var(--space-xs); color: var(--color-primary-foreground); }
.list-item-price { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-accent-main); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
background-color: var(--color-secondary-background); color: var(--color-primary-foreground);
box-shadow: 0 3px 14px rgba(0,0,0,0.4); border-radius: 8px; border: 1px solid var(--color-utility-border);
}
.leaflet-popup-content { margin: 0; padding: 0; width: 250px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--color-primary-foreground); padding: 8px 8px 0 0; }
.map-popup .popup-image { width: 100%; height: 120px; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.map-popup .popup-content { padding: var(--space-md); }
.map-popup h4 { font-family: var(--font-primary); font-size: 1.1rem; margin: 0 0 4px 0; color: var(--color-primary-foreground); }
.map-popup p { font-size: 1rem; font-weight: 600; color: var(--color-accent-main); margin: 0; }
.custom-div-icon { text-align: center; }
.custom-div-icon .marker-pin {
width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--color-accent-main);
position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin-left: -15px; margin-top: -15px;
}
.custom-div-icon i { position: relative; font-size: 16px; color: var(--color-accent-contrast); top: 7px; }
@media (max-width: 992px) {
.store-view-container { grid-template-columns: 1fr; height: auto; padding-top: 60px; }
.right-panel-map { height: 50vh; order: -1; }
.left-panel { border-right: none; height: auto; }
}Explicación del código: LUXEPROPS: Código de Estilos de la Página de Tienda (tienda.css)
1. .page-tienda .main-header
Aplica estilos al encabezado solo en la página de la tienda. Lo convierte en un encabezado fijo (position: fixed) que permanece en la parte superior de la pantalla.
2. .main-header.is-sticky
Este estilo se activa mediante JavaScript cuando el usuario se desplaza. Cambia el fondo del encabezado a uno semitransparente con un efecto de desenfoque (backdrop-filter: blur(10px)), mejorando la visibilidad sobre el contenido.
3. .store-view-container
Establece el diseño principal de la página como una cuadrícula (CSS Grid) de dos columnas. La primera columna tiene un ancho fijo de 400px y la segunda ocupa el resto del espacio. Se le da una altura del 100% del viewport (100vh) y un padding superior para no ser tapado por el header fijo.
4. .left-panel y .right-panel-map
Definen los dos paneles. Se les asigna una altura calculada (calc(100vh - 80px)) para que ocupen el espacio restante debajo del encabezado. El panel izquierdo tiene un scroll vertical si su contenido es muy largo.
5. .panel-tabs
Contenedor de las pestañas ("Filtros", "Resultados"). La propiedad position: sticky y top: 0 hace que las pestañas se queden fijas en la parte superior del panel izquierdo mientras se hace scroll en esa sección.
6. .tab-link.active
Aplica un estilo distintivo (cambio de color y un borde inferior) a la pestaña que está actualmente seleccionada, proporcionando una clara indicación visual al usuario.
7. .custom-checkbox
Esta es una técnica para crear checkboxes personalizados. Oculta el checkbox por defecto (opacity: 0) y utiliza los pseudo-elementos ::before (para la caja) y ::after (para el ícono de marca de Font Awesome) en la etiqueta label para crear una apariencia a medida.
8. .custom-checkbox input:checked + label...
Cuando el input oculto está marcado (:checked), estas reglas cambian el estilo de la etiqueta y sus pseudo-elementos para mostrar visualmente que la opción está seleccionada (cambia el color de fondo y muestra el ícono de marca).
9. .property-list-item:hover
Añade un efecto visual simple que cambia el color de fondo de un elemento de la lista de resultados cuando el usuario pasa el cursor sobre él, mejorando la interactividad.
10. Estilos de .leaflet-popup-...
Personalizan la apariencia de las ventanas emergentes (popups) del mapa de Leaflet. Se modifica el color de fondo, la sombra y los bordes para que coincidan con el tema oscuro del sitio web.
11. .custom-div-icon y .marker-pin
Estilos para el marcador de mapa personalizado. Se crea una forma de "pin" rotando un div cuadrado y se coloca un ícono de Font Awesome en su interior, logrando un marcador único que se alinea con la identidad de la marca.
12. @media (max-width: 992px)
Esta media query adapta el diseño para pantallas más pequeñas. Cambia el layout de dos columnas a una sola (grid-template-columns: 1fr), coloca el mapa en la parte superior con una altura fija (order: -1) y permite que el panel de filtros ocupe el resto del espacio verticalmente.
guias.html
Este es el código fuente del archivo guias.html. Esta página funciona como el centro de recursos o blog del sitio "LUXEPROPS", presentando artículos y guías sobre el mercado inmobiliario en Yarumal. La estructura incluye una sección principal (hero) para destacar una guía importante, una barra de filtros y búsqueda para que los usuarios puedan navegar por el contenido, y una cuadrícula que muestra las diferentes guías en formato de tarjeta. El diseño reutiliza componentes de otras páginas, como las tarjetas de artículos, para mantener la consistencia visual del sitio.
LUXEPROPS: Código de la Página de Guías (guias.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guías sobre Fincas y Lotes en Yarumal | LUXEPROPS</title>
<meta name="description" content="Guías expertas para comprar, vender e invertir en fincas, lotes y casas campestres en Yarumal, Antioquia.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-guias">
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main>
<section class="guides-hero">
<div class="guides-hero-bg" style="background-image: linear-gradient(rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.8)), url('https://images.unsplash.com/photo-1594921948968-3d3a13a8335b?q=80&w=2574&auto=format&fit=crop');"></div>
<div class="hero-content text-center">
<span class="subtitle">Guía Destacada</span>
<h1 class="h1">Guía Esencial para Comprar Finca en Yarumal</h1>
<p>Descubre el potencial del Norte de Antioquia y aprende a tomar la mejor decisión para tu inversión o tu nuevo hogar campestre.</p>
<a href="leer_guia.html" class="btn btn-primary">Leer Guía Completa</a>
</div>
</section>
<div class="container">
<section class="guides-filter-bar">
<nav class="category-filters">
<a href="#" class="active">Todos</a>
<a href="#">Compradores</a>
<a href="#">Inversión</a>
<a href="#">Estilo de Vida</a>
</nav>
<form class="search-form-guides">
<input type="search" placeholder="Buscar en guías..." class="input-field">
<button type="submit" aria-label="Buscar"><i class="fas fa-search"></i></button>
</form>
</section>
<section class="guides-grid-container">
<div class="guides-grid">
<article class="property-card blog-post-card">
<div class="property-card-image" style="background-image: url('https://images.unsplash.com/photo-1444858291040-58f756a3bdd6?q=80&w=2578&auto=format&fit=crop');"></div>
<div class="property-card-content">
<div class="card-meta">
<span>Estilo de Vida</span>
<span class="meta-divider">·</span>
<span>5 min de lectura</span>
</div>
<h3 class="property-card-title">Diseño para Casas Campestres en Clima Templado</h3>
<a href="leer_guia.html" class="btn btn-outline">Leer Más</a>
</div>
</article>
<article class="property-card blog-post-card">
<div class="property-card-image" style="background-image: url('https://images.unsplash.com/photo-1444858291040-58f756a3bdd6?q=80&w=2578&auto=format&fit=crop');"></div>
<div class="property-card-content">
<div class="card-meta">
<span>Inversión</span>
<span class="meta-divider">·</span>
<span>8 min de lectura</span>
</div>
<h3 class="property-card-title">¿Lote o Finca Productiva? Qué Conviene Más en Yarumal</h3>
<a href="leer_guia.html" class="btn btn-outline">Leer Más</a>
</div>
</article>
<article class="property-card blog-post-card">
<div class="property-card-image" style="background-image: url('https://images.unsplash.com/photo-1444858291040-58f756a3bdd6?q=80&w=2578&auto=format&fit=crop');"></div>
<div class="property-card-content">
<div class="card-meta">
<span>Inversión</span>
<span class="meta-divider">·</span>
<span>6 min de lectura</span>
</div>
<h3 class="property-card-title">Potencial del Aguacate y Café en Tierras Yarumaleñas</h3>
<a href="leer_guia.html" class="btn btn-outline">Leer Más</a>
</div>
</article>
<article class="property-card blog-post-card">
<div class="property-card-image" style="background-image: url('https://images.unsplash.com/photo-1444858291040-58f756a3bdd6?q=80&w=2578&auto=format&fit=crop');"></div>
<div class="property-card-content">
<div class="card-meta">
<span>Estilo de Vida</span>
<span class="meta-divider">·</span>
<span>4 min de lectura</span>
</div>
<h3 class="property-card-title">La Vida Tranquila: Beneficios de Vivir en el Norte de Antioquia</h3>
<a href="leer_guia.html" class="btn btn-outline">Leer Más</a>
</div>
</article>
</div>
</section>
</div>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página de Guías (guias.html)
1. body class="page-guias"
Aplica una clase específica al body, lo que permite que se apliquen estilos CSS únicos a esta página sin afectar al resto del sitio.
2. section class="guides-hero"
Define la sección principal de la página, diseñada para destacar la guía más importante. Contiene un fondo con imagen y un texto centrado con un llamado a la acción claro.
3. div class="guides-hero-bg"
Este div interno se utiliza para aplicar la imagen de fondo y el degradado oscuro. Usar un elemento separado para el fondo en lugar de aplicarlo directamente a la sección puede ofrecer más flexibilidad en el diseño.
4. section class="guides-filter-bar"
Crea una barra de herramientas debajo de la sección hero. Contiene tanto los filtros de categorías como un formulario de búsqueda, permitiendo al usuario encontrar fácilmente el contenido que le interesa.
5. nav class="category-filters"
Contiene una lista de enlaces que funcionan como filtros para las guías, permitiendo al usuario ver artículos de una categoría específica como "Inversión" o "Estilo de Vida".
6. section class="guides-grid-container"
Es el contenedor principal para la cuadrícula de artículos. Envuelve a la grilla para aplicar espaciado y otros estilos de contenedor si fuera necesario.
7. article class="property-card blog-post-card"
Cada guía se presenta dentro de una etiqueta article, indicando que es contenido independiente. Se reutilizan las clases property-card y blog-post-card de la página de inicio para asegurar un diseño consistente en todo el sitio.
8. div class="card-meta"
Este pequeño bloque dentro de cada tarjeta de guía proporciona información contextual, como la categoría del artículo ("Estilo de Vida") y el tiempo estimado de lectura, mejorando la experiencia del usuario.
9. script para el menú móvil
Este es el mismo script simple utilizado en las otras páginas. Su única función es detectar el clic en el botón de menú móvil y añadir o quitar la clase active del encabezado para mostrar u ocultar la navegación en dispositivos pequeños.
guias.css
Este archivo CSS contiene los estilos exclusivos para la página de guías (guias.html). Se encarga de definir la apariencia de la sección principal (hero), la barra de filtros de categorías y búsqueda, y la cuadrícula responsive donde se muestran los artículos. También incluye ajustes específicos para las tarjetas de las guías, asegurando que el botón de "Leer Más" se alinee correctamente. Finalmente, contiene media queries que adaptan el diseño de la página para una correcta visualización en tabletas y dispositivos móviles.
LUXEPROPS: Código de Estilos de la Página de Guías (guias.css)
.guides-hero {
position: relative;
height: 60vh;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-primary-foreground);
padding: 0 var(--space-lg);
}
.guides-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
}
.guides-hero .hero-content {
max-width: 800px;
}
.guides-filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--color-utility-border);
gap: var(--space-xl);
flex-wrap: wrap;
}
.category-filters {
display: flex;
gap: var(--space-lg);
flex-wrap: wrap;
}
.category-filters a {
color: var(--color-secondary-foreground);
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 600;
padding-bottom: var(--space-xs);
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.category-filters a:hover {
color: var(--color-primary-foreground);
}
.category-filters a.active {
color: var(--color-primary-foreground);
border-bottom-color: var(--color-accent-main);
}
.search-form-guides {
display: flex;
align-items: center;
min-width: 280px;
}
.search-form-guides .input-field {
border-bottom: 1px solid var(--color-utility-border) !important;
}
.search-form-guides button {
background: none;
border: none;
color: var(--color-secondary-foreground);
font-size: 1.2rem;
cursor: pointer;
margin-left: -30px;
padding: var(--space-sm);
}
.guides-grid-container {
padding-top: var(--space-xxl);
}
.guides-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-xl);
}
@media (min-width: 1024px) {
.card-featured-vertical {
grid-row: span 2;
}
.card-featured-vertical .property-card-image {
height: 100%;
min-height: 400px;
}
}
.blog-post-card .property-card-content {
display: flex;
flex-direction: column;
}
.blog-post-card .btn {
margin-top: auto;
}
@media (max-width: 992px) {
.guides-filter-bar {
flex-direction: column;
align-items: stretch;
gap: var(--space-xxl);
}
.category-filters {
justify-content: center;
}
}
@media (max-width: 768px) {
.guides-hero {
height: auto;
min-height: 350px;
padding-top: var(--space-xxxl);
padding-bottom: var(--space-xxl);
}
.guides-hero .h1 {
font-size: clamp(2rem, 7vw, 2.5rem);
}
}Explicación del código: LUXEPROPS: Código de Estilos de la Página de Guías (guias.css)
1. .guides-hero y .guides-hero-bg
Definen la sección principal. .guides-hero actúa como contenedor flexible para centrar el contenido, mientras que .guides-hero-bg es un div posicionado absolutamente detrás (z-index: -1) para mostrar la imagen de fondo sin afectar al texto.
2. .guides-filter-bar
Crea la barra de filtros usando flexbox (display: flex) para alinear los filtros de categoría y la barra de búsqueda en la misma línea. La propiedad flex-wrap: wrap permite que los elementos se muevan a una nueva línea en pantallas más estrechas si no caben.
3. .category-filters a.active
Aplica un estilo visual a la categoría que está actualmente seleccionada, cambiando el color del texto y añadiendo un borde inferior de color, lo que sirve como un indicador claro para el usuario.
4. .search-form-guides button
Estiliza el botón de búsqueda. La propiedad margin-left: -30px es un truco para superponer el ícono de la lupa sobre el campo de texto, creando un diseño de búsqueda más compacto e integrado.
5. .guides-grid
Define la cuadrícula de artículos usando CSS Grid. La regla repeat(auto-fit, minmax(320px, 1fr)) crea un diseño totalmente responsive, donde las columnas se ajustan automáticamente al espacio disponible sin necesidad de media queries específicas para cada tamaño.
6. .blog-post-card .btn
Dentro de una tarjeta de guía (que es un contenedor flex), margin-top: auto en el botón lo empuja hacia la parte inferior del contenedor. Esto asegura que todos los botones de "Leer Más" estén alineados en la misma posición vertical, independientemente de la longitud del título del artículo.
7. @media (max-width: 992px)
Para pantallas de tableta, esta regla cambia la dirección de la barra de filtros a vertical (flex-direction: column) y alinea sus elementos para que ocupen todo el ancho, mejorando la usabilidad en espacios más reducidos.
8. @media (max-width: 768px)
Para dispositivos móviles, esta media query ajusta la sección principal. Reduce la altura mínima del hero y utiliza la función clamp() para que el tamaño del título principal (h1) se escale de forma fluida y proporcional al ancho de la pantalla.
agendar-cita.html
Este es el código para la página agendar-cita.html. Su objetivo es proporcionar a los usuarios un medio de contacto directo con la inmobiliaria. La página está estructurada en un diseño de dos columnas: un panel informativo a la izquierda que genera confianza (con foto del asesor, descripción del proceso y un testimonio) y un panel de acción a la derecha. Este panel interactivo permite al usuario elegir entre dos métodos de contacto: llenar un formulario para solicitar una visita a una propiedad o usar un placeholder para un widget de calendario (como Calendly) para agendar una llamada. La interactividad se maneja con JavaScript para cambiar entre estas dos opciones.
LUXEPROPS: Código de la Página para Agendar Cita (agendar-cita.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agendar Cita | LUXEPROPS Yarumal</title>
<meta name="description" content="Agende una visita a una propiedad o una llamada de asesoría con nuestros expertos en fincas y lotes en Yarumal, Antioquia.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-agendar-cita">
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main>
<div class="container page-container">
<div class="text-center">
<span class="subtitle">Contacto Directo</span>
<h1 class="h1">Un Asesor Experto está Listo para Guiarle</h1>
</div>
<div class="appointment-container mt-xl">
<aside class="appointment-info-panel">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=2574&auto=format&fit=crop" alt="Foto del asesor Juan Velez" class="agent-photo-large">
<h3>Hablemos de su proyecto en Yarumal</h3>
<p>Sea que busque su futuro hogar, una finca productiva o un lote para construir sus sueños, nuestro equipo está aquí para guiarle. Permítanos entender sus necesidades y ofrecerle una asesoría honesta y experta, sin ningún compromiso.</p>
<div class="what-to-expect">
<h4>Qué esperar de su cita:</h4>
<ol class="timeline">
<li>
<strong>Contacto Inicial</strong>
<p>Cuéntenos qué necesita o agende una llamada directamente en nuestro calendario.</p>
</li>
<li>
<strong>Confirmación y Preparación</strong>
<p>Confirmaremos su cita y prepararemos una selección de propiedades o información relevante.</p>
</li>
<li>
<strong>Asesoría o Visita</strong>
<p>Tendremos una conversación productiva o una visita enriquecedora para trazar el mejor camino.</p>
</li>
</ol>
</div>
<blockquote>
<p>"El acompañamiento de Juan fue fundamental. Entendió perfectamente lo que buscábamos. El proceso fue transparente y muy profesional."</p>
<footer>- Familia Restrepo, nuevos propietarios en la vereda El Cedro.</footer>
</blockquote>
</aside>
<section class="appointment-action-panel">
<div class="appointment-type-selector">
<button class="btn-selector active" data-target="#form-visita">
<i class="fas fa-map-marker-alt"></i> Agendar Visita a Propiedad
</button>
<button class="btn-selector" data-target="#form-llamada">
<i class="fas fa-phone-alt"></i> Solicitar Llamada
</button>
</div>
<div class="appointment-content-wrapper">
<div class="appointment-form-container active" id="form-visita">
<h4>Coordine su visita</h4>
<p>Llene sus datos y nos pondremos en contacto para confirmar el mejor horario.</p>
<form class="appointment-form">
<input type="text" placeholder="Nombre Completo" class="input-field" required>
<input type="email" placeholder="Email" class="input-field" required>
<input type="tel" placeholder="Teléfono / WhatsApp" class="input-field" required>
<input type="text" placeholder="Propiedad de Interés (Opcional)" class="input-field">
<textarea class="input-field" rows="4" placeholder="Indíquenos su disponibilidad de fechas y horas..."></textarea>
<button type="submit" class="btn btn-primary">Enviar Solicitud de Visita</button>
</form>
</div>
<div class="appointment-form-container" id="form-llamada">
<h4>Elija el mejor momento para usted</h4>
<p>Seleccione una fecha y hora en nuestro calendario para recibir una llamada de asesoría inicial de 15 minutos.</p>
<div class="calendly-placeholder">
<p>El widget de Calendly se mostraría aquí.</p>
<p>Regístrate en <a href="https://calendly.com/" target="_blank">Calendly.com</a>, crea un tipo de evento y pega el código de "inline embed" aquí.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<script>
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const selectorButtons = document.querySelectorAll('.btn-selector');
const formContainers = document.querySelectorAll('.appointment-form-container');
selectorButtons.forEach(button => {
button.addEventListener('click', () => {
selectorButtons.forEach(btn => btn.classList.remove('active'));
formContainers.forEach(container => container.classList.remove('active'));
button.classList.add('active');
const targetId = button.getAttribute('data-target');
const targetContainer = document.querySelector(targetId);
if (targetContainer) {
targetContainer.classList.add('active');
}
});
});
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
if (menuToggle && mainHeader) {
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
}
});
</script>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página para Agendar Cita (agendar-cita.html)
1. div class="appointment-container"
Es el contenedor principal que estructura la página en dos columnas: el panel de información a la izquierda y el panel de acción a la derecha. Se utiliza CSS Grid o Flexbox para crear este layout.
2. aside class="appointment-info-panel"
Define el panel izquierdo. Su propósito es informativo y de persuasión, utilizando una foto del agente, una descripción del proceso y un testimonio para generar confianza en el usuario.
3. ol class="timeline"
Una lista ordenada (ol) que se estiliza con CSS para parecer una "línea de tiempo" visual. Describe el proceso de agendamiento en tres pasos claros y sencillos.
4. blockquote
Utiliza la etiqueta semántica de cita en bloque para mostrar un testimonio de un cliente satisfecho, lo que añade prueba social y credibilidad.
5. section class="appointment-action-panel"
Define el panel derecho. Es la sección interactiva donde el usuario realiza la acción de contactar.
6. div class="appointment-type-selector"
Contiene los dos botones que actúan como pestañas o selectores. Permiten al usuario elegir entre "Agendar Visita" o "Solicitar Llamada", mostrando el contenido correspondiente a cada opción.
7. div class="appointment-form-container"
Estos son los contenedores para el contenido que se muestra u oculta. Uno contiene el formulario de contacto y el otro, el placeholder para Calendly. La visibilidad se controla con JavaScript al añadir o quitar la clase active.
8. div class="calendly-placeholder"
Es un marcador de posición que indica dónde se debería incrustar un widget de agendamiento externo como Calendly. Esto permite separar la estructura de la página de la implementación de servicios de terceros.
</d>9. script para la interactividad
Este bloque de JavaScript, envuelto en un evento DOMContentLoaded, se encarga de la lógica de las pestañas. Escucha los clics en los botones selectores y cambia la clase active para mostrar el contenedor del formulario correcto y resaltar el botón seleccionado.
agendar-cita.css
Este archivo CSS contiene los estilos para la página agendar-cita.html. Es responsable de crear el diseño de dos columnas, con un panel de información a la izquierda y un panel de acción a la derecha. Entre sus características más notables están el efecto "pegajoso" (sticky) del panel del formulario en la versión de escritorio, una línea de tiempo creada con pseudo-elementos de CSS, y los estilos para los selectores que permiten alternar entre el formulario de contacto y el placeholder de Calendly. El archivo concluye con media queries que transforman el diseño de dos columnas a una sola para una correcta visualización en tabletas y móviles.
LUXEPROPS: Código de Estilos de la Página para Agendar Cita (agendar-cita.css)
.page-agendar-cita .main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(33, 33, 33, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-utility-border);
}
.page-agendar-cita main {
padding-top: 100px;
}
.page-container {
padding-top: var(--space-xl);
padding-bottom: var(--space-xxxl);
}
.appointment-container {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-xxl);
align-items: flex-start;
}
.appointment-info-panel {
text-align: center;
}
.agent-photo-large {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto var(--space-lg);
border: 3px solid var(--color-accent-main);
display: block;
}
.appointment-info-panel h3 {
font-size: 1.5rem;
font-family: var(--font-primary);
margin-bottom: var(--space-md);
}
.appointment-info-panel > p {
color: var(--color-secondary-foreground);
line-height: 1.7;
margin-bottom: var(--space-xl);
}
.what-to-expect {
text-align: left;
margin-top: var(--space-xl);
border-top: 1px solid var(--color-utility-border);
padding-top: var(--space-xl);
}
.what-to-expect h4 {
font-size: 1.2rem;
margin-bottom: var(--space-lg);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.timeline {
list-style: none;
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 5px;
top: 5px;
bottom: 5px;
width: 2px;
background-color: var(--color-utility-border);
}
.timeline li {
margin-bottom: var(--space-xl);
position: relative;
}
.timeline li::before {
content: '';
position: absolute;
left: -25px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-accent-main);
}
.timeline li p {
color: var(--color-secondary-foreground);
font-size: 0.9rem;
}
.appointment-info-panel blockquote {
margin-top: var(--space-xl);
padding: var(--space-lg);
background-color: var(--color-secondary-background);
border-left: 3px solid var(--color-accent-main);
border-radius: 0 8px 8px 0;
text-align: left;
}
.appointment-info-panel blockquote footer {
margin-top: var(--space-sm);
font-weight: 600;
color: var(--color-secondary-foreground);
font-size: 0.9rem;
}
.appointment-action-panel {
background-color: var(--color-secondary-background);
border-radius: 8px;
padding: var(--space-xl);
position: sticky;
top: 120px;
}
.appointment-type-selector {
display: flex;
gap: var(--space-sm);
background-color: var(--color-primary-background);
padding: var(--space-sm);
border-radius: 8px;
margin-bottom: var(--space-lg);
}
.btn-selector {
flex: 1;
padding: var(--space-md);
background-color: transparent;
border: none;
color: var(--color-secondary-foreground);
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.btn-selector:hover {
background-color: #424242;
color: var(--color-primary-foreground);
}
.btn-selector.active {
background-color: var(--color-accent-main);
color: var(--color-accent-contrast);
}
.appointment-form-container { display: none; }
.appointment-form-container.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.appointment-form-container h4 {
font-size: 1.5rem;
font-family: var(--font-primary);
}
.appointment-form-container p {
color: var(--color-secondary-foreground);
margin-bottom: var(--space-lg);
}
.appointment-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.appointment-form .input-field {
background-color: var(--color-primary-background);
border: 1px solid var(--color-utility-border);
border-radius: 4px;
height: 48px;
padding: 0 var(--space-md);
}
.appointment-form textarea.input-field {
height: auto;
padding: var(--space-md);
resize: vertical;
}
.calendly-placeholder {
background-color: var(--color-primary-background);
border: 1px dashed var(--color-utility-border);
padding: var(--space-xxl) var(--space-lg);
text-align: center;
border-radius: 4px;
}
.calendly-placeholder a {
color: var(--color-accent-main);
text-decoration: underline;
}
@media (max-width: 992px) {
.appointment-container {
grid-template-columns: 1fr;
}
.appointment-action-panel {
position: relative;
top: 0;
margin-top: var(--space-xl);
}
}
@media (max-width: 768px) {
.appointment-type-selector {
flex-direction: column;
}
}Explicación del código: LUXEPROPS: Código de Estilos de la Página para Agendar Cita (agendar-cita.css)
1. .page-agendar-cita .main-header
Establece que en esta página, el encabezado será fijo y tendrá un fondo semitransparente con efecto de desenfoque desde el inicio, sin necesidad de que el usuario haga scroll.
2. .appointment-container
Define la estructura principal de la página como una cuadrícula (CSS Grid) de dos columnas. La segunda columna (1.2fr) es ligeramente más ancha que la primera (1fr).
3. .timeline::before y .timeline li::before
Esta es una técnica de CSS para crear un efecto visual de "línea de tiempo". El primer pseudo-elemento (::before) dibuja la línea vertical, y el segundo dibuja los círculos en cada punto de la lista, todo sin necesidad de añadir elementos extra en el HTML.
4. .appointment-action-panel
Establece el estilo del panel derecho. La propiedad position: sticky y top: 120px es clave: hace que este panel se quede "pegado" en la pantalla mientras el usuario hace scroll en el contenido más largo del panel izquierdo (en pantallas de escritorio).
5. .btn-selector.active
Aplica un estilo visualmente destacado (fondo de color y texto en contraste) al botón que corresponde al formulario activo, indicando claramente al usuario qué opción ha seleccionado.
6. .appointment-form-container.active
Cuando un contenedor de formulario recibe la clase .active a través de JavaScript, esta regla lo hace visible (display: block) y le aplica una sutil animación de desvanecimiento (fadeIn) para una transición más suave.
7. .calendly-placeholder
Estiliza el contenedor destinado al widget de Calendly con un borde discontinuo, comunicando visualmente que es un área donde se debe incrustar contenido externo.
8. @media (max-width: 992px)
Esta media query transforma el diseño para tabletas. Cambia la cuadrícula de dos columnas a una sola (grid-template-columns: 1fr) y desactiva el comportamiento "pegajoso" del panel de acción (position: relative) para que simplemente se apile debajo del panel de información.
9. @media (max-width: 768px)
Para pantallas móviles, esta regla ajusta el selector de tipo de cita. Cambia su dirección a vertical (flex-direction: column) para que los botones se apilen uno encima del otro, adaptándose mejor al espacio reducido.
nosotros.html
Este es el código fuente de la página nosotros.html. Su propósito es presentar la historia, los valores y el equipo de la inmobiliaria "LUXEPROPS" para generar confianza y una conexión personal con los clientes. La página está estructurada como una narrativa visual, comenzando con una introducción, seguida de la historia de la empresa, una sección de valores, la presentación del equipo, un testimonio de un cliente y, finalmente, un llamado a la acción. El JavaScript de esta página incluye una función para hacer que el encabezado sea "pegajoso" (sticky) al hacer scroll.
LUXEPROPS: Código de la Página "Nosotros" (nosotros.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nosotros | Expertos en Fincas en Yarumal | LUXEPROPS</title>
<meta name="description" content="Conozca al equipo de LUXEPROPS, sus asesores y vecinos en Yarumal. Apasionados por la tierra y comprometidos con una asesoría transparente.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-nosotros">
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main>
<section class="about-hero">
<div class="about-hero-content text-center">
<span class="subtitle">BIENVENIDO A SU CASA EN EL NORTE DE ANTIOQUIA</span>
<h1 class="h1">Conectamos personas y proyectos con la tierra de Yarumal.</h1>
<p>Más que una inmobiliaria, somos sus asesores y vecinos. Apasionados por esta tierra y comprometidos con encontrar el lugar perfecto para usted.</p>
</div>
</section>
<section class="about-story container">
<div class="story-grid">
<div class="story-image">
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2670&auto=format&fit=crop" alt="Paisaje montañoso de Antioquia, Colombia">
</div>
<div class="story-content">
<h2 class="h2">Nacimos de la Pasión por esta Tierra</h2>
<p>LUXEPROPS nació del deseo de compartir la belleza y el potencial del campo yarumaleño. Fundada por Juan Velez, un local con más de 20 años de experiencia recorriendo estas montañas, nuestra misión es simple: ofrecer una asesoría transparente, honesta y profundamente conocedora para cada cliente que sueña con tener un pedazo de Antioquia.</p>
<p>Creemos que comprar una finca es más que un negocio; es un proyecto de vida. Por eso, nuestro acompañamiento va más allá de la firma.</p>
</div>
</div>
</section>
<section class="about-values">
<div class="container text-center">
<h2 class="h2">Nuestra Forma de Trabajar</h2>
<div class="values-grid">
<div class="value-card">
<i class="fas fa-map-marked-alt"></i>
<h3>Conocimiento Local</h3>
<p>Conocemos cada vereda, cada tipo de tierra y el verdadero potencial de cada propiedad. Nuestra asesoría nace de vivir y respirar Yarumal.</p>
</div>
<div class="value-card">
<i class="fas fa-handshake"></i>
<h3>Transparencia Total</h3>
<p>Creemos en procesos claros. Desde el estudio de títulos hasta la negociación final, usted tendrá toda la información para tomar la mejor decisión.</p>
</div>
<div class="value-card">
<i class="fas fa-users"></i>
<h3>Asesoría Integral</h3>
<p>No solo mostramos fincas. Le acompañamos en el aspecto legal, topográfico y productivo para asegurar que su inversión sea segura y rentable.</p>
</div>
</div>
</div>
</section>
<section class="about-team container">
<div class="text-center">
<h2 class="h2">El Equipo Detrás de su Sueño</h2>
</div>
<div class="team-grid">
<div class="team-member-card">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=2574&auto=format&fit=crop" alt="Retrato de Juan Velez">
<h3>Juan Velez</h3>
<h4>Fundador y Asesor Principal</h4>
<p>Yarumaleño de nacimiento, Juan combina su pasión por el campo con un profundo conocimiento técnico para encontrar la propiedad ideal para cada familia.</p>
</div>
<div class="team-member-card">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=2576&auto=format&fit=crop" alt="Retrato de Maria Zapata">
<h3>Maria Zapata</h3>
<h4>Asesora Legal y Documental</h4>
<p>Abogada experta en derecho inmobiliario rural, Maria garantiza que cada paso del proceso sea seguro, transparente y conforme a la ley.</p>
</div>
<div class="team-member-card">
<img src="https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=2671&auto=format&fit=crop" alt="Retrato de Carlos Rios">
<h3>Carlos Rios</h3>
<h4>Coordinador de Visitas</h4>
<p>Carlos es el rostro amigable que le dará la bienvenida. Conoce cada camino y se asegura de que su visita a las propiedades sea una gran experiencia.</p>
</div>
</div>
</section>
<section class="about-testimonials">
<div class="container text-center">
<h2 class="h2">Lo que dicen nuestros clientes</h2>
<blockquote>
<i class="fas fa-quote-left"></i>
<p>El acompañamiento de Juan fue fundamental. Entendió perfectamente lo que buscábamos en nuestra finca. El proceso fue transparente y muy profesional, nos sentimos seguros en cada paso.</p>
<footer>- Familia Restrepo, nuevos propietarios en la vereda El Cedro.</footer>
</blockquote>
</div>
</section>
<section class="about-cta">
<div class="container text-center">
<h2 class="h2">Ahora que nos conoce, permítanos conocer su proyecto.</h2>
<p>Estamos listos para escuchar sus ideas y ayudarle a encontrar el lugar que está buscando en Yarumal. Agende una llamada de asesoría sin costo y sin compromiso.</p>
<a href="agendar-cita.html" class="btn btn-primary mt-xl">Iniciar una Conversación</a>
</div>
</section>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pageHeader = document.getElementById('page-header');
if (pageHeader) {
const handleHeaderSticky = () => {
if (window.scrollY > 50) {
pageHeader.classList.add('is-sticky');
} else {
pageHeader.classList.remove('is-sticky');
}
};
window.addEventListener('scroll', handleHeaderSticky);
}
// Lógica del menú móvil
const menuToggle = document.querySelector('.mobile-menu-toggle');
if (menuToggle && pageHeader) {
menuToggle.addEventListener('click', () => {
pageHeader.classList.toggle('active');
});
}
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página "Nosotros" (nosotros.html)
1. section class="about-hero"
Define la sección de introducción de la página. A diferencia de otras páginas, esta se enfoca en un mensaje textual potente en lugar de una gran imagen de fondo, estableciendo un tono cercano y profesional.
2. section class="about-story"
Presenta la historia de la empresa utilizando un diseño de cuadrícula (story-grid) de dos columnas, que muestra una imagen inspiradora junto a un texto narrativo.
3. section class="about-values"
Muestra los pilares de la empresa en una cuadrícula de tres columnas. Cada "valor" se presenta en una tarjeta (value-card) con un ícono representativo, un título y una descripción, haciendo la información fácil de digerir.
4. section class="about-team"
Introduce a los miembros del equipo. Utiliza una cuadrícula (team-grid) para mostrar tarjetas de perfil (team-member-card), cada una con la foto, nombre, cargo y una breve biografía del miembro del equipo.
5. section class="about-testimonials"
Esta sección está dedicada a resaltar la prueba social. Utiliza una etiqueta blockquote para presentar de forma destacada un testimonio de un cliente, lo que ayuda a generar confianza y credibilidad.
6. section class="about-cta"
Es la sección de "Llamado a la Acción" (Call to Action). Su objetivo es convertir el interés generado en la página en una acción concreta, invitando al usuario a contactar y enlazando directamente a la página de "Agendar Cita".
7. Lógica del script (Header Pegajoso)
El script principal de esta página, envuelto en un evento DOMContentLoaded, se encarga de la funcionalidad del encabezado "pegajoso". Detecta el desplazamiento (scroll) del usuario y añade la clase is-sticky al encabezado cuando se baja más de 50 píxeles, permitiendo que cambie su apariencia mediante CSS.
nosotros.css
Este es el archivo CSS final que da estilo a la página nosotros.html. Se encarga de definir la apariencia de cada una de las secciones narrativas que componen la página: el encabezado con su imagen de fondo, la sección de la historia con su diseño de dos columnas, las cuadrículas responsivas para los valores y el equipo, y los estilos especiales para los testimonios. También incluye efectos sutiles como la animación al pasar el cursor sobre las tarjetas del equipo y las media queries para adaptar el diseño a diferentes dispositivos.
LUXEPROPS: Código de Estilos de la Página "Nosotros" (nosotros.css)
.page-nosotros .main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
transition: background-color 0.4s ease, transform 0.4s ease;
border-bottom: 1px solid transparent;
}
.page-nosotros .main-header.is-sticky {
background-color: rgba(33, 33, 33, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-utility-border);
}
.page-nosotros main {
padding-top: 80px;
}
.about-hero {
background-image: linear-gradient(rgba(33, 33, 33, 0.7), rgba(33, 33, 33, 0.7)), url('https://images.unsplash.com/photo-1556156652-6a5b4b28a8a9?q=80&w=2670&auto=format&fit=crop');
background-size: cover;
background-position: center 30%;
padding: var(--space-xxxl) 5%;
color: var(--color-primary-foreground);
}
.about-hero-content {
max-width: 800px;
margin: 0 auto;
}
.about-hero p {
font-size: 1.2rem;
color: var(--color-secondary-foreground);
}
.about-story {
padding-top: var(--space-xxxl);
padding-bottom: var(--space-xxxl);
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--space-xxl);
align-items: center;
}
.story-image img {
width: 100%;
border-radius: 8px;
height: 100%;
object-fit: cover;
}
.story-content p {
color: var(--color-secondary-foreground);
font-size: 1.1rem;
line-height: 1.8;
}
.about-values {
background-color: var(--color-secondary-background);
padding: var(--space-xxxl) 5%;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.value-card {
padding: var(--space-lg);
}
.value-card i {
font-size: 2.5rem;
color: var(--color-accent-main);
margin-bottom: var(--space-lg);
}
.value-card h3 {
font-family: var(--font-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1.2rem;
margin-bottom: var(--space-md);
}
.value-card p {
color: var(--color-secondary-foreground);
}
.about-team {
padding: var(--space-xxxl) 5%;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.team-member-card {
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-member-card:hover {
transform: translateY(-5px);
}
.team-member-card img {
width: 100%;
height: 320px;
object-fit: cover;
object-position: center top;
border-radius: 8px;
margin-bottom: var(--space-lg);
}
.team-member-card h3 {
font-family: var(--font-primary);
font-size: 1.8rem;
}
.team-member-card h4 {
color: var(--color-secondary-foreground);
font-weight: 400;
margin-bottom: var(--space-md);
}
.team-member-card p {
color: var(--color-secondary-foreground);
font-size: 0.9rem;
}
.about-testimonials {
background-color: var(--color-secondary-background);
padding: var(--space-xxxl) 5%;
}
.about-testimonials blockquote {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.about-testimonials .fa-quote-left {
position: absolute;
top: -20px;
left: -20px;
font-size: 4rem;
color: var(--color-utility-border);
opacity: 0.5;
}
.about-testimonials blockquote p {
font-family: var(--font-primary);
font-size: 1.8rem;
line-height: 1.6;
margin: 0;
}
.about-testimonials blockquote footer {
margin-top: var(--space-lg);
font-weight: 600;
color: var(--color-secondary-foreground);
font-size: 1rem;
}
.about-cta {
padding: var(--space-xxxl) 5%;
}
.about-cta .h2 {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.about-cta p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: var(--color-secondary-foreground);
font-size: 1.1rem;
}
@media (max-width: 992px) {
.story-grid {
grid-template-columns: 1fr;
}
}Explicación del código: LUXEPROPS: Código de Estilos de la Página "Nosotros" (nosotros.css)
1. .page-nosotros .main-header.is-sticky
Aplica un fondo semitransparente con desenfoque al encabezado solo cuando el usuario ha hecho scroll hacia abajo y JavaScript ha añadido la clase is-sticky.
2. .about-hero
Define la sección de introducción con una imagen de fondo a pantalla completa, una capa de color oscuro para mejorar la legibilidad del texto y un espaciado generoso (padding).
3. .story-grid
Crea un diseño de cuadrícula de dos columnas para la sección de la historia, donde la columna del texto (1.5fr) es más ancha que la de la imagen (1fr), dando más importancia al contenido escrito.
4. .values-grid y .team-grid
Ambas reglas utilizan un diseño de cuadrícula responsive con repeat(auto-fit, minmax(300px, 1fr)). Esto permite que las tarjetas de valores y de miembros del equipo se ajusten automáticamente en la pantalla, creando columnas sin necesidad de media queries complejas.
5. .team-member-card:hover
Añade una microinteracción sutil. Al pasar el cursor sobre la tarjeta de un miembro del equipo, esta se eleva ligeramente (transform: translateY(-5px)), indicando que es un elemento interactivo.
6. .about-testimonials .fa-quote-left
Coloca un ícono grande de comillas de forma absoluta detrás del texto del testimonio. Se le baja la opacidad para que actúe como un elemento decorativo de fondo sin distraer de la lectura.
7. .about-cta .h2 y .about-cta p
Limitan el ancho máximo del texto en la sección de llamado a la acción. Esto evita que las líneas de texto sean demasiado largas en pantallas grandes, mejorando la legibilidad.
8. @media (max-width: 992px)
La única media query en este archivo. Se encarga de cambiar el diseño de la sección de la historia de dos columnas a una sola (grid-template-columns: 1fr) en tabletas y dispositivos más pequeños, apilando la imagen sobre el texto para una mejor visualización.
propiedad.html
Este es el código para la página de una propiedad individual, diseñada como una experiencia de "scrollytelling" o narrativa a través del desplazamiento. La página cuenta la historia de la "Finca La Esmeralda" a través de una serie de secciones inmersivas a pantalla completa. Sus características más destacadas incluyen un encabezado de video, una navegación lateral con puntos que se actualiza automáticamente con el scroll, un modal para un recorrido virtual 360°, y animaciones de aparición de contenido. Toda esta interactividad avanzada se gestiona con JavaScript, utilizando la moderna y eficiente API IntersectionObserver.
LUXEPROPS: Código de la Página de Propiedad Individual (propiedad.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finca La Esmeralda en Yarumal | LUXEPROPS</title>
<meta name="description" content="Descubra la Finca La Esmeralda, un refugio en la Vereda La Clara, Yarumal, donde la tierra es próspera y el tiempo tiene otro ritmo.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-propiedad-single">
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<nav class="dot-navigation">
<ul>
<li><a href="#narrative-hero" class="dotnav-link active" aria-label="Ir a Portada"><span class="dotnav-tooltip">Portada</span></a></li>
<li><a href="#narrative-intro" class="dotnav-link" aria-label="Ir a Introducción"><span class="dotnav-tooltip">Introducción</span></a></li>
<li><a href="#narrative-house" class="dotnav-link" aria-label="Ir a La Casa"><span class="dotnav-tooltip">La Casa</span></a></li>
<li><a href="#narrative-land" class="dotnav-link" aria-label="Ir a El Terreno"><span class="dotnav-tooltip">El Terreno</span></a></li>
<li><a href="#narrative-specs" class="dotnav-link" aria-label="Ir a Ficha Técnica"><span class="dotnav-tooltip">Ficha Técnica</span></a></li>
<li><a href="#narrative-contact" class="dotnav-link" aria-label="Ir a Contacto"><span class="dotnav-tooltip">Contacto</span></a></li>
</ul>
</nav>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20la%20Finca%20La%20Esmeralda." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<div class="modal-overlay" id="tour-modal">
<div class="modal-content">
<button class="modal-close" id="close-tour-btn" aria-label="Cerrar">×</button>
<h3>Recorrido Virtual 360°</h3>
<div class="virtual-tour-embed-container">
<p>El recorrido virtual se mostraría aquí.</p>
</div>
</div>
</div>
<main class="narrative-main">
<section class="narrative-section narrative-hero" id="narrative-hero">
<div class="hero-background">
<video autoplay muted loop playsinline poster="https://images.unsplash.com/photo-1594921948968-3d3a13a8335b?q=80&w=2574&auto=format&fit=crop">
<source src="https://assets.mixkit.co/videos/preview/mixkit-flying-over-a-coffee-plantation-in-the-mountains-42145-large.mp4" type="video/mp4">
</video>
</div>
<div class="hero-content fade-in-section">
<h1 class="h1">Finca La Esmeralda</h1>
<p>Vereda La Clara, Yarumal</p>
</div>
<div class="scroll-down-indicator">
<i class="fas fa-chevron-down"></i>
</div>
</section>
<section class="narrative-section narrative-intro text-section fade-in-section" id="narrative-intro">
<div class="text-container">
<p class="h3">Hay lugares que se miden en hectáreas, y otros que se miden en sensaciones. La Esmeralda es ambos.</p>
<p>Un refugio donde la tierra es próspera y el tiempo tiene otro ritmo. Le invitamos a descubrirlo.</p>
</div>
</section>
<section class="narrative-section narrative-house fade-in-section" id="narrative-house">
<div class="content-container">
<h2 class="h2">El Corazón de la Finca</h2>
<div class="house-layout">
<div class="house-image-main">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop" alt="Casa principal de la Finca La Esmeralda">
</div>
<div class="house-description">
<h3>La Casa Campestre</h3>
<p>Construida con maderas de la región y un diseño que respeta el entorno, la casa principal de 180 m² es el centro de la vida en la finca. Sus amplios corredores y ventanales se abren al paisaje, creando un espacio acogedor y conectado con la naturaleza.</p>
<div class="house-gallery-preview">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop" alt="Cocina">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop" alt="Sala">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?q=80&w=2574&auto=format&fit=crop" alt="Corredor">
</div>
<button id="open-tour-btn" class="btn btn-outline"><i class="fas fa-vr-cardboard"></i> Ver Recorrido Virtual 360°</button>
</div>
</div>
</div>
</section>
<section class="narrative-section narrative-land fade-in-section" id="narrative-land">
<div class="content-container text-light">
<h2 class="h2">El Alma de la Tierra</h2>
<p>En sus 5 hectáreas de topografía ondulada, La Esmeralda alberga 2.500 árboles de café variedad Castillo en plena producción. El terreno es fértil, ideal para diversificar con aguacate o frutales, y es bendecido con dos fuentes de agua propias que garantizan su sustento durante todo el año.</p>
<div class="features-grid-narrative">
<div><i class="fas fa-vector-square"></i> <strong>Área:</strong> 5 Hectáreas</div>
<div><i class="fas fa-mountain"></i> <strong>Altitud:</strong> 1.950 msnm</div>
<div><i class="fas fa-water"></i> <strong>Agua:</strong> 2 nacimientos</div>
<div><i class="fas fa-leaf"></i> <strong>Vocación:</strong> Café y frutales</div>
</div>
<a href="#" class="btn btn-outline-light">Explorar Mapa Topográfico</a>
</div>
</section>
<section class="narrative-section narrative-specs text-section fade-in-section" id="narrative-specs">
<div class="text-container">
<h2 class="h2">Ficha Técnica y Documentación</h2>
<p>Toda la información que necesita, con total transparencia.</p>
<div class="accordion">
<details>
<summary>Detalles de la Construcción</summary>
<ul>
<li><strong>Año de construcción:</strong> 2015</li>
<li><strong>Área construida:</strong> 180 m²</li>
<li><strong>Habitaciones:</strong> 4</li>
<li><strong>Baños:</strong> 3</li>
<li><strong>Acabados:</strong> Madera Zapan, teja de barro, cocina integral.</li>
</ul>
</details>
<details>
<summary>Información Legal y de Servicios</summary>
<ul>
<li><strong>Certificado de Tradición y Libertad:</strong> Al día</li>
<li><strong>Impuesto Predial:</strong> Pago hasta la fecha</li>
<li><strong>Servicios Públicos:</strong> Acueducto veredal y EPM</li>
<li><strong>Acceso a Internet:</strong> Sí, proveedor local.</li>
</ul>
</details>
</div>
</div>
</section>
<section class="narrative-section narrative-contact fade-in-section" id="narrative-contact">
<div class="content-container text-center text-light">
<h2 class="h1">Hay detalles que ninguna foto puede capturar.</h2>
<p class="h3">Venga a sentirlo usted mismo.</p>
<div class="final-contact-form">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=2574&auto=format&fit=crop" alt="Foto del asesor Juan Velez" class="agent-photo">
<h3>Agende su visita con nuestro asesor<br><strong>Juan Velez</strong></h3>
<form>
<input type="text" placeholder="Su Nombre" class="input-field">
<input type="email" placeholder="Su Email o Teléfono" class="input-field">
<button type="submit" class="btn btn-primary">Enviar Solicitud</button>
</form>
</div>
</div>
</section>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- LÓGICA PARA EL ENCABEZADO PRINCIPAL ---
const pageHeader = document.getElementById('page-header');
const heroSection = document.getElementById('narrative-hero');
const handleHeaderVisibility = () => {
if (window.scrollY > heroSection.offsetHeight * 0.8) {
pageHeader.classList.add('is-sticky');
} else {
pageHeader.classList.remove('is-sticky');
}
};
window.addEventListener('scroll', handleHeaderVisibility);
// --- LÓGICA DE NAVEGACIÓN DE PUNTOS ---
const sections = document.querySelectorAll('.narrative-section');
const dotLinks = document.querySelectorAll('.dotnav-link');
const navObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const sectionId = entry.target.id;
dotLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${sectionId}`) {
link.classList.add('active');
}
});
}
});
}, {
rootMargin: "-50% 0px -50% 0px"
});
sections.forEach(section => navObserver.observe(section));
// --- LÓGICA PARA EL MODAL Y ANIMACIONES ---
const openModalBtn = document.getElementById('open-tour-btn');
const closeModalBtn = document.getElementById('close-tour-btn');
const modalOverlay = document.getElementById('tour-modal');
if (openModalBtn && closeModalBtn && modalOverlay) {
openModalBtn.addEventListener('click', () => document.body.classList.add('modal-open'));
const closeModal = () => document.body.classList.remove('modal-open');
closeModalBtn.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); });
}
const fadeObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('visible');
});
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in-section').forEach(section => fadeObserver.observe(section));
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página de Propiedad Individual (propiedad.html)
1. nav class="dot-navigation"
Crea una barra de navegación vertical fija en el lateral de la página. Cada punto corresponde a una sección y permite al usuario tanto ver en qué parte de la página está como saltar directamente a otra sección.
2. div class="modal-overlay"
Define la estructura de una ventana modal que está oculta por defecto. Se utiliza para mostrar el recorrido virtual 360° sin sacar al usuario de la página. Su visibilidad es controlada por JavaScript.
3. main class="narrative-main"
Es el contenedor principal para todas las secciones de la página. El nombre de la clase sugiere que su contenido está diseñado para ser consumido de forma secuencial, como una historia.
4. section class="narrative-hero" con video
La sección de introducción utiliza una etiqueta video para un fondo en movimiento, creando una primera impresión dinámica y de alta calidad. Los atributos autoplay, muted, y loop aseguran que el video se reproduzca automáticamente sin sonido y en un ciclo continuo.
5. Secciones con clase fade-in-section
Esta clase se aplica a la mayoría de las secciones. Funciona junto con JavaScript para crear un efecto de aparición gradual (fade-in) a medida que el usuario se desplaza y la sección entra en la pantalla.
6. Lógica de Navegación de Puntos (IntersectionObserver)
El script utiliza un IntersectionObserver para "observar" las secciones de la página. En lugar de comprobar la posición del scroll constantemente, este observador notifica a JavaScript de forma eficiente cuando una sección entra o sale del centro de la pantalla, permitiendo actualizar el punto activo en la navegación lateral.
7. Lógica del Modal (Recorrido Virtual)
El JavaScript asigna eventos a los botones para abrir y cerrar la ventana modal. Añade una clase modal-open al body para mostrar el modal y (probablemente) deshabilitar el scroll de la página de fondo, mejorando la experiencia del usuario.
8. Lógica de Animación (IntersectionObserver)
Se utiliza un segundo IntersectionObserver para gestionar las animaciones de aparición. Cuando detecta que una sección con la clase fade-in-section es visible, le añade una clase visible, que a su vez activa la animación de fade-in definida en el CSS.
propiedad.css
Este es el archivo de estilos final que da vida a la página de propiedad individual (propiedad.html). Es el más complejo del proyecto, ya que define la experiencia de "scrollytelling". Se encarga de la animación de entrada del encabezado, el diseño de las secciones a pantalla completa, las animaciones de aparición de contenido al hacer scroll, el estilo de la ventana modal y la apariencia de la navegación lateral con puntos. También incluye un efecto de parallax en una de las secciones y las media queries necesarias para transformar esta experiencia inmersiva de escritorio en una versión funcional y legible para dispositivos móviles.
LUXEPROPS: Código de Estilos de la Página de Propiedad Individual (propiedad.css)
.page-propiedad-single .main-header {
position: absolute;
transform: translateY(0);
transition: transform 0.4s ease-in-out, background-color 0.4s ease;
}
.page-propiedad-single .main-header.is-sticky {
position: fixed;
transform: translateY(0);
background-color: rgba(33, 33, 33, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-utility-border);
animation: slideDown 0.5s ease-out;
}
.page-propiedad-single .main-header:not(.is-sticky) {
transform: translateY(-100%);
}
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
body.modal-open { overflow: hidden; }
.narrative-main { background-color: var(--color-primary-background); }
.narrative-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: var(--space-xxxl) 5%;
overflow: hidden;
}
.content-container, .text-container { width: 100%; max-width: 1200px; z-index: 2; }
.text-container { max-width: 800px; text-align: center; }
.text-light { color: var(--color-primary-foreground); }
.fade-in-section {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-section.visible { opacity: 1; transform: translateY(0); }
.fab-whatsapp {
position: fixed;
bottom: 25px;
right: 25px;
width: 60px;
height: 60px;
background-color: #25D366;
color: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
z-index: 100;
transition: transform 0.3s ease;
}
.fab-whatsapp:hover { transform: scale(1.1); color: #fff; }
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(0,0,0,0.8);
display: flex; align-items: center; justify-content: center;
z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
body.modal-open .modal-overlay { opacity: 1; visibility: visible; }
.modal-content {
background-color: var(--color-secondary-background);
padding: var(--space-xl); border-radius: 8px; width: 90%; max-width: 900px;
position: relative; transform: scale(0.9); transition: transform 0.3s ease;
}
body.modal-open .modal-content { transform: scale(1); }
.modal-close {
position: absolute; top: 10px; right: 20px; background: none; border: none;
color: var(--color-primary-foreground); font-size: 2rem; cursor: pointer;
}
.virtual-tour-embed-container {
width: 100%; height: 60vh; background-color: #000;
display: flex; align-items: center; justify-content: center;
}
.narrative-hero { padding: 0; }
.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.hero-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.hero-background video { width: 100%; height: 100%; object-fit: cover; }
.hero-content { text-align: center; color: var(--color-primary-foreground); z-index: 1; }
.hero-content p { font-size: 1.5rem; }
.scroll-down-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 2rem; z-index: 1; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);}}
.narrative-house { background-color: var(--color-secondary-background); }
.house-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; }
.house-image-main img { width: 100%; border-radius: 8px; }
.house-gallery-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin: var(--space-lg) 0; }
.house-gallery-preview img { width: 100%; height: 120px; object-fit: cover; border-radius: 4px; }
.narrative-land { background-image: linear-gradient(rgba(33, 33, 33, 0.7), rgba(33, 33, 33, 0.7)), url('https://images.unsplash.com/photo-1500332369674-1b1a70591b65?q=80&w=2670&auto=format&fit=crop'); background-attachment: fixed; background-position: center; background-size: cover; }
.features-grid-narrative { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); font-size: 1.2rem; margin-top: var(--space-xl); text-align: left; }
.features-grid-narrative i { color: var(--color-accent-main); margin-right: var(--space-sm); }
.btn-outline-light { border-color: var(--color-primary-foreground); color: var(--color-primary-foreground); margin-top: var(--space-xl); }
.btn-outline-light:hover { background-color: var(--color-primary-foreground); color: var(--color-primary-background); }
.accordion { text-align: left; margin-top: var(--space-xl); }
.accordion details { border-bottom: 1px solid var(--color-utility-border); padding: var(--space-lg) 0; }
.accordion summary { font-size: 1.3rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; position: absolute; right: 5px; font-size: 1.5rem; transition: transform 0.3s ease; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion ul { list-style-position: inside; padding: var(--space-lg) 0 0 var(--space-md); color: var(--color-secondary-foreground); line-height: 1.8; }
.narrative-contact { background-image: linear-gradient(rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.8)), url('https://images.unsplash.com/photo-1506362802964-1f2da48d9ba1?q=80&w=2670&auto=format&fit=crop'); background-size: cover; background-position: center; }
.final-contact-form { background-color: var(--color-secondary-background); padding: var(--space-xl); border-radius: 8px; max-width: 500px; margin: var(--space-xl) auto 0 auto; }
.final-contact-form .agent-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto var(--space-md) auto; border: 2px solid var(--color-accent-main); }
.final-contact-form h3 { text-align: center; }
.final-contact-form form { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.dot-navigation { position: fixed; top: 50%; left: 30px; transform: translateY(-50%); z-index: 998; }
.dot-navigation ul { list-style: none; }
.dot-navigation li { margin-bottom: var(--space-lg); }
.dotnav-link { display: block; width: 12px; height: 12px; background-color: var(--color-utility-border); border-radius: 50%; position: relative; transition: all 0.3s ease; }
.dotnav-link:hover { background-color: var(--color-accent-main); transform: scale(1.3); }
.dotnav-link.active { background-color: var(--color-accent-main); transform: scale(1.5); }
.dotnav-tooltip { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); background-color: var(--color-accent-main); color: var(--color-accent-contrast); padding: var(--space-xs) var(--space-md); border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 600; }
.dotnav-link:hover .dotnav-tooltip { opacity: 1; visibility: visible; }
@media (max-width: 992px) {
.dot-navigation { display: none; }
.house-layout { grid-template-columns: 1fr; }
.narrative-land { background-attachment: scroll; }
.narrative-section { min-height: auto; padding: var(--space-xxl) 5%; }
}Explicación del código: LUXEPROPS: Código de Estilos de la Página de Propiedad Individual (propiedad.css)
1. .main-header:not(.is-sticky) y @keyframes slideDown
Define la animación del encabezado. Por defecto, está oculto fuera de la pantalla (transform: translateY(-100%)). Cuando JavaScript añade la clase .is-sticky, se activa la animación slideDown, que lo hace deslizarse suavemente hacia adentro.
2. body.modal-open
Cuando se abre la ventana modal del tour virtual, JavaScript añade esta clase al body. La regla overflow: hidden; es crucial, ya que impide que el usuario pueda hacer scroll en la página de fondo mientras el modal está abierto.
3. .fade-in-section.visible
Define la animación de aparición de las secciones. Por defecto, están invisibles (opacity: 0) y ligeramente desplazadas hacia abajo. Cuando JavaScript añade la clase .visible, se activa una transición que las hace aparecer y subir a su posición final.
4. .scroll-down-indicator y @keyframes bounce
Crea una flecha en la parte inferior de la sección hero. La animación bounce le aplica un movimiento de rebote infinito para invitar visualmente al usuario a que comience a desplazarse por la página.
5. .narrative-land y background-attachment: fixed
Esta regla crea un efecto de parallax. La imagen de fondo se queda fija en la ventana del navegador, y el contenido de la sección se desplaza por encima, creando una sensación de profundidad y dinamismo.
6. .accordion details[open] summary::after
Mejora la interactividad del acordeón de la ficha técnica. El pseudo-elemento ::after, que es un signo "+", se transforma (rotate(45deg)) en una "x" cuando el acordeón se abre, indicando visualmente que se puede cerrar.
7. .dot-navigation y .dotnav-tooltip
Establece el estilo de la navegación lateral. Los puntos cambian de tamaño y color al estar activos o al pasar el cursor sobre ellos. El tooltip (etiqueta de texto) está oculto por defecto y solo se hace visible cuando el usuario sitúa el cursor sobre un punto.
8. @media (max-width: 992px)
Contiene los ajustes más importantes para dispositivos móviles. Oculta la navegación de puntos (display: none), desactiva el efecto parallax (background-attachment: scroll) para evitar problemas de rendimiento, y quita la altura mínima de 100vh a las secciones para que el contenido fluya de forma natural en pantallas más pequeñas.
leer_guia.html
Este es el código fuente de una página de artículo o guía individual, como la "Guía Esencial para Comprar Finca en Yarumal". Su diseño sigue un formato de blog clásico, optimizado para la lectura. La estructura principal consiste en un área de contenido central para el artículo y una barra lateral (sidebar) con contenido relacionado, como propiedades destacadas. Elementos notables incluyen una barra de progreso de lectura en la parte superior y un bloque de llamado a la acción (CTA) incrustado directamente en el texto para fomentar la interacción del lector.
LUXEPROPS: Código de la Página de Artículo Individual (leer_guia.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guía Esencial para Comprar Finca en Yarumal | LUXEPROPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="page-guia-single">
<div class="reading-progress-bar"></div>
<header class="main-header" id="page-header">
<a href="inicio.html" class="logo">LUXEPROPS</a>
<div class="header-right">
<nav class="main-nav">
<a href="inicio.html">Inicio</a>
<a href="tienda.html">Tienda</a>
<a href="guias.html">Guías</a>
<a href="agendar-cita.html">Agendar Cita</a>
<a href="nosotros.html">Nosotros</a>
</nav>
<div class="header-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</div>
<button class="mobile-menu-toggle" aria-label="Abrir menú">
<i class="fas fa-bars"></i>
</button>
</header>
<main class="article-main-container">
<header class="article-header-simple">
<div class="article-meta">
<span>GUÍA PARA COMPRADORES</span> ·
<span>Publicado: 03 Ago, 2025</span> ·
<span>Lectura: 9 min</span>
</div>
<h1 class="h1">Guía Esencial para Comprar Finca en Yarumal</h1>
<p class="article-author">Por Juan Vélez, Asesor Experto</p>
</header>
<article class="article-content">
<p class="article-intro">Invertir en una finca en Yarumal es apostarle a la tranquilidad, la productividad y un estilo de vida conectado con la naturaleza. El Norte de Antioquia ofrece un mercado dinámico con opciones para todos. Esta guía le ayudará a navegar el proceso con seguridad.</p>
<h2>1. Defina su Propósito: ¿Descanso, Inversión o Ambos?</h2>
<p>Antes de mirar propiedades, defina su objetivo principal. ¿Busca una finca de recreo para los fines de semana? ¿Un lote para construir a futuro? ¿O una finca productiva que genere ingresos a través de la agricultura o la ganadería? Su respuesta definirá la ubicación, el tamaño y las características que debe buscar.</p>
<blockquote>La mejor tierra no es la más cara, sino la que se ajusta a los sueños que uno quiere sembrar en ella.</blockquote>
<h2>2. Analice el Tipo de Tierra y su Vocación</h2>
<p>Yarumal tiene una topografía diversa. Es crucial verificar la calidad del suelo, las fuentes de agua y la vocación de la tierra. Si su interés es el café, busque zonas con la altitud y las condiciones adecuadas. Si es ganadería, necesitará pastos y terrenos más planos. Un estudio de suelos, aunque es una inversión extra, puede ahorrarle muchos problemas a futuro.</p>
<img src="https://images.unsplash.com/photo-1500332369674-1b1a70591b65?q=80&w=2670&auto=format&fit=crop" alt="Paisaje cafetero de Antioquia." class="article-inline-image">
<h2>3. Revise la Documentación y los Linderos</h2>
<p>Asegúrese de que la propiedad tenga toda su documentación en regla: certificado de tradición y libertad, escritura pública y paz y salvos de impuestos. Es fundamental realizar una visita con un topógrafo para verificar los linderos y confirmar que el área real coincide con la que aparece en los papeles.</p>
<div class="article-cta-block">
<h3>¿Listo para encontrar su propiedad ideal?</h3>
<p>Nuestro conocimiento del mercado de Yarumal está a su servicio. Agende una llamada de asesoría sin costo.</p>
<a href="agendar-cita.html" class="btn btn-primary">Agendar una Cita</a>
</div>
</article>
<aside class="article-post-content">
<div class="sidebar-widget">
<h4 class="widget-title">Oportunidades en Yarumal</h4>
<div class="widget-property-card">
<div class="widget-property-image" style="background-image: url('https://images.unsplash.com/photo-1554995207-c18c203602cb?q=80&w=2670&auto=format&fit=crop');"></div>
<div class="widget-property-content">
<h5>Finca productiva en Cedeño</h5>
<p>$550.000.000 COP</p>
</div>
</div>
<div class="widget-property-card">
<div class="widget-property-image" style="background-image: url('https://images.unsplash.com/photo-15884ab3336946-5c5a898516cf?q=80&w=2670&auto=format&fit=crop');"></div>
<div class="widget-property-content">
<h5>Lote con vista en Ochalí</h5>
<p>$180.000.000 COP</p>
</div>
</div>
<a href="tienda.html" class="btn btn-outline">Ver Todas las Propiedades</a>
</div>
</aside>
</main>
<footer class="main-footer">
<div class="footer-grid">
<div class="footer-col">
<h3>LUXEPROPS</h3>
<p>Tu puerta de entrada a las propiedades más exclusivas del mundo.</p>
</div>
<div class="footer-col">
<h3>Navegación</h3>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Propiedades</a></li>
<li><a href="#">Asesoría</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Legal</h3>
<ul>
<li><a href="#">Términos y Condiciones</a></li>
<li><a href="#">Política de Privacidad</a></li>
<li><a href="#">Uso de Cookies</a></li>
</ul>
</div>
<div class="footer-col">
<h3>Síguenos</h3>
<div class="footer-socials">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 LUXEPROPS. Todos los derechos reservados.</p>
</div>
</footer>
<a href="https://wa.me/573001234567?text=Hola%2C%20quisiera%20m%C3%A1s%20informaci%C3%B3n." target="_blank" class="fab-whatsapp" aria-label="Contactar por WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<script>
const menuToggle = document.querySelector('.mobile-menu-toggle');
const mainHeader = document.querySelector('.main-header');
menuToggle.addEventListener('click', () => {
mainHeader.classList.toggle('active');
});
</script>
</body>
</html>Explicación del código: LUXEPROPS: Código de la Página de Artículo Individual (leer_guia.html)
1. div class="reading-progress-bar"
Este elemento vacío en la parte superior de la página está destinado a funcionar como una barra de progreso de lectura. Generalmente, se controla con JavaScript para que su ancho aumente a medida que el usuario se desplaza por el artículo, mostrando visualmente cuánto ha leído.
2. main class="article-main-container"
Es el contenedor principal que organiza el layout de la página, típicamente en un diseño de dos columnas: el contenido principal del artículo y una barra lateral (sidebar).
3. header class="article-header-simple"
Define un encabezado específico para el artículo. Contiene metadatos importantes como la categoría, la fecha de publicación y el tiempo de lectura estimado, además del título principal y el autor.
4. article class="article-content"
Utiliza la etiqueta semántica article para englobar el contenido principal de la guía. En su interior se estructura el texto con párrafos, subtítulos, citas e imágenes.
5. div class="article-cta-block"
Inserta un bloque de "Llamado a la Acción" (Call to Action) directamente dentro del flujo de lectura. Es una estrategia efectiva para invitar al lector a realizar una acción (como agendar una cita) en un punto donde su interés es alto.
6. aside class="article-post-content"
Define la barra lateral de la página. Su propósito es mostrar contenido secundario pero relevante, como enlaces a propiedades o a otros artículos, para mantener al usuario navegando en el sitio.
7. div class="sidebar-widget"
Representa un módulo o "widget" dentro de la barra lateral. Este diseño modular permite añadir o quitar diferentes tipos de contenido en la barra lateral fácilmente. En este caso, muestra propiedades destacadas.
leer_guia.css
Este es el archivo CSS que da estilo a la página de artículo o guía individual. Su diseño está completamente enfocado en la legibilidad y la experiencia de lectura. Define un layout de una sola columna centrada, con un ancho máximo optimizado para el texto. Se encarga de estilizar la barra de progreso de lectura, el encabezado del artículo, elementos de contenido como citas e imágenes, un bloque de llamado a la acción incrustado y el widget de contenido relacionado que aparece al final. La media query final ajusta el espaciado para una lectura cómoda en dispositivos móviles.
LUXEPROPS: Código de Estilos de la Página de Artículo Individual (leer_guia.css)
.reading-progress-bar {
position: fixed; top: 0; left: 0; height: 5px;
background-color: var(--color-accent-main); width: 0%;
z-index: 1001; transition: width 0.1s linear;
}
.article-main-container {
width: 90%;
max-width: 800px;
margin: 0 auto;
padding-top: 150px;
padding-bottom: var(--space-xxxl);
}
.article-header-simple {
text-align: center;
margin-bottom: var(--space-xxxl);
}
.article-meta {
color: var(--color-secondary-foreground);
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: var(--space-md);
}
.article-header-simple .h1 {
font-size: clamp(2.8rem, 8vw, 4.5rem);
margin-bottom: var(--space-md);
}
.article-author {
color: var(--color-primary-foreground);
font-weight: 600;
font-size: 1.1rem;
}
.article-content {
max-width: 70ch;
margin: 0 auto;
}
.article-content .article-intro {
font-size: 1.2rem;
line-height: 1.7;
color: var(--color-primary-foreground);
margin-bottom: var(--space-xl);
}
.article-content p {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: var(--space-lg);
}
.article-content h2 {
margin-top: var(--space-xxl);
margin-bottom: var(--space-lg);
line-height: 1.3;
}
.article-content blockquote {
border-left: 3px solid var(--color-accent-main);
margin: var(--space-xl) 0 var(--space-xl) var(--space-lg);
padding-left: var(--space-lg);
font-size: 1.5rem;
font-family: var(--font-primary);
font-style: italic;
color: var(--color-primary-foreground);
}
.article-inline-image {
width: 100%;
height: auto;
margin: var(--space-xl) 0;
border-radius: 8px;
}
.article-cta-block {
margin: var(--space-xxxl) 0;
padding: var(--space-xl);
background-color: var(--color-secondary-background);
text-align: center;
border-radius: 8px;
}
.article-cta-block h3 {
font-family: var(--font-primary);
font-size: 2rem;
}
.article-post-content {
max-width: 70ch;
margin: var(--space-xxxl) auto 0 auto;
border-top: 1px solid var(--color-utility-border);
padding-top: var(--space-xxl);
}
.sidebar-widget {
background-color: var(--color-secondary-background);
padding: var(--space-lg);
border-radius: 8px;
}
.widget-title {
font-family: var(--font-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.9rem;
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--color-utility-border);
padding-bottom: var(--space-md);
text-align: center;
}
.widget-property-card {
display: flex; align-items: center; gap: var(--space-md);
margin-bottom: var(--space-md);
transition: background-color 0.3s ease;
border-radius: 4px; padding: var(--space-sm);
}
.widget-property-card:hover {
background-color: var(--color-primary-background);
}
.widget-property-image {
width: 100px; height: 75px; flex-shrink: 0;
background-size: cover; background-position: center; border-radius: 4px;
}
.widget-property-content h5 { font-size: 1rem; line-height: 1.3; margin: 0 0 4px 0; }
.widget-property-content p { font-size: 0.9rem; color: var(--color-accent-main); margin: 0; }
.sidebar-widget .btn { width: 100%; margin-top: var(--space-md); }
@media (max-width: 768px) {
.article-main-container {
width: 100%;
padding-top: 120px;
padding-left: 5%;
padding-right: 5%;
}
}Explicación del código: LUXEPROPS: Código de Estilos de la Página de Artículo Individual (leer_guia.css)
1. .reading-progress-bar
Crea una barra fija en la parte superior de la página. Su ancho inicial es 0% y está diseñada para ser actualizada por JavaScript a medida que el usuario se desplaza, mostrando visualmente el progreso de la lectura del artículo.
2. .article-main-container
Define el contenedor principal del artículo con un ancho máximo (max-width) para evitar que el texto sea demasiado largo, y lo centra en la página. El padding-top asegura que el contenido no quede oculto debajo del encabezado fijo.
3. .article-header-simple .h1
Utiliza la función clamp() para el tamaño de la fuente del título principal. Esto permite que el tamaño del texto se escale de forma fluida y responsive, siendo más grande en pantallas anchas y más pequeño en móviles, pero siempre dentro de un rango definido.
4. .article-content
Esta es una regla clave para la legibilidad. Al establecer max-width: 70ch, se limita el ancho del bloque de texto a aproximadamente 70 caracteres. Esta es una práctica recomendada en tipografía web para asegurar que las líneas de texto no sean demasiado largas, lo que facilita la lectura.
5. .article-content blockquote
Aplica un estilo distintivo a las citas dentro del artículo. El borde izquierdo y el estilo de fuente en cursiva hacen que las citas se separen visualmente del resto del texto, dándoles énfasis.
6. .article-cta-block
Estiliza el bloque de llamado a la acción incrustado en el artículo. Se le da un color de fondo diferente y un espaciado generoso para que destaque y capte la atención del lector en un punto estratégico del texto.
7. .article-post-content
Estiliza la sección que aparece después del contenido principal del artículo (en el HTML, es el aside). En este diseño, no es una barra lateral tradicional, sino una sección final que presenta contenido relacionado, como un widget de propiedades.
8. @media (max-width: 768px)
Ajusta el diseño para dispositivos móviles. Hace que el contenedor principal ocupe el 100% del ancho y añade un padding lateral para que el texto no toque los bordes de la pantalla, garantizando una experiencia de lectura cómoda en pantallas pequeñas.
Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.
Comentarios y valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!