Un código de securecode635

Abrir en el editor Video Publica tu código

Recomendado

17 November 2023

Animación CSS: Efecto de fragmento de memoria fantasma

HTML

<!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');
        }

Un código de securecode635

Recomendado

Inicio de Sesión

Clic de cookies

Animación CSS: Efecto de fragmento de memoria fantasma

HTML

CSS

JS

Recomendado

Inicio de Sesión

Clic de cookies

Animación CSS: Efecto de fragmento de memoria fantasma

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS