Image Cards 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>Premium Image Cards</title> </head> <body> <div class="particles" id="particles"></div> <div class="container"> <div class="cards-grid"> <!-- Travel Destination Card --> <div class="card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" /> <stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" /> </linearGradient> <linearGradient id="mountainGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#8B7355;stop-opacity:1" /> <stop offset="100%" style="stop-color:#D2B48C;stop-opacity:1" /> </linearGradient> </defs> <!-- Sky --> <rect width="400" height="200" fill="url(#skyGradient)"/> <!-- Mountains --> <polygon points="0,120 100,60 200,100 300,40 400,80 400,200 0,200" fill="url(#mountainGradient)"/> <!-- Sun --> <circle cx="320" cy="50" r="25" fill="#FFD700"/> <!-- Clouds --> <ellipse cx="80" cy="40" rx="20" ry="12" fill="white" opacity="0.8"/> <ellipse cx="95" cy="35" rx="25" ry="15" fill="white" opacity="0.8"/> <ellipse cx="110" cy="40" rx="20" ry="12" fill="white" opacity="0.8"/> <!-- Trees --> <polygon points="150,140 160,120 170,140" fill="#228B22"/> <rect x="158" y="140" width="4" height="15" fill="#8B4513"/> <polygon points="250,150 265,125 280,150" fill="#228B22"/> <rect x="263" y="150" width="4" height="20" fill="#8B4513"/> </svg> <div class="image-overlay"></div> <div class="image-badge">Featured</div> </div> <div class="card-content"> <h3 class="card-title">Swiss Alps Adventure</h3> <p class="card-subtitle">Breathtaking mountain experience</p> <p class="card-description"> Discover the majestic beauty of the Swiss Alps with our premium guided tours. Experience pristine nature, crystal-clear lakes, and unforgettable mountain vistas. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">TG</div> <div class="author-details"> <h4>Travel Guide Pro</h4> <p>Expert Guide</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ⭐ <span>4.9</span> </div> <div class="stat-item"> ? <span>1.2k</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="bookTour()">Book Now</button> <button class="btn btn-secondary" onclick="learnMore()">Learn More</button> </div> </div> </div> <!-- Product Card --> <div class="card product-card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="phoneGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" /> <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" /> </linearGradient> <linearGradient id="screenGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" /> <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" /> </linearGradient> </defs> <!-- Background --> <rect width="400" height="200" fill="#f8f9fa"/> <!-- Phone body --> <rect x="150" y="30" width="100" height="140" rx="15" fill="url(#phoneGradient)"/> <!-- Screen --> <rect x="160" y="45" width="80" height="110" rx="8" fill="url(#screenGradient)"/> <!-- Home button --> <circle cx="200" cy="175" r="8" fill="#333" opacity="0.3"/> <!-- Screen content --> <rect x="170" y="55" width="60" height="4" rx="2" fill="#48dbfb"/> <rect x="170" y="65" width="40" height="3" rx="1.5" fill="#a0aec0"/> <rect x="170" y="75" width="50" height="3" rx="1.5" fill="#a0aec0"/> <!-- App icons --> <rect x="175" y="90" width="12" height="12" rx="3" fill="#ff6b6b"/> <rect x="195" y="90" width="12" height="12" rx="3" fill="#feca57"/> <rect x="215" y="90" width="12" height="12" rx="3" fill="#48bb78"/> <!-- Reflection --> <rect x="160" y="45" width="80" height="55" rx="8" fill="url(#screenGradient)" opacity="0.1"/> </svg> <div class="image-overlay"></div> <div class="discount-badge">-25%</div> </div> <div class="card-content"> <h3 class="card-title">Premium Smartphone</h3> <p class="card-subtitle">Latest flagship model</p> <div class="price"> $899 <span class="original-price">$1,199</span> </div> <p class="card-description"> Experience cutting-edge technology with our latest smartphone featuring advanced AI, professional cameras, and all-day battery life. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">TS</div> <div class="author-details"> <h4>TechStore</h4> <p>Verified Seller</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ⭐ <span>4.8</span> </div> <div class="stat-item"> ? <span>2.5k</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="addToCart()">Add to Cart</button> <button class="btn btn-secondary" onclick="viewDetails()">Details</button> </div> </div> </div> <!-- Food Recipe Card --> <div class="card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="plateGradient" cx="50%" cy="30%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" /> <stop offset="100%" style="stop-color:#f0f0f0;stop-opacity:1" /> </radialGradient> <linearGradient id="saladGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#90EE90;stop-opacity:1" /> <stop offset="100%" style="stop-color:#228B22;stop-opacity:1" /> </linearGradient> </defs> <!-- Background --> <rect width="400" height="200" fill="#2c3e50"/> <!-- Table --> <rect x="0" y="150" width="400" height="50" fill="#8B4513"/> <!-- Plate --> <ellipse cx="200" cy="130" rx="80" ry="15" fill="#ddd"/> <ellipse cx="200" cy="125" rx="75" ry="12" fill="url(#plateGradient)"/> <!-- Salad --> <ellipse cx="200" cy="120" rx="60" ry="10" fill="url(#saladGradient)"/> <!-- Tomatoes --> <circle cx="180" cy="115" r="8" fill="#ff6b6b"/> <circle cx="220" cy="118" r="7" fill="#ff6b6b"/> <circle cx="200" cy="110" r="6" fill="#ff6b6b"/> <!-- Cheese --> <ellipse cx="190" cy="125" rx="12" ry="4" fill="#feca57"/> <ellipse cx="210" cy="122" rx="10" ry="3" fill="#feca57"/> <!-- Fork --> <rect x="120" y="140" width="2" height="30" fill="#c0c0c0"/> <rect x="115" y="140" width="12" height="3" fill="#c0c0c0"/> <!-- Garnish --> <circle cx="170" cy="108" r="3" fill="#90EE90"/> <circle cx="230" cy="112" r="2" fill="#90EE90"/> </svg> <div class="image-overlay"></div> <div class="image-badge">Healthy</div> </div> <div class="card-content"> <h3 class="card-title">Mediterranean Salad</h3> <p class="card-subtitle">Fresh & nutritious recipe</p> <p class="card-description"> A vibrant and healthy Mediterranean salad packed with fresh vegetables, feta cheese, and a zesty olive oil dressing. Perfect for lunch or dinner. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">CF</div> <div class="author-details"> <h4>Chef Maria</h4> <p>Culinary Expert</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ⏱️ <span>15 min</span> </div> <div class="stat-item"> ?? <span>Easy</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="getRecipe()">Get Recipe</button> <button class="btn btn-secondary" onclick="saveRecipe()">Save</button> </div> </div> </div> <!-- Art Gallery Card --> <div class="card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="canvasGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#ff9a9e;stop-opacity:1" /> <stop offset="50%" style="stop-color:#fecfef;stop-opacity:1" /> <stop offset="100%" style="stop-color:#fecfef;stop-opacity:1" /> </linearGradient> <radialGradient id="spotlightGradient" cx="50%" cy="20%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.8" /> <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0" /> </radialGradient> </defs> <!-- Gallery wall --> <rect width="400" height="200" fill="#2c3e50"/> <!-- Frame --> <rect x="100" y="40" width="200" height="120" fill="#8B4513"/> <rect x="110" y="50" width="180" height="100" fill="#f5f5f5"/> <!-- Artwork --> <rect x="115" y="55" width="170" height="90" fill="url(#canvasGradient)"/> <!-- Abstract shapes in artwork --> <circle cx="160" cy="85" r="20" fill="#667eea" opacity="0.7"/> <polygon points="220,70 240,90 220,110 200,90" fill="#feca57" opacity="0.8"/> <ellipse cx="180" cy="120" rx="25" ry="15" fill="#48dbfb" opacity="0.6"/> <!-- Spotlight effect --> <ellipse cx="200" cy="100" rx="100" ry="60" fill="url(#spotlightGradient)"/> <!-- Gallery floor --> <rect x="0" y="180" width="400" height="20" fill="#34495e"/> </svg> <div class="image-overlay"></div> <div class="image-badge">Limited</div> </div> <div class="card-content"> <h3 class="card-title">Abstract Dreams</h3> <p class="card-subtitle">Digital art collection</p> <p class="card-description"> An exclusive digital art piece from our contemporary collection. This vibrant abstract composition explores the intersection of color and emotion. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">AR</div> <div class="author-details"> <h4>Alex Rivera</h4> <p>Digital Artist</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ? <span>NFT</span> </div> <div class="stat-item"> ?️ <span>892</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="viewArt()">View Art</button> <button class="btn btn-secondary" onclick="collectArt()">Collect</button> </div> </div> </div> <!-- Music Album Card --> <div class="card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="vinylGradient" cx="50%" cy="50%"> <stop offset="0%" style="stop-color:#1a1a1a;stop-opacity:1" /> <stop offset="30%" style="stop-color:#333;stop-opacity:1" /> <stop offset="70%" style="stop-color:#1a1a1a;stop-opacity:1" /> <stop offset="100%" style="stop-color:#000;stop-opacity:1" /> </radialGradient> <linearGradient id="coverGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" /> <stop offset="100%" style="stop-color:#feca57;stop-opacity:1" /> </linearGradient> </defs> <!-- Background --> <rect width="400" height="200" fill="#1a1a2e"/> <!-- Vinyl record --> <circle cx="200" cy="100" r="80" fill="url(#vinylGradient)"/> <circle cx="200" cy="100" r="60" fill="#000" opacity="0.3"/> <circle cx="200" cy="100" r="40" fill="#1a1a1a"/> <circle cx="200" cy="100" r="20" fill="#333"/> <circle cx="200" cy="100" r="8" fill="#000"/> <!-- Album cover (partially visible) --> <rect x="120" y="60" width="80" height="80" fill="url(#coverGradient)" opacity="0.9"/> <rect x="130" y="70" width="60" height="4" fill="white" opacity="0.8"/> <rect x="130" y="80" width="40" height="3" fill="white" opacity="0.6"/> <rect x="130" y="90" width="50" height="3" fill="white" opacity="0.6"/> <!-- Musical notes --> <text x="320" y="60" fill="#48dbfb" font-size="20" opacity="0.7">♪</text> <text x="340" y="80" fill="#ff9ff3" font-size="16" opacity="0.7">♫</text> <text x="360" y="100" fill="#feca57" font-size="18" opacity="0.7">♪</text> </svg> <div class="image-overlay"></div> <div class="image-badge">New</div> </div> <div class="card-content"> <h3 class="card-title">Midnight Vibes</h3> <p class="card-subtitle">Electronic music album</p> <p class="card-description"> A mesmerizing journey through electronic soundscapes. This album blends ambient textures with rhythmic beats to create the perfect late-night listening experience. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">DJ</div> <div class="author-details"> <h4>DJ Synthwave</h4> <p>Electronic Artist</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ? <span>12 tracks</span> </div> <div class="stat-item"> ⏱️ <span>45 min</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="playAlbum()">Play Now</button> <button class="btn btn-secondary" onclick="addToPlaylist()">Add to Playlist</button> </div> </div> </div> <!-- Course Card --> <div class="card"> <div class="card-image"> <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="screenBg" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" /> <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" /> </linearGradient> </defs> <!-- Desk --> <rect width="400" height="200" fill="#8B4513"/> <!-- Laptop --> <ellipse cx="200" cy="140" rx="100" ry="20" fill="#333"/> <rect x="120" y="80" width="160" height="100" rx="8" fill="#2c3e50"/> <rect x="130" y="90" width="140" height="80" rx="4" fill="url(#screenBg)"/> <!-- Code on screen --> <rect x="140" y="100" width="60" height="3" fill="#48dbfb"/> <rect x="140" y="110" width="80" height="3" fill="#feca57"/> <rect x="150" y="120" width="70" height="3" fill="#48bb78"/> <rect x="140" y="130" width="90" height="3" fill="#ff9ff3"/> <rect x="150" y="140" width="50" height="3" fill="#48dbfb"/> <rect x="140" y="150" width="75" height="3" fill="#feca57"/> <!-- Coffee cup --> <ellipse cx="320" cy="130" rx="15" ry="8" fill="#8B4513"/> <rect x="305" y="120" width="30" height="20" fill="#D2691E"/> <ellipse cx="320" cy="120" rx="15" ry="8" fill="#F5DEB3"/> <!-- Steam --> <path d="M315 115 Q315 110 318 110 Q318 115 321 115 Q321 110 324 110" stroke="#fff" stroke-width="1" fill="none" opacity="0.6"/> <!-- Books --> <rect x="50" y="120" width="8" height="40" fill="#ff6b6b"/> <rect x="60" y="115" width="8" height="45" fill="#48bb78"/> <rect x="70" y="125" width="8" height="35" fill="#feca57"/> </svg> <div class="image-overlay"></div> <div class="image-badge">Popular</div> </div> <div class="card-content"> <h3 class="card-title">Web Development Mastery</h3> <p class="card-subtitle">Complete coding bootcamp</p> <p class="card-description"> Master modern web development with our comprehensive course. Learn HTML, CSS, JavaScript, React, and Node.js through hands-on projects and real-world applications. </p> <div class="card-meta"> <div class="author-info"> <div class="author-avatar">TC</div> <div class="author-details"> <h4>TechCourse</h4> <p>Certified Instructor</p> </div> </div> <div class="card-stats"> <div class="stat-item"> ?? <span>15k students</span> </div> <div class="stat-item"> ⏱️ <span>40 hours</span> </div> </div> </div> <div class="card-actions"> <button class="btn btn-primary" onclick="enrollCourse()">Enroll Now</button> <button class="btn btn-secondary" onclick="previewCourse()">Preview</button> </div> </div> </div> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96b147af91cdff6f',t:'MTc1NDUxMjEwMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); min-height: 100vh; padding: 40px 20px; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 20px; } .card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(20px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); background-size: 400% 100%; animation: shimmer 3s ease-in-out infinite; } .card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); } @keyframes shimmer { 0% { background-position: -400% 0; } 100% { background-position: 400% 0; } } /* Image Container */ .card-image { width: 100%; height: 200px; position: relative; overflow: hidden; border-radius: 20px 20px 0 0; margin: -1px -1px 0 -1px; } .card-image svg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image svg { transform: scale(1.1); } .image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); opacity: 0; transition: opacity 0.3s ease; } .card:hover .image-overlay { opacity: 1; } .image-badge { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #2d3748; } /* Card Content */ .card-content { padding: 24px; } .card-title { font-size: 20px; font-weight: 700; color: #ffffff; margin-bottom: 8px; background: linear-gradient(135deg, #48dbfb, #ff9ff3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-subtitle { color: #a0aec0; font-size: 14px; margin-bottom: 16px; } .card-description { color: #cbd5e0; line-height: 1.6; margin-bottom: 20px; font-size: 14px; } .card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .author-info { display: flex; align-items: center; } .author-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #ff6b6b, #feca57); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: white; margin-right: 12px; } .author-details h4 { color: #ffffff; font-size: 14px; font-weight: 600; margin-bottom: 2px; } .author-details p { color: #a0aec0; font-size: 12px; } .card-stats { display: flex; align-items: center; gap: 16px; } .stat-item { display: flex; align-items: center; color: #a0aec0; font-size: 12px; } .stat-item span { margin-left: 4px; } .card-actions { display: flex; gap: 12px; } .btn { flex: 1; padding: 12px 20px; border: none; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6); } .btn-secondary { background: rgba(102, 126, 234, 0.1); color: #667eea; border: 1px solid rgba(102, 126, 234, 0.2); } .btn-secondary:hover { background: rgba(102, 126, 234, 0.2); transform: translateY(-2px); } /* Special Card Types */ .product-card .price { font-size: 24px; font-weight: 700; color: #48bb78; margin-bottom: 8px; } .product-card .original-price { font-size: 16px; color: #a0aec0; text-decoration: line-through; margin-left: 8px; } .discount-badge { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, #ff6b6b, #ff8e8e); color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; } /* Responsive Design */ @media (max-width: 768px) { .cards-grid { grid-template-columns: 1fr; gap: 20px; } .card { margin: 0 10px; } .card-content { padding: 20px; } .card-actions { flex-direction: column; } } /* Floating particles */ .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .particle { position: absolute; width: 4px; height: 4px; background: rgba(72, 219, 251, 0.6); border-radius: 50%; animation: float-particle 8s linear infinite; } @keyframes float-particle { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } }
JavaScript
// Create floating particles function createParticles() { const particlesContainer = document.getElementById('particles'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 8 + 's'; particle.style.animationDuration = (Math.random() * 4 + 6) + 's'; particlesContainer.appendChild(particle); } } // Card interaction functions function bookTour() { showNotification('Tour booking started! ?️'); } function learnMore() { showNotification('Loading more details... ?'); } function addToCart() { showNotification('Added to cart! ?'); } function viewDetails() { showNotification('Opening product details... ?'); } function getRecipe() { showNotification('Recipe downloaded! ??'); } function saveRecipe() { showNotification('Recipe saved to favorites! ❤️'); } function viewArt() { showNotification('Opening art gallery... ?'); } function collectArt() { showNotification('Added to collection! ?'); } function playAlbum() { showNotification('Now playing: Midnight Vibes ?'); } function addToPlaylist() { showNotification('Added to your playlist! ?'); } function enrollCourse() { showNotification('Enrollment successful! ?'); } function previewCourse() { showNotification('Loading course preview... ??'); } function showNotification(message) { const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #48dbfb, #ff9ff3); color: white; padding: 16px 24px; border-radius: 12px; font-weight: 600; z-index: 1000; animation: slideIn 0.3s ease; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); max-width: 300px; `; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.style.animation = 'slideOut 0.3s ease'; setTimeout(() => notification.remove(), 300); }, 3000); } // Add CSS for notification 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 particles createParticles();
Output Preview
Desktop
Mobile
Fullscreen