<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#top-bar {
background-color: #8ECBBD; /* Color de fondo */
color: #ffffff; /* Color del texto */
font-size: 13px; /* Tamaño de la fuente */
height: 50px; /* Altura de la barra */
width: 100%; /* Ancho al 100% del contenedor */
position: fixed; /* Fija la barra en la parte superior */
top: 0; /* Posiciona la barra en la parte superior */
left: 0; /* Alinea la barra al borde izquierdo */
display: flex; /* Utiliza flexbox para alinear elementos */
justify-content: center; /* Centra el texto horizontalmente */
align-items: center; /* Centra el texto verticalmente */
padding: 0 15px; /* Espaciado horizontal */
z-index: 1000; /* Asegura que la barra esté encima de otros elementos */
box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave para ocultar la barra */
}
#top-bar.hidden {
opacity: 0;
visibility: hidden;
}
#top-bar-close {
position: absolute; /* Posiciona el botón de cierre de manera absoluta */
right: 15px; /* Alinea el botón al borde derecho */
cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
font-size: 20px; /* Tamaño del icono de cierre */
color: black; /* Color del icono de cierre */
transition: color 0.3s; /* Transición suave para el efecto de hover */
}
#top-bar-close:hover {
color: #9b9a9a; /* Color del icono de cierre en hover */
}
#top-bar-text {
margin-right: 40px; /* Deja espacio para el botón de cierre */
text-align: center; /* Centra el texto dentro del elemento */
}
#top-bar-text a {
color: #000000; /* Color del enlace */
text-decoration: underline; /* Subraya el enlace */
}
</style>
</head>
<body>
<div id="top-bar">
<span id="top-bar-close" onclick="closeTopBar()">×</span>
<span id="top-bar-text">
YOUR PERFECT STAY IN TULUM <a href="https://www.xelatulum.com/special-offers" target="_blank">VIEW OFFERS</a>
</span>
</div>
<script>
// Función para cerrar la barra
function closeTopBar() {
document.getElementById('top-bar').classList.add('hidden');
sessionStorage.setItem('topBarClosed', 'true');
}
// Función para verificar si la barra debe mostrarse
function checkTopBar() {
if (sessionStorage.getItem('topBarClosed') === 'true') {
document.getElementById('top-bar').classList.add('hidden');
} else {
// Oculta la barra después de 5 segundos
setTimeout(() => {
document.getElementById('top-bar').classList.add('hidden');
}, 5000); // milisegundos
}
}
// Función para manejar el evento de scroll
function handleScroll() {
document.getElementById('top-bar').classList.add('hidden');
}
// Llama a la función cuando la página se carga
window.onload = () => {
checkTopBar();
window.addEventListener('scroll', handleScroll);
};
</script>
</body>
</html>
