Página de destino - Hotel

Abrir en el editor Publica tu código

Recomendado

29 July 2024

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotel Elegance - Lujo y Confort Inigualables</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #34495e;
            --accent-color: #e67e22;
            --text-color: #333;
            --bg-color: #ecf0f1;
            --white: #ffffff;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

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

body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            overflow-x: hidden;
        }

h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }

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

/* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            transition: var(--transition);
            padding: 1rem 0;
        }

header.scrolled {
            background-color: var(--white);
            box-shadow: var(--shadow);
            padding: 0.5rem 0;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            text-decoration: none;
            transition: var(--transition);
        }

header.scrolled .logo {
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 2rem;
        }

.nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

header.scrolled .nav-links a {
            color: var(--primary-color);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--accent-color);
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--white);
        }

header.scrolled .menu-toggle {
            color: var(--primary-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

.hero-content {
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease 0.5s forwards;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

.hero p {
            font-size: 1.4rem;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.btn {
            display: inline-block;
            background-color: var(--accent-color);
            color: var(--white);
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

.btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

.btn:hover::before {
            width: 300px;
            height: 300px;
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

/* Rooms Section */
        .rooms {
            padding: 8rem 0;
            background-color: var(--white);
        }

.section-title {
            text-align: center;
            font-size: 3rem;
            margin-bottom: 4rem;
            color: var(--primary-color);
            position: relative;
        }

.section-title::after {
            content: '';
            display: block;
            width: 100px;
            height: 3px;
            background-color: var(--accent-color);
            margin: 1rem auto 0;
        }

.room-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

.room-card {
            background-color: var(--white);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            opacity: 0;
            transform: translateY(20px);
        }

.room-card.animate {
            animation: fadeInUp 0.6s ease forwards;
        }

.room-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.room-image {
            height: 250px;
            background-size: cover;
            background-position: center;
            transition: var(--transition);
        }

.room-card:hover .room-image {
            transform: scale(1.1);
        }

.room-info {
            padding: 2rem;
        }

.room-info h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

.room-info p {
            color: var(--secondary-color);
            margin-bottom: 1.5rem;
        }

.room-price {
            font-weight: 700;
            color: var(--accent-color);
            font-size: 1.4rem;
            display: block;
            margin-top: 1rem;
        }

/* Services Section */
        .services {
            padding: 8rem 0;
            background-color: var(--bg-color);
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
        }

.service-card {
            background-color: var(--white);
            border-radius: 15px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            opacity: 0;
            transform: translateY(20px);
        }

.service-card.animate {
            animation: fadeInUp 0.6s ease forwards;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

.service-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 2rem;
            fill: var(--accent-color);
            transition: var(--transition);
        }

.service-card:hover .service-icon {
            transform: scale(1.1) rotate(10deg);
        }

.service-card h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

.service-card p {
            color: var(--secondary-color);
        }

/* Booking Section */
        .booking {
            padding: 8rem 0;
            background-color: var(--white);
        }

.booking-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--bg-color);
            padding: 3rem;
            border-radius: 15px;
            box-shadow: var(--shadow);
            opacity: 0;
            transform: translateY(20px);
        }

.booking-form.animate {
            animation: fadeInUp 0.6s ease forwards;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
            font-weight: 600;
        }

.form-group input,
        .form-group select {
            width: 100%;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: var(--transition);
        }

.form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
        }

