Travel Card Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elite Travel Destinations</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <!-- Header Section --> <header class="main-header"> <div class="logo"> <i class="fas fa-globe-americas"></i> <h1>EliteTravel</h1> </div> <p class="tagline">Discover breathtaking destinations with curated luxury experiences. Your journey of a lifetime starts here.</p> <!-- Filter Tabs --> <div class="filter-tabs"> <button class="filter-tab active" data-filter="all"> <i class="fas fa-compass"></i> All Destinations </button> <button class="filter-tab" data-filter="beach"> <i class="fas fa-umbrella-beach"></i> Beach </button> <button class="filter-tab" data-filter="mountain"> <i class="fas fa-mountain"></i> Mountain </button> <button class="filter-tab" data-filter="city"> <i class="fas fa-city"></i> City </button> <button class="filter-tab" data-filter="luxury"> <i class="fas fa-crown"></i> Luxury </button> </div> </header> <!-- Travel Cards Grid --> <div class="cards-grid"> <!-- Card 1: Maldives --> <div class="travel-card" data-category="beach luxury"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1514282401047-d79a71a590e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Maldives Resort"> <div class="card-badge luxury">LUXURY</div> <div class="card-price">$3,499<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>Maldives Paradise</h3> </div> <p class="card-destination">North MalΓ© Atoll, Maldives</p> <p class="card-description">Experience ultimate luxury in overwater bungalows with private pools, crystal clear waters, and world-class spa treatments. All-inclusive 7-day luxury package.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">7 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-user-friends"></i> <div> <div class="feature-text">All Inclusive</div> <div class="feature-subtext">Meals & Drinks</div> </div> </div> <div class="feature"> <i class="fas fa-plane"></i> <div> <div class="feature-text">Flight Included</div> <div class="feature-subtext">Round Trip</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="rating-value">4.8</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> <!-- Card 2: Swiss Alps --> <div class="travel-card" data-category="mountain luxury"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Swiss Alps"> <div class="card-badge popular">POPULAR</div> <div class="card-price">$2,899<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>Swiss Alps Retreat</h3> </div> <p class="card-destination">Interlaken, Switzerland</p> <p class="card-description">Mountain chalet experience with breathtaking alpine views. Includes guided hikes, ski passes, and gourmet dining. Perfect for adventure and relaxation.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">10 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-skiing"></i> <div> <div class="feature-text">Ski Pass</div> <div class="feature-subtext">Included</div> </div> </div> <div class="feature"> <i class="fas fa-hiking"></i> <div> <div class="feature-text">Guided Tours</div> <div class="feature-subtext">Daily Activities</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-value">5.0</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> <!-- Card 3: Tokyo --> <div class="travel-card" data-category="city"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1194&q=80" alt="Tokyo City"> <div class="card-badge">CULTURAL</div> <div class="card-price">$2,199<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>Tokyo Explorer</h3> </div> <p class="card-destination">Tokyo, Japan</p> <p class="card-description">Immerse yourself in the vibrant culture of Tokyo. Experience ancient temples, futuristic technology, world-class cuisine, and authentic cultural workshops.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">8 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-utensils"></i> <div> <div class="feature-text">Food Tours</div> <div class="feature-subtext">Included</div> </div> </div> <div class="feature"> <i class="fas fa-train"></i> <div> <div class="feature-text">Transport Pass</div> <div class="feature-subtext">Unlimited</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="rating-value">4.5</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> <!-- Card 4: Santorini --> <div class="travel-card" data-category="beach luxury"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1136&q=80" alt="Santorini"> <div class="card-badge luxury">LUXURY</div> <div class="card-price">$2,799<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>Santorini Escape</h3> </div> <p class="card-destination">Santorini, Greece</p> <p class="card-description">Stay in a luxury cave hotel with caldera views. Enjoy sunset cruises, wine tasting at local vineyards, and gourmet Greek cuisine with breathtaking views.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">6 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-ship"></i> <div> <div class="feature-text">Sunset Cruise</div> <div class="feature-subtext">Included</div> </div> </div> <div class="feature"> <i class="fas fa-wine-glass-alt"></i> <div> <div class="feature-text">Wine Tasting</div> <div class="feature-subtext">Vineyard Tours</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> </div> <span class="rating-value">4.7</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> <!-- Card 5: New York --> <div class="travel-card" data-category="city"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="New York City"> <div class="card-badge popular">POPULAR</div> <div class="card-price">$1,899<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>New York City Break</h3> </div> <p class="card-destination">New York, USA</p> <p class="card-description">Experience the city that never sleeps. Broadway shows, iconic landmarks, world-class museums, and culinary adventures in the heart of Manhattan.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">5 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-theater-masks"></i> <div> <div class="feature-text">Broadway Show</div> <div class="feature-subtext">Ticket Included</div> </div> </div> <div class="feature"> <i class="fas fa-subway"></i> <div> <div class="feature-text">Metro Card</div> <div class="feature-subtext">7-Day Unlimited</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i> </div> <span class="rating-value">4.3</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> <!-- Card 6: Bali --> <div class="travel-card" data-category="beach"> <div class="card-image"> <img src="https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80" alt="Bali"> <div class="card-badge">WELLNESS</div> <div class="card-price">$1,599<span>/person</span></div> </div> <div class="card-content"> <div class="card-location"> <i class="fas fa-map-marker-alt"></i> <h3>Bali Wellness Retreat</h3> </div> <p class="card-destination">Ubud, Bali</p> <p class="card-description">Rejuvenate your mind and body with daily yoga, meditation, spa treatments, and healthy organic cuisine in the spiritual heart of Bali.</p> <div class="card-features"> <div class="feature"> <i class="far fa-calendar"></i> <div> <div class="feature-text">9 Days</div> <div class="feature-subtext">Duration</div> </div> </div> <div class="feature"> <i class="fas fa-spa"></i> <div> <div class="feature-text">Daily Spa</div> <div class="feature-subtext">Treatments</div> </div> </div> <div class="feature"> <i class="fas fa-yin-yang"></i> <div> <div class="feature-text">Yoga & Meditation</div> <div class="feature-subtext">Daily Sessions</div> </div> </div> </div> <div class="card-footer"> <div class="rating"> <div class="stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> <span class="rating-value">4.9</span> </div> <button class="btn-book"> <i class="far fa-calendar-check"></i> Book Now </button> </div> </div> </div> </div> <!-- Footer --> <footer class="main-footer"> <div class="footer-links"> <a href="#" class="footer-link">Destinations</a> <a href="#" class="footer-link">Packages</a> <a href="#" class="footer-link">About Us</a> <a href="#" class="footer-link">Contact</a> <a href="#" class="footer-link">Blog</a> <a href="#" class="footer-link">Careers</a> </div> <p>© 2023 EliteTravel. All rights reserved. | Crafting unforgettable journeys since 2010</p> <p style="margin-top: 10px; font-size: 0.9rem;"> <i class="fas fa-phone-alt" style="margin-right: 5px;"></i> +1 (800) 123-4567 | <i class="fas fa-envelope" style="margin-left: 15px; margin-right: 5px;"></i> info@elitetravel.com </p> </footer> </div> </body> </html>
CSS
:root { --primary: #1a73e8; --secondary: #ff6b35; --accent: #00b894; --dark: #2d3436; --light: #f8f9fa; --gray: #636e72; --light-gray: #dfe6e9; --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12); --radius: 20px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); color: var(--dark); line-height: 1.6; min-height: 100vh; padding: 20px; } .container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* Header Styles */ .main-header { text-align: center; margin-bottom: 60px; padding: 30px 20px; position: relative; } .main-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: linear-gradient(to right, var(--primary), var(--accent)); border-radius: 2px; } .logo { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; color: var(--primary); } .logo i { font-size: 2.5rem; margin-right: 15px; } .logo h1 { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 700; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { font-size: 1.2rem; color: var(--gray); max-width: 700px; margin: 0 auto 30px; } /* Filter Tabs */ .filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; } .filter-tab { padding: 12px 28px; background: white; border: none; border-radius: 50px; font-weight: 600; color: var(--dark); cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; } .filter-tab:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .filter-tab.active { background: var(--primary); color: white; } /* Cards Grid */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 40px; margin-bottom: 60px; } /* Travel Card */ .travel-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); position: relative; } .travel-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-hover); } .card-image { height: 260px; position: relative; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .travel-card:hover .card-image img { transform: scale(1.1); } .card-badge { position: absolute; top: 20px; right: 20px; background: var(--secondary); color: white; padding: 8px 18px; border-radius: 50px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3); } .card-badge.popular { background: var(--accent); box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3); } .card-badge.luxury { background: linear-gradient(to right, #8a2387, #e94057, #f27121); box-shadow: 0 5px 15px rgba(138, 35, 135, 0.3); } .card-price { position: absolute; bottom: 20px; left: 20px; background: rgba(255, 255, 255, 0.95); padding: 12px 20px; border-radius: 12px; font-weight: 700; color: var(--primary); font-size: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .card-price span { font-size: 0.9rem; font-weight: 500; color: var(--gray); } .card-content { padding: 28px; } .card-location { display: flex; align-items: center; margin-bottom: 10px; } .card-location i { color: var(--primary); margin-right: 8px; font-size: 1.2rem; } .card-location h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--dark); } .card-destination { color: var(--gray); font-size: 1.1rem; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--light-gray); } .card-description { color: var(--gray); margin-bottom: 25px; line-height: 1.7; } .card-features { display: flex; justify-content: space-between; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; } .feature { display: flex; align-items: center; gap: 8px; } .feature i { width: 36px; height: 36px; background: rgba(26, 115, 232, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); } .feature-text { font-weight: 600; color: var(--dark); } .feature-subtext { font-size: 0.85rem; color: var(--gray); } .card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--light-gray); } .rating { display: flex; align-items: center; gap: 5px; } .stars { color: #ffc107; } .rating-value { font-weight: 700; color: var(--dark); } .reviews { color: var(--gray); font-size: 0.9rem; } .btn-book { background: linear-gradient(to right, var(--primary), #4285f4); color: white; border: none; padding: 14px 28px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 10px; box-shadow: 0 5px 15px rgba(26, 115, 232, 0.3); } .btn-book:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(26, 115, 232, 0.4); } /* Footer */ .main-footer { text-align: center; padding: 40px 20px; color: var(--gray); border-top: 1px solid var(--light-gray); margin-top: 40px; } .footer-links { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; } .footer-link { color: var(--primary); text-decoration: none; font-weight: 500; transition: var(--transition); } .footer-link:hover { color: var(--secondary); } /* Animation for cards */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .travel-card { animation: fadeInUp 0.6s ease forwards; opacity: 0; } .travel-card:nth-child(1) { animation-delay: 0.1s; } .travel-card:nth-child(2) { animation-delay: 0.2s; } .travel-card:nth-child(3) { animation-delay: 0.3s; } .travel-card:nth-child(4) { animation-delay: 0.4s; } .travel-card:nth-child(5) { animation-delay: 0.5s; } .travel-card:nth-child(6) { animation-delay: 0.6s; } /* Responsive Design */ @media (max-width: 1200px) { .cards-grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; } } @media (max-width: 992px) { .cards-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .logo h1 { font-size: 2.4rem; } } @media (max-width: 768px) { .cards-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; } .filter-tabs { gap: 10px; } .filter-tab { padding: 10px 20px; font-size: 0.9rem; } .logo h1 { font-size: 2rem; } .tagline { font-size: 1rem; } } @media (max-width: 576px) { .container { padding: 10px; } .main-header { padding: 20px 10px; margin-bottom: 40px; } .card-content { padding: 20px; } .card-location h3 { font-size: 1.5rem; } .card-features { flex-direction: column; gap: 12px; } .btn-book { padding: 12px 20px; } }
JavaScript
// Filter functionality const filterTabs = document.querySelectorAll('.filter-tab'); const travelCards = document.querySelectorAll('.travel-card'); filterTabs.forEach(tab => { tab.addEventListener('click', () => { // Update active tab filterTabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); const filter = tab.getAttribute('data-filter'); // Filter cards travelCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category').includes(filter)) { card.style.display = 'block'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 10); } else { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); }); }); // Book button functionality const bookButtons = document.querySelectorAll('.btn-book'); bookButtons.forEach(button => { button.addEventListener('click', function() { const card = this.closest('.travel-card'); const destination = card.querySelector('.card-location h3').textContent; const price = card.querySelector('.card-price').textContent; // Create a modal-like notification const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: linear-gradient(to right, var(--primary), var(--accent)); color: white; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 1000; max-width: 350px; animation: slideIn 0.5s ease; `; notification.innerHTML = ` <h4 style="margin-bottom: 10px; font-size: 1.2rem;"><i class="fas fa-check-circle"></i> Booking Initiated</h4> <p>You've selected <strong>${destination}</strong> package for ${price}.</p> <p style="margin-top: 10px; font-size: 0.9rem;">Our travel consultant will contact you within 24 hours to complete your booking.</p> `; document.body.appendChild(notification); // Remove notification after 5 seconds setTimeout(() => { notification.style.animation = 'slideOut 0.5s ease'; setTimeout(() => { document.body.removeChild(notification); }, 500); }, 5000); }); }); // Add CSS for animations const style = document.createElement('style'); style.textContent = ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; document.head.appendChild(style); // Initialize cards with animation document.addEventListener('DOMContentLoaded', () => { travelCards.forEach((card, index) => { card.style.animationDelay = `${index * 0.1}s`; }); });
Output Preview
Desktop
Mobile
Fullscreen