Link hover effects can significantly enhance the user experience by adding a touch of interactivity and visual appeal to your website. These subtle animations not only make your site more engaging but also provide users with immediate feedback.
In this article, we will explore 10 captivating link hover effect examples that you can easily implement to elevate your web design. From simple underlines to complex animations, these effects will inspire you to create a more dynamic and user-friendly interface.
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
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect link hover effects effortlessly.
Experience the ease of crafting stunning UI with Subframe. Start for free 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 web design game? With Subframe, you can create pixel-perfect UIs, including stunning link hover effects, in no time. Experience the efficiency of our drag-and-drop editor and beautifully crafted components.
Don't wait—start creating immediately. Sign up for free and transform your design process today!
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #f8f9fa; overflow-x: hidden; padding: 20px; } .container { max-width: 700px; width: 100%; padding: 20px; } .header { text-align: center; margin-bottom: 30px; } .header h1 { font-size: 2.2rem; margin-bottom: 10px; color: #2d3436; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; width: 60%; height: 4px; background: linear-gradient(to right, #6c5ce7, #fd79a8); bottom: -8px; left: 20%; border-radius: 2px; } .header p { color: #636e72; line-height: 1.6; max-width: 550px; margin: 0 auto; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 40px; } .product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; cursor: pointer; } .product-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-image { height: 200px; overflow: hidden; position: relative; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .product-card:hover .product-image img { transform: scale(1.08); } .product-tag { position: absolute; top: 15px; right: 15px; background-color: #6c5ce7; color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .product-card:hover .product-tag { opacity: 1; transform: translateX(0); } .product-info { padding: 20px; } .product-title { font-size: 1.2rem; color: #2d3436; margin-bottom: 8px; font-weight: 600; } .product-price { font-size: 1.1rem; font-weight: bold; color: #6c5ce7; margin-bottom: 15px; } .product-description { color: #636e72; font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; } .btn-container { display: flex; justify-content: space-between; align-items: center; } .btn { display: inline-block; padding: 10px 20px; border-radius: 30px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: center; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; border: none; outline: none; } .btn-primary { background-color: #6c5ce7; color: white; flex-grow: 1; margin-right: 10px; } .btn-primary::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: left 0.7s; } .btn-primary:hover { background-color: #5649c0; transform: scale(1.05); box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4); } .btn-primary:hover::before { left: 100%; } .btn-secondary { background-color: transparent; color: #6c5ce7; border: 2px solid #6c5ce7; padding: 8px 12px; } .btn-secondary:hover { background-color: rgba(108, 92, 231, 0.1); transform: scale(1.05); } .wishlist-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #dfe6e9; color: #636e72; transition: all 0.3s ease; background-color: white; cursor: pointer; } .wishlist-icon i { font-size: 1.1rem; transition: transform 0.3s ease, color 0.3s ease; } .wishlist-icon:hover { border-color: #fd79a8; background-color: #fff0f5; } .wishlist-icon:hover i { color: #fd79a8; transform: scale(1.1); } .color-options { display: flex; margin-bottom: 15px; } .color-option { width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; cursor: pointer; position: relative; transition: transform 0.3s ease; } .color-option:hover { transform: scale(1.2); } .color-option.selected::after { content: ''; position: absolute; width: 26px; height: 26px; border: 2px solid #6c5ce7; border-radius: 50%; top: -5px; left: -5px; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } } @media (max-width: 768px) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .header h1 { font-size: 1.8rem; } } @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .product-card { max-width: 100%; } .header h1 { font-size: 1.6rem; } .product-image { height: 180px; } } /* Scroll effect */ .scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); opacity: 0.8; animation: bounce 2s infinite; } .scroll-indicator svg { width: 30px; height: 30px; fill: #6c5ce7; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <div class="header"> <h1>Curated Collections</h1> <p>Explore our premium products with enhanced hover interactions. Easily navigate through our catalog with visual cues designed to improve your shopping experience.</p> </div> <div class="product-grid"> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" alt="Premium Watch"> <div class="product-tag">New Arrival</div> </div> <div class="product-info"> <h3 class="product-title">Chronos Precision Watch</h3> <div class="product-price">$129.99</div> <div class="color-options"> <div class="color-option selected" style="background-color: #2c3e50;"></div> <div class="color-option" style="background-color: #8e44ad;"></div> <div class="color-option" style="background-color: #c0392b;"></div> </div> <p class="product-description">Elegant timepiece with Swiss movement and genuine leather strap. Water-resistant to 50m.</p> <div class="btn-container"> <button class="btn btn-primary">View Details</button> <div class="wishlist-icon"> <i class="far fa-heart"></i> </div> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" alt="Wireless Headphones"> <div class="product-tag">Best Seller</div> </div> <div class="product-info"> <h3 class="product-title">SonicWave Headphones</h3> <div class="product-price">$89.99</div> <div class="color-options"> <div class="color-option selected" style="background-color: #2c3e50;"></div> <div class="color-option" style="background-color: #e74c3c;"></div> <div class="color-option" style="background-color: #3498db;"></div> </div> <p class="product-description">Noise-cancelling wireless headphones with 40 hours of playtime and ultra-comfort ear cushions.</p> <div class="btn-container"> <button class="btn btn-primary">View Details</button> <div class="wishlist-icon"> <i class="far fa-heart"></i> </div> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d" alt="Running Shoes"> <div class="product-tag">Limited Edition</div> </div> <div class="product-info"> <h3 class="product-title">TrailBlaze Running Shoes</h3> <div class="product-price">$119.99</div> <div class="color-options"> <div class="color-option" style="background-color: #e74c3c;"></div> <div class="color-option selected" style="background-color: #2ecc71;"></div> <div class="color-option" style="background-color: #f1c40f;"></div> </div> <p class="product-description">Responsive cushioning with breathable mesh upper. Perfect for city runs and trail adventures.</p> <div class="btn-container"> <button class="btn btn-primary">View Details</button> <div class="wishlist-icon"> <i class="far fa-heart"></i> </div> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff" alt="Sneakers"> <div class="product-tag">Sale -20%</div> </div> <div class="product-info"> <h3 class="product-title">UrbanSprint Sneakers</h3> <div class="product-price">$75.99</div> <div class="color-options"> <div class="color-option" style="background-color: #34495e;"></div> <div class="color-option" style="background-color: #e67e22;"></div> <div class="color-option selected" style="background-color: #1abc9c;"></div> </div> <p class="product-description">Lightweight casual sneakers with memory foam insoles. Versatile design for everyday wear.</p> <div class="btn-container"> <button class="btn btn-primary">View Details</button> <div class="wishlist-icon"> <i class="far fa-heart"></i> </div> </div> </div> </div> </div> <div class="scroll-indicator"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/> </svg> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Wishlist functionality const wishlistIcons = document.querySelectorAll('.wishlist-icon'); wishlistIcons.forEach(icon => { icon.addEventListener('click', function(e) { e.stopPropagation(); const heartIcon = this.querySelector('i'); if (heartIcon.classList.contains('far')) { heartIcon.classList.remove('far'); heartIcon.classList.add('fas'); heartIcon.style.color = '#fd79a8'; // Add a small animation heartIcon.animate([ { transform: 'scale(1)' }, { transform: 'scale(1.3)' }, { transform: 'scale(1)' } ], { duration: 500, easing: 'ease-in-out' }); } else { heartIcon.classList.remove('fas'); heartIcon.classList.add('far'); heartIcon.style.color = ''; } }); }); // Color selection functionality const colorOptions = document.querySelectorAll('.color-option'); colorOptions.forEach(option => { option.addEventListener('click', function(e) { e.stopPropagation(); // Remove selected class from all siblings const siblings = Array.from(this.parentNode.children); siblings.forEach(sibling => { sibling.classList.remove('selected'); }); // Add selected class to clicked option this.classList.add('selected'); }); }); // Add click event to product cards const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.addEventListener('click', function() { // Add a subtle ripple effect on click const ripple = document.createElement('div'); ripple.classList.add('ripple'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; ripple.style.pointerEvents = 'none'; this.appendChild(ripple); // Get and set coordinates const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${event.clientX - rect.left - size/2}px`; ripple.style.top = `${event.clientY - rect.top - size/2}px`; // Animate ripple.animate([ { transform: 'scale(0)', opacity: 1 }, { transform: 'scale(4)', opacity: 0 } ], { duration: 800, easing: 'ease-out' }).onfinish = () => ripple.remove(); }); }); // Button click handlers const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.stopPropagation(); // Simple feedback animation this.animate([ { transform: 'scale(0.95)' }, { transform: 'scale(1)' } ], { duration: 200, easing: 'ease-out' }); }); }); // Hide scroll indicator when scrolled window.addEventListener('scroll', function() { const scrollIndicator = document.querySelector('.scroll-indicator'); if (window.scrollY > 50) { scrollIndicator.style.opacity = '0'; scrollIndicator.style.transition = 'opacity 0.3s ease'; } else { scrollIndicator.style.opacity = '0.8'; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Daily Chronicle</title> <style> :root { --primary-color: #1a1a1a; --secondary-color: #4a4a4a; --accent-color: #c0392b; --background-color: #f9f7f1; --light-accent: #f0e7d8; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Georgia', serif; } body { background-color: var(--background-color); color: var(--primary-color); line-height: 1.6; max-width: 700px; margin: 0 auto; padding: 20px; overflow-x: hidden; } header { border-bottom: 2px solid var(--primary-color); margin-bottom: 20px; position: relative; } .header-title { font-size: 40px; font-weight: 900; text-align: center; letter-spacing: -1px; padding: 15px 0; } .header-date { font-style: italic; text-align: center; font-size: 14px; margin-bottom: 15px; color: var(--secondary-color); } nav { display: flex; justify-content: space-between; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 0; margin-bottom: 25px; } nav a { color: var(--secondary-color); text-decoration: none; font-size: 16px; font-weight: 600; padding: 5px 10px; position: relative; transition: color var(--transition-speed) ease; } nav a:hover { color: var(--primary-color); } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--accent-color); transition: all var(--transition-speed) ease; transform: translateX(-50%); } nav a:hover::after { width: 80%; } main { display: grid; grid-template-columns: 3fr 1fr; gap: 30px; } .news-section { display: flex; flex-direction: column; gap: 25px; } .featured-article { position: relative; border-bottom: 1px solid #ddd; padding-bottom: 20px; } .featured-article h2 { font-size: 28px; margin-bottom: 15px; } .featured-image { width: 100%; max-height: 250px; object-fit: cover; margin-bottom: 15px; filter: grayscale(20%); transition: filter var(--transition-speed) ease; } .featured-image:hover { filter: grayscale(0%); } .article-meta { display: flex; justify-content: space-between; color: var(--secondary-color); font-size: 14px; margin-bottom: 10px; } .article-excerpt { margin-bottom: 15px; font-size: 16px; } .news-item { border-bottom: 1px solid #ddd; padding-bottom: 15px; } .news-item h3 { font-size: 20px; margin-bottom: 10px; } .sidebar { background-color: var(--light-accent); padding: 20px; border-radius: 5px; } .sidebar h3 { border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; margin-bottom: 15px; } .trending-list { list-style-type: none; } .trending-list li { margin-bottom: 15px; position: relative; padding-left: 20px; } .trending-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent-color); transition: transform var(--transition-speed) ease; } .trending-list li:hover::before { transform: translateX(5px); } /* Link hover effects */ .article-link { text-decoration: none; color: var(--primary-color); position: relative; display: inline-block; transition: color var(--transition-speed) ease; cursor: pointer; } .article-link:hover { color: var(--accent-color); font-weight: 700; } .article-link::before { content: ''; position: absolute; width: 100%; height: 2px; bottom: -2px; left: 0; background-color: var(--accent-color); visibility: hidden; transform: scaleX(0); transition: all var(--transition-speed) ease; } .article-link:hover::before { visibility: visible; transform: scaleX(1); } .read-more { display: inline-block; color: var(--accent-color); text-decoration: none; font-weight: 600; font-size: 14px; margin-top: 5px; transition: all var(--transition-speed) ease; position: relative; } .read-more::after { content: '→'; margin-left: 5px; transition: transform var(--transition-speed) ease; } .read-more:hover { color: var(--primary-color); } .read-more:hover::after { transform: translateX(5px); } .category-tag { display: inline-block; background-color: var(--light-accent); padding: 3px 8px; border-radius: 3px; font-size: 12px; margin-right: 5px; color: var(--secondary-color); transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; } .category-tag:hover { background-color: var(--accent-color); color: white; } .newsletter-form { margin-top: 20px; } .newsletter-form input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 3px; } .newsletter-form button { background-color: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 3px; cursor: pointer; transition: background-color var(--transition-speed) ease; } .newsletter-form button:hover { background-color: var(--accent-color); } footer { margin-top: 40px; text-align: center; color: var(--secondary-color); font-size: 14px; padding-top: 20px; border-top: 1px solid #ddd; } @media (max-width: 700px) { .header-title { font-size: 32px; } nav { flex-wrap: wrap; justify-content: center; gap: 10px; } main { grid-template-columns: 1fr; } .featured-article h2 { font-size: 24px; } .sidebar { margin-top: 20px; } } /* Highlight indicator for current page */ .current-page { color: var(--accent-color) !important; font-weight: 700; } .current-page::after { width: 80%; background-color: var(--accent-color); } /* Scroll indicator */ .scroll-indicator { height: 3px; background-color: var(--accent-color); position: fixed; top: 0; left: 0; z-index: 9999; width: 0%; } </style> </head> <body> <div class="scroll-indicator"></div> <header> <h1 class="header-title">The Daily Chronicle</h1> <p class="header-date">June 7, 2023 — Independent Journalism Since 1887</p> <nav> <a href="#" class="current-page">Home</a> <a href="#">Politics</a> <a href="#">Business</a> <a href="#">Technology</a> <a href="#">Arts</a> <a href="#">Science</a> </nav> </header> <main> <section class="news-section"> <article class="featured-article"> <img src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Journalism image" class="featured-image"> <div class="article-meta"> <span>By Sarah Lawson</span> <span>June 7, 2023</span> </div> <h2><a href="#" class="article-link">Traditional Media Adapts: Local Newspapers Find New Life in Digital Age</a></h2> <p class="article-excerpt">As print circulation declines, community-focused publications are discovering innovative strategies to engage readers online while maintaining journalistic integrity. The transition represents a fundamental shift in how local news operates.</p> <div> <span class="category-tag">Media</span> <span class="category-tag">Digital Transformation</span> </div> <a href="#" class="read-more">Continue reading</a> </article> <article class="news-item"> <div class="article-meta"> <span>By Marcus Chen</span> <span>June 7, 2023</span> </div> <h3><a href="#" class="article-link">Urban Planning Revolution: Cities Redesign for Climate Resilience</a></h3> <p class="article-excerpt">Major metropolitan areas are incorporating green infrastructure and flood mitigation into city planning, responding to increasing severe weather events linked to climate change.</p> <div> <span class="category-tag">Environment</span> <span class="category-tag">Urban Development</span> </div> <a href="#" class="read-more">Continue reading</a> </article> <article class="news-item"> <div class="article-meta"> <span>By Elena Fernandez</span> <span>June 6, 2023</span> </div> <h3><a href="#" class="article-link">Tech Giants Face New Regulatory Framework in European Parliament Vote</a></h3> <p class="article-excerpt">Landmark legislation passed yesterday introduces stringent data protection measures and algorithmic transparency requirements for platforms operating within EU borders.</p> <div> <span class="category-tag">Technology</span> <span class="category-tag">Regulation</span> </div> <a href="#" class="read-more">Continue reading</a> </article> <article class="news-item"> <div class="article-meta"> <span>By James Wilson</span> <span>June 6, 2023</span> </div> <h3><a href="#" class="article-link">Breakthrough in Sustainable Aviation: Hydrogen-Powered Test Flight Succeeds</a></h3> <p class="article-excerpt">Engineers completed a 300-mile journey using experimental hydrogen fuel cells, potentially signaling a path toward reduced carbon emissions in commercial air travel.</p> <div> <span class="category-tag">Science</span> <span class="category-tag">Transportation</span> </div> <a href="#" class="read-more">Continue reading</a> </article> </section> <aside class="sidebar"> <h3>Trending Stories</h3> <ul class="trending-list"> <li><a href="#" class="article-link">Artificial Intelligence: Ethics Panel Proposes Industry Standards</a></li> <li><a href="#" class="article-link">Global Supply Chain Shows Signs of Recovery as Ports Clear Backlogs</a></li> <li><a href="#" class="article-link">Remote Work Reshapes Real Estate Markets in Suburban Communities</a></li> <li><a href="#" class="article-link">Renewable Energy Investment Reaches Historic High in Q2</a></li> <li><a href="#" class="article-link">Healthcare Innovation: Telemedicine Adoption Continues Post-Pandemic</a></li> </ul> <h3>Daily Briefing</h3> <p>Get our top stories delivered to your inbox every morning.</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="button" id="subscribeBtn">Subscribe</button> </form> </aside> </main> <footer> <p>© 2023 The Daily Chronicle. All rights reserved.</p> </footer> <script> // Hover effect for article links const articleLinks = document.querySelectorAll('.article-link'); articleLinks.forEach(link => { link.addEventListener('mouseenter', () => { link.style.transition = 'color 0.3s ease, font-weight 0.3s ease'; }); }); // Scroll indicator window.addEventListener('scroll', () => { const scrollIndicator = document.querySelector('.scroll-indicator'); const totalHeight = document.body.scrollHeight - window.innerHeight; const scrolled = (window.scrollY / totalHeight) * 100; scrollIndicator.style.width = scrolled + '%'; }); // Newsletter subscription button const subscribeBtn = document.getElementById('subscribeBtn'); subscribeBtn.addEventListener('click', (e) => { e.preventDefault(); const emailInput = document.querySelector('.newsletter-form input'); if (emailInput.value) { subscribeBtn.textContent = 'Subscribed!'; subscribeBtn.style.backgroundColor = '#27ae60'; emailInput.value = ''; setTimeout(() => { subscribeBtn.textContent = 'Subscribe'; subscribeBtn.style.backgroundColor = ''; }, 2000); } }); // Add smooth hover transition to category tags const categoryTags = document.querySelectorAll('.category-tag'); categoryTags.forEach(tag => { tag.addEventListener('mouseenter', () => { tag.style.transition = 'background-color 0.3s ease, color 0.3s ease'; }); }); // Enhance link hover effects with subtle movement const readMoreLinks = document.querySelectorAll('.read-more'); readMoreLinks.forEach(link => { link.addEventListener('mouseenter', () => { link.style.paddingLeft = '2px'; }); link.addEventListener('mouseleave', () => { link.style.paddingLeft = '0'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Agency Links</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: #0f0f13; color: #fff; padding: 20px; } .container { max-width: 650px; width: 100%; } header { margin-bottom: 50px; text-align: center; } h1 { font-size: 2.5rem; margin-bottom: 20px; background: linear-gradient(to right, #ff6b6b, #4ecdc4); -webkit-background-clip: text; color: transparent; display: inline-block; } p.tagline { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); max-width: 600px; margin: 0 auto 30px; line-height: 1.6; } .links-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .link-card { position: relative; background: rgba(255, 255, 255, 0.03); border-radius: 12px; padding: 20px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease-out; overflow: hidden; z-index: 1; } .link-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); opacity: 0; transition: opacity 0.5s ease; z-index: -1; border-radius: 12px; } .link-card:hover { transform: rotate(1deg) translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .link-card:hover:before { opacity: 0.07; } .link-card h2 { font-size: 1.5rem; margin-bottom: 10px; transition: color 0.3s ease; } .link-card p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-bottom: 20px; transition: color 0.3s ease; } .link-card .link { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; position: relative; transition: transform 0.3s ease; padding: 5px 0; } .link-card .link:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #ff6b6b, #4ecdc4); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); } .link-card:hover .link { background: linear-gradient(to right, #ff6b6b, #4ecdc4); -webkit-background-clip: text; color: transparent; transform: translateX(5px); } .link-card:hover .link:before { transform: scaleX(1); transform-origin: left; } .link svg { margin-left: 5px; transition: transform 0.3s ease; } .link-card:hover .link svg { transform: translateX(5px) rotate(0deg); stroke: url(#gradient-stroke); } .cursor { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(to right, #ff6b6b, #4ecdc4); position: fixed; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%) scale(0); transition: transform 0.1s ease; z-index: 9999; } @media (max-width: 600px) { h1 { font-size: 2rem; } .links-container { grid-template-columns: 1fr; } .cursor { display: none; } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .link-card:nth-child(1):hover:before { background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); } .link-card:nth-child(2):hover:before { background: linear-gradient(135deg, #4ecdc4 0%, #8a2be2 100%); } .link-card:nth-child(3):hover:before { background: linear-gradient(135deg, #8a2be2 0%, #ff6b6b 100%); } .link-card:nth-child(4):hover:before { background: linear-gradient(135deg, #ffb347 0%, #ffcc33 100%); } /* Custom gradients for each card */ .link-card:nth-child(1):hover .link { background: linear-gradient(to right, #ff6b6b, #4ecdc4); -webkit-background-clip: text; } .link-card:nth-child(2):hover .link { background: linear-gradient(to right, #4ecdc4, #8a2be2); -webkit-background-clip: text; } .link-card:nth-child(3):hover .link { background: linear-gradient(to right, #8a2be2, #ff6b6b); -webkit-background-clip: text; } .link-card:nth-child(4):hover .link { background: linear-gradient(to right, #ffb347, #ffcc33); -webkit-background-clip: text; } </style> </head> <body> <svg width="0" height="0"> <defs> <linearGradient id="gradient-stroke" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="100%" stop-color="#4ecdc4" /> </linearGradient> </defs> </svg> <div class="cursor"></div> <div class="container"> <header> <h1>Artisan Digital Studios</h1> <p class="tagline">Where design transcends the ordinary and every pixel becomes a medium for artistic expression. Explore our creative universe.</p> </header> <div class="links-container"> <div class="link-card"> <h2>Design Portfolio</h2> <p>Immerse yourself in our collection of award-winning visual narratives and brand experiences.</p> <a href="#" class="link"> View Our Canvas <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33334 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33337L12.6667 8.00004L8 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> <div class="link-card"> <h2>Creative Process</h2> <p>Discover our unique methodology that blends intuition with strategic design thinking.</p> <a href="#" class="link"> Peek Behind the Curtain <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33334 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33337L12.6667 8.00004L8 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> <div class="link-card"> <h2>Client Collaborations</h2> <p>See how we've transformed visionary ideas into tangible digital experiences for global brands.</p> <a href="#" class="link"> Explore Partnerships <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33334 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33337L12.6667 8.00004L8 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> <div class="link-card"> <h2>Artistic Approach</h2> <p>Understand the philosophy that drives our pursuit of visual excellence and digital craftsmanship.</p> <a href="#" class="link"> Uncover Our Ethos <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3.33334 8H12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 3.33337L12.6667 8.00004L8 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> </div> </div> <script> // Custom cursor effect const cursor = document.querySelector('.cursor'); const links = document.querySelectorAll('.link'); const cards = document.querySelectorAll('.link-card'); document.addEventListener('mousemove', (e) => { cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(1)`; }); document.addEventListener('mouseout', () => { cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(0)`; }); links.forEach(link => { link.addEventListener('mouseenter', () => { cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(2.5)`; }); link.addEventListener('mouseleave', () => { cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px) scale(1)`; }); }); // Apply unique hover angles for each card cards.forEach((card, index) => { card.addEventListener('mouseenter', () => { const angle = (index % 2 === 0) ? "1deg" : "-1deg"; card.style.transform = `rotate(${angle}) translateY(-5px)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'rotate(0deg) translateY(0)'; }); }); // Prevent default link behavior to avoid page refresh in embed document.querySelectorAll('a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Show an animation instead of navigating link.closest('.link-card').classList.add('clicked'); setTimeout(() => { link.closest('.link-card').classList.remove('clicked'); }, 500); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TechNova Links</title> <style> :root { --primary-color: #00f7ff; --secondary-color: #ff00e5; --dark-bg: #0a0a14; --light-text: #e6e6e6; --transition-speed: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: var(--dark-bg); color: var(--light-text); height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; padding: 20px; } .container { max-width: 650px; width: 100%; text-align: center; } header { margin-bottom: 40px; position: relative; } h1 { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 10px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(0, 247, 255, 0.2); } h1 span { display: block; font-size: 1.3rem; font-weight: 400; margin-top: 8px; opacity: 0.8; } .description { font-size: 1rem; line-height: 1.6; opacity: 0.8; max-width: 600px; margin: 0 auto 50px; } .nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; padding: 10px; position: relative; } .nav-link { position: relative; padding: 24px 15px; text-decoration: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; transition: all var(--transition-speed) ease; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; z-index: 1; } .nav-link::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); opacity: 0; transition: opacity var(--transition-speed) ease; z-index: -1; border-radius: 7px; filter: blur(20px); } .nav-link:hover { transform: translateY(-6px); box-shadow: 0 0 20px rgba(0, 247, 255, 0.3), 0 0 30px rgba(255, 0, 229, 0.1); border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); } .nav-link:hover::before { opacity: 0.6; } .nav-link:hover .icon { transform: translateY(-10px) scale(1.1); filter: drop-shadow(0 0 8px var(--primary-color)); } .nav-link:hover .link-title { transform: translateY(5px); letter-spacing: 0.5px; color: white; } .nav-link:hover .link-description { opacity: 1; max-height: 80px; transform: translateY(0); } .icon { font-size: 2.2rem; margin-bottom: 15px; transition: all var(--transition-speed) ease; color: var(--primary-color); } .link-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; color: var(--light-text); transition: all var(--transition-speed) ease; } .link-description { font-size: 0.9rem; opacity: 0.6; transition: all var(--transition-speed) ease; max-height: 0; overflow: hidden; transform: translateY(10px); opacity: 0; } .cursor-glow { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 247, 255, 0.4) 0%, rgba(255, 0, 229, 0.2) 50%, rgba(0, 0, 0, 0) 70%); position: fixed; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: screen; filter: blur(20px); } @media (max-width: 600px) { h1 { font-size: 2rem; } h1 span { font-size: 1rem; } .description { font-size: 0.9rem; margin-bottom: 30px; } .nav-grid { gap: 15px; } .nav-link { padding: 20px 12px; min-height: 150px; } .link-title { font-size: 1.1rem; } } .background-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; z-index: -2; } .animated-circle { position: absolute; background: radial-gradient(circle, rgba(0, 247, 255, 0.15) 0%, rgba(255, 0, 229, 0.1) 50%, transparent 70%); border-radius: 50%; filter: blur(50px); z-index: -1; animation: float 15s infinite ease-in-out; } .circle-1 { width: 300px; height: 300px; top: -100px; left: -100px; animation-delay: 0s; } .circle-2 { width: 400px; height: 400px; bottom: -150px; right: -100px; animation-delay: -5s; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(50px, -30px); } 50% { transform: translate(20px, 50px); } 75% { transform: translate(-30px, 30px); } } </style> </head> <body> <div class="background-grid"></div> <div class="animated-circle circle-1"></div> <div class="animated-circle circle-2"></div> <div class="cursor-glow" id="cursorGlow"></div> <div class="container"> <header> <h1>TechNova Navigation<span>Interactive Solutions</span></h1> <p class="description">Experience our cutting-edge navigation system with reactive hover effects. Each link features dynamic neon interaction that responds to your movements—just like our adaptive technology solutions.</p> </header> <div class="nav-grid"> <a href="#" class="nav-link" data-color="#00f7ff"> <div class="icon">⚡</div> <div class="link-title">Quantum AI</div> <div class="link-description">Our neural network solutions with adaptive learning algorithms and real-time processing</div> </a> <a href="#" class="nav-link" data-color="#ff00e5"> <div class="icon">🔮</div> <div class="link-title">Spatial Computing</div> <div class="link-description">Bridge physical and digital worlds with our immersive spatial interfaces</div> </a> <a href="#" class="nav-link" data-color="#4dff00"> <div class="icon">🧬</div> <div class="link-title">Edge Processing</div> <div class="link-description">Deploy intelligent systems at the network edge for ultra-low latency operations</div> </a> <a href="#" class="nav-link" data-color="#ff6b00"> <div class="icon">🔐</div> <div class="link-title">Quantum Security</div> <div class="link-description">Post-quantum cryptography and blockchain-based authentication systems</div> </a> <a href="#" class="nav-link" data-color="#f700ff"> <div class="icon">🌐</div> <div class="link-title">Neural Interfaces</div> <div class="link-description">Seamless human-machine collaboration through intuitive thought interfaces</div> </a> <a href="#" class="nav-link" data-color="#0066ff"> <div class="icon">🚀</div> <div class="link-title">TechStack 2.0</div> <div class="link-description">Our proprietary technology ecosystem built for tomorrow's challenges</div> </a> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const cursorGlow = document.getElementById('cursorGlow'); const navLinks = document.querySelectorAll('.nav-link'); let isOverLink = false; let activeLink = null; // Mouse move glow effect document.addEventListener('mousemove', (e) => { const x = e.clientX; const y = e.clientY; cursorGlow.style.left = `${x - 75}px`; cursorGlow.style.top = `${y - 75}px`; if (isOverLink) { cursorGlow.style.opacity = '1'; // Set the color based on the active link if (activeLink) { const color = activeLink.getAttribute('data-color'); cursorGlow.style.background = `radial-gradient(circle, ${color}80 0%, ${color}40 50%, rgba(0, 0, 0, 0) 70%)`; } } else { cursorGlow.style.opacity = '0.2'; cursorGlow.style.background = 'radial-gradient(circle, rgba(0, 247, 255, 0.3) 0%, rgba(255, 0, 229, 0.15) 50%, rgba(0, 0, 0, 0) 70%)'; } }); // Handle link hover effects navLinks.forEach(link => { link.addEventListener('mouseenter', () => { isOverLink = true; activeLink = link; // Create ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.top = '0'; ripple.style.left = '0'; ripple.style.background = `radial-gradient(circle, ${link.getAttribute('data-color')}20 0%, transparent 70%)`; ripple.style.borderRadius = '8px'; ripple.style.opacity = '0'; ripple.style.transform = 'scale(0.5)'; ripple.style.transition = 'all 0.6s ease-out'; ripple.style.zIndex = '-1'; link.appendChild(ripple); // Trigger animation setTimeout(() => { ripple.style.opacity = '1'; ripple.style.transform = 'scale(1.2)'; }, 10); // Clean up setTimeout(() => { ripple.remove(); }, 600); }); link.addEventListener('mouseleave', () => { isOverLink = false; activeLink = null; }); // Prevent actual navigation link.addEventListener('click', (e) => { e.preventDefault(); // Pulse effect on click link.style.transform = 'scale(0.95)'; setTimeout(() => { link.style.transform = ''; }, 150); }); }); // Add random floating particles const container = document.querySelector('.container'); for (let i = 0; i < 10; i++) { const particle = document.createElement('div'); particle.style.position = 'absolute'; particle.style.width = `${Math.random() * 4 + 1}px`; particle.style.height = particle.style.width; particle.style.backgroundColor = `rgba(${Math.round(Math.random() * 100 + 155)}, ${Math.round(Math.random() * 100 + 155)}, ${Math.round(Math.random() * 100 + 155)}, 0.7)`; particle.style.borderRadius = '50%'; particle.style.top = `${Math.random() * 100}%`; particle.style.left = `${Math.random() * 100}%`; particle.style.animation = `float ${Math.random() * 15 + 10}s infinite ease-in-out`; particle.style.animationDelay = `-${Math.random() * 10}s`; particle.style.opacity = '0.4'; particle.style.zIndex = '-1'; container.appendChild(particle); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serenity Health & Wellness</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:wght@400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #66b2b2; --primary-light: #8ecaca; --secondary: #f9f2e7; --accent: #e6a67a; --text-dark: #2c3e50; --text-light: #506476; --white: #ffffff; --transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); } body { font-family: 'Montserrat', sans-serif; background-color: var(--secondary); color: var(--text-dark); height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; position: relative; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 15% 15%, var(--primary-light) 0%, transparent 20%), radial-gradient(circle at 85% 85%, var(--accent) 0%, transparent 20%); opacity: 0.2; z-index: -1; } .container { max-width: 680px; width: 100%; padding: 2rem; position: relative; } header { text-align: center; margin-bottom: 2.5rem; } h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--accent); border-radius: 3px; } p.subtitle { color: var(--text-light); font-size: 1.1rem; line-height: 1.6; max-width: 600px; margin: 0 auto; } .wellness-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; } .category-link { position: relative; overflow: hidden; border-radius: 10px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background-color: var(--white); color: var(--text-dark); min-height: 180px; transition: var(--transition); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); z-index: 1; } .category-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background-color: var(--primary); transform: translateY(-100%); transition: var(--transition); z-index: -1; } .category-link:hover { color: var(--primary); transform: translateY(-5px); box-shadow: 0 15px 25px rgba(102, 178, 178, 0.15); } .category-link:hover::before { transform: translateY(0); } .icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--primary); transition: var(--transition); } .category-link:hover .icon { transform: scale(1.1); color: var(--accent); } .category-name { font-weight: 500; font-size: 1.2rem; margin-bottom: 0.5rem; transition: var(--transition); } .category-link:hover .category-name { transform: translateY(-3px); } .category-description { font-size: 0.9rem; color: var(--text-light); transition: var(--transition); } .category-link:hover .category-description { color: var(--primary); } .featured-resources { margin-top: 3rem; } h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--text-dark); margin-bottom: 1.5rem; text-align: center; } .resources-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; } .resource-link { display: flex; align-items: center; text-decoration: none; padding: 1rem; background-color: var(--white); border-radius: 8px; color: var(--text-dark); transition: var(--transition); border-left: 4px solid transparent; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); } .resource-link:hover { border-left: 4px solid var(--accent); transform: translateX(5px); box-shadow: 0 10px 20px rgba(230, 166, 122, 0.15); background-color: var(--white); color: var(--primary); } .resource-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--secondary); border-radius: 50%; margin-right: 1rem; color: var(--primary); transition: var(--transition); } .resource-link:hover .resource-icon { background-color: var(--primary); color: var(--white); transform: scale(1.1) rotate(5deg); } .resource-content { flex: 1; } .resource-title { font-weight: 500; margin-bottom: 0.25rem; transition: var(--transition); } .resource-link:hover .resource-title { color: var(--primary); } .resource-info { font-size: 0.85rem; color: var(--text-light); transition: var(--transition); } .resource-link:hover .resource-info { color: var(--accent); } .breathe-button { display: block; width: 100%; margin: 2.5rem auto 0; padding: 1rem; background-color: var(--primary); color: var(--white); border: none; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 500; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; z-index: 1; } .breathe-button::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background-color: var(--accent); transition: var(--transition); transform: translateX(-50%); z-index: -1; } .breathe-button:hover::before { width: 100%; } .breathe-button:hover { color: var(--white); box-shadow: 0 10px 20px rgba(102, 178, 178, 0.2); } .breathing-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; visibility: hidden; opacity: 0; transition: all 0.3s ease; } .breathing-modal.active { visibility: visible; opacity: 1; } .breathing-content { background-color: var(--white); padding: 2rem; border-radius: 10px; width: 90%; max-width: 500px; position: relative; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; } .breathing-modal.active .breathing-content { transform: scale(1); } .breathing-circle { width: 150px; height: 150px; border-radius: 50%; background-color: var(--primary-light); margin: 2rem auto; display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.5s ease-in-out; } .breathing-circle.inhale { transform: scale(1.5); background-color: var(--primary); } .breathing-circle.exhale { transform: scale(1); background-color: var(--primary-light); } .breathing-text { color: var(--white); font-size: 1.2rem; font-weight: 500; } .close-modal { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); transition: var(--transition); } .close-modal:hover { color: var(--accent); transform: rotate(90deg); } @media (max-width: 768px) { .container { padding: 1.5rem; } h1 { font-size: 2rem; } .wellness-categories { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; } .category-link { padding: 1.2rem; min-height: 160px; } .icon { font-size: 2rem; } .category-name { font-size: 1rem; } .breathing-circle { width: 120px; height: 120px; } } @media (max-width: 480px) { h1 { font-size: 1.8rem; } .wellness-categories { grid-template-columns: 1fr 1fr; gap: 1rem; } .category-link { min-height: 140px; } .breathing-circle { width: 100px; height: 100px; } } </style> </head> <body> <div class="container"> <header> <h1>Journey to Wellness</h1> <p class="subtitle">Discover resources to nurture your body, mind, and spirit with our curated wellness pathways.</p> </header> <div class="wellness-categories"> <a href="#" class="category-link"> <div class="icon">🧘</div> <h3 class="category-name">Mindfulness</h3> <p class="category-description">Present-moment awareness practices</p> </a> <a href="#" class="category-link"> <div class="icon">🍎</div> <h3 class="category-name">Nutrition</h3> <p class="category-description">Wholesome eating guides</p> </a> <a href="#" class="category-link"> <div class="icon">💪</div> <h3 class="category-name">Movement</h3> <p class="category-description">Joyful physical activities</p> </a> <a href="#" class="category-link"> <div class="icon">😴</div> <h3 class="category-name">Rest</h3> <p class="category-description">Sleep and recovery tools</p> </a> </div> <div class="featured-resources"> <h2>Nurture Your Wellbeing Today</h2> <ul class="resources-list"> <li> <a href="#" class="resource-link"> <div class="resource-icon">📝</div> <div class="resource-content"> <h4 class="resource-title">The 5-Minute Morning Journal</h4> <p class="resource-info">Start your day with intention and gratitude</p> </div> </a> </li> <li> <a href="#" class="resource-link"> <div class="resource-icon">🌿</div> <div class="resource-content"> <h4 class="resource-title">Seasonal Vegetable Preparation Guide</h4> <p class="resource-info">Simple techniques for nutrient preservation</p> </div> </a> </li> <li> <a href="#" class="resource-link"> <div class="resource-icon">🛌</div> <div class="resource-content"> <h4 class="resource-title">Sleep Sanctuary Checklist</h4> <p class="resource-info">Transform your bedroom for optimal rest</p> </div> </a> </li> </ul> </div> <button class="breathe-button">Take a Breathing Break</button> </div> <div class="breathing-modal"> <div class="breathing-content"> <h2>Mindful Breathing</h2> <p>Take a moment to center yourself with this simple breathing exercise.</p> <div class="breathing-circle"> <span class="breathing-text">Breathe</span> </div> <p id="breathing-instruction">Follow the circle's rhythm. Breathe in as it expands, out as it contracts.</p> <button class="close-modal">×</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const breatheButton = document.querySelector('.breathe-button'); const breathingModal = document.querySelector('.breathing-modal'); const closeModal = document.querySelector('.close-modal'); const breathingCircle = document.querySelector('.breathing-circle'); const breathingText = document.querySelector('.breathing-text'); const breathingInstruction = document.getElementById('breathing-instruction'); let isBreathing = false; let breathingInterval; // Open breathing modal breatheButton.addEventListener('click', () => { breathingModal.classList.add('active'); startBreathing(); }); // Close breathing modal closeModal.addEventListener('click', () => { breathingModal.classList.remove('active'); stopBreathing(); }); // Close modal if clicked outside content breathingModal.addEventListener('click', (e) => { if (e.target === breathingModal) { breathingModal.classList.remove('active'); stopBreathing(); } }); function startBreathing() { if (isBreathing) return; isBreathing = true; let phase = 'inhale'; breathingInstruction.textContent = 'Inhale deeply through your nose...'; breathingText.textContent = 'Inhale'; breathingCircle.classList.add('inhale'); breathingInterval = setInterval(() => { if (phase === 'inhale') { phase = 'exhale'; breathingCircle.classList.remove('inhale'); breathingCircle.classList.add('exhale'); breathingText.textContent = 'Exhale'; breathingInstruction.textContent = 'Exhale slowly through your mouth...'; } else { phase = 'inhale'; breathingCircle.classList.remove('exhale'); breathingCircle.classList.add('inhale'); breathingText.textContent = 'Inhale'; breathingInstruction.textContent = 'Inhale deeply through your nose...'; } }, 4000); // 4 seconds per breathing phase } function stopBreathing() { if (!isBreathing) return; isBreathing = false; clearInterval(breathingInterval); breathingCircle.classList.remove('inhale', 'exhale'); breathingText.textContent = 'Breathe'; } // Add hover effect for category links const categoryLinks = document.querySelectorAll('.category-link'); categoryLinks.forEach(link => { link.addEventListener('mouseenter', () => { // Create a subtle wave effect link.style.transition = 'all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1)'; }); }); // Prevent default behavior for links in this demo document.querySelectorAll('a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Resource Link Hover Effects</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap'); :root { --primary-color: #3b82f6; --secondary-color: #10b981; --tertiary-color: #8b5cf6; --dark-color: #1f2937; --light-color: #f9fafb; --link-trace-color: #2563eb; --link-trace-color-math: #ef4444; --link-trace-color-science: #8b5cf6; --link-trace-color-history: #f59e0b; --link-trace-color-language: #10b981; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: var(--light-color); color: var(--dark-color); display: flex; flex-direction: column; align-items: center; padding: 30px 20px; max-width: 700px; margin: 0 auto; min-height: 700px; line-height: 1.6; } header { text-align: center; margin-bottom: 30px; width: 100%; } h1 { font-family: 'Merriweather', serif; font-weight: 700; font-size: 2rem; margin-bottom: 15px; color: var(--dark-color); position: relative; } h1::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 60px; height: 3px; background-color: var(--primary-color); transform: translateX(-50%); } h2 { font-family: 'Merriweather', serif; font-weight: 600; font-size: 1.4rem; color: var(--dark-color); margin-bottom: 15px; } p { margin-bottom: 15px; color: #4b5563; font-size: 1rem; } .resource-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 30px; width: 100%; } .category { background-color: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); flex: 1 1 calc(50% - 20px); min-width: 250px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .category:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); } .category h3 { font-family: 'Merriweather', serif; margin-bottom: 15px; font-size: 1.2rem; display: flex; align-items: center; } .category-icon { margin-right: 10px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; } .link-container { margin-top: 15px; } .animated-link { position: relative; text-decoration: none; color: var(--dark-color); font-weight: 500; padding: 5px 0; margin: 5px 0; display: inline-block; overflow: hidden; transition: color 0.3s ease; } .animated-link::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 3px; background-color: transparent; transition: all 0.4s cubic-bezier(0.86, 0, 0.07, 1); z-index: -1; } .animated-link-math::before { background-color: var(--link-trace-color-math); } .animated-link-science::before { background-color: var(--link-trace-color-science); } .animated-link-history::before { background-color: var(--link-trace-color-history); } .animated-link-language::before { background-color: var(--link-trace-color-language); } .animated-link::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; background-color: transparent; transition: all 0.3s ease; } .animated-link span { position: relative; z-index: 2; } .featured-resources { margin-top: 40px; width: 100%; } .featured-item { padding: 20px; border-radius: 12px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); margin-bottom: 20px; transition: transform 0.3s ease; } .featured-item:hover { transform: translateY(-3px); } .tag { display: inline-block; padding: 4px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; color: white; } .tag-math { background-color: var(--link-trace-color-math); } .tag-science { background-color: var(--link-trace-color-science); } .tag-history { background-color: var(--link-trace-color-history); } .tag-language { background-color: var(--link-trace-color-language); } .accessibility-toggle { margin-top: 30px; text-align: center; } .switch { position: relative; display: inline-block; width: 60px; height: 30px; margin-left: 10px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(30px); } @media (max-width: 600px) { h1 { font-size: 1.8rem; } .category { flex: 1 1 100%; } } @keyframes drawBorder { 0% { width: 0; height: 0; border-top-color: transparent; border-right-color: transparent; } 25% { width: 100%; height: 0; border-top-color: currentColor; border-right-color: transparent; } 50% { width: 100%; height: 100%; border-top-color: currentColor; border-right-color: currentColor; } 75% { width: 100%; height: 100%; border-top-color: currentColor; border-right-color: currentColor; border-bottom-color: currentColor; border-left-color: transparent; } 100% { width: 100%; height: 100%; border-color: currentColor; } } .category ul { list-style: none; padding: 0; } .category ul li { margin-bottom: 12px; position: relative; } .reduced-motion { --animation-duration: 0.1s; } .reduced-motion .animated-link::before, .reduced-motion .animated-link::after { transition: all 0.1s ease !important; } </style> </head> <body> <header> <h1>Interactive Learning Pathways</h1> <p>Explore our carefully curated educational resources with intuitive navigation designed to enhance your learning experience.</p> </header> <section class="resource-categories"> <div class="category"> <h3><span class="category-icon">📐</span> Mathematics</h3> <p>From algebra fundamentals to advanced calculus, discover resources that make math concepts clear and engaging.</p> <ul class="link-container"> <li> <a href="#" class="animated-link animated-link-math" data-category="math"> <span>Interactive Number Theory</span> </a> </li> <li> <a href="#" class="animated-link animated-link-math" data-category="math"> <span>Visual Geometry Proofs</span> </a> </li> <li> <a href="#" class="animated-link animated-link-math" data-category="math"> <span>Calculus Problem Solver</span> </a> </li> </ul> </div> <div class="category"> <h3><span class="category-icon">🧪</span> Science</h3> <p>Explore the natural world through interactive experiments, models, and comprehensive explanations.</p> <ul class="link-container"> <li> <a href="#" class="animated-link animated-link-science" data-category="science"> <span>Molecular Biology Visualized</span> </a> </li> <li> <a href="#" class="animated-link animated-link-science" data-category="science"> <span>Physics Simulation Lab</span> </a> </li> <li> <a href="#" class="animated-link animated-link-science" data-category="science"> <span>Chemistry Reaction Database</span> </a> </li> </ul> </div> <div class="category"> <h3><span class="category-icon">📜</span> History & Humanities</h3> <p>Travel through time with immersive historical content and cultural insights from across the globe.</p> <ul class="link-container"> <li> <a href="#" class="animated-link animated-link-history" data-category="history"> <span>Ancient Civilizations Timeline</span> </a> </li> <li> <a href="#" class="animated-link animated-link-history" data-category="history"> <span>Interactive Historical Maps</span> </a> </li> <li> <a href="#" class="animated-link animated-link-history" data-category="history"> <span>Art History Visual Gallery</span> </a> </li> </ul> </div> <div class="category"> <h3><span class="category-icon">🔤</span> Language & Literature</h3> <p>Enhance your linguistic skills and literary knowledge through comprehensive guides and creative exercises.</p> <ul class="link-container"> <li> <a href="#" class="animated-link animated-link-language" data-category="language"> <span>Grammar Pattern Recognition</span> </a> </li> <li> <a href="#" class="animated-link animated-link-language" data-category="language"> <span>Literary Analysis Frameworks</span> </a> </li> <li> <a href="#" class="animated-link animated-link-language" data-category="language"> <span>Etymology Interactive Dictionary</span> </a> </li> </ul> </div> </section> <section class="featured-resources"> <h2>Featured Learning Modules</h2> <div class="featured-item"> <span class="tag tag-math">Mathematics</span> <h3>Solving Quadratic Equations: Visual Approach</h3> <p>This interactive module breaks down quadratic equations using visual models, making abstract concepts concrete and memorable.</p> <a href="#" class="animated-link animated-link-math" data-category="math"> <span>Explore this module</span> </a> </div> <div class="featured-item"> <span class="tag tag-science">Science</span> <h3>Climate Science Data Laboratory</h3> <p>Analyze real climate data sets with guided interpretation tools to understand environmental patterns and scientific modeling.</p> <a href="#" class="animated-link animated-link-science" data-category="science"> <span>Start analyzing</span> </a> </div> </section> <div class="accessibility-toggle"> <label for="motion-toggle">Reduced motion</label> <label class="switch"> <input type="checkbox" id="motion-toggle"> <span class="slider"></span> </label> </div> <script> document.addEventListener('DOMContentLoaded', function() { const links = document.querySelectorAll('.animated-link'); const motionToggle = document.getElementById('motion-toggle'); // Apply specific hover effects to each link links.forEach(link => { const category = link.getAttribute('data-category'); let color; switch(category) { case 'math': color = 'var(--link-trace-color-math)'; break; case 'science': color = 'var(--link-trace-color-science)'; break; case 'history': color = 'var(--link-trace-color-history)'; break; case 'language': color = 'var(--link-trace-color-language)'; break; default: color = 'var(--link-trace-color)'; } // Create the border drawing animation link.addEventListener('mouseenter', function() { // Clear any existing styles first this.style.boxShadow = 'none'; // Create SVG elements for the line drawing animation const rect = this.getBoundingClientRect(); const width = rect.width; const height = rect.height; // Create SVG overlay const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('width', width + 'px'); svg.setAttribute('height', height + 'px'); svg.style.position = 'absolute'; svg.style.top = '0'; svg.style.left = '0'; svg.style.pointerEvents = 'none'; svg.style.zIndex = '1'; // Create path for animation const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); const pathD = `M 0,0 L ${width},0 L ${width},${height} L 0,${height} Z`; path.setAttribute('d', pathD); path.setAttribute('fill', 'none'); path.setAttribute('stroke', color); path.setAttribute('stroke-width', '2'); // Animate the stroke const reducedMotion = document.body.classList.contains('reduced-motion'); const duration = reducedMotion ? '0.2s' : '0.8s'; path.style.strokeDasharray = (width * 2 + height * 2) + 'px'; path.style.strokeDashoffset = (width * 2 + height * 2) + 'px'; path.style.transition = `stroke-dashoffset ${duration} cubic-bezier(0.65, 0, 0.35, 1)`; svg.appendChild(path); this.appendChild(svg); // Trigger animation setTimeout(() => { path.style.strokeDashoffset = '0'; }, 10); // Change text color this.style.color = color; }); link.addEventListener('mouseleave', function() { // Remove SVG when mouse leaves const svg = this.querySelector('svg'); if (svg) { // Fade out smoothly svg.style.opacity = '0'; svg.style.transition = 'opacity 0.3s ease'; setTimeout(() => { svg.remove(); }, 300); } // Reset text color this.style.color = 'var(--dark-color)'; }); }); // Accessibility toggle for reduced motion motionToggle.addEventListener('change', function() { if (this.checked) { document.body.classList.add('reduced-motion'); } else { document.body.classList.remove('reduced-motion'); } }); // Check for user's motion preference if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { document.body.classList.add('reduced-motion'); motionToggle.checked = true; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fashion Forward Links</title> <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: #f8f5f2; color: #333; display: flex; justify-content: center; align-items: center; min-height: 700px; padding: 20px; overflow-x: hidden; } .container { max-width: 680px; width: 100%; } .header { text-align: center; margin-bottom: 40px; } h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 15px; color: #222; letter-spacing: -0.5px; } .tagline { font-size: 1rem; color: #666; font-weight: 300; max-width: 80%; margin: 0 auto; } .section-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin: 40px 0 20px; position: relative; display: inline-block; } .section-title::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background-color: #222; } .links-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; margin-top: 30px; } .category-section { margin-bottom: 40px; } .link-card { position: relative; overflow: hidden; border-radius: 8px; height: 180px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .link-card:hover { transform: translateY(-5px); } .link-card a { display: block; height: 100%; width: 100%; text-decoration: none; color: white; overflow: hidden; } .link-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease-out, filter 0.5s ease; z-index: 1; } .link-card:hover .link-bg { transform: scale(1.08); filter: saturate(1.2); } .link-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)); z-index: 2; transition: background 0.3s ease; } .link-card:hover .link-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.85)); } .link-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; z-index: 3; transform: translateY(5px); transition: transform 0.3s ease; } .link-card:hover .link-content { transform: translateY(0); } .link-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; position: relative; display: inline-block; } .link-title::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: #fff; transition: width 0.3s ease; } .link-card:hover .link-title::after { width: 100%; } .link-description { font-size: 0.9rem; opacity: 0.8; max-width: 90%; transform: translateY(10px); opacity: 0; transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s; } .link-card:hover .link-description { transform: translateY(0); opacity: 1; } .featured-row { display: flex; margin-bottom: 30px; gap: 20px; } .featured-link { flex: 1 1 50%; position: relative; overflow: hidden; border-radius: 8px; height: 250px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .featured-link:hover { transform: translateY(-5px); } .featured-link a { display: block; height: 100%; width: 100%; text-decoration: none; color: white; } .featured-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease-out, filter 0.5s ease; z-index: 1; } .featured-link:hover .featured-bg { transform: scale(1.08); filter: saturate(1.2); } .featured-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)); z-index: 2; transition: background 0.3s ease; } .featured-link:hover .featured-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.85)); } .featured-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; z-index: 3; transform: translateY(5px); transition: transform 0.3s ease; } .featured-link:hover .featured-content { transform: translateY(0); } .featured-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; position: relative; display: inline-block; } .featured-title::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: #fff; transition: width 0.3s ease; } .featured-link:hover .featured-title::after { width: 100%; } .featured-description { font-size: 1rem; max-width: 90%; opacity: 0.8; transform: translateY(10px); opacity: 0; transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s; } .featured-link:hover .featured-description { transform: translateY(0); opacity: 1; } .text-links { margin-top: 40px; margin-bottom: 30px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .text-link { position: relative; font-size: 1rem; font-weight: 500; color: #333; text-decoration: none; padding: 5px 0; margin: 0 5px; overflow: hidden; transition: color 0.3s ease; } .text-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #f94c43; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); } .text-link:hover { color: #f94c43; } .text-link:hover::after { transform: scaleX(1); transform-origin: left; } .cursor-dot { width: 8px; height: 8px; background-color: #f94c43; border-radius: 50%; position: fixed; pointer-events: none; z-index: 999; transform: translate(-50%, -50%); transition: transform 0.1s ease; opacity: 0; } .cursor-outline { width: 40px; height: 40px; border: 2px solid rgba(249, 76, 67, 0.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 998; transform: translate(-50%, -50%); transition: transform 0.2s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease; opacity: 0; } @media (max-width: 767px) { .featured-row { flex-direction: column; } .featured-link { height: 200px; } .links-container { grid-template-columns: 1fr; } h1 { font-size: 2rem; } .featured-title { font-size: 1.2rem; } .cursor-dot, .cursor-outline { display: none; } } .quick-shop { position: absolute; top: 20px; right: 20px; background-color: white; color: #333; font-size: 0.8rem; font-weight: 600; padding: 8px 12px; border-radius: 4px; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 4; text-transform: uppercase; letter-spacing: 1px; } .link-card:hover .quick-shop, .featured-link:hover .quick-shop { opacity: 1; transform: translateY(0); } .quick-shop:hover { background-color: #f94c43; color: white; } </style> </head> <body> <div class="cursor-dot" id="cursor-dot"></div> <div class="cursor-outline" id="cursor-outline"></div> <div class="container"> <div class="header"> <h1>Fall/Winter '23 Collection</h1> <p class="tagline">Discover this season's most coveted pieces with our curated selection of statement styles. Browse categories and find your next signature look.</p> </div> <h2 class="section-title">Featured Trends</h2> <div class="featured-row"> <div class="featured-link"> <a href="#"> <div class="featured-bg" style="background-image: url('https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="featured-overlay"></div> <div class="featured-content"> <h3 class="featured-title">Monochrome Statements</h3> <p class="featured-description">Bold silhouettes in crisp black and white for dramatic impact</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> <div class="featured-link"> <a href="#"> <div class="featured-bg" style="background-image: url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=720&q=80');"></div> <div class="featured-overlay"></div> <div class="featured-content"> <h3 class="featured-title">Studio Archive</h3> <p class="featured-description">Revisited classics with a contemporary twist</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> </div> <div class="category-section"> <h2 class="section-title">New Arrivals</h2> <div class="links-container"> <div class="link-card"> <a href="#"> <div class="link-bg" style="background-image: url('https://images.unsplash.com/photo-1548126032-079a0fb0099d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="link-overlay"></div> <div class="link-content"> <h3 class="link-title">Oversized Tailoring</h3> <p class="link-description">Fluid cuts and relaxed proportions</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> <div class="link-card"> <a href="#"> <div class="link-bg" style="background-image: url('https://images.unsplash.com/photo-1566206091558-7f218b696731?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="link-overlay"></div> <div class="link-content"> <h3 class="link-title">Utility Layers</h3> <p class="link-description">Functional pieces with architectural details</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> </div> </div> <div class="category-section"> <h2 class="section-title">Seasonal Edit</h2> <div class="links-container"> <div class="link-card"> <a href="#"> <div class="link-bg" style="background-image: url('https://images.unsplash.com/photo-1550614000-4895a10e1bfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');"></div> <div class="link-overlay"></div> <div class="link-content"> <h3 class="link-title">Winter Textures</h3> <p class="link-description">Rich fabrics that elevate everyday looks</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> <div class="link-card"> <a href="#"> <div class="link-bg" style="background-image: url('https://images.unsplash.com/photo-1509631179647-0177331693ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80');"></div> <div class="link-overlay"></div> <div class="link-content"> <h3 class="link-title">Statement Knits</h3> <p class="link-description">Bold patterns and avant-garde silhouettes</p> </div> <div class="quick-shop">Quick Shop</div> </a> </div> </div> </div> <div class="text-links"> <a href="#" class="text-link">Size Guide</a> <a href="#" class="text-link">Shipping Information</a> <a href="#" class="text-link">Sustainability Commitment</a> <a href="#" class="text-link">Care Instructions</a> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cursorDot = document.getElementById('cursor-dot'); const cursorOutline = document.getElementById('cursor-outline'); // Only enable custom cursor on non-touch devices if (window.matchMedia("(pointer: fine)").matches) { cursorDot.style.opacity = '1'; cursorOutline.style.opacity = '1'; window.addEventListener('mousemove', function(e) { cursorDot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; cursorOutline.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); // Add hover effect to links for cursor const links = document.querySelectorAll('a'); links.forEach(link => { link.addEventListener('mouseenter', function() { cursorDot.style.transform = `translate(${event.clientX}px, ${event.clientY}px) scale(1.5)`; cursorOutline.style.width = '60px'; cursorOutline.style.height = '60px'; cursorOutline.style.borderColor = 'rgba(249, 76, 67, 0.8)'; }); link.addEventListener('mouseleave', function() { cursorDot.style.transform = `translate(${event.clientX}px, ${event.clientY}px) scale(1)`; cursorOutline.style.width = '40px'; cursorOutline.style.height = '40px'; cursorOutline.style.borderColor = 'rgba(249, 76, 67, 0.5)'; }); }); } // Subtle parallax effect on link backgrounds const linkBgs = document.querySelectorAll('.link-bg, .featured-bg'); window.addEventListener('mousemove', function(e) { const moveX = (e.clientX - window.innerWidth / 2) * 0.01; const moveY = (e.clientY - window.innerHeight / 2) * 0.01; linkBgs.forEach(bg => { bg.style.transform = `translate(${moveX}px, ${moveY}px) scale(1.05)`; }); }); // Reset transform on mouse leave document.addEventListener('mouseleave', function() { linkBgs.forEach(bg => { bg.style.transform = 'translate(0, 0) scale(1.05)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusRift Gaming Portal</title> <style> :root { --primary: #ff2d55; --secondary: #00f2ff; --dark: #121212; --light: #f0f0f0; --accent: #7928ca; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', monospace; } body { background-color: var(--dark); color: var(--light); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; overflow-x: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(255, 45, 85, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(0, 242, 255, 0.1) 0%, transparent 20%); } .container { max-width: 650px; width: 100%; padding: 30px; position: relative; } .portal-header { margin-bottom: 30px; position: relative; } .logo { font-size: 2.5rem; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 5px; position: relative; display: inline-block; } .logo::before { content: "NEXUSRIFT"; position: absolute; left: 2px; top: 2px; color: var(--secondary); opacity: 0.8; z-index: -1; } .tagline { font-size: 0.9rem; color: var(--secondary); letter-spacing: 1px; margin-bottom: 20px; } .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-bottom: 40px; } .nav-link { position: relative; color: var(--light); text-decoration: none; font-size: 1.1rem; font-weight: bold; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.3); text-align: center; transition: all 0.3s; overflow: hidden; display: inline-block; text-transform: uppercase; letter-spacing: 1px; } .nav-link::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); transform: translateY(-100%); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 2; } .nav-link:hover::before { transform: translateY(0); } .nav-link:hover { background-color: rgba(0, 0, 0, 0.5); border-color: var(--secondary); box-shadow: 0 0 15px rgba(0, 242, 255, 0.5); transform: scale(1.05); } .featured-section { margin-bottom: 30px; background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); padding: 20px; position: relative; overflow: hidden; } .featured-section::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--secondary), var(--primary)); } .featured-title { font-size: 1.5rem; margin-bottom: 15px; color: var(--secondary); letter-spacing: 1px; position: relative; display: inline-block; } .glitch-link { display: block; color: var(--light); text-decoration: none; font-size: 1.1rem; padding: 12px 15px; margin-bottom: 10px; background-color: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--accent); transition: all 0.3s; position: relative; overflow: hidden; } .glitch-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(121, 40, 202, 0.2); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; z-index: -1; } .glitch-link:hover::before { transform: scaleX(1); transform-origin: left; } .glitch-link span { position: relative; z-index: 1; display: inline-block; } .glitch-link:hover span { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-5px, 5px); color: var(--primary); } 40% { transform: translate(-5px, -5px); color: var(--secondary); } 60% { transform: translate(5px, 5px); color: var(--accent); } 80% { transform: translate(5px, -5px); color: var(--primary); } 100% { transform: translate(0); } } .community-section { margin-top: 30px; } .community-title { font-size: 1.3rem; margin-bottom: 15px; color: var(--primary); letter-spacing: 1px; } .event-link { display: flex; justify-content: space-between; align-items: center; color: var(--light); text-decoration: none; padding: 10px 15px; margin-bottom: 10px; background-color: rgba(0, 0, 0, 0.3); border-left: 3px solid transparent; transition: all 0.3s ease; } .event-link:hover { border-left-color: var(--primary); background-color: rgba(0, 0, 0, 0.5); transform: translateX(5px); } .event-link .event-name { font-weight: bold; } .event-link .event-date { color: var(--secondary); font-size: 0.9rem; } .event-link:hover .event-name { animation: textShadow 0.3s ease-in-out; } @keyframes textShadow { 0% { text-shadow: none; } 20% { text-shadow: 3px 0 0 var(--primary), -3px 0 0 var(--secondary); } 40% { text-shadow: 3px 0 0 var(--secondary), -3px 0 0 var(--primary); } 60% { text-shadow: -3px 0 0 var(--primary), 3px 0 0 var(--secondary); } 80% { text-shadow: -3px 0 0 var(--secondary), 3px 0 0 var(--primary); } 100% { text-shadow: none; } } .glitch-cursor { position: fixed; width: 40px; height: 40px; border: 2px solid var(--secondary); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: all 0.1s ease; z-index: 9999; opacity: 0; mix-blend-mode: difference; } .scanner-line { position: absolute; width: 100%; height: 2px; background-color: var(--secondary); animation: scan 2s infinite linear; } @keyframes scan { 0% { top: 0; } 100% { top: 100%; } } .footer { margin-top: 20px; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); } @media (max-width: 600px) { .container { padding: 20px 15px; } .logo { font-size: 2rem; } .nav-links { grid-template-columns: repeat(2, 1fr); } .featured-title, .community-title { font-size: 1.2rem; } .glitch-link, .event-link { font-size: 1rem; padding: 10px; } } </style> </head> <body> <div class="glitch-cursor"> <div class="scanner-line"></div> </div> <div class="container"> <header class="portal-header"> <h1 class="logo">NEXUSRIFT</h1> <p class="tagline">WHERE GAMERS TRANSCEND REALITY</p> </header> <nav class="nav-links"> <a href="#" class="nav-link" data-text="ARENA">ARENA</a> <a href="#" class="nav-link" data-text="GUILDS">GUILDS</a> <a href="#" class="nav-link" data-text="QUESTS">QUESTS</a> <a href="#" class="nav-link" data-text="FORGE">FORGE</a> </nav> <section class="featured-section"> <h2 class="featured-title">TRENDING BATTLES</h2> <a href="#" class="glitch-link"> <span>Cybergeddon 2077: Neon Wasteland Tournament</span> </a> <a href="#" class="glitch-link"> <span>Riftwalker Championship: 100K Prize Pool</span> </a> <a href="#" class="glitch-link"> <span>Night City Deathmatch: Corpo Wars Edition</span> </a> <a href="#" class="glitch-link"> <span>Abyssal Onslaught: Raid Boss Challenge</span> </a> </section> <section class="community-section"> <h2 class="community-title">UPCOMING EVENTS</h2> <a href="#" class="event-link"> <span class="event-name">Blood Moon Rising: PvP Tournament</span> <span class="event-date">JUNE 15</span> </a> <a href="#" class="event-link"> <span class="event-name">Dev Stream: Combat System 2.0</span> <span class="event-date">JUNE 17</span> </a> <a href="#" class="event-link"> <span class="event-name">Nethervoid Raid: First Access</span> <span class="event-date">JUNE 23</span> </a> </section> <footer class="footer"> <p>© 2023 NEXUSRIFT GAMING COLLECTIVE • ALL RIGHTS RESERVED</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', () => { const glitchLinks = document.querySelectorAll('.glitch-link'); const navLinks = document.querySelectorAll('.nav-link'); const cursor = document.querySelector('.glitch-cursor'); // Custom cursor document.addEventListener('mousemove', (e) => { cursor.style.opacity = '1'; cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mouseout', () => { cursor.style.opacity = '0'; }); // Enhanced hover effects for glitch links glitchLinks.forEach(link => { const text = link.querySelector('span').textContent; const chars = text.split(''); link.addEventListener('mouseenter', () => { cursor.style.borderColor = 'var(--primary)'; cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; setTimeout(() => { link.querySelector('span').innerHTML = chars.map(char => `<span style="display: inline-block; transform: translateY(${Math.random() * 8 - 4}px);">${char}</span>` ).join(''); }, 50); }); link.addEventListener('mouseleave', () => { cursor.style.borderColor = 'var(--secondary)'; cursor.style.transform = 'translate(-50%, -50%) scale(1)'; link.querySelector('span').textContent = text; }); }); // Enhanced hover effects for nav links navLinks.forEach(link => { link.addEventListener('mouseenter', () => { cursor.style.borderColor = 'var(--primary)'; cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; }); link.addEventListener('mouseleave', () => { cursor.style.borderColor = 'var(--secondary)'; cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); }); // Random glitch effect on page load setTimeout(() => { const randomIndex = Math.floor(Math.random() * glitchLinks.length); const randomLink = glitchLinks[randomIndex]; const text = randomLink.querySelector('span').textContent; randomLink.querySelector('span').style.animation = 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'; setTimeout(() => { randomLink.querySelector('span').style.animation = ''; }, 300); }, 2000); // Add click effect that prevents default document.querySelectorAll('a').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Visual feedback for click link.style.transform = 'scale(0.95)'; setTimeout(() => { link.style.transform = ''; }, 150); // Add glitch effect on click if (link.classList.contains('glitch-link')) { const span = link.querySelector('span'); const originalText = span.textContent; // Create glitched version of text const glitchedText = originalText .split('') .map(char => Math.random() > 0.7 ? '/' : char) .join(''); span.textContent = glitchedText; setTimeout(() => { span.textContent = originalText; }, 100); } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wavelength - Music Streaming</title> <style> :root { --primary: #8A2BE2; --secondary: #FF1493; --tertiary: #00BFFF; --dark: #121212; --light: #f8f8f8; --glow-intensity: 0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: var(--dark); color: var(--light); min-height: 700px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-x: hidden; background: linear-gradient(135deg, #121212 0%, #1E1E1E 100%); } .container { width: 100%; max-width: 650px; padding: 20px; position: relative; } .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; } .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 24px; letter-spacing: -0.5px; } .waveform { display: flex; gap: 3px; } .wave { width: 3px; height: 16px; background: var(--primary); border-radius: 3px; animation: wave 1.5s infinite ease-in-out; } .wave:nth-child(2) { animation-delay: 0.2s; background: var(--secondary); } .wave:nth-child(3) { animation-delay: 0.4s; background: var(--tertiary); } .wave:nth-child(4) { animation-delay: 0.6s; background: var(--primary); } @keyframes wave { 0%, 100% { height: 8px; } 50% { height: 16px; } } .nav { display: flex; gap: 16px; } .nav-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(to right, var(--primary), var(--secondary)); transition: width 0.3s ease; } .nav-link:hover { color: var(--light); } .nav-link:hover::after { width: 100%; } .hero { margin-bottom: 40px; text-align: center; } h1 { font-size: 36px; font-weight: 800; margin-bottom: 16px; background: linear-gradient(to right, var(--primary), var(--secondary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -1px; } .subtitle { color: rgba(255, 255, 255, 0.7); font-size: 16px; line-height: 1.5; max-width: 500px; margin: 0 auto; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-bottom: 40px; } .card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(138, 43, 226, var(--glow-intensity)), transparent 150px); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .card:hover::before { opacity: 1; } .card-content { position: relative; z-index: 1; } .card-title { font-weight: 700; font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .card-desc { color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 1.5; } .icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .pulse-icon { position: relative; } .pulse-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: transparent; border: 2px solid var(--primary); opacity: 0; } .card:hover .pulse-circle { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { width: 20px; height: 20px; opacity: 0.7; } 100% { width: 40px; height: 40px; opacity: 0; } } .cta { text-align: center; } .btn { background: linear-gradient(to right, var(--primary), var(--secondary)); color: var(--light); border: none; padding: 12px 24px; border-radius: 30px; font-weight: 600; font-size: 15px; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .btn:hover { transform: scale(1.05); } .btn:hover .equalizer { opacity: 1; } .equalizer { display: flex; gap: 2px; height: 14px; opacity: 0.7; transition: opacity 0.3s ease; } .eq-bar { width: 2px; height: 100%; background: white; border-radius: 2px; animation: eqBar 1s infinite ease-in-out; transform-origin: bottom; } .eq-bar:nth-child(2) { animation-delay: 0.2s; } .eq-bar:nth-child(3) { animation-delay: 0.4s; } @keyframes eqBar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } } .artists { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 40px 0; } .artist { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .artist:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); } .artist img { width: 100%; height: 100%; object-fit: cover; } .artist::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; transition: opacity 0.3s ease; } .artist:hover::after { opacity: 1; animation: rotateAround 2s linear infinite; } @keyframes rotateAround { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .currently-playing { display: flex; align-items: center; gap: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 16px; margin-bottom: 40px; } .album-art { width: 60px; height: 60px; border-radius: 6px; overflow: hidden; } .album-art img { width: 100%; height: 100%; object-fit: cover; } .track-info { flex: 1; } .track-name { font-weight: 600; font-size: 16px; margin-bottom: 4px; } .track-artist { color: rgba(255, 255, 255, 0.7); font-size: 14px; } .controls { display: flex; align-items: center; gap: 16px; } .ctrl-btn { background: none; border: none; color: var(--light); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; } .ctrl-btn:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); } .ctrl-btn.play-pause { background: var(--primary); width: 40px; height: 40px; } .ctrl-btn.play-pause:hover { background: linear-gradient(to right, var(--primary), var(--secondary)); box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); } @media (max-width: 600px) { .header { flex-direction: column; gap: 20px; } h1 { font-size: 28px; } .grid { grid-template-columns: 1fr; } .artists { gap: 10px; } .currently-playing { flex-direction: column; align-items: flex-start; gap: 15px; padding: 15px; } .controls { width: 100%; justify-content: center; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo"> <div class="waveform"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> Wavelength </div> <div class="nav"> <a href="#" class="nav-link">Discover</a> <a href="#" class="nav-link">Library</a> <a href="#" class="nav-link">Radio</a> <a href="#" class="nav-link">For You</a> </div> </div> <div class="hero"> <h1>Feel the rhythm with every click</h1> <p class="subtitle">Experience immersive hover effects that pulse with the beat of your music, creating a synesthetic journey through sound and motion.</p> </div> <div class="currently-playing"> <div class="album-art"> <img src="https://images.unsplash.com/photo-1631886202066-6a7b41405430?w=120&h=120&auto=format&fit=crop&q=90" alt="Album art"> </div> <div class="track-info"> <div class="track-name">Midnight Bloom</div> <div class="track-artist">Luna Waves</div> </div> <div class="controls"> <button class="ctrl-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M19 20L9 12l10-8v16z"></path> <path d="M5 19V5"></path> </svg> </button> <button class="ctrl-btn play-pause"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M10 8l6 4-6 4V8z"></path> </svg> </button> <button class="ctrl-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 4l10 8-10 8V4z"></path> <path d="M19 5v14"></path> </svg> </button> </div> </div> <div class="grid"> <div class="card"> <div class="card-content"> <div class="card-title"> <span class="pulse-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M8 14.5a2.5 2.5 0 0 0 5 0V9"></path> <path d="M15 13a3 3 0 0 0 0-6H8a3 3 0 0 0 0 6h7z"></path> </svg> <div class="pulse-circle"></div> </span> Ambient Focus </div> <p class="card-desc">Curated playlists designed to enhance concentration with gentle atmospheric soundscapes.</p> </div> </div> <div class="card"> <div class="card-content"> <div class="card-title"> <span class="pulse-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16V8"></path> <path d="M8 12h8"></path> </svg> <div class="pulse-circle"></div> </span> Create Playlists </div> <p class="card-desc">Build your perfect soundtrack with smart recommendations based on your unique taste profile.</p> </div> </div> <div class="card"> <div class="card-content"> <div class="card-title"> <span class="pulse-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon> <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path> <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path> </svg> <div class="pulse-circle"></div> </span> Immersive Audio </div> <p class="card-desc">Experience spatial audio that adapts to your environment for a deeply immersive listening experience.</p> </div> </div> <div class="card"> <div class="card-content"> <div class="card-title"> <span class="pulse-icon"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M12 2v8"></path> <path d="M18.3 5.1l-4.6 8"></path> <path d="M5.7 5.1l4.6 8"></path> </svg> <div class="pulse-circle"></div> </span> Live Sessions </div> <p class="card-desc">Exclusive performances from rising artists, streamed in audiophile-quality to your devices.</p> </div> </div> </div> <div class="artists"> <div class="artist"> <img src="https://images.unsplash.com/photo-1581803118522-7b72a50f7e9f?w=80&h=80&auto=format&fit=crop&q=90" alt="Artist"> </div> <div class="artist"> <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=80&h=80&auto=format&fit=crop&q=90" alt="Artist"> </div> <div class="artist"> <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=80&h=80&auto=format&fit=crop&q=90" alt="Artist"> </div> <div class="artist"> <img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?w=80&h=80&auto=format&fit=crop&q=90" alt="Artist"> </div> <div class="artist"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&auto=format&fit=crop&q=90" alt="Artist"> </div> </div> <div class="cta"> <button class="btn"> Start Listening Free <div class="equalizer"> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> </div> </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = card.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width * 100; const y = (e.clientY - rect.top) / rect.height * 100; card.style.setProperty('--mouse-x', x + '%'); card.style.setProperty('--mouse-y', y + '%'); card.style.setProperty('--glow-intensity', '0.2'); }); card.addEventListener('mouseenter', function() { card.style.setProperty('--glow-intensity', '0.2'); }); card.addEventListener('mouseleave', function() { card.style.setProperty('--glow-intensity', '0'); }); }); // For pulse effect on the nav links const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('mouseenter', function() { document.documentElement.style.setProperty('--primary', '#8A2BE2'); document.documentElement.style.setProperty('--secondary', '#FF1493'); // Random color variations for fun const hue = Math.floor(Math.random() * 40) + 270; // Purple-ish range document.documentElement.style.setProperty('--primary', `hsl(${hue}, 70%, 50%)`); }); }); // For the play button interaction const playBtn = document.querySelector('.ctrl-btn.play-pause'); let isPlaying = false; playBtn.addEventListener('click', function() { isPlaying = !isPlaying; if (isPlaying) { playBtn.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <line x1="10" y1="15" x2="10" y2="9"></line> <line x1="14" y1="15" x2="14" y2="9"></line> </svg> `; // Start wave animation for waves document.querySelectorAll('.wave').forEach(wave => { wave.style.animationPlayState = 'running'; }); } else { playBtn.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <path d="M10 8l6 4-6 4V8z"></path> </svg> `; // Pause wave animation document.querySelectorAll('.wave').forEach(wave => { wave.style.animationPlayState = 'paused'; }); } }); // For the artist hover effect const artists = document.querySelectorAll('.artist'); artists.forEach(artist => { artist.addEventListener('mouseenter', function() { // Add a subtle scale to other elements document.querySelectorAll('.pulse-circle').forEach(circle => { circle.style.animation = 'pulse 1.2s infinite'; }); }); artist.addEventListener('mouseleave', function() { // Reset animations document.querySelectorAll('.pulse-circle').forEach(circle => { circle.style.animation = ''; }); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Financial Dashboard Link Hover Effects</title> <style> :root { --primary: #1a2e44; --secondary: #f8f9fa; --accent: #3a7bd5; --accent-light: #5e9cf3; --success: #28a745; --danger: #dc3545; --warning: #ffc107; --text: #333; --text-light: #6c757d; --border: #e0e0e0; --shadow: rgba(0, 0, 0, 0.05); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f5f7fa; color: var(--text); line-height: 1.6; padding: 20px; height: 100vh; display: flex; flex-direction: column; } .dashboard { background-color: white; border-radius: 12px; box-shadow: 0 4px 20px var(--shadow); padding: 25px; max-width: 700px; width: 100%; margin: 0 auto; overflow: hidden; position: relative; display: flex; flex-direction: column; height: 100%; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border); } .dashboard-title { font-size: 1.5rem; color: var(--primary); font-weight: 700; } .dashboard-date { font-size: 0.9rem; color: var(--text-light); } .nav-links { display: flex; gap: 5px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 5px; } .nav-links::-webkit-scrollbar { display: none; } .nav-link { position: relative; text-decoration: none; color: var(--text); padding: 10px 16px; border-radius: 6px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: var(--transition); background-color: var(--secondary); border: 1px solid var(--border); overflow: hidden; } .nav-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); transform: translateY(100%); transition: transform 0.3s ease; z-index: -1; } .nav-link:hover { color: var(--secondary); border-color: var(--primary); } .nav-link:hover::before { transform: translateY(0); } .nav-link.active { background-color: var(--primary); color: white; border-color: var(--primary); } .dashboard-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; } .metric-card { background-color: var(--secondary); border-radius: 8px; padding: 15px; transition: var(--transition); border: 1px solid var(--border); } .metric-title { font-size: 0.85rem; color: var(--text-light); margin-bottom: 10px; } .metric-value { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; color: var(--primary); } .metric-change { display: flex; align-items: center; font-size: 0.8rem; } .positive { color: var(--success); } .negative { color: var(--danger); } .quick-actions { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); } .actions-title { font-size: 0.9rem; color: var(--text); margin-bottom: 15px; font-weight: 600; } .action-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .action-link { position: relative; display: flex; align-items: center; text-decoration: none; color: var(--primary); font-size: 0.85rem; font-weight: 500; padding: 10px 15px; border-radius: 6px; border: 1px solid var(--border); background-color: var(--secondary); overflow: hidden; transition: var(--transition); z-index: 1; } .action-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); transform: translateX(-100%); transition: transform 0.3s ease; z-index: -1; } .action-link:hover { color: white; border-color: var(--primary); } .action-link:hover::before { transform: translateX(0); } .action-link svg { margin-right: 8px; transition: var(--transition); } .action-link:hover svg { color: white; } .activity-feed { margin-top: 20px; } .feed-title { font-size: 0.9rem; color: var(--text); margin-bottom: 10px; font-weight: 600; } .activity-item { display: flex; align-items: flex-start; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .activity-icon { min-width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 14px; color: white; } .activity-details { flex: 1; } .activity-action { font-size: 0.85rem; font-weight: 500; margin-bottom: 2px; } .activity-time { font-size: 0.75rem; color: var(--text-light); } .link-hover-demo { margin-top: 20px; padding: 15px; background-color: var(--primary); border-radius: 8px; color: white; } .demo-title { font-size: 0.9rem; margin-bottom: 15px; font-weight: 600; } .hover-links { display: flex; flex-wrap: wrap; gap: 10px; } .hover-link { position: relative; text-decoration: none; padding: 8px 12px; border-radius: 5px; font-size: 0.85rem; font-weight: 500; background-color: var(--secondary); color: var(--primary); transition: var(--transition); overflow: hidden; z-index: 1; } .hover-link::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; z-index: -1; } .hover-link:hover { color: var(--secondary); } .hover-link:hover::after { transform: scaleX(1); transform-origin: left; } @media (max-width: 600px) { .dashboard { padding: 15px; } .dashboard-content { grid-template-columns: 1fr; } .action-links { grid-template-columns: 1fr 1fr; } } /* Pulse animation for link hover */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 123, 213, 0.4); } 70% { box-shadow: 0 0 0 5px rgba(58, 123, 213, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 123, 213, 0); } } .nav-link:focus { outline: none; animation: pulse 1.5s infinite; } </style> </head> <body> <div class="dashboard"> <div class="dashboard-header"> <h1 class="dashboard-title">CapitalVue</h1> <div class="dashboard-date">September 28, 2023</div> </div> <div class="nav-links"> <a href="#" class="nav-link active">Overview</a> <a href="#" class="nav-link">Investments</a> <a href="#" class="nav-link">Securities</a> <a href="#" class="nav-link">Transactions</a> <a href="#" class="nav-link">Reports</a> <a href="#" class="nav-link">Analytics</a> </div> <div class="dashboard-content"> <div class="metric-card"> <div class="metric-title">Portfolio Value</div> <div class="metric-value">$742,581</div> <div class="metric-change positive">↑ 2.4% today</div> </div> <div class="metric-card"> <div class="metric-title">Open Positions</div> <div class="metric-value">16</div> <div class="metric-change">Total exposure: 68%</div> </div> <div class="metric-card"> <div class="metric-title">YTD Return</div> <div class="metric-value">18.7%</div> <div class="metric-change positive">↑ 6.2% vs S&P 500</div> </div> <div class="metric-card"> <div class="metric-title">Cash Reserve</div> <div class="metric-value">$128,452</div> <div class="metric-change">32% of portfolio</div> </div> </div> <div class="link-hover-demo"> <div class="demo-title">Link Hover Effects</div> <div class="hover-links"> <a href="#" class="hover-link">Market Analysis</a> <a href="#" class="hover-link">Risk Assessment</a> <a href="#" class="hover-link">Allocation Strategy</a> <a href="#" class="hover-link">Tax Efficiency</a> <a href="#" class="hover-link">Dividend Calendar</a> </div> </div> <div class="activity-feed"> <h3 class="feed-title">Recent Activity</h3> <div class="activity-item"> <div class="activity-icon" style="background-color: #28a745;">✓</div> <div class="activity-details"> <div class="activity-action">Purchased 15 shares of MSFT at $328.56</div> <div class="activity-time">Today at 10:24 AM</div> </div> </div> <div class="activity-item"> <div class="activity-icon" style="background-color: #dc3545;">✗</div> <div class="activity-details"> <div class="activity-action">Sold 42 shares of AMZN at $133.27</div> <div class="activity-time">Yesterday at 3:45 PM</div> </div> </div> <div class="activity-item"> <div class="activity-icon" style="background-color: #3a7bd5;">i</div> <div class="activity-details"> <div class="activity-action">AAPL dividend of $0.24/share received</div> <div class="activity-time">September 26, 2023</div> </div> </div> </div> <div class="quick-actions"> <h3 class="actions-title">Quick Actions</h3> <div class="action-links"> <a href="#" class="action-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <line x1="5" y1="12" x2="19" y2="12"></line> </svg> New Trade </a> <a href="#" class="action-link"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline> <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path> </svg> View Orders </a> <a href="#" class="action-link"> <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="1" y="4" width="22" height="16" rx="2" ry="2"></rect> <line x1="1" y1="10" x2="23" y2="10"></line> </svg> Fund Account </a> <a href="#" class="action-link"> <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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1="12" y1="15" x2="12" y2="3"></line> </svg> Export Data </a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Navigation link handler const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Remove active class from all links navLinks.forEach(l => l.classList.remove('active')); // Add active class to clicked link this.classList.add('active'); }); }); // Action links handler const actionLinks = document.querySelectorAll('.action-link'); actionLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Create a subtle feedback effect const originalBackground = this.style.backgroundColor; this.style.backgroundColor = 'rgba(58, 123, 213, 0.1)'; setTimeout(() => { this.style.backgroundColor = originalBackground; }, 300); }); }); // Demo hover links const hoverLinks = document.querySelectorAll('.hover-link'); hoverLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); }); }); }); </script> </body> </html>
