<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>404 - Página No Encontrada | Hotel Altamar Cartagena</title>
<meta
name="description"
content="La página que buscas no existe. Regresa al Hotel Altamar Cartagena para encontrar información sobre nuestros servicios."
/>
<meta name="robots" content="noindex, nofollow" />
<!-- Open Graph -->
<meta
property="og:title"
content="404 - Página No Encontrada | Hotel Altamar Cartagena"
/>
<meta
property="og:description"
content="La página que buscas no existe. Regresa al Hotel Altamar Cartagena."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hotelaltamar.com/404" />
<meta
property="og:image"
content="https://hotelaltamar.com/logo-hotel-altamar-cartagena.png"
/>
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="404 - Página No Encontrada | Hotel Altamar Cartagena"
/>
<meta
name="twitter:description"
content="La página que buscas no existe. Regresa al Hotel Altamar Cartagena."
/>
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="canonical" href="https://hotelaltamar.com/404" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Arial", sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #333;
line-height: 1.6;
}
.error-container {
text-align: center;
background: white;
padding: 3rem 2rem;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 90%;
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.error-number {
font-size: 8rem;
font-weight: bold;
color: #667eea;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1;
margin-bottom: 1rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.error-title {
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
font-weight: 600;
}
.error-message {
font-size: 1.2rem;
color: #666;
margin-bottom: 2rem;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.hotel-logo {
width: 200px;
height: auto;
margin: 2rem 0;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
min-width: 150px;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}
.btn-secondary {
background: white;
color: #667eea;
border: 2px solid #667eea;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
background: #667eea;
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.contact-info {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #eee;
color: #666;
}
.contact-info h3 {
color: #333;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.contact-info p {
margin-bottom: 0.5rem;
}
.contact-info a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.contact-info a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.error-container {
padding: 2rem 1.5rem;
margin: 1rem;
}
.error-number {
font-size: 6rem;
}
.error-title {
font-size: 2rem;
}
.error-message {
font-size: 1rem;
}
.btn {
padding: 0.8rem 1.5rem;
font-size: 1rem;
min-width: 130px;
}
.hotel-logo {
width: 250px;
}
}
@media (max-width: 480px) {
.error-container {
padding: 1.5rem 1rem;
margin: 0.5rem;
}
.error-number {
font-size: 4.5rem;
}
.error-title {
font-size: 1.8rem;
}
.error-message {
font-size: 0.9rem;
padding: 0 0.5rem;
}
.btn {
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
min-width: 120px;
}
.hotel-logo {
width: 280px;
max-width: 90%;
}
.action-buttons {
flex-direction: column;
align-items: center;
}
.contact-info {
margin-top: 2rem;
padding-top: 1.5rem;
}
.contact-info h3 {
font-size: 1.1rem;
}
.contact-info p {
font-size: 0.9rem;
}
}
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.floating-element {
position: absolute;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 15s infinite linear;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.floating-element:nth-child(1) {
left: 10%;
animation-delay: 0s;
}
.floating-element:nth-child(2) {
left: 20%;
animation-delay: -3s;
}
.floating-element:nth-child(3) {
left: 30%;
animation-delay: -6s;
}
.floating-element:nth-child(4) {
left: 40%;
animation-delay: -9s;
}
.floating-element:nth-child(5) {
left: 50%;
animation-delay: -12s;
}
.floating-element:nth-child(6) {
left: 60%;
animation-delay: -15s;
}
.floating-element:nth-child(7) {
left: 70%;
animation-delay: -18s;
}
.floating-element:nth-child(8) {
left: 80%;
animation-delay: -21s;
}
.floating-element:nth-child(9) {
left: 90%;
animation-delay: -24s;
}
</style>
</head>
<body>
<div class="floating-elements" aria-hidden="true">
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
<div class="floating-element"></div>
</div>
<main class="error-container" role="main">
<div class="error-number" aria-label="Error 404">404</div>
<h1 class="error-title">¡Oops! Página no encontrada</h1>
<p class="error-message">
Lo sentimos, la página que estás buscando no existe o ha sido movida. Te
invitamos a regresar al Hotel Altamar Cartagena.
</p>
<img
src="logo-hotel-altamar-cartagena.png"
alt="Logo Hotel Altamar Cartagena"
class="hotel-logo"
width="200"
height="auto"
onerror="this.style.display='none'"
/>
<div class="action-buttons">
<a
href="index.html"
class="btn btn-primary"
aria-label="Ir a la página principal del Hotel Altamar"
>
🏠 Ir al Inicio
</a>
<a
href="tel:+573103741341"
class="btn btn-secondary"
aria-label="Llamar al Hotel Altamar"
>
📞 Llamar Hotel
</a>
</div>
<div class="contact-info">
<h3>¿Necesitas ayuda?</h3>
<p>
<strong>Teléfono:</strong>
<a href="tel:+573103741341">(035)6411960 - 3103741341</a>
</p>
<p>
<strong>Email:</strong>
<a href="mailto:administracion@hotelaltamar.com"
>administracion@hotelaltamar.com</a
>
</p>
<p>
<strong>Dirección:</strong> Transversal 54 #21-57, Cartagena, Bolívar,
Colombia
</p>
<p>
<strong>WhatsApp:</strong>
<a href="https://wa.me/573103741341" target="_blank" rel="noopener"
>Chatear ahora</a
>
</p>
</div>
</main>
<script>
// Funcionalidad para redirigir automáticamente después de cierto tiempo (opcional)
// setTimeout(() => {
// window.location.href = 'index.html';
// }, 30000); // 30 segundos
// Analytics para rastrear páginas 404 (si tienes Google Analytics)
if (typeof gtag !== "undefined") {
gtag("event", "page_view", {
page_title: "404 - Página No Encontrada",
page_location: window.location.href,
});
}
// Registrar error 404 para análisis
console.warn("404 Error: Página no encontrada - " + window.location.href);
</script>
</body>
</html>
|