Card hover effects can significantly enhance the user experience by adding interactive elements to your web design. These effects not only make your site more engaging but also provide visual feedback to users.
In this article, we will explore 10 stunning card hover effect examples that you can easily implement. Each example showcases a unique way to captivate your audience and elevate your UI design.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it effortless to design pixel-perfect card hover effects. Loved by designers and developers alike, Subframe ensures your UI is both stunning and functional.
Start for free and elevate your design game today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design? With Subframe, you can create pixel-perfect card hover effects and stunning interfaces in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start for free and begin designing immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { min-height: 700px; display: flex; justify-content: center; align-items: center; background-color: #f8f9fa; padding: 20px; } .container { width: 100%; max-width: 700px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; padding: 20px; } .product-card { position: relative; background-color: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); height: 400px; } .product-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); transform: translateY(-5px); } .product-image-container { position: relative; height: 240px; overflow: hidden; background-color: #f5f5f7; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image { transform: scale(1.08); } .product-tag { position: absolute; top: 15px; left: 15px; background-color: #ff6b6b; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .product-card:hover .product-tag { opacity: 1; transform: translateY(0); } .wishlist-button { position: absolute; top: 15px; right: 15px; background-color: white; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 2; transition: all 0.2s ease; } .wishlist-button svg { width: 18px; height: 18px; transition: all 0.3s ease; fill: transparent; stroke: #555; stroke-width: 2px; } .wishlist-button.active svg { fill: #ff6b6b; stroke: #ff6b6b; transform: scale(1.1); } .wishlist-button:hover { transform: scale(1.1); } .product-info { padding: 20px; position: relative; } .product-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; line-height: 1.4; } .product-description { font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .price-container { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .current-price { font-size: 20px; font-weight: 600; color: #333; } .original-price { font-size: 14px; color: #999; text-decoration: line-through; } .discount { font-size: 12px; color: #2ecc71; font-weight: 600; } .product-actions { display: flex; gap: 12px; } .add-to-cart, .view-details { display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .add-to-cart { background-color: #0066ff; color: white; border: none; flex: 2; } .view-details { background-color: transparent; color: #333; border: 1px solid #ddd; flex: 1; } .add-to-cart:hover { background-color: #0052cc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); } .view-details:hover { background-color: #f5f5f7; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .rating { display: flex; align-items: center; gap: 5px; position: absolute; bottom: 20px; right: 20px; } .stars { display: flex; } .star { color: #ffc107; font-size: 14px; } .count { font-size: 12px; color: #666; } .product-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 240px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.6) 100%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .product-card:hover .product-overlay { opacity: 1; } .overlay-content { position: absolute; bottom: 0; width: 100%; padding: 20px; color: white; transform: translateY(20px); opacity: 0; transition: all 0.3s ease; } .product-card:hover .overlay-content { transform: translateY(0); opacity: 1; } .quick-view { display: inline-block; background-color: white; color: #333; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .quick-view:hover { background-color: #f8f9fa; transform: scale(1.05); } .product-features { margin-top: 10px; display: flex; gap: 10px; } .feature { font-size: 12px; background-color: rgba(255, 255, 255, 0.2); padding: 4px 10px; border-radius: 4px; } .add-to-cart-success { position: fixed; top: 20px; right: 20px; background-color: #2ecc71; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(46, 204, 113, 0.2); display: flex; align-items: center; gap: 10px; transform: translateX(150%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1000; } .success-icon { width: 20px; height: 20px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .success-icon svg { width: 12px; height: 12px; fill: #2ecc71; } .add-to-cart-success.show { transform: translateX(0); } .size-selector { display: flex; gap: 8px; margin-bottom: 16px; } .size { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #ddd; font-size: 12px; color: #333; cursor: pointer; transition: all 0.2s ease; } .size:hover { background-color: #f5f5f7; } .size.selected { background-color: #0066ff; color: white; border-color: #0066ff; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.6s ease-in-out; } @media (max-width: 700px) { .container { grid-template-columns: 1fr; } .product-card { height: auto; } } </style> </head> <body> <div class="container"> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&h=500&q=80" alt="Nike Air Max 270"> <div class="product-tag">New Arrival</div> <div class="product-overlay"> <div class="overlay-content"> <div class="quick-view">Quick View</div> <div class="product-features"> <span class="feature">Cushioned</span> <span class="feature">Breathable</span> </div> </div> </div> </div> <button class="wishlist-button"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> <div class="product-info"> <h3 class="product-name">Nike Air Max 270 React</h3> <p class="product-description">Sleek athletic design with visible Air cushioning for all-day comfort and style.</p> <div class="size-selector"> <div class="size" data-size="8">8</div> <div class="size" data-size="9">9</div> <div class="size selected" data-size="10">10</div> <div class="size" data-size="11">11</div> </div> <div class="price-container"> <span class="current-price">$129.99</span> <span class="original-price">$169.99</span> <span class="discount">24% OFF</span> </div> <div class="product-actions"> <button class="add-to-cart">Add to Cart</button> <button class="view-details">Details</button> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">☆</span> </div> <span class="count">(423)</span> </div> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1608231387042-66d1773070a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&h=500&q=80" alt="Ultralight Headphones"> <div class="product-tag">Best Seller</div> <div class="product-overlay"> <div class="overlay-content"> <div class="quick-view">Quick View</div> <div class="product-features"> <span class="feature">Noise Cancelling</span> <span class="feature">40h Battery</span> </div> </div> </div> </div> <button class="wishlist-button"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/> </svg> </button> <div class="product-info"> <h3 class="product-name">SoundCore Pro Wireless Headphones</h3> <p class="product-description">Studio-quality sound with active noise cancellation and comfortable over-ear design.</p> <div class="size-selector"> <div class="size selected" data-size="S">S</div> <div class="size" data-size="M">M</div> <div class="size" data-size="L">L</div> </div> <div class="price-container"> <span class="current-price">$179.99</span> <span class="original-price">$229.99</span> <span class="discount">22% OFF</span> </div> <div class="product-actions"> <button class="add-to-cart">Add to Cart</button> <button class="view-details">Details</button> </div> <div class="rating"> <div class="stars"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <span class="count">(892)</span> </div> </div> </div> </div> <div class="add-to-cart-success"> <div class="success-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/> </svg> </div> <span>Added to cart successfully!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Wishlist button functionality const wishlistButtons = document.querySelectorAll('.wishlist-button'); wishlistButtons.forEach(button => { button.addEventListener('click', function() { this.classList.toggle('active'); if (this.classList.contains('active')) { this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); } }); }); // Add to cart functionality const addToCartButtons = document.querySelectorAll('.add-to-cart'); const successNotification = document.querySelector('.add-to-cart-success'); addToCartButtons.forEach(button => { button.addEventListener('click', function() { // Animate button this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); // Show success notification successNotification.classList.add('show'); setTimeout(() => { successNotification.classList.remove('show'); }, 3000); }); }); // Size selector functionality const sizeSelectors = document.querySelectorAll('.size-selector'); sizeSelectors.forEach(selector => { const sizes = selector.querySelectorAll('.size'); sizes.forEach(size => { size.addEventListener('click', function() { // Remove selected class from all sizes in this selector sizes.forEach(s => s.classList.remove('selected')); // Add selected class to clicked size this.classList.add('selected'); }); }); }); // Quick view functionality const quickViewButtons = document.querySelectorAll('.quick-view'); quickViewButtons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-name').textContent; alert(`Quick view for ${productName} would open here`); }); }); // View details functionality const viewDetailsButtons = document.querySelectorAll('.view-details'); viewDetailsButtons.forEach(button => { button.addEventListener('click', function() { const productCard = this.closest('.product-card'); const productName = productCard.querySelector('.product-name').textContent; console.log(`View details for ${productName}`); // No page refresh or redirect as per requirements }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News Article Preview Cards</title> <style> :root { --primary-color: #3498db; --secondary-color: #2c3e50; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; --transition-speed: 0.3s; --border-radius: 8px; --box-shadow: 0 10px 30px rgba(0,0,0,0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 700px; margin: 0 auto; } .title { text-align: center; margin-bottom: 30px; color: var(--secondary-color); position: relative; padding-bottom: 10px; } .title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-radius: 3px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .card { position: relative; background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: transform var(--transition-speed), box-shadow var(--transition-speed); height: 220px; cursor: pointer; } .card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.2); } .card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition-speed); } .card:hover .card-img { filter: brightness(0.7); } .card-category { position: absolute; top: 15px; left: 15px; background-color: var(--accent-color); color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; z-index: 2; box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3); } .card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); z-index: 1; } .card-title { color: white; font-weight: 600; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); } .card-date { color: rgba(255,255,255,0.7); font-size: 0.8rem; display: flex; align-items: center; } .card-date svg { margin-right: 5px; width: 12px; height: 12px; } .card-excerpt { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: rgba(44, 62, 80, 0.95); padding: 25px; transition: right var(--transition-speed) ease-out; display: flex; flex-direction: column; justify-content: center; z-index: 3; } .card:hover .card-excerpt { right: 0; } .excerpt-content { color: white; font-size: 0.95rem; line-height: 1.6; margin-bottom: 15px; } .read-more { display: inline-flex; align-items: center; color: var(--primary-color); font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: color var(--transition-speed); } .read-more:hover { color: var(--accent-color); } .read-more svg { margin-left: 5px; width: 14px; height: 14px; transition: transform var(--transition-speed); } .read-more:hover svg { transform: translateX(3px); } .pulse { position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--accent-color); z-index: 2; } .pulse::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--accent-color); animation: pulse 2s infinite; z-index: -1; } .breaking .pulse { background-color: #e74c3c; } .breaking .pulse::after { background-color: #e74c3c; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .title { font-size: 1.5rem; } } /* Extra animation for the categories */ .card-category { transition: transform var(--transition-speed), background-color var(--transition-speed); } .card:hover .card-category { transform: translateY(-3px); background-color: var(--primary-color); } /* Subtle card border effect */ .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid transparent; border-radius: var(--border-radius); transition: border-color var(--transition-speed); z-index: 4; pointer-events: none; } .card:hover::before { border-color: var(--primary-color); } </style> </head> <body> <div class="container"> <h1 class="title">Today's Headlines</h1> <div class="grid"> <div class="card breaking"> <span class="card-category">Technology</span> <div class="pulse"></div> <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="AI Technology" class="card-img"> <div class="card-overlay"> <h3 class="card-title">Revolutionary AI System Detects Early Signs of Climate Change</h3> <div class="card-date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> June 12, 2023 </div> </div> <div class="card-excerpt"> <p class="excerpt-content">Scientists at MIT have developed an AI system capable of analyzing satellite data to predict environmental changes months before traditional methods. The system has already identified three previously undetected patterns in Arctic ice melt that could significantly impact global weather patterns.</p> <a href="#" class="read-more"> Read full article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> <div class="card"> <span class="card-category">Health</span> <img src="https://images.unsplash.com/photo-1576671081837-49000212a370?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Medical Research" class="card-img"> <div class="card-overlay"> <h3 class="card-title">Breakthrough Treatment Reduces Long COVID Symptoms by 70%</h3> <div class="card-date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> June 10, 2023 </div> </div> <div class="card-excerpt"> <p class="excerpt-content">Clinical trials at Johns Hopkins have shown remarkable success with a novel combination therapy targeting persistent COVID symptoms. The treatment combines targeted anti-inflammatory compounds with neural pathway retraining, offering hope to millions suffering from long-term effects of the virus.</p> <a href="#" class="read-more"> Read full article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> <div class="card"> <span class="card-category">Finance</span> <img src="https://images.unsplash.com/photo-1591696205602-2f950c417cb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Finance Market" class="card-img"> <div class="card-overlay"> <h3 class="card-title">Central Banks Unveil Coordinated Strategy to Combat Inflation</h3> <div class="card-date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> June 9, 2023 </div> </div> <div class="card-excerpt"> <p class="excerpt-content">In an unprecedented move, seven major central banks announced a synchronized approach to curb global inflation while minimizing economic disruption. The strategy includes gradual interest rate adjustments coupled with targeted liquidity measures designed to protect vulnerable economic sectors.</p> <a href="#" class="read-more"> Read full article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> <div class="card"> <span class="card-category">Environment</span> <img src="https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Ocean Cleanup" class="card-img"> <div class="card-overlay"> <h3 class="card-title">Ocean Cleanup Project Removes 50,000 Tons of Plastic in Pacific</h3> <div class="card-date"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> June 8, 2023 </div> </div> <div class="card-excerpt"> <p class="excerpt-content">The ambitious Ocean Cleanup initiative has reported a major milestone in its mission to clear the Great Pacific Garbage Patch. Using an innovative system of floating barriers and autonomous collection vessels, the project has extracted 50,000 tons of plastic waste, exceeding initial projections by 35%.</p> <a href="#" class="read-more"> Read full article <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> </svg> </a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.card'); // Add entrance animation cards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100 * index); // Add click event (for mobile users) card.addEventListener('click', function() { const excerpt = this.querySelector('.card-excerpt'); const computedStyle = window.getComputedStyle(excerpt); // Only trigger for mobile or when excerpt is not already showing if (window.innerWidth <= 768 && computedStyle.right === '-100%') { excerpt.style.right = '0'; // Add event listener to close when clicking elsewhere const closeExcerpt = function(e) { if (!excerpt.contains(e.target) && e.target !== excerpt) { excerpt.style.right = '-100%'; document.removeEventListener('click', closeExcerpt); } }; // Delay adding the event listener to prevent immediate closure setTimeout(() => { document.addEventListener('click', closeExcerpt); }, 10); } }); // Prevent excerpt from closing immediately when clicking inside it const excerpt = card.querySelector('.card-excerpt'); excerpt.addEventListener('click', function(e) { e.stopPropagation(); }); }); // Random shimmer effect for one card every few seconds setInterval(() => { const randomIndex = Math.floor(Math.random() * cards.length); const randomCard = cards[randomIndex]; randomCard.classList.add('shimmer'); setTimeout(() => { randomCard.classList.remove('shimmer'); }, 1000); }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Summary Card</title> <style> :root { --primary: #2B6CB0; --secondary: #1E40AF; --accent: #3B82F6; --light: #EDF2F7; --dark: #1A202C; --success: #38A169; --warning: #DD6B20; --danger: #E53E3E; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } body { background-color: #F7FAFC; display: flex; justify-content: center; align-items: center; height: 100vh; color: var(--dark); padding: 20px; } .dashboard-container { width: 100%; max-width: 700px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; } @media (max-width: 640px) { .dashboard-container { grid-template-columns: 1fr; } } .card { background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); padding: 20px; position: relative; overflow: hidden; transition: all 0.3s ease; cursor: pointer; } .card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-title { font-size: 1rem; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 8px; } .card-icon { width: 16px; height: 16px; fill: var(--primary); } .stat-value { font-size: 2rem; font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 4px; } .stat-label { font-size: 0.875rem; color: #718096; margin-bottom: 12px; } .trend { display: flex; align-items: center; font-size: 0.875rem; font-weight: 500; gap: 4px; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .card-expanded { height: 0; overflow: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding-top: 0; } .card:hover .card-expanded { height: 120px; opacity: 1; padding-top: 16px; } .chart-container { width: 100%; height: 60px; position: relative; } .chart-bar { position: absolute; bottom: 0; width: 8px; background-color: var(--primary); border-radius: 4px 4px 0 0; transition: height 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0.7; } .chart-bar:hover { opacity: 1; } .chart-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; } .chart-point { position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary); transform: translate(-3px, -3px); } .chart-path { stroke: var(--primary); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .chart-area { fill: var(--primary); opacity: 0.1; } .data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; } .data-item { display: flex; flex-direction: column; } .data-value { font-size: 1rem; font-weight: 600; color: var(--dark); } .data-label { font-size: 0.75rem; color: #718096; } .chip { display: inline-flex; align-items: center; padding: 4px 8px; background-color: rgba(43, 108, 176, 0.1); border-radius: 16px; font-size: 0.75rem; font-weight: 500; color: var(--primary); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } } .pulse { animation: pulse 2s infinite; } .sparkline-container { position: absolute; bottom: 20px; right: 20px; width: 60px; height: 30px; } .spark-svg { width: 100%; height: 100%; } .tooltip { position: absolute; background-color: var(--dark); color: white; padding: 6px 10px; border-radius: 4px; font-size: 0.75rem; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 10; white-space: nowrap; } .badge { position: absolute; top: -6px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--accent); border: 2px solid white; } /* Special styles for different cards */ .card.revenue { border-left: 4px solid var(--primary); } .card.users { border-left: 4px solid var(--success); } .card.conversion { border-left: 4px solid var(--warning); } .card.performance { border-left: 4px solid var(--accent); } /* Progress bar styles */ .progress-container { width: 100%; height: 6px; background-color: #E2E8F0; border-radius: 3px; margin-top: 8px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--primary); border-radius: 3px; transition: width 0.5s ease; width: 0; } /* Loading animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .loading { background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%); background-size: 800px 104px; animation: shimmer 1.5s infinite linear; border-radius: 4px; } </style> </head> <body> <div class="dashboard-container"> <div class="card revenue"> <div class="card-header"> <h3 class="card-title"> <svg class="card-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path> <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path> </svg> Revenue </h3> <div class="chip">Daily</div> </div> <div class="stat-value">$42,856</div> <div class="stat-label">Total revenue this period</div> <div class="trend trend-up"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 14l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +12.3% from last period </div> <div class="sparkline-container"> <svg class="spark-svg" viewBox="0 0 100 50" preserveAspectRatio="none"> <path d="M0,50 L10,45 L20,48 L30,40 L40,42 L50,35 L60,30 L70,15 L80,20 L90,10 L100,5" stroke="var(--primary)" fill="none" stroke-width="2"></path> </svg> </div> <div class="card-expanded"> <div class="chart-container"> <svg width="100%" height="100%" viewBox="0 0 100 60" preserveAspectRatio="none"> <path class="chart-path" d="M0,50 L10,45 L20,48 L30,40 L40,42 L50,35 L60,30 L70,15 L80,20 L90,10 L100,5"></path> <path class="chart-area" d="M0,50 L10,45 L20,48 L30,40 L40,42 L50,35 L60,30 L70,15 L80,20 L90,10 L100,5 L100,60 L0,60 Z"></path> </svg> </div> <div class="data-grid"> <div class="data-item"> <span class="data-value">$14,290</span> <span class="data-label">Online sales</span> </div> <div class="data-item"> <span class="data-value">$28,566</span> <span class="data-label">Retail sales</span> </div> </div> </div> </div> <div class="card users"> <div class="card-header"> <h3 class="card-title"> <svg class="card-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path> </svg> Active Users </h3> <div class="badge pulse"></div> </div> <div class="stat-value">9,342</div> <div class="stat-label">Users currently active</div> <div class="trend trend-up"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 14l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +8.7% from yesterday </div> <div class="sparkline-container"> <svg class="spark-svg" viewBox="0 0 100 50" preserveAspectRatio="none"> <path d="M0,30 L10,32 L20,28 L30,25 L40,28 L50,20 L60,15 L70,18 L80,10 L90,5 L100,8" stroke="#38A169" fill="none" stroke-width="2"></path> </svg> </div> <div class="card-expanded"> <div class="chart-container"> <svg width="100%" height="100%" viewBox="0 0 100 60" preserveAspectRatio="none"> <path class="chart-path" d="M0,30 L10,32 L20,28 L30,25 L40,28 L50,20 L60,15 L70,18 L80,10 L90,5 L100,8" stroke="#38A169"></path> <path class="chart-area" d="M0,30 L10,32 L20,28 L30,25 L40,28 L50,20 L60,15 L70,18 L80,10 L90,5 L100,8 L100,60 L0,60 Z" fill="#38A169"></path> </svg> </div> <div class="data-grid"> <div class="data-item"> <span class="data-value">6,921</span> <span class="data-label">Mobile users</span> </div> <div class="data-item"> <span class="data-value">2,421</span> <span class="data-label">Desktop users</span> </div> </div> </div> </div> <div class="card conversion"> <div class="card-header"> <h3 class="card-title"> <svg class="card-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path> </svg> Conversion Rate </h3> <div class="chip">Weekly</div> </div> <div class="stat-value">3.8%</div> <div class="stat-label">Overall conversion rate</div> <div class="trend trend-down"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> -0.5% from last week </div> <div class="progress-container"> <div class="progress-bar" style="width: 38%;"></div> </div> <div class="card-expanded"> <div class="chart-container"> <div class="chart-bar" style="left: 10%; height: 40%; background-color: #DD6B20;"></div> <div class="chart-bar" style="left: 25%; height: 65%; background-color: #DD6B20;"></div> <div class="chart-bar" style="left: 40%; height: 35%; background-color: #DD6B20;"></div> <div class="chart-bar" style="left: 55%; height: 45%; background-color: #DD6B20;"></div> <div class="chart-bar" style="left: 70%; height: 28%; background-color: #DD6B20;"></div> <div class="chart-bar" style="left: 85%; height: 38%; background-color: #DD6B20;"></div> </div> <div class="data-grid"> <div class="data-item"> <span class="data-value">5.2%</span> <span class="data-label">Funnel stage 1</span> </div> <div class="data-item"> <span class="data-value">2.4%</span> <span class="data-label">Funnel stage 2</span> </div> </div> </div> </div> <div class="card performance"> <div class="card-header"> <h3 class="card-title"> <svg class="card-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"></path> </svg> System Performance </h3> <div class="chip">Real-time</div> </div> <div class="stat-value">94.2%</div> <div class="stat-label">Server uptime</div> <div class="trend trend-up"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 14l5-5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> +1.7% improvement </div> <div class="progress-container"> <div class="progress-bar" style="width: 94.2%; background-color: #3B82F6;"></div> </div> <div class="card-expanded"> <div class="chart-container"> <svg width="100%" height="100%" viewBox="0 0 100 60" preserveAspectRatio="none"> <path class="chart-path" d="M0,20 L10,18 L20,15 L30,10 L40,12 L50,8 L60,10 L70,5 L80,8 L90,3 L100,6" stroke="#3B82F6"></path> <path class="chart-area" d="M0,20 L10,18 L20,15 L30,10 L40,12 L50,8 L60,10 L70,5 L80,8 L90,3 L100,6 L100,60 L0,60 Z" fill="#3B82F6"></path> </svg> </div> <div class="data-grid"> <div class="data-item"> <span class="data-value">42ms</span> <span class="data-label">Avg. response</span> </div> <div class="data-item"> <span class="data-value">1.28GB</span> <span class="data-label">Memory usage</span> </div> </div> </div> </div> </div> <div class="tooltip" id="tooltip"></div> <script> // Initialize progress bars with animation document.addEventListener('DOMContentLoaded', function() { // Animate progress bars setTimeout(() => { document.querySelectorAll('.progress-bar').forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 100); }); }, 300); // Animate chart bars on card hover document.querySelectorAll('.chart-bar').forEach(bar => { const height = bar.style.height; bar.style.height = '0'; bar.parentElement.parentElement.parentElement.addEventListener('mouseenter', () => { setTimeout(() => { bar.style.height = height; }, 100 * Math.random()); }); bar.parentElement.parentElement.parentElement.addEventListener('mouseleave', () => { setTimeout(() => { bar.style.height = '0'; }, 100 * Math.random()); }); }); // Setup tooltip functionality const tooltip = document.getElementById('tooltip'); document.querySelectorAll('.chart-bar, .chart-point, .sparkline-container').forEach(element => { element.addEventListener('mouseenter', (e) => { const rect = e.target.getBoundingClientRect(); tooltip.style.left = `${rect.left + rect.width / 2}px`; tooltip.style.top = `${rect.top - 30}px`; // Different tooltip content based on element if (element.classList.contains('sparkline-container')) { if (element.closest('.card').classList.contains('revenue')) { tooltip.textContent = 'Revenue trend: $37,245 → $42,856'; } else if (element.closest('.card').classList.contains('users')) { tooltip.textContent = 'User trend: 8,520 → 9,342'; } } else if (element.classList.contains('chart-bar')) { const bars = Array.from(element.parentElement.querySelectorAll('.chart-bar')); const index = bars.indexOf(element); tooltip.textContent = `Day ${index + 1}: ${(parseFloat(element.style.height) * 0.1).toFixed(1)}%`; } tooltip.style.opacity = 1; tooltip.style.transform = 'translateX(-50%)'; }); element.addEventListener('mouseleave', () => { tooltip.style.opacity = 0; }); }); // Create a responsive data update simulation let updateInterval; function startDataUpdates() { // Clear any existing interval if (updateInterval) clearInterval(updateInterval); // Set up new interval updateInterval = setInterval(() => { // Update active users count with a slight fluctuation const userCard = document.querySelector('.card.users .stat-value'); const currentUsers = parseInt(userCard.textContent.replace(',', '')); const fluctuation = Math.floor(Math.random() * 100) - 50; // Random number between -50 and 50 const newUsers = Math.max(8000, currentUsers + fluctuation); userCard.textContent = newUsers.toLocaleString(); // Update system performance with tiny fluctuations const perfCard = document.querySelector('.card.performance .stat-value'); const currentPerf = parseFloat(perfCard.textContent); const perfFluctuation = (Math.random() * 0.2 - 0.1).toFixed(1); // Random number between -0.1 and 0.1 const newPerf = Math.min(100, Math.max(90, currentPerf + parseFloat(perfFluctuation))).toFixed(1); perfCard.textContent = newPerf + '%'; // Update the corresponding progress bar const perfBar = document.querySelector('.card.performance .progress-bar'); perfBar.style.width = newPerf + '%'; }, 5000); } startDataUpdates(); // Cleanup on page unload window.addEventListener('beforeunload', () => { if (updateInterval) clearInterval(updateInterval); }); // Add micro-interaction to charts document.querySelectorAll('.chart-path').forEach(path => { path.addEventListener('mouseenter', () => { path.style.strokeWidth = '3px'; }); path.addEventListener('mouseleave', () => { path.style.strokeWidth = '2px'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Destination Card</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f5f1eb; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 660px; perspective: 1000px; } .destination-card { position: relative; width: 100%; height: 500px; border-radius: 20px; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; } .destination-card:hover { transform: scale(1.02) rotateY(5deg); } .destination-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 60%); z-index: 1; opacity: 0.8; } .card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1); } .destination-card:hover .card-image { transform: scale(1.05); } .card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; color: #fff; z-index: 2; transform: translateY(40px); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .destination-card:hover .card-content { transform: translateY(0); } .destination-name { font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); opacity: 1; transition: opacity 0.3s ease; } .destination-tagline { font-size: 1.1rem; font-weight: 400; margin-bottom: 20px; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); } .card-details { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(225, 148, 88, 0.95) 0%, rgba(183, 90, 49, 0.95) 100%); color: white; padding: 40px; transform: translateX(100%); opacity: 0; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); z-index: 3; display: flex; flex-direction: column; justify-content: center; } .destination-card:hover .card-details { transform: translateX(0); opacity: 1; } .details-header { font-size: 2rem; font-weight: 700; margin-bottom: 15px; position: relative; } .details-header::after { content: ''; position: absolute; bottom: -8px; left: 0; height: 3px; width: 60px; background-color: #fff; } .detail-item { display: flex; align-items: center; margin: 12px 0; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; } .destination-card:hover .detail-item { opacity: 1; transform: translateY(0); } .detail-item:nth-child(2) { transition-delay: 0.1s; } .detail-item:nth-child(3) { transition-delay: 0.2s; } .detail-item:nth-child(4) { transition-delay: 0.3s; } .detail-item:nth-child(5) { transition-delay: 0.4s; } .detail-icon { margin-right: 15px; font-size: 1.2rem; } .detail-text { font-size: 1rem; font-weight: 500; } .cta-button { background-color: white; color: #b75a31; padding: 12px 25px; border-radius: 30px; font-size: 1rem; font-weight: 600; text-transform: uppercase; border: none; margin-top: 25px; align-self: flex-start; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); outline: none; opacity: 0; transform: translateY(20px); } .destination-card:hover .cta-button { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } .cta-button:hover { background-color: #faf0e6; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .destination-card .swipe-indicator { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); display: flex; justify-content: center; align-items: center; z-index: 4; opacity: 0; transition: all 0.3s ease; } .destination-card:hover .swipe-indicator { opacity: 1; animation: pulse 1.5s infinite; } .swipe-indicator i { color: white; font-size: 1.2rem; } @keyframes pulse { 0% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 70% { transform: translateY(-50%) scale(1.05); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .destination-badges { display: flex; margin-bottom: 15px; } .badge { background-color: rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; margin-right: 8px; backdrop-filter: blur(5px); } /* Responsive styles */ @media (max-width: 768px) { .destination-card { height: 420px; } .destination-name { font-size: 2rem; } .details-header { font-size: 1.8rem; } .card-details { padding: 25px; } } @media (max-width: 480px) { .destination-card { height: 380px; } .destination-name { font-size: 1.7rem; } .destination-tagline { font-size: 0.9rem; } .details-header { font-size: 1.5rem; } .detail-text { font-size: 0.9rem; } .cta-button { padding: 10px 20px; font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Kyoto, Japan" class="card-image"> <div class="card-content"> <div class="destination-badges"> <span class="badge">Cultural Heritage</span> <span class="badge">Nature</span> </div> <h2 class="destination-name">Kyoto, Japan</h2> <p class="destination-tagline">Where ancient traditions meet natural splendor</p> </div> <div class="card-details"> <h3 class="details-header">Discover Kyoto</h3> <div class="detail-item"> <div class="detail-icon">🗓️</div> <div class="detail-text">Best time to visit: March-May (cherry blossoms) & Oct-Nov (autumn colors)</div> </div> <div class="detail-item"> <div class="detail-icon">⏱️</div> <div class="detail-text">Ideal duration: 4-5 days to explore over 1,600 temples</div> </div> <div class="detail-item"> <div class="detail-icon">🏠</div> <div class="detail-text">Stay in a traditional ryokan for an authentic experience</div> </div> <div class="detail-item"> <div class="detail-icon">⭐</div> <div class="detail-text">Must visit: Fushimi Inari Shrine, Arashiyama Bamboo Grove</div> </div> <button class="cta-button">Plan Your Journey</button> </div> <div class="swipe-indicator"> <i>→</i> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.destination-card'); const cardDetails = document.querySelector('.card-details'); let startX, moveX; // Handle touch events for mobile swipe card.addEventListener('touchstart', function(e) { startX = e.touches[0].clientX; }); card.addEventListener('touchmove', function(e) { moveX = e.touches[0].clientX; const diff = startX - moveX; // If swiping left, show details if (diff > 50) { cardDetails.style.transform = 'translateX(0)'; cardDetails.style.opacity = '1'; } // If swiping right, hide details if (diff < -50) { cardDetails.style.transform = 'translateX(100%)'; cardDetails.style.opacity = '0'; } }); // Button interaction const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function(e) { e.stopPropagation(); // Button press animation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'translateY(0)'; }, 150); // Here you would normally handle form submission or navigation console.log('Journey planning initiated!'); }); // Randomly choose a new destination when clicked (for demo purposes) const destinations = [ { name: 'Kyoto, Japan', tagline: 'Where ancient traditions meet natural splendor', image: 'https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80', details: [ '🗓️ Best time to visit: March-May (cherry blossoms) & Oct-Nov (autumn colors)', '⏱️ Ideal duration: 4-5 days to explore over 1,600 temples', '🏠 Stay in a traditional ryokan for an authentic experience', '⭐ Must visit: Fushimi Inari Shrine, Arashiyama Bamboo Grove' ], badges: ['Cultural Heritage', 'Nature'] }, { name: 'Santorini, Greece', tagline: 'Whitewashed paradise suspended over the Aegean Sea', image: 'https://images.unsplash.com/photo-1533105079780-92b9be482077?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80', details: [ '🗓️ Best time to visit: Late April to Early November for perfect weather', '⏱️ Ideal duration: 3-4 days to experience the magic without rushing', '🏠 Book a cave hotel in Oia for the quintessential Santorini experience', '⭐ Must do: Sunset at Oia, Wine tasting tour in volcanic vineyards' ], badges: ['Island Paradise', 'Romantic'] }, { name: 'Machu Picchu, Peru', tagline: 'The lost city of the Incas, shrouded in mountain mist', image: 'https://images.unsplash.com/photo-1526392060635-9d6019884377?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80', details: [ '🗓️ Best time to visit: Dry season (May to October) for clearer views', '⏱️ Ideal duration: 2-3 days including Cusco acclimation', '🏠 Stay in Aguas Calientes the night before for early access', '⭐ Must experience: Sunrise at the Sun Gate, Huayna Picchu hike' ], badges: ['World Wonder', 'Adventure'] } ]; let currentIndex = 0; document.querySelector('.destination-card').addEventListener('click', function() { // Only change if the details aren't showing if (getComputedStyle(cardDetails).opacity !== '1') { currentIndex = (currentIndex + 1) % destinations.length; updateDestination(currentIndex); } }); function updateDestination(index) { const dest = destinations[index]; document.querySelector('.card-image').src = dest.image; document.querySelector('.destination-name').textContent = dest.name; document.querySelector('.destination-tagline').textContent = dest.tagline; // Update badges const badgesContainer = document.querySelector('.destination-badges'); badgesContainer.innerHTML = ''; dest.badges.forEach(badge => { const badgeEl = document.createElement('span'); badgeEl.className = 'badge'; badgeEl.textContent = badge; badgesContainer.appendChild(badgeEl); }); // Update details const detailItems = document.querySelectorAll('.detail-item .detail-text'); dest.details.forEach((detail, i) => { if (detailItems[i]) { detailItems[i].textContent = detail.substring(detail.indexOf(' ') + 1); const icon = detail.substring(0, detail.indexOf(' ')); document.querySelectorAll('.detail-item .detail-icon')[i].textContent = icon; } }); document.querySelector('.details-header').textContent = `Discover ${dest.name.split(',')[0]}`; } // 3D tilt effect on mouse move card.addEventListener('mousemove', function(e) { const cardRect = card.getBoundingClientRect(); const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const mouseX = e.clientX - cardCenterX; const mouseY = e.clientY - cardCenterY; // Limit the rotation to a subtle effect const rotateY = mouseX * 0.01; const rotateX = -mouseY * 0.01; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`; }); card.addEventListener('mouseleave', function() { card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #f0ebe1; --text-color: #222222; --accent-color: #8c7851; --light-accent: #d6cfc0; --transition-time: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Georgia', serif; background-color: var(--primary-color); color: var(--text-color); line-height: 1.6; padding: 2rem; height: 100%; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .blog-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; max-width: 100%; } .blog-card { position: relative; background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform var(--transition-time), box-shadow var(--transition-time); cursor: pointer; height: 380px; perspective: 1000px; } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .blog-card__inner { position: relative; width: 100%; height: 100%; transition: transform var(--transition-time); transform-style: preserve-3d; } .blog-card:hover .blog-card__inner { transform: translateZ(20px); } .blog-card__image { width: 100%; height: 180px; object-fit: cover; transition: transform calc(var(--transition-time) * 1.2); opacity: 0.92; } .blog-card:hover .blog-card__image { transform: scale(1.05) translateY(-5px); opacity: 1; } .blog-card__content { padding: 1.5rem; position: relative; z-index: 1; background: white; height: calc(100% - 180px); display: flex; flex-direction: column; } .blog-card__category { font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-color); margin-bottom: 0.8rem; font-family: 'Baskerville', serif; opacity: 0.9; } .blog-card__title { font-size: 1.4rem; margin-bottom: 1rem; line-height: 1.3; font-weight: normal; position: relative; transition: transform var(--transition-time); } .blog-card__title::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 40px; height: 2px; background-color: var(--light-accent); transition: width var(--transition-time); } .blog-card:hover .blog-card__title::after { width: 70px; } .blog-card__excerpt { font-size: 1rem; color: #555; line-height: 1.7; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.3s ease; } .blog-card:hover .blog-card__excerpt { max-height: 200px; opacity: 1; margin-top: 1rem; } .blog-card__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: #888; padding-top: 1rem; border-top: 1px solid var(--light-accent); opacity: 0.8; transition: opacity var(--transition-time); } .blog-card:hover .blog-card__meta { opacity: 1; } .blog-card__readmore { position: absolute; bottom: 1.5rem; right: 1.5rem; color: var(--accent-color); font-style: italic; font-size: 0.9rem; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-time), transform var(--transition-time); } .blog-card:hover .blog-card__readmore { opacity: 1; transform: translateY(0); } .page-title { font-size: 2rem; font-weight: normal; text-align: center; margin-bottom: 3rem; position: relative; letter-spacing: 0.5px; } .page-title::after { content: ""; position: absolute; width: 60px; height: 2px; background-color: var(--accent-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .card-marker { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-color); opacity: 0; transition: opacity var(--transition-time), transform var(--transition-time); } .blog-card:hover .card-marker { opacity: 1; transform: scale(1.2); } .shimmer { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); animation: shimmer 3s infinite; opacity: 0; transition: opacity var(--transition-time); } .blog-card:hover .shimmer { opacity: 1; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } @media (max-width: 700px) { .blog-container { grid-template-columns: 1fr; } .blog-card { height: 350px; } body { padding: 1.5rem; } } @media (max-width: 400px) { .blog-card__title { font-size: 1.2rem; } .blog-card__content { padding: 1rem; } } </style> </head> <body> <h1 class="page-title">The Literary Corner</h1> <div class="blog-container"> <article class="blog-card"> <div class="blog-card__inner"> <img src="https://images.unsplash.com/photo-1519682577862-22b62b24e493?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Morning ritual with book and coffee" class="blog-card__image"> <div class="blog-card__content"> <div class="blog-card__category">Literary Analysis</div> <h2 class="blog-card__title">The Resurgence of Magical Realism in Modern Fiction</h2> <p class="blog-card__excerpt">Examining how contemporary authors are reinterpreting García Márquez's legacy by blending everyday reality with supernatural elements to address pressing social issues and create new narrative possibilities.</p> <div class="blog-card__meta"> <span>June 12, 2023</span> <span>8 min read</span> </div> <div class="blog-card__readmore">Continue reading</div> </div> <div class="shimmer"></div> <div class="card-marker"></div> </div> </article> <article class="blog-card"> <div class="blog-card__inner"> <img src="https://images.unsplash.com/photo-1474932430478-367dbb6832c1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Typewriter with paper" class="blog-card__image"> <div class="blog-card__content"> <div class="blog-card__category">Craft & Technique</div> <h2 class="blog-card__title">The Art of Narrative Time: From Proust to Ferrante</h2> <p class="blog-card__excerpt">An exploration of how masterful authors manipulate time within their narratives, creating tension, revelation, and emotional resonance through techniques like chronological disruption and temporal layering.</p> <div class="blog-card__meta"> <span>May 24, 2023</span> <span>11 min read</span> </div> <div class="blog-card__readmore">Continue reading</div> </div> <div class="shimmer"></div> <div class="card-marker"></div> </div> </article> <article class="blog-card"> <div class="blog-card__inner"> <img src="https://images.unsplash.com/photo-1495640388908-05fa85288e61?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Stack of classic books" class="blog-card__image"> <div class="blog-card__content"> <div class="blog-card__category">Literary History</div> <h2 class="blog-card__title">Forgotten Women of the Modernist Movement</h2> <p class="blog-card__excerpt">Uncovering the significant but often overlooked contributions of female writers to literary modernism, whose experimental works challenged conventions and expanded the possibilities of narrative form.</p> <div class="blog-card__meta"> <span>April 17, 2023</span> <span>9 min read</span> </div> <div class="blog-card__readmore">Continue reading</div> </div> <div class="shimmer"></div> <div class="card-marker"></div> </div> </article> <article class="blog-card"> <div class="blog-card__inner"> <img src="https://images.unsplash.com/photo-1490633874781-1c63cc424610?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Library with sun rays" class="blog-card__image"> <div class="blog-card__content"> <div class="blog-card__category">Reader's Corner</div> <h2 class="blog-card__title">The Restorative Power of Re-reading</h2> <p class="blog-card__excerpt">Why returning to beloved books offers more than nostalgia—it provides renewed insight, comfort during difficult times, and a deeper understanding of how our own stories evolve alongside cherished narratives.</p> <div class="blog-card__meta"> <span>March 3, 2023</span> <span>7 min read</span> </div> <div class="blog-card__readmore">Continue reading</div> </div> <div class="shimmer"></div> <div class="card-marker"></div> </div> </article> </div> <script> document.addEventListener('DOMContentLoaded', () => { const cards = document.querySelectorAll('.blog-card'); cards.forEach(card => { card.addEventListener('mousemove', handleMouseMove); }); function handleMouseMove(e) { const card = this; const cardRect = card.getBoundingClientRect(); const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const mouseX = e.clientX; const mouseY = e.clientY; // Calculate mouse position relative to card center const deltaX = (mouseX - cardCenterX) / (cardRect.width / 2); const deltaY = (mouseY - cardCenterY) / (cardRect.height / 2); // Apply subtle rotation and movement based on mouse position const tiltAmount = 5; // Maximum tilt in degrees const moveAmount = 10; // Maximum movement in pixels card.querySelector('.blog-card__inner').style.transform = `translateZ(20px) rotateX(${-deltaY * tiltAmount}deg) rotateY(${deltaX * tiltAmount}deg)`; card.querySelector('.blog-card__image').style.transform = `scale(1.05) translateX(${deltaX * moveAmount}px) translateY(${-5 + deltaY * moveAmount}px)`; } cards.forEach(card => { card.addEventListener('mouseleave', function() { // Reset transformations when mouse leaves the card const inner = this.querySelector('.blog-card__inner'); const image = this.querySelector('.blog-card__image'); inner.style.transform = 'translateZ(0)'; image.style.transform = 'scale(1)'; // Add transition for smooth reset inner.style.transition = 'transform 0.5s ease-out'; image.style.transition = 'transform 0.5s ease-out'; // Remove the added transition after animation completes setTimeout(() => { inner.style.transition = ''; image.style.transition = ''; }, 500); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Learning Module Card</title> <style> :root { --primary: #4371e5; --secondary: #ff7d5c; --accent: #3df5a7; --light: #f9f9fa; --dark: #282c34; --success: #4cd964; --card-radius: 16px; --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7ff 0%, #e9efff 100%); padding: 1rem; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; gap: 1.5rem; padding: 0.5rem; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .container::-webkit-scrollbar { display: none; } h1 { font-size: 1.75rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; } p.intro { color: #5a6072; line-height: 1.6; margin-bottom: 1rem; font-size: 0.95rem; } .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; } .module-card { position: relative; background: var(--light); border-radius: var(--card-radius); padding: 1.5rem; box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1); transition: var(--transition); cursor: pointer; overflow: hidden; border: 2px solid transparent; min-height: 200px; display: flex; flex-direction: column; } .module-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(149, 157, 165, 0.15); border-color: var(--primary); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .card-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--primary); color: white; font-size: 1.2rem; } .module-card:nth-child(2) .card-icon { background: var(--secondary); } .module-card:nth-child(3) .card-icon { background: var(--accent); color: var(--dark); } .module-card:nth-child(4) .card-icon { background: #b18cfe; } .difficulty { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; color: var(--light); background: var(--dark); } .difficulty.beginner { background: #4cd964; } .difficulty.intermediate { background: #ffce3a; color: #333; } .difficulty.advanced { background: #ff3b30; } .card-title { font-size: 1.2rem; font-weight: 600; color: var(--dark); margin-bottom: 0.5rem; } .card-description { font-size: 0.85rem; color: #5a6072; line-height: 1.5; margin-bottom: 1rem; } .progress-container { margin-top: auto; background: #eaedf6; height: 8px; border-radius: 4px; overflow: hidden; position: relative; } .progress-bar { height: 100%; background: var(--primary); width: 0; transition: width 0.5s ease; border-radius: 4px; } .module-card:nth-child(2) .progress-bar { background: var(--secondary); } .module-card:nth-child(3) .progress-bar { background: var(--accent); } .module-card:nth-child(4) .progress-bar { background: #b18cfe; } .quick-facts { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 1rem 1.5rem; transform: translateY(100%); transition: var(--transition); box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05); border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); } .module-card:hover .quick-facts { transform: translateY(0); } .quick-facts h4 { font-size: 0.9rem; color: var(--dark); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .quick-facts h4 svg { width: 16px; height: 16px; } .fact-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; } .fact-icon { color: var(--primary); flex-shrink: 0; margin-top: 2px; } .module-card:nth-child(2) .fact-icon { color: var(--secondary); } .module-card:nth-child(3) .fact-icon { color: var(--accent); } .module-card:nth-child(4) .fact-icon { color: #b18cfe; } .start-learning { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 1.2rem; background: var(--primary); color: white; border-radius: 8px; font-weight: 600; font-size: 0.9rem; margin-top: 1.5rem; border: none; cursor: pointer; transition: var(--transition); text-decoration: none; } .start-learning:hover { background: #2e5cd5; transform: translateY(-2px); } .currently-learning { position: absolute; top: 1rem; right: 1rem; background: var(--success); color: white; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 16px; opacity: 0; transform: translateY(-10px); transition: var(--transition); } .module-card.active .currently-learning { opacity: 1; transform: translateY(0); } .completion-badge { position: absolute; top: 1.5rem; right: 1.5rem; width: 30px; height: 30px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0; transform: scale(0.8); transition: var(--transition); } .module-card.completed .completion-badge { opacity: 1; transform: scale(1); } .card-time { font-size: 0.8rem; color: #5a6072; display: flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; } @media (max-width: 600px) { h1 { font-size: 1.5rem; } .module-grid { grid-template-columns: 1fr; } .module-card { min-height: 180px; } } /* Pattern decorations */ .pattern-dots { position: absolute; width: 80px; height: 80px; background-image: radial-gradient(var(--primary) 2px, transparent 2px); background-size: 10px 10px; opacity: 0.1; z-index: 0; border-radius: 50%; transition: var(--transition); } .module-card:nth-child(1) .pattern-dots { top: -20px; right: -20px; background-image: radial-gradient(var(--primary) 2px, transparent 2px); } .module-card:nth-child(2) .pattern-dots { bottom: -20px; left: -20px; background-image: radial-gradient(var(--secondary) 2px, transparent 2px); } .module-card:nth-child(3) .pattern-dots { top: -20px; left: 40%; background-image: radial-gradient(var(--accent) 2px, transparent 2px); } .module-card:nth-child(4) .pattern-dots { bottom: 30px; right: -20px; background-image: radial-gradient(#b18cfe 2px, transparent 2px); } .module-card:hover .pattern-dots { opacity: 0.2; transform: scale(1.2); } /* Wave animation */ .wave-animation { position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--primary)); background-size: 300% 100%; border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); opacity: 0; transition: opacity 0.3s ease; animation: waveMove 6s linear infinite; } @keyframes waveMove { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } } .module-card:hover .wave-animation { opacity: 1; } /* Pulse animation for active module */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 113, 229, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(67, 113, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 113, 229, 0); } } .module-card.active { animation: pulse 2s infinite; } </style> </head> <body> <div class="container"> <h1>Discover Your Learning Path</h1> <p class="intro">Engage with our interactive learning modules designed to help you master new skills at your own pace. Hover over each card for quick insights and track your progress as you go.</p> <div class="module-grid"> <!-- Module 1 --> <div class="module-card active" data-progress="35"> <div class="pattern-dots"></div> <div class="card-header"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path> </svg> </div> <span class="difficulty beginner">Beginner</span> </div> <h3 class="card-title">Visual Design Fundamentals</h3> <p class="card-description">Learn the core principles of visual hierarchy, color theory, and layout composition for digital interfaces.</p> <div class="card-time"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 3.5 hours · 12 lessons </div> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="currently-learning">Currently Learning</div> <div class="quick-facts"> <h4> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Quick Facts </h4> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Includes hands-on design exercises and interactive quizzes</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Learn to analyze and critique real-world designs</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>No design tools required — all web-based exercises</span> </div> </div> <div class="wave-animation"></div> </div> <!-- Module 2 --> <div class="module-card" data-progress="0"> <div class="pattern-dots"></div> <div class="card-header"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> </div> <span class="difficulty intermediate">Intermediate</span> </div> <h3 class="card-title">Responsive Prototyping</h3> <p class="card-description">Master interactive prototyping techniques for responsive designs that adapt to any device.</p> <div class="card-time"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 5 hours · 8 lessons </div> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="quick-facts"> <h4> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Quick Facts </h4> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Create high-fidelity interactive mockups from scratch</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Test usability across multiple device breakpoints</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Includes capstone project for your design portfolio</span> </div> </div> <div class="wave-animation"></div> </div> <!-- Module 3 --> <div class="module-card" data-progress="0"> <div class="pattern-dots"></div> <div class="card-header"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <circle cx="12" cy="12" r="4"></circle> <line x1="21.17" y1="8" x2="12" y2="8"></line> <line x1="3.95" y1="6.06" x2="8.54" y2="14"></line> <line x1="10.88" y1="21.94" x2="15.46" y2="14"></line> </svg> </div> <span class="difficulty intermediate">Intermediate</span> </div> <h3 class="card-title">Animation Principles</h3> <p class="card-description">Create meaningful micro-interactions and transitions that enhance user experience and provide visual feedback.</p> <div class="card-time"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 4.5 hours · 10 lessons </div> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="quick-facts"> <h4> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Quick Facts </h4> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Learn the 12 principles of animation applied to UI/UX</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Create micro-interactions that communicate status</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Focus on performance optimization for smooth animations</span> </div> </div> <div class="wave-animation"></div> </div> <!-- Module 4 --> <div class="module-card completed" data-progress="100"> <div class="pattern-dots"></div> <div class="card-header"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> <span class="difficulty advanced">Advanced</span> </div> <h3 class="card-title">User Testing Frameworks</h3> <p class="card-description">Implement robust user testing methodologies to validate design decisions and improve usability.</p> <div class="card-time"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> 6 hours · 14 lessons </div> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="completion-badge"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </div> <div class="quick-facts"> <h4> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="16" x2="12" y2="12"></line> <line x1="12" y1="8" x2="12.01" y2="8"></line> </svg> Quick Facts </h4> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Design comprehensive usability testing protocols</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Analyze and interpret qualitative user feedback</span> </div> <div class="fact-item"> <span class="fact-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="20 6 9 17 4 12"></polyline> </svg> </span> <span>Learn remote testing methods for distributed teams</span> </div> </div> <div class="wave-animation"></div> </div> </div> <button class="start-learning"> Continue Learning <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left: 6px;"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </button> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize progress bars const moduleCards = document.querySelectorAll('.module-card'); moduleCards.forEach(card => { const progressBar = card.querySelector('.progress-bar'); const progressValue = card.dataset.progress || 0; // Animate progress bar with a slight delay setTimeout(() => { progressBar.style.width = `${progressValue}%`; }, 300); // Card interactions card.addEventListener('click', function() { // If it's not completed, make it active if (!this.classList.contains('completed')) { // Remove active class from other cards document.querySelectorAll('.module-card.active').forEach(activeCard => { if (activeCard !== this) { activeCard.classList.remove('active'); } }); // Add active class to this card this.classList.add('active'); // If progress is 0, start it at 5% if (this.dataset.progress === "0") { this.dataset.progress = "5"; const progressBar = this.querySelector('.progress-bar'); progressBar.style.width = '5%'; } } }); }); // Continue Learning button const continueButton = document.querySelector('.start-learning'); continueButton.addEventListener('click', function(e) { e.preventDefault(); // Find the active card const activeCard = document.querySelector('.module-card.active'); if (activeCard) { // Increment progress let currentProgress = parseInt(activeCard.dataset.progress); currentProgress += 10; if (currentProgress > 100) currentProgress = 100; activeCard.dataset.progress = currentProgress; // Update progress bar const progressBar = activeCard.querySelector('.progress-bar'); progressBar.style.width = `${currentProgress}%`; // If completed if (currentProgress === 100) { activeCard.classList.add('completed'); activeCard.classList.remove('active'); // Find next incomplete module const nextModule = [...moduleCards].find(card => !card.classList.contains('completed') && !card.classList.contains('active') ); if (nextModule) { nextModule.classList.add('active'); } } // Add a little bounce animation to the button this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'translateY(-2px)'; }, 150); } }); // Random subtle animations for the cards function addRandomAnimation() { const randomCard = moduleCards[Math.floor(Math.random() * moduleCards.length)]; const dots = randomCard.querySelector('.pattern-dots'); dots.style.transform = 'scale(1.1) rotate(5deg)'; setTimeout(() => { dots.style.transform = ''; }, 1000); // Schedule next animation setTimeout(addRandomAnimation, 3000 + Math.random() * 2000); } // Start random animations setTimeout(addRandomAnimation, 2000); }); </script> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: #f7f5f3; color: #333; display: flex; justify-content: center; align-items: center; min-height: 700px; height: 100vh; overflow: hidden; padding: 20px; } .property-showcase { width: 100%; max-width: 660px; height: 660px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; position: relative; } .property-card { background-color: #fff; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.5s ease, box-shadow 0.5s ease; height: 100%; } .property-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); } .card-1 { grid-column: 1 / 3; grid-row: 1; } .card-2, .card-3 { grid-row: 2; } .card-image { height: 100%; width: 100%; background-size: cover; background-position: center; transition: transform 0.8s ease; position: relative; } .property-card:hover .card-image { transform: scale(1.05); } .card-1 .card-image { background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'); } .card-2 .card-image { background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'); } .card-3 .card-image { background-image: url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 60%); opacity: 0.7; transition: opacity 0.5s ease; } .property-card:hover .overlay { opacity: 0.85; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.3) 100%); } .property-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; color: #fff; transform: translateY(25px); opacity: 0.85; transition: transform 0.5s ease, opacity 0.5s ease; } .property-card:hover .property-info { transform: translateY(0); opacity: 1; } .property-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; letter-spacing: 0.5px; } .property-subtitle { font-size: 14px; font-weight: 400; margin-bottom: 12px; opacity: 0.9; } .property-price { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; margin-bottom: 16px; opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s; } .property-card:hover .property-price { opacity: 1; transform: translateY(0); } .property-features { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; } .property-card:hover .property-features { opacity: 1; transform: translateY(0); } .feature { display: flex; align-items: center; font-size: 13px; } .feature svg { margin-right: 6px; width: 16px; height: 16px; fill: currentColor; } .status-badge { position: absolute; top: 20px; right: 20px; background-color: #fff; color: #333; padding: 6px 12px; border-radius: 30px; font-weight: 600; font-size: 12px; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease; } .property-card:hover .status-badge { opacity: 1; transform: translateY(0); } .for-sale { background-color: #e9f7ef; color: #27ae60; } .for-rent { background-color: #eef3fc; color: #3498db; } .view-button { display: inline-block; padding: 10px 20px; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.7); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; opacity: 0; transform: translateY(15px); transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s, background-color 0.3s ease; } .property-card:hover .view-button { opacity: 1; transform: translateY(0); } .view-button:hover { background-color: #fff; color: #222; border-color: #fff; } .ripple { position: absolute; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } @media (max-width: 640px) { .property-showcase { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); height: auto; gap: 15px; } .card-1 { grid-column: 1; grid-row: 1; height: 300px; } .card-2, .card-3 { grid-row: auto; height: 170px; } .property-title { font-size: 18px; } .property-subtitle { font-size: 12px; } .property-price { font-size: 20px; margin-bottom: 10px; } .property-features { gap: 10px; margin-bottom: 12px; } .view-button { padding: 8px 16px; font-size: 12px; } } </style> </head> <body> <div class="property-showcase"> <div class="property-card card-1"> <div class="card-image"> <div class="overlay"></div> <div class="status-badge for-sale">FOR SALE</div> <div class="property-info"> <h2 class="property-title">Coastal Modern Estate</h2> <p class="property-subtitle">17 Oceanfront Drive, Newport Beach</p> <div class="property-price">$4,850,000</div> <div class="property-features"> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M10,2V4.26L12,5.59V4H22V19H17V21H24V2H10M7.5,5L0,10V21H15V10L7.5,5M14,6V6.93L15.61,8H16V6H14M18,6V8H20V6H18M7.5,7.5L13,11V19H10V13H5V19H2V11L7.5,7.5Z"/></svg> 5 Bedrooms </div> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M21 14C21 15.1 20.1 16 19 16H3V15H1V21H3V20H21V21H23V15H21V14M5 4H19C21.2 4 23 5.8 23 8V12H19V9C19 7.9 18.1 7 17 7H7C5.9 7 5 7.9 5 9V12H1V8C1 5.8 2.8 4 5 4M3 12H5V9H3V12M19 12H21V9H19V12Z"/></svg> 4.5 Baths </div> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M3,21H21V8H3V21M5,10H19V19H5V10M3,4H21V6H3V4M15,15H17V17H15V15M11,15H13V17H11V15M7,15H9V17H7V15Z"/></svg> 4,280 sq ft </div> </div> <a href="#" class="view-button">View Property</a> </div> </div> </div> <div class="property-card card-2"> <div class="card-image"> <div class="overlay"></div> <div class="status-badge for-rent">FOR RENT</div> <div class="property-info"> <h2 class="property-title">Midcentury Oasis</h2> <p class="property-subtitle">42 Palm Springs Ave, Silverlake</p> <div class="property-price">$6,800/month</div> <div class="property-features"> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M10,2V4.26L12,5.59V4H22V19H17V21H24V2H10M7.5,5L0,10V21H15V10L7.5,5M14,6V6.93L15.61,8H16V6H14M18,6V8H20V6H18M7.5,7.5L13,11V19H10V13H5V19H2V11L7.5,7.5Z"/></svg> 3 Bedrooms </div> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M21 14C21 15.1 20.1 16 19 16H3V15H1V21H3V20H21V21H23V15H21V14M5 4H19C21.2 4 23 5.8 23 8V12H19V9C19 7.9 18.1 7 17 7H7C5.9 7 5 7.9 5 9V12H1V8C1 5.8 2.8 4 5 4M3 12H5V9H3V12M19 12H21V9H19V12Z"/></svg> 2 Baths </div> </div> <a href="#" class="view-button">View Property</a> </div> </div> </div> <div class="property-card card-3"> <div class="card-image"> <div class="overlay"></div> <div class="status-badge for-sale">FOR SALE</div> <div class="property-info"> <h2 class="property-title">Tudor Revival</h2> <p class="property-subtitle">8 Chestnut Lane, Brentwood</p> <div class="property-price">$2,950,000</div> <div class="property-features"> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M10,2V4.26L12,5.59V4H22V19H17V21H24V2H10M7.5,5L0,10V21H15V10L7.5,5M14,6V6.93L15.61,8H16V6H14M18,6V8H20V6H18M7.5,7.5L13,11V19H10V13H5V19H2V11L7.5,7.5Z"/></svg> 4 Bedrooms </div> <div class="feature"> <svg viewBox="0 0 24 24"><path d="M21 14C21 15.1 20.1 16 19 16H3V15H1V21H3V20H21V21H23V15H21V14M5 4H19C21.2 4 23 5.8 23 8V12H19V9C19 7.9 18.1 7 17 7H7C5.9 7 5 7.9 5 9V12H1V8C1 5.8 2.8 4 5 4M3 12H5V9H3V12M19 12H21V9H19V12Z"/></svg> 3 Baths </div> </div> <a href="#" class="view-button">View Property</a> </div> </div> </div> </div> <script> // Create ripple effect on card click const cards = document.querySelectorAll('.property-card'); cards.forEach(card => { card.addEventListener('click', function(e) { // Only create ripple if we're clicking on the card itself or overlay, not on buttons if (e.target.classList.contains('view-button')) { e.preventDefault(); return; } const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); // Remove ripple element after animation setTimeout(() => { ripple.remove(); }, 800); // Prevent default if clicking on a link if (e.target.tagName === 'A') { e.preventDefault(); } }); }); // Smooth hover effect for better UX cards.forEach(card => { card.addEventListener('mouseenter', function() { // Add slight delay to simulate tactile interface setTimeout(() => { this.classList.add('active'); }, 50); }); card.addEventListener('mouseleave', function() { this.classList.remove('active'); }); }); // Prevent form submissions and page refreshes document.querySelectorAll('a, button').forEach(element => { element.addEventListener('click', function(e) { e.preventDefault(); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechFusion Summit 2024</title> <style> :root { --primary: #ff3366; --secondary: #2e0c58; --accent: #00ffcc; --text-light: #ffffff; --text-dark: #180533; --shadow: rgba(0, 0, 0, 0.2); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .event-card { width: 100%; max-width: 650px; background: linear-gradient(135deg, var(--secondary), #1a0733); border-radius: 20px; overflow: hidden; box-shadow: 0 15px 30px var(--shadow); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .event-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .event-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="10" cy="10" r="5" fill="%2333ccff" opacity="0.1"/><circle cx="50" cy="50" r="5" fill="%23ff3366" opacity="0.1"/><circle cx="90" cy="90" r="5" fill="%2300ffcc" opacity="0.1"/></svg>'); opacity: 0.15; } .card-header { background: linear-gradient(to right, var(--primary), #ff7799); padding: 25px 30px; color: var(--text-light); position: relative; overflow: hidden; } .header-pattern { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><path d="M0 0 L30 30 L0 60 Z" fill="%23ffffff" opacity="0.08"/></svg>'); transform: rotate(-10deg) scale(2); } .event-type { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; font-weight: 700; position: relative; display: inline-block; color: var(--accent); text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .event-type::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 40px; height: 3px; background-color: var(--accent); border-radius: 4px; } .event-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; line-height: 1.2; position: relative; text-shadow: 0 2px 4px rgba(0,0,0,0.2); } .event-date { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .event-location { font-size: 1.1rem; font-weight: 500; display: flex; align-items: center; gap: 8px; } .icon { display: inline-flex; align-items: center; justify-content: center; } .card-body { padding: 30px; color: var(--text-light); position: relative; } .event-description { margin-bottom: 25px; line-height: 1.6; font-size: 1.05rem; } .highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; } .highlight-item { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background-color: rgba(255, 255, 255, 0.1); border-radius: 12px; transition: transform 0.3s ease, background-color 0.3s ease; } .highlight-item:hover { background-color: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .highlight-icon { width: 40px; height: 40px; background-color: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .highlight-icon svg { width: 20px; height: 20px; fill: white; } .highlight-text { font-weight: 600; font-size: 0.95rem; } .card-footer { display: flex; flex-direction: column; gap: 15px; padding: 0 30px 30px; } .countdown { background-color: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; margin-bottom: 10px; } .countdown-item { display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform 0.3s ease; } .countdown-value { font-size: 1.8rem; font-weight: 700; color: var(--text-light); display: block; line-height: 1; margin-bottom: 5px; } .countdown-label { font-size: 0.75rem; text-transform: uppercase; color: var(--accent); letter-spacing: 1px; } .register-btn { background: linear-gradient(45deg, var(--primary), #ff7799); color: white; border: none; border-radius: 12px; padding: 16px 30px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(255, 51, 102, 0.4); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 10px; } .register-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 51, 102, 0.6); } .register-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .register-btn:hover::before { left: 100%; } .pulse { display: inline-block; width: 10px; height: 10px; background-color: var(--accent); border-radius: 50%; margin-right: 8px; position: relative; } .pulse::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--accent); border-radius: 50%; animation: pulse 1.5s ease-out infinite; top: 0; left: 0; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } .limited-seats { display: flex; align-items: center; gap: 5px; color: var(--accent); font-size: 0.9rem; font-weight: 600; justify-content: center; margin-top: 5px; } @media (max-width: 600px) { .event-title { font-size: 2rem; } .highlights { grid-template-columns: 1fr; } .countdown { padding: 10px; } .countdown-value { font-size: 1.5rem; } .countdown-label { font-size: 0.7rem; } .card-header, .card-body, .card-footer { padding: 20px; } .card-footer { padding-top: 0; } } /* Hover animation for countdown */ .countdown-item:hover { transform: scale(1.1); } /* Animation for countdown entrance */ @keyframes countdownEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .countdown-item { animation: countdownEnter 0.5s ease forwards; opacity: 0; } .countdown-item:nth-child(1) { animation-delay: 0.1s; } .countdown-item:nth-child(2) { animation-delay: 0.2s; } .countdown-item:nth-child(3) { animation-delay: 0.3s; } .countdown-item:nth-child(4) { animation-delay: 0.4s; } /* Floating animation for icons */ @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } .highlight-icon { animation: floating 3s ease-in-out infinite; } .highlight-item:nth-child(2) .highlight-icon { animation-delay: 0.5s; } .highlight-item:nth-child(3) .highlight-icon { animation-delay: 1s; } .highlight-item:nth-child(4) .highlight-icon { animation-delay: 1.5s; } </style> </head> <body> <div class="event-card"> <div class="card-header"> <div class="header-pattern"></div> <div class="event-type">Tech Conference</div> <h1 class="event-title">TechFusion Summit 2024</h1> <div class="event-date"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> </span> September 15-17, 2024 </div> <div class="event-location"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path> <circle cx="12" cy="10" r="3"></circle> </svg> </span> Innovation Center, San Francisco </div> </div> <div class="card-body"> <p class="event-description">Join the tech elite for three days of cutting-edge innovation, hands-on workshops, and game-changing networking. TechFusion Summit brings together pioneers from AI, blockchain, and quantum computing to tackle tomorrow's challenges.</p> <div class="highlights"> <div class="highlight-item"> <div class="highlight-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M20 16V4H8v12h12zM2 8v12h12v-1.5H3.5v-9H2V8zm19-3v14H7v3h16V5h-2z" /> </svg> </div> <div class="highlight-text">32+ Interactive Workshops</div> </div> <div class="highlight-item"> <div class="highlight-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /> </svg> </div> <div class="highlight-text">50+ Industry Leaders</div> </div> <div class="highlight-item"> <div class="highlight-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" /> </svg> </div> <div class="highlight-text">1200+ Global Attendees</div> </div> <div class="highlight-item"> <div class="highlight-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 15c-4.42 0-8-2.69-8-6s3.58-6 8-6 8 2.69 8 6-3.58 6-8 6z" /> </svg> </div> <div class="highlight-text">Exclusive Demo Zone</div> </div> </div> </div> <div class="card-footer"> <div class="countdown"> <div class="countdown-item"> <span class="countdown-value" id="days">00</span> <span class="countdown-label">Days</span> </div> <div class="countdown-item"> <span class="countdown-value" id="hours">00</span> <span class="countdown-label">Hours</span> </div> <div class="countdown-item"> <span class="countdown-value" id="minutes">00</span> <span class="countdown-label">Minutes</span> </div> <div class="countdown-item"> <span class="countdown-value" id="seconds">00</span> <span class="countdown-label">Seconds</span> </div> </div> <button class="register-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="8.5" cy="7" r="4"></circle> <line x1="20" y1="8" x2="20" y2="14"></line> <line x1="23" y1="11" x2="17" y2="11"></line> </svg> Secure Your Spot </button> <div class="limited-seats"> <span class="pulse"></span> Only 78 seats remaining at early-bird pricing </div> </div> </div> <script> // Set the event date (September 15, 2024) const eventDate = new Date('2024-09-15T09:00:00').getTime(); // Update countdown every second const countdownTimer = setInterval(function() { // Get current date and time const now = new Date().getTime(); // Find the time difference between now and the event date const distance = eventDate - now; // Calculate days, hours, minutes and seconds const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result document.getElementById("days").innerHTML = days.toString().padStart(2, '0'); document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0'); document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0'); document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0'); // If the countdown is over, display a message if (distance < 0) { clearInterval(countdownTimer); document.getElementById("days").innerHTML = "00"; document.getElementById("hours").innerHTML = "00"; document.getElementById("minutes").innerHTML = "00"; document.getElementById("seconds").innerHTML = "00"; } }, 1000); // Register button animation for clicks (no actual submission) document.querySelector('.register-btn').addEventListener('click', function(e) { e.preventDefault(); // Add a temporary class for a click effect this.classList.add('clicked'); // Remove the class after animation completes setTimeout(() => { this.classList.remove('clicked'); }, 300); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #1db0f6; --secondary: #f64bc8; --accent: #7958ff; --text: #333333; --light: #f9f9f9; --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%); padding: 20px; } .container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 20px; } .social-post { width: 100%; max-width: 450px; background: white; border-radius: 16px; overflow: hidden; position: relative; transition: var(--transition); box-shadow: var(--card-shadow); transform: translateZ(0); cursor: pointer; margin-bottom: 30px; } .social-post:hover { transform: scale(1.03) translateZ(0); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); } .post-header { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; margin-right: 12px; flex-shrink: 0; } .user-info { flex: 1; } .username { font-weight: 600; color: var(--text); font-size: 16px; margin-bottom: 2px; } .timestamp { color: #777; font-size: 14px; } .menu-icon { color: #888; font-size: 20px; cursor: pointer; transition: var(--transition); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .menu-icon:hover { background-color: rgba(0, 0, 0, 0.05); color: var(--text); } .post-content { padding: 16px; } .post-text { color: var(--text); font-size: 16px; line-height: 1.5; margin-bottom: 16px; } .post-media { border-radius: 12px; overflow: hidden; background: var(--light); position: relative; padding-top: 56.25%; /* 16:9 aspect ratio */ } .post-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .engagement-wrapper { height: 52px; position: relative; overflow: hidden; } .engagement-stats { display: flex; align-items: center; justify-content: space-between; padding: 16px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: var(--transition); } .stats { display: flex; align-items: center; } .stat { display: flex; align-items: center; margin-right: 16px; color: #666; font-size: 14px; } .stat i { margin-right: 5px; font-size: 18px; } .engagement-actions { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; transition: var(--transition); background: white; } .action-button { display: flex; align-items: center; justify-content: center; padding: 8px 0; flex: 1; color: #666; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; transition: var(--transition); border-radius: 8px; } .action-button i { margin-right: 6px; font-size: 18px; } .action-button:hover { background-color: rgba(0, 0, 0, 0.03); color: var(--text); } .action-button.like:hover { color: #ff3b5c; } .action-button.comment:hover { color: var(--primary); } .action-button.share:hover { color: var(--accent); } .social-post:hover .engagement-stats { top: -100%; } .social-post:hover .engagement-actions { top: 0; } .social-post:hover .post-image { transform: scale(1.05); } .tag { display: inline-block; padding: 4px 10px; border-radius: 16px; background: rgba(29, 176, 246, 0.08); color: var(--primary); font-size: 13px; font-weight: 500; margin-right: 8px; margin-bottom: 8px; transition: var(--transition); } .tag:hover { background: rgba(29, 176, 246, 0.15); transform: translateY(-2px); } .label { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 16px; text-align: center; } @media (max-width: 480px) { .social-post { max-width: 100%; } .post-text { font-size: 15px; } .stat { margin-right: 12px; font-size: 13px; } .action-button { font-size: 13px; } .action-button i { margin-right: 4px; font-size: 16px; } } /* Custom animation for pattern background */ .pattern-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; opacity: 0.4; background-image: linear-gradient(45deg, var(--primary) 25%, transparent 25%), linear-gradient(-45deg, var(--primary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--primary) 75%), linear-gradient(-45deg, transparent 75%, var(--primary) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; transform: scale(10); filter: blur(3px); animation: patternMove 40s linear infinite; } @keyframes patternMove { 0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } 100% { background-position: 50px 50px, 50px 60px, 60px 40px, 40px 50px; } } /* Custom pulse animation for new post label */ .new-post { position: absolute; top: 12px; right: 12px; background: var(--secondary); color: white; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 12px; z-index: 10; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(246, 75, 200, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(246, 75, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 75, 200, 0); } } .links { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .link { color: var(--primary); text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 20px; transition: var(--transition); background: rgba(29, 176, 246, 0.08); } .link:hover { background: rgba(29, 176, 246, 0.15); transform: translateY(-2px); } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="pattern-bg"></div> <div class="container"> <div class="label">Social Post Card Design</div> <div class="social-post"> <div class="new-post">New</div> <div class="post-header"> <div class="avatar">DC</div> <div class="user-info"> <div class="username">Design Central</div> <div class="timestamp">Just now</div> </div> <div class="menu-icon"> <i class="fas fa-ellipsis-h"></i> </div> </div> <div class="post-content"> <div class="post-text"> Our latest minimalist UI kit is now available! Features clean iconography and consistent color schemes that adapt to both light and dark modes. Perfect for creating engaging, accessible interfaces. </div> <div class="post-media"> <img src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?q=80&w=1974&auto=format&fit=crop" alt="UI design mockup" class="post-image"> </div> <div style="margin-top: 12px;"> <span class="tag">#MinimalistUI</span> <span class="tag">#CleanDesign</span> <span class="tag">#UXdesign</span> </div> </div> <div class="engagement-wrapper"> <div class="engagement-stats"> <div class="stats"> <div class="stat"><i class="fas fa-heart"></i> 243</div> <div class="stat"><i class="fas fa-comment"></i> 37</div> </div> <div class="stats"> <div class="stat"><i class="fas fa-share"></i> 19</div> </div> </div> <div class="engagement-actions"> <button class="action-button like"> <i class="fas fa-heart"></i> Like </button> <button class="action-button comment"> <i class="fas fa-comment"></i> Comment </button> <button class="action-button share"> <i class="fas fa-share"></i> Share </button> </div> </div> </div> <div class="links"> <a href="#" class="link">View More Posts</a> <a href="#" class="link">About Design Central</a> <a href="#" class="link">Browse UI Kits</a> </div> </div> <script> // Add click event listeners to action buttons document.querySelectorAll('.action-button').forEach(button => { button.addEventListener('click', (e) => { e.stopPropagation(); // Prevent card hover effect from triggering // Get the button class to determine which action was clicked const action = e.currentTarget.classList[1]; // Create a subtle animation for feedback button.style.transform = 'scale(0.95)'; // Add active state styling if (action === 'like') { button.style.color = '#ff3b5c'; button.innerHTML = '<i class="fas fa-heart"></i> Liked'; // Update like count const likeCount = document.querySelector('.stat:first-child'); const currentLikes = parseInt(likeCount.textContent.match(/\d+/)[0]); likeCount.innerHTML = `<i class="fas fa-heart"></i> ${currentLikes + 1}`; } else if (action === 'comment') { button.style.color = '#1db0f6'; } else if (action === 'share') { button.style.color = '#7958ff'; } // Reset button after short delay setTimeout(() => { button.style.transform = 'scale(1)'; }, 200); }); }); // Prevent the whole card from scaling when buttons are clicked document.querySelector('.engagement-actions').addEventListener('mousedown', (e) => { e.stopPropagation(); }); // Add ripple effect to avatar const avatar = document.querySelector('.avatar'); avatar.addEventListener('click', (e) => { const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.top = '0'; ripple.style.left = '0'; ripple.style.background = 'rgba(255, 255, 255, 0.4)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.addEventListener('animationend', () => ripple.remove()); avatar.style.overflow = 'hidden'; avatar.style.position = 'relative'; avatar.appendChild(ripple); // Create a keyframe animation for the ripple effect const keyframes = document.createElement('style'); keyframes.textContent = ` @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } `; document.head.appendChild(keyframes); }); // Add interaction for tags document.querySelectorAll('.tag').forEach(tag => { tag.addEventListener('click', (e) => { e.stopPropagation(); tag.style.backgroundColor = 'rgba(29, 176, 246, 0.2)'; setTimeout(() => { tag.style.backgroundColor = ''; }, 300); }); }); </script> </body> </html>
<html> <head> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #2a4365; --primary-light: #3c5c85; --primary-dark: #1a2d45; --accent: #e53e3e; --text: #2d3748; --text-light: #718096; --background: #f7fafc; --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --transition: 0.3s ease-in-out; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { font-family: var(--font-primary); background-color: var(--background); color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; } .container { max-width: 700px; width: 100%; padding: 2rem; } .section-title { font-size: 1.75rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; text-align: center; position: relative; padding-bottom: 0.75rem; } .section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: var(--accent); border-radius: 3px; } .section-subtitle { text-align: center; color: var(--text-light); margin-bottom: 2.5rem; font-size: 1.1rem; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .service-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); position: relative; height: 320px; transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .service-icon { display: flex; align-items: center; justify-content: center; height: 80px; width: 80px; margin: 1.5rem auto; background-color: var(--primary-light); border-radius: 50%; color: white; font-size: 2rem; position: relative; z-index: 2; transition: background-color var(--transition), transform var(--transition); } .service-card:hover .service-icon { background-color: var(--accent); transform: scale(1.1); } .service-title { text-align: center; font-size: 1.25rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; transition: color var(--transition); } .service-card:hover .service-title { color: var(--accent); } .service-brief { text-align: center; color: var(--text-light); padding: 0 1.5rem; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem; } .service-details { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.98); padding: 1.5rem; transform: translateY(100%); opacity: 0; transition: transform var(--transition), opacity var(--transition); display: flex; flex-direction: column; justify-content: center; z-index: 3; } .service-card:hover .service-details { transform: translateY(0); opacity: 1; } .details-title { color: var(--primary); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; text-align: center; } .detail-item { display: flex; align-items: flex-start; margin-bottom: 0.75rem; } .detail-icon { color: var(--accent); margin-right: 0.75rem; margin-top: 0.25rem; font-size: 0.875rem; } .detail-text { font-size: 0.95rem; line-height: 1.5; color: var(--text); } .cta-button { margin-top: 1rem; padding: 0.75rem 1.5rem; background-color: var(--primary); color: white; border: none; border-radius: 5px; font-weight: 600; cursor: pointer; transition: background-color var(--transition), transform var(--transition); align-self: center; text-decoration: none; display: inline-block; } .cta-button:hover, .cta-button:focus { background-color: var(--accent); transform: translateY(-2px); } @media (max-width: 768px) { .container { padding: 1.5rem; } .services-grid { grid-template-columns: 1fr; } .service-card { height: 300px; } } @media (max-width: 480px) { .section-title { font-size: 1.5rem; } .section-subtitle { font-size: 0.95rem; margin-bottom: 2rem; } } /* Elegant progress loader for buttons */ .cta-button .loader { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; margin-left: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } } /* Special decorative elements */ .service-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background-color: rgba(42, 67, 101, 0.05); border-radius: 50%; z-index: 1; transition: transform var(--transition); } .service-card:hover::before { transform: scale(1.2); } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); } } </style> </head> <body> <div class="container"> <h2 class="section-title">Our Expertise</h2> <p class="section-subtitle">Unparalleled strategic consulting services tailored to your business needs. We combine deep industry knowledge with innovative approaches to drive measurable results.</p> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-chart-line"></i> </div> <h3 class="service-title">Strategic Planning</h3> <p class="service-brief">Future-focused strategic roadmaps that align with your organization's vision and market positioning.</p> <div class="service-details"> <h4 class="details-title">Strategic Planning</h4> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Comprehensive competitive analysis and market opportunity assessment</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Business model evaluation and optimization for sustainable growth</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Strategic roadmapping with actionable implementation timelines</p> </div> <a href="#" class="cta-button">Schedule Consultation <span class="loader"></span> </a> </div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-cogs"></i> </div> <h3 class="service-title">Operational Excellence</h3> <p class="service-brief">Streamline processes, reduce inefficiencies, and build resilient operational frameworks.</p> <div class="service-details"> <h4 class="details-title">Operational Excellence</h4> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Process mapping and optimization to eliminate bottlenecks</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Supply chain resilience assessment and enhancement</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Operational cost reduction and efficiency improvement frameworks</p> </div> <a href="#" class="cta-button">Schedule Consultation <span class="loader"></span> </a> </div> </div> <div class="service-card pulse"> <div class="service-icon"> <i class="fas fa-lightbulb"></i> </div> <h3 class="service-title">Digital Transformation</h3> <p class="service-brief">Navigate the digital landscape with tailored solutions that drive innovation and growth.</p> <div class="service-details"> <h4 class="details-title">Digital Transformation</h4> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Technology stack assessment and modernization planning</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Data-driven decision making frameworks and implementation</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Digital customer experience strategy and execution roadmap</p> </div> <a href="#" class="cta-button">Schedule Consultation <span class="loader"></span> </a> </div> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-users"></i> </div> <h3 class="service-title">Talent Strategy</h3> <p class="service-brief">Build high-performing teams and cultures that drive organizational success.</p> <div class="service-details"> <h4 class="details-title">Talent Strategy</h4> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Organizational structure optimization for agility and innovation</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Leadership development programs and succession planning</p> </div> <div class="detail-item"> <span class="detail-icon">✓</span> <p class="detail-text">Cultural transformation and employee engagement frameworks</p> </div> <a href="#" class="cta-button">Schedule Consultation <span class="loader"></span> </a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Button click effect with loading state const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const buttonText = this.textContent.trim(); const loader = this.querySelector('.loader'); // Change button text and show loader this.textContent = 'Processing '; this.appendChild(loader); loader.style.display = 'inline-block'; // Simulate processing setTimeout(() => { this.textContent = 'Thank You!'; // Reset button after delay setTimeout(() => { this.textContent = buttonText; }, 2000); }, 1500); }); }); // Add smooth entrance animation to cards const serviceCards = document.querySelectorAll('.service-card'); serviceCards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100 * (index + 1)); }); // Add FontAwesome for icons (simulated, would normally be loaded via CDN) if (!document.querySelector('#font-awesome')) { const fontAwesome = document.createElement('link'); fontAwesome.id = 'font-awesome'; fontAwesome.rel = 'stylesheet'; fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'; document.head.appendChild(fontAwesome); } }); </script> </body> </html>