.error-message {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

/* Footer */
        footer {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 5rem 0 3rem;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
        }

.footer-section h3 {
            font-size: 1.4rem;
            margin-bottom: 1.5rem;
            color: var(--accent-color);
        }

.footer-section ul {
            list-style: none;
        }

.footer-section ul li {
            margin-bottom: 0.8rem;
        }

.footer-section ul li a {
            color: var(--white);
            text-decoration: none;
            transition: var(--transition);
        }

.footer-section ul li a:hover {
            color: var(--accent-color);
            padding-left: 5px;
        }

.footer-bottom {
            text-align: center;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid #555;
        }

/* Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease;
        }

.modal-content {
            background-color: var(--white);
            margin: 15% auto;
            padding: 3rem;
            border-radius: 15px;
            max-width: 500px;
            position: relative;
            animation: slideIn 0.3s ease;
        }

.close {
            position: absolute;
            right: 1.5rem;
            top: 1rem;
            font-size: 2rem;
            cursor: pointer;
            transition: var(--transition);
        }

.close:hover {
            color: var(--accent-color);
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: var(--white);
                padding: 1rem;
                box-shadow: var(--shadow);
            }

.nav-links.show {
                display: flex;
            }

.nav-links li {
                margin: 1rem 0;
            }

.menu-toggle {
                display: block;
            }

.hero h1 {
                font-size: 3rem;
            }

.hero p {
                font-size: 1.2rem;
            }

.section-title {
                font-size: 2.5rem;
            }

.room-card, .service-card {
                margin-bottom: 2rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <a href="#" class="logo">Hotel Elegance</a>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#rooms">Rooms</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#booking">Booking</a></li>
            </ul>
            <div class="menu-toggle">☰</div>
        </nav>
    </header>
    
    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>Welcome to Hotel Elegance</h1>
                <p>Discover luxury and comfort in every detail of our unique hotel experience</p>
                <a href="#booking" class="btn">Book Your Stay</a>
            </div>
        </section>
    
        <section id="rooms" class="rooms">
            <div class="container">
                <h2 class="section-title">Our Luxury Rooms</h2>
                <div class="room-grid">
                    <div class="room-card">
                        <div class="room-image" style="background-image: url('https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');"></div>
                        <div class="room-info">
                            <h3>Presidential Suite</h3>
                            <p>Experience luxury at its finest with our most exclusive suite</p>
                            <span class="room-price">From €500/night</span>
                        </div>
                    </div>
                    <div class="room-card">
                        <div class="room-image" style="background-image: url('https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');"></div>
                        <div class="room-info">
                            <h3>Executive Suite</h3>
                            <p>Comfort and style in a space designed for the discerning business traveler</p>
                            <span class="room-price">From €300/night</span>
                        </div>
                    </div>
                    <div class="room-card">
                        <div class="room-image" style="background-image: url('https://images.pexels.com/photos/237371/pexels-photo-237371.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');"></div>
                        <div class="room-info">
                            <h3>Deluxe Room</h3>
                            <p>Elegance and comfort in a cozy and sophisticated atmosphere</p>
                            <span class="room-price">From €200/night</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    
        <section id="services" class="services">
            <div class="container">
                <h2 class="section-title">Exclusive Services</h2>
                <div class="services-grid">
                    <div class="service-card">
                        <svg class="service-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 11H21M3 11C3 16.5228 7.47715 21 13 21C18.5228 21 23 16.5228 23 11M3 11C3 5.47715 7.47715 1 13 1C18.5228 1 23 5.47715 23 11M12 19H14M15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <h3>Gourmet Restaurant</h3>
                        <p>Delight yourself with our exquisite world-class cuisine in a sophisticated setting with panoramic views.</p>
                    </div>
                    <div class="service-card">
                        <svg class="service-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2 13C2 17.9706 6.02944 22 11 22C15.9706 22 20 17.9706 20 13V9C20 4.02944 15.9706 0 11 0C6.02944 0 2 4.02944 2 9V13ZM2 13H6M2 13V9M6 13C6 15.2091 7.79086 17 10 17C12.2091 17 14 15.2091 14 13C14 10.7909 12.2091 9 10 9C7.79086 9 6 10.7909 6 13ZM20 13H22C23.1046 13 24 12.1046 24 11V11C24 9.89543 23.1046 9 22 9H20M2 9H0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <h3>Infinity Pool & Spa</h3>
                        <p>Immerse yourself in total relaxation in our infinity pool with horizon views and enjoy luxurious spa treatments.</p>
                    </div>
                    <div class="service-card">
                        <svg class="service-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8L8 16M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <h3>Personal Concierge</h3>
                        <p>Our concierge team is available 24/7 to meet all your needs during your stay.</p>
                    </div>
                </div>
            </div>
        </section>
    
        <section id="booking" class="booking">
            <div class="container">
                <h2 class="section-title">Book Your Luxury Experience</h2>
                <form class="booking-form" id="bookingForm">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="check-in">Check-in Date</label>
                        <input type="date" id="check-in" name="check-in" required>
                    </div>
                    <div class="form-group">
                        <label for="check-out">Check-out Date</label>
                        <input type="date" id="check-out" name="check-out" required>
                    </div>
                    <div class="form-group">
                        <label for="room-type">Room Type</label>
                        <select id="room-type" name="room-type" required>
                            <option value="">Select a room</option>
                            <option value="presidential">Presidential Suite</option>
                            <option value="executive">Executive Suite</option>
                            <option value="deluxe">Deluxe Room</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn">Book Now</button>
                    </div>
                </form>
            </div>
        </section>
    </main>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Hotel Elegance</h3>
                    <p>Luxury and comfort in every detail of your stay</p>
                    <p>Luxury Avenue 123, Elegant City</p>
                    <p>Phone: +34 912 345 678</p>
                    <p>Email: info@hotelelegance.com</p>
                </div>
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#rooms">Rooms</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#booking">Booking</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Follow Us</h3>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Instagram</a></li>
                        <li><a href="#">Twitter</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© <span id="currentYear"></span> Hotel Elegance. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    <div id="confirmationModal" class="modal">
        <div class="modal-content">
            <span class="close">×</span>
            <h2>Booking Confirmed</h2>
            <p>Thank you for choosing Hotel Elegance. We have received your booking request and sent you a confirmation email. We look forward to welcoming you soon.</p>
        </div>
    </div>

// Mobile menu toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('show');
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);

if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }

// Close mobile menu if open
                if (navLinks.classList.contains('show')) {
                    navLinks.classList.remove('show');
                }
            });
        });

// Animation on scroll
        const animateOnScroll = function() {
            const elements = document.querySelectorAll('.room-card, .service-card, .booking-form');
            
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementTop < windowHeight - 100) {
                    element.classList.add('animate');
                }
            });
        };

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

// Booking form submission
        const bookingForm = document.getElementById('bookingForm');
        const modal = document.getElementById('confirmationModal');
        const closeModal = document.querySelector('.close');

bookingForm.addEventListener('submit', function(e) {
            e.preventDefault();
            if (validateForm()) {
                modal.style.display = 'block';
            }
        });

closeModal.addEventListener('click', function() {
            modal.style.display = 'none';
        });

window.addEventListener('click', function(e) {
            if (e.target == modal) {
                modal.style.display = 'none';
            }
        });

// Dynamic copyright year
        document.getElementById('currentYear').textContent = new Date().getFullYear();

// Form validation
        function validateForm() {
            let isValid = true;
            const name = document.getElementById('name');
            const email = document.getElementById('email');
            const checkIn = document.getElementById('check-in');
            const checkOut = document.getElementById('check-out');
            const roomType = document.getElementById('room-type');

if (name.value.trim() === '') {
                isValid = false;
                showError(name, 'Por favor, ingresa tu nombre completo');
            } else {
                removeError(name);
            }

if (email.value.trim() === '' || !isValidEmail(email.value)) {
                isValid = false;
                showError(email, 'Por favor, ingresa un correo electrónico válido');
            } else {
                removeError(email);
            }

if (checkIn.value === '') {
                isValid = false;
                showError(checkIn, 'Por favor, selecciona una fecha de llegada');
            } else {
                removeError(checkIn);
            }

if (checkOut.value === '') {
                isValid = false;
                showError(checkOut, 'Por favor, selecciona una fecha de salida');
            } else if (new Date(checkOut.value) <= new Date(checkIn.value)) {
                isValid = false;
                showError(checkOut, 'La fecha de salida debe ser posterior a la fecha de llegada');
            } else {
                removeError(checkOut);
            }

if (roomType.value === '') {
                isValid = false;
                showError(roomType, 'Por favor, selecciona un tipo de habitación');
            } else {
                removeError(roomType);
            }

return isValid;
        }

function showError(input, message) {
            const formGroup = input.parentElement;
            const error = formGroup.querySelector('.error-message') || document.createElement('div');
            error.className = 'error-message';
            error.textContent = message;
            if (!formGroup.querySelector('.error-message')) {
                formGroup.appendChild(error);
            }
            input.classList.add('error');
        }

function removeError(input) {
            const formGroup = input.parentElement;
            const error = formGroup.querySelector('.error-message');
            if (error) {
                formGroup.removeChild(error);
            }
            input.classList.remove('error');
        }

Página de destino - Hotel

Recomendado

Calculadora de iPhone

Un código de alejandrokundrah

Fragmento de carga HTML

HTML

CSS

JS

Recomendado

Calculadora de iPhone

Un código de alejandrokundrah

Fragmento de carga HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS