Creating an effective footer is essential for any website, as it serves as a final touchpoint for users. A well-designed footer can enhance user experience and provide crucial information.
In this article, we will explore 10 footer examples that showcase different styles and functionalities. These examples will inspire you to craft a footer that complements your website's overall design.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to create pixel-perfect footers every time. Loved by designers and developers alike, Subframe ensures your UI is both stunning and functional.
Start for free and elevate your design game today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect footers and entire UIs in minutes. Our drag-and-drop editor and beautifully crafted components make the process efficient and enjoyable.
Don't wait—start creating stunning designs immediately. Start for free and see the difference Subframe can make!
<html> <head> <style> /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { width: 100%; height: 100%; background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; padding: 20px; color: #2d3748; } .dashboard-footer { width: 100%; max-width: 700px; background: linear-gradient(to right, #fff, #f8fafc); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding: 32px; position: relative; overflow: hidden; } .footer-pattern { position: absolute; top: 0; right: 0; width: 140px; height: 100%; opacity: 0.05; z-index: 0; background-image: radial-gradient(#3c54b4 2px, transparent 2px); background-size: 18px 18px; } .footer-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 576px) { .footer-content { grid-template-columns: 2fr 1fr; } } .footer-col { display: flex; flex-direction: column; gap: 20px; } .footer-title { font-size: 16px; font-weight: 600; color: #1a365d; margin-bottom: 8px; letter-spacing: -0.2px; } .company-info { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .company-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background-color: #3c54b4; border-radius: 8px; color: white; font-weight: 700; } .company-name { font-size: 18px; font-weight: 700; color: #1a202c; letter-spacing: -0.5px; } .footer-text { font-size: 14px; line-height: 1.5; color: #4a5568; margin-bottom: 12px; } .footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; } .footer-link { font-size: 14px; color: #4a5568; text-decoration: none; transition: all 0.2s ease; position: relative; } .footer-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -2px; left: 0; background-color: #3c54b4; transition: width 0.25s ease-out; } .footer-link:hover { color: #3c54b4; } .footer-link:hover::after { width: 100%; } .newsletter-form { margin-top: 8px; } .input-group { position: relative; margin-bottom: 16px; } .footer-input { width: 100%; padding: 12px 14px; font-size: 14px; color: #2d3748; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; transition: all 0.3s ease; } .footer-input:focus { outline: none; border-color: #3c54b4; box-shadow: 0 0 0 2px rgba(60, 84, 180, 0.1); } .footer-input::placeholder { color: #a0aec0; } .submit-btn { width: 100%; padding: 12px 20px; background-color: #3c54b4; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .submit-btn:hover { background-color: #2a3f8d; } .submit-btn .btn-text { position: relative; z-index: 1; } .submit-btn .btn-animation { position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease; } .submit-btn:hover .btn-animation { transform: translate(-50%, -50%) scale(1); opacity: 1; } .copyright { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #e2e8f0; font-size: 13px; color: #718096; } .social-icons { display: flex; gap: 16px; } .social-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: #f1f5f9; border-radius: 6px; color: #4a5568; transition: all 0.3s ease; } .social-icon:hover { background-color: #3c54b4; color: white; transform: translateY(-3px); } .social-icon i { font-size: 16px; } .success-message { display: none; background-color: #ebf8ff; color: #2c5282; padding: 12px; border-radius: 8px; font-size: 14px; margin-top: 16px; align-items: center; gap: 8px; border-left: 4px solid #3182ce; } .success-message i { color: #3182ce; } .dropdown { position: relative; display: inline-block; } .dropdown-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; } .dropdown-toggle i { font-size: 12px; transition: transform 0.3s ease; } .dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 160px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 10; padding: 8px 0; } .dropdown.active .dropdown-toggle i { transform: rotate(180deg); } .dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: block; padding: 8px 16px; color: #4a5568; font-size: 13px; text-decoration: none; transition: all 0.2s ease; } .dropdown-item:hover { background-color: #f8fafc; color: #3c54b4; } @media (max-width: 575px) { .dashboard-footer { padding: 24px; } .copyright { flex-direction: column; gap: 12px; align-items: flex-start; } .social-icons { margin-top: 8px; } } /* Animation for input focus */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 84, 180, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(60, 84, 180, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 84, 180, 0); } } .footer-input:focus { animation: pulse 1.5s infinite; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> </head> <body> <div class="dashboard-footer"> <div class="footer-pattern"></div> <div class="footer-content"> <div class="footer-col"> <div class="company-info"> <div class="company-logo">AB</div> <div class="company-name">Apex Business</div> </div> <p class="footer-text">Streamlining enterprise operations with our intuitive dashboard solutions since 2009. Trusted by over 12,000 businesses worldwide.</p> <div class="footer-links"> <a href="#" class="footer-link">About Us</a> <a href="#" class="footer-link">Careers</a> <a href="#" class="footer-link">Contact</a> <a href="#" class="footer-link">Blog</a> </div> <div class="footer-links"> <a href="#" class="footer-link">Terms of Service</a> <a href="#" class="footer-link">Privacy Policy</a> <a href="#" class="footer-link">Cookies Settings</a> </div> </div> <div class="footer-col"> <div class="footer-title">Stay Updated</div> <p class="footer-text">Receive monthly insights on enterprise analytics and dashboard optimization.</p> <div class="newsletter-form"> <div class="input-group"> <input type="email" class="footer-input" placeholder="Enter your work email" required> </div> <button type="button" id="subscribe-btn" class="submit-btn"> <span class="btn-text">Subscribe to Updates</span> <span class="btn-animation"></span> </button> </div> <div class="success-message" id="success-message"> <i class="fas fa-check-circle"></i> <span>Successfully subscribed!</span> </div> </div> </div> <div class="copyright"> <div class="copyright-text"> © 2023 Apex Business Solutions. All rights reserved. </div> <div class="dropdown" id="language-dropdown"> <div class="dropdown-toggle"> <span>English (US)</span> <i class="fas fa-chevron-down"></i> </div> <div class="dropdown-menu"> <a href="#" class="dropdown-item">English (US)</a> <a href="#" class="dropdown-item">Français</a> <a href="#" class="dropdown-item">Deutsch</a> <a href="#" class="dropdown-item">Español</a> <a href="#" class="dropdown-item">日本語</a> </div> </div> <div class="social-icons"> <a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a> <a href="#" class="social-icon"> <i class="fab fa-twitter"></i> </a> <a href="#" class="social-icon"> <i class="fab fa-github"></i> </a> </div> </div> </div> <script> // Newsletter subscription document.getElementById('subscribe-btn').addEventListener('click', function() { const input = document.querySelector('.footer-input'); const successMessage = document.getElementById('success-message'); if (input.value.trim() !== '') { // Show success message successMessage.style.display = 'flex'; // Clear input input.value = ''; // Hide message after 3 seconds setTimeout(() => { successMessage.style.display = 'none'; }, 3000); } }); // Language dropdown toggle document.getElementById('language-dropdown').addEventListener('click', function(e) { e.stopPropagation(); this.classList.toggle('active'); }); // Close dropdown when clicking outside document.addEventListener('click', function() { document.getElementById('language-dropdown').classList.remove('active'); }); // Prevent form submission document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Add ripple effect to links document.querySelectorAll('.footer-link').forEach(link => { link.addEventListener('mouseenter', function() { this.style.transition = 'color 0.3s ease'; }); }); // Social icons hover animation document.querySelectorAll('.social-icon').forEach(icon => { icon.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-3px)'; }); icon.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); }); </script> </body> </html>
<html> <head> <style> :root { --primary-color: #0f4c81; --secondary-color: #ff6b6b; --text-color: #333; --light-color: #f9f9f9; --dark-color: #222; --border-color: rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: #f5f5f5; color: var(--text-color); font-size: 16px; line-height: 1.6; overflow-x: hidden; max-width: 700px; margin: 0 auto; } .footer-container { background: linear-gradient(135deg, #fff 0%, #f0f4f8 100%); border-radius: 12px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05); padding: 40px 30px; margin: 20px; position: relative; overflow: hidden; } .footer-container::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(15, 76, 129, 0.05); z-index: 0; } .footer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; position: relative; } .footer-logo { font-weight: 800; font-size: 26px; color: var(--primary-color); position: relative; } .footer-logo span { color: var(--secondary-color); } .footer-logo::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--secondary-color); border-radius: 2px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; position: relative; z-index: 1; } .footer-column { min-width: 0; } .footer-column h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--primary-color); position: relative; cursor: pointer; transition: var(--transition); display: flex; align-items: center; } .footer-column h3::after { content: '+'; margin-left: 5px; font-size: 22px; font-weight: 300; opacity: 0.7; transition: var(--transition); } .footer-column.active h3::after { transform: rotate(45deg); } .column-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .footer-column.active .column-content { max-height: 500px; } .recent-article { margin-bottom: 15px; cursor: pointer; transition: var(--transition); padding: 8px; border-radius: 8px; background: transparent; position: relative; overflow: hidden; } .recent-article:hover { background: rgba(15, 76, 129, 0.05); transform: translateY(-3px); } .article-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--dark-color); } .article-meta { display: flex; align-items: center; font-size: 12px; color: #666; } .article-meta .category { color: var(--secondary-color); font-weight: 600; margin-right: 10px; } .category-list { list-style-type: none; } .category-list li { margin-bottom: 10px; } .category-list a { text-decoration: none; color: var(--text-color); display: flex; align-items: center; transition: var(--transition); position: relative; padding-left: 0; } .category-list a::before { content: ''; width: 0; height: 1px; background: var(--primary-color); position: absolute; bottom: -2px; left: 0; transition: var(--transition); } .category-list a:hover { color: var(--primary-color); padding-left: 5px; } .category-list a:hover::before { width: 100%; } .category-count { background: rgba(15, 76, 129, 0.1); color: var(--primary-color); padding: 2px 8px; border-radius: 12px; font-size: 11px; margin-left: auto; } .subscription-form { position: relative; margin-top: 15px; } .input-group { position: relative; margin-bottom: 15px; } .subscription-input { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; background: #fff; font-size: 14px; transition: var(--transition); } .subscription-input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1); } .subscription-input::placeholder { color: #aaa; } .subscribe-btn { width: 100%; padding: 12px; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .subscribe-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .subscribe-btn:hover::before { left: 100%; } .subscribe-btn:hover { background: #0a3a65; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 76, 129, 0.2); } .subscription-options { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; } .subscription-option { flex: 1; padding: 12px; background: white; border: 1px solid var(--border-color); border-radius: 8px; text-align: center; cursor: pointer; transition: var(--transition); } .subscription-option:hover { border-color: var(--primary-color); background: rgba(15, 76, 129, 0.05); } .subscription-option.active { border-color: var(--primary-color); background: rgba(15, 76, 129, 0.1); } .subscription-option span { font-size: 13px; font-weight: 600; color: var(--primary-color); } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: 14px; color: #666; } .social-links { display: flex; gap: 15px; } .social-link { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%; color: var(--primary-color); border: 1px solid var(--border-color); transition: var(--transition); position: relative; overflow: hidden; } .social-link:hover { background: var(--primary-color); color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(15, 76, 129, 0.15); } .social-link i { font-size: 16px; transition: var(--transition); } .back-to-top { position: absolute; bottom: 30px; right: 30px; width: 40px; height: 40px; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); opacity: 0; transform: translateY(20px); z-index: 10; } .back-to-top.visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--secondary-color); transform: translateY(-5px); } @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; } .footer-column h3 { cursor: pointer; } .footer-column h3::after { display: block; } .column-content { max-height: 0; overflow: hidden; } .footer-column.active .column-content { max-height: 500px; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } .social-links { justify-content: center; margin-top: 15px; } } @media (max-width: 480px) { .footer-container { padding: 30px 20px; } .subscription-options { flex-direction: column; } } /* Animation classes */ .fade-in { animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); } } /* Custom checkmark icon */ .checkmark { width: 16px; height: 16px; position: relative; display: inline-block; margin-right: 8px; } .checkmark:before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: rgba(15, 76, 129, 0.1); border-radius: 50%; transform: translate(-50%, -50%); } .checkmark:after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border-right: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); transform: translate(-50%, -65%) rotate(45deg); } </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="footer-container"> <div class="footer-header"> <div class="footer-logo">Globe<span>Pulse</span></div> </div> <div class="footer-content"> <div class="footer-column active"> <h3>Recent Stories</h3> <div class="column-content"> <div class="recent-article fade-in" style="animation-delay: 0.1s;"> <div class="article-title">EU Unveils Ambitious Climate Policy Framework for 2030</div> <div class="article-meta"> <span class="category">Climate</span> <span>June 12, 2023</span> </div> </div> <div class="recent-article fade-in" style="animation-delay: 0.2s;"> <div class="article-title">Tech Giants Collaborate on AI Safety Standards Amid Regulation Calls</div> <div class="article-meta"> <span class="category">Technology</span> <span>June 10, 2023</span> </div> </div> <div class="recent-article fade-in" style="animation-delay: 0.3s;"> <div class="article-title">Global Economy Shows Signs of Resilience Despite Inflation Concerns</div> <div class="article-meta"> <span class="category">Economy</span> <span>June 8, 2023</span> </div> </div> </div> </div> <div class="footer-column"> <h3>News Categories</h3> <div class="column-content"> <ul class="category-list"> <li class="fade-in" style="animation-delay: 0.1s;"> <a href="#politics"> <span>Politics</span> <span class="category-count">124</span> </a> </li> <li class="fade-in" style="animation-delay: 0.2s;"> <a href="#business"> <span>Business</span> <span class="category-count">98</span> </a> </li> <li class="fade-in" style="animation-delay: 0.3s;"> <a href="#technology"> <span>Technology</span> <span class="category-count">87</span> </a> </li> <li class="fade-in" style="animation-delay: 0.4s;"> <a href="#science"> <span>Science</span> <span class="category-count">64</span> </a> </li> <li class="fade-in" style="animation-delay: 0.5s;"> <a href="#health"> <span>Health</span> <span class="category-count">56</span> </a> </li> </ul> </div> </div> <div class="footer-column"> <h3>Stay Informed</h3> <div class="column-content"> <div class="fade-in" style="animation-delay: 0.1s;"> <p style="margin-bottom: 10px; font-size: 14px;">Get curated news delivered to your inbox. Choose the frequency that works for you.</p> <div class="subscription-form"> <div class="input-group"> <input type="email" class="subscription-input" placeholder="Your email address" required> </div> <div class="subscription-options"> <div class="subscription-option active" data-value="daily"> <span>Daily</span> </div> <div class="subscription-option" data-value="weekly"> <span>Weekly</span> </div> </div> <button class="subscribe-btn pulse">Subscribe Now</button> </div> <p style="margin-top: 10px; font-size: 12px; color: #666;"> <span class="checkmark"></span>Customized to your interests </p> <p style="font-size: 12px; color: #666;"> <span class="checkmark"></span>Unsubscribe anytime </p> </div> </div> </div> </div> <div class="footer-bottom"> <div>© 2023 GlobePulse News Network. All rights reserved.</div> <div class="social-links"> <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="back-to-top"> <i class="fas fa-arrow-up"></i> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Toggle footer columns on mobile const footerColumns = document.querySelectorAll('.footer-column h3'); footerColumns.forEach(column => { column.addEventListener('click', function() { const parentColumn = this.parentElement; // Only apply toggle on smaller screens if (window.innerWidth <= 768) { parentColumn.classList.toggle('active'); } }); }); // Back to top button const backToTopBtn = document.querySelector('.back-to-top'); function updateBackToTopVisibility() { if (window.scrollY > 300) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } } window.addEventListener('scroll', updateBackToTopVisibility); backToTopBtn.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Animate elements on scroll const fadeElements = document.querySelectorAll('.fade-in'); function checkFadeElements() { fadeElements.forEach(element => { const elementTop = element.getBoundingClientRect().top; if (elementTop < window.innerHeight) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } checkFadeElements(); window.addEventListener('scroll', checkFadeElements); // Subscription options toggle const subscriptionOptions = document.querySelectorAll('.subscription-option'); subscriptionOptions.forEach(option => { option.addEventListener('click', function() { subscriptionOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); }); }); // Form submission (prevent default) const subscriptionForm = document.querySelector('.subscription-form'); const subscribeButton = document.querySelector('.subscribe-btn'); subscribeButton.addEventListener('click', function(e) { e.preventDefault(); const emailInput = document.querySelector('.subscription-input'); const activeOption = document.querySelector('.subscription-option.active'); if (emailInput.value && activeOption) { const email = emailInput.value; const frequency = activeOption.getAttribute('data-value'); // Validation check (simple) if (!email.includes('@')) { emailInput.style.borderColor = 'red'; return; } // Success feedback subscribeButton.textContent = 'Subscribed!'; subscribeButton.style.background = '#28a745'; subscribeButton.classList.remove('pulse'); emailInput.value = ''; // Reset after 3 seconds setTimeout(() => { subscribeButton.textContent = 'Subscribe Now'; subscribeButton.style.background = ''; subscribeButton.classList.add('pulse'); }, 3000); } else { if (!emailInput.value) { emailInput.style.borderColor = 'red'; } } }); // Reset input validation styling const emailInput = document.querySelector('.subscription-input'); emailInput.addEventListener('input', function() { this.style.borderColor = ''; }); // Hover effects for articles const articles = document.querySelectorAll('.recent-article'); articles.forEach(article => { article.addEventListener('mouseenter', function() { articles.forEach(a => { if (a !== this) { a.style.opacity = '0.6'; } }); }); article.addEventListener('mouseleave', function() { articles.forEach(a => { a.style.opacity = '1'; }); }); }); // Initialize first column to be open by default const firstColumn = document.querySelector('.footer-column'); firstColumn.classList.add('active'); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9f9f9; color: #333; display: flex; flex-direction: column; height: 100vh; padding: 20px; position: relative; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; } .content h1 { font-size: 28px; margin-bottom: 15px; background: linear-gradient(135deg, #6e48aa, #9e48cd); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .content p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; color: #555; } .content button { background: linear-gradient(135deg, #6e48aa, #9e48cd); color: white; border: none; padding: 12px 24px; border-radius: 50px; font-size: 16px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(110, 72, 170, 0.2); } .content button:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(110, 72, 170, 0.3); } .content button:active { transform: translateY(0); } .mobile-footer { width: 100%; background: white; border-radius: 22px; padding: 24px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05); position: relative; margin-top: 20px; border: 1px solid rgba(0, 0, 0, 0.03); transform-origin: bottom center; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .footer-pull-tab { height: 4px; width: 60px; background: #e0e0e0; border-radius: 4px; margin: 0 auto 20px; cursor: pointer; transition: width 0.3s, background 0.3s; } .footer-pull-tab:hover { width: 80px; background: #d0d0d0; } .collapsed .footer-content { max-height: 0; overflow: hidden; opacity: 0; } .footer-content { max-height: 1000px; opacity: 1; transition: max-height 0.5s, opacity 0.5s; } .footer-section { margin-bottom: 20px; } .footer-section:last-child { margin-bottom: 0; } .footer-section h3 { font-size: 16px; margin-bottom: 14px; color: #444; font-weight: 600; } .contact-info { display: flex; flex-direction: column; gap: 10px; } .contact-item { display: flex; align-items: center; font-size: 14px; color: #666; padding: 10px; border-radius: 12px; transition: background 0.3s; cursor: pointer; } .contact-item:hover { background: rgba(110, 72, 170, 0.05); } .contact-item i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(110, 72, 170, 0.1); border-radius: 50%; margin-right: 12px; color: #6e48aa; transition: transform 0.3s, background 0.3s; } .contact-item:hover i { transform: scale(1.1); background: rgba(110, 72, 170, 0.15); } .quick-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .quick-link { padding: 10px; background: rgba(110, 72, 170, 0.05); border-radius: 12px; text-align: center; color: #6e48aa; font-size: 14px; font-weight: 500; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; } .quick-link::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(110, 72, 170, 0.2); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; border-radius: 12px; z-index: 0; } .quick-link:hover::before { transform: scaleX(1); transform-origin: left; } .quick-link span { position: relative; z-index: 1; } .social-icons { display: flex; justify-content: space-around; margin-top: 10px; } .social-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%; color: #6e48aa; font-size: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s; cursor: pointer; position: relative; } .social-icon::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; top: 0; left: 0; transition: all 0.3s; } .social-icon:hover { transform: translateY(-4px); color: white; background: #6e48aa; } .social-icon:hover::after { transform: scale(1.1); border-color: rgba(110, 72, 170, 0.3); } .footer-bottom { text-align: center; margin-top: 20px; padding-top: 15px; font-size: 12px; color: #999; border-top: 1px solid #f0f0f0; } .pulse { animation: pulse 0.6s ease-out; } @keyframes pulse { 0% { transform: scale(0.95); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .tooltip { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background-color: #6e48aa; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.3s; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #6e48aa transparent transparent transparent; } .footer-collapsed { transform: translateY(85%); } .contact-copied { transform: translateY(-5px); color: #6e48aa !important; } @media (max-width: 480px) { .quick-links { grid-template-columns: 1fr; } } </style> </head> <body> <div class="content"> <h1>Experience a Better Mobile Interaction</h1> <p>Scroll down to explore our specially designed mobile-first footer. It features spacious touch targets, simplified navigation, and intuitive micro-interactions for a smooth experience.</p> <button id="toggleFooter">Toggle Footer</button> </div> <footer class="mobile-footer"> <div class="footer-pull-tab" id="footerTab"></div> <div class="footer-content"> <div class="footer-section"> <h3>Get in Touch</h3> <div class="contact-info"> <div class="contact-item" data-copy="+1 (555) 123-4567"> <i class="fas fa-phone"></i> <span>+1 (555) 123-4567</span> <div class="tooltip">Tap to copy</div> </div> <div class="contact-item" data-copy="[email protected]"> <i class="fas fa-envelope"></i> <span>[email protected]</span> <div class="tooltip">Tap to copy</div> </div> </div> </div> <div class="footer-section"> <h3>Quick Access</h3> <div class="quick-links"> <div class="quick-link"><span>Help Center</span></div> <div class="quick-link"><span>Account Info</span></div> <div class="quick-link"><span>App Settings</span></div> <div class="quick-link"><span>Privacy Policy</span></div> </div> </div> <div class="footer-section"> <h3>Connect With Us</h3> <div class="social-icons"> <div class="social-icon"> <i class="fab fa-instagram"></i> <div class="tooltip">Instagram</div> </div> <div class="social-icon"> <i class="fab fa-twitter"></i> <div class="tooltip">Twitter</div> </div> <div class="social-icon"> <i class="fab fa-facebook-f"></i> <div class="tooltip">Facebook</div> </div> <div class="social-icon"> <i class="fab fa-linkedin-in"></i> <div class="tooltip">LinkedIn</div> </div> </div> </div> <div class="footer-bottom"> <p>© 2023 MobileApp | Optimized for touch experiences</p> </div> </div> </footer> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> // Fallback for Font Awesome if CDN fails window.addEventListener('error', function(e) { if (e.target.tagName === 'SCRIPT' && e.target.src.includes('fontawesome')) { const icons = { 'fa-phone': '📞', 'fa-envelope': '✉️', 'fa-instagram': '📸', 'fa-twitter': '🐦', 'fa-facebook-f': 'ⓕ', 'fa-linkedin-in': 'ⓛ' }; document.querySelectorAll('.fas, .fab').forEach(icon => { for (const [className, symbol] of Object.entries(icons)) { if (icon.classList.contains(className)) { icon.textContent = symbol; icon.style.fontFamily = 'inherit'; break; } } }); } }, true); document.addEventListener('DOMContentLoaded', function() { const footer = document.querySelector('.mobile-footer'); const footerTab = document.getElementById('footerTab'); const toggleButton = document.getElementById('toggleFooter'); const contactItems = document.querySelectorAll('.contact-item'); const socialIcons = document.querySelectorAll('.social-icon'); const quickLinks = document.querySelectorAll('.quick-link'); let isFooterCollapsed = false; function toggleFooter() { isFooterCollapsed = !isFooterCollapsed; if (isFooterCollapsed) { footer.classList.add('footer-collapsed'); } else { footer.classList.remove('footer-collapsed'); } } footerTab.addEventListener('click', toggleFooter); toggleButton.addEventListener('click', toggleFooter); // Contact item copy functionality contactItems.forEach(item => { item.addEventListener('click', function() { const textToCopy = this.getAttribute('data-copy'); navigator.clipboard.writeText(textToCopy).then(() => { // Visual feedback this.classList.add('contact-copied'); this.querySelector('span').textContent = 'Copied!'; setTimeout(() => { this.classList.remove('contact-copied'); this.querySelector('span').textContent = textToCopy; }, 1500); }); }); // Show tooltip on hover/touch item.addEventListener('mouseenter', function() { this.querySelector('.tooltip').style.opacity = '1'; }); item.addEventListener('mouseleave', function() { this.querySelector('.tooltip').style.opacity = '0'; }); }); // Social icon animations socialIcons.forEach(icon => { icon.addEventListener('click', function() { this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); }); // Show tooltip on hover icon.addEventListener('mouseenter', function() { this.querySelector('.tooltip').style.opacity = '1'; }); icon.addEventListener('mouseleave', function() { this.querySelector('.tooltip').style.opacity = '0'; }); }); // Quick link ripple effect quickLinks.forEach(link => { link.addEventListener('click', function(e) { this.classList.add('pulse'); setTimeout(() => { this.classList.remove('pulse'); }, 600); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Designer Portfolio Footer</title> <style> @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Work+Sans:wght@300;400;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #FF3D71; --secondary: #3366FF; --accent: #00D68F; --dark: #151A30; --light: #F7F9FC; } body { font-family: 'Work Sans', sans-serif; background-color: var(--light); color: var(--dark); overflow-x: hidden; display: flex; justify-content: center; align-items: center; min-height: 700px; perspective: 1000px; } .footer-wrapper { width: 100%; max-width: 700px; position: relative; transform-style: preserve-3d; } .portfolio-footer { padding: 3rem 2rem; position: relative; overflow: hidden; border-radius: 1.5rem; background-color: var(--dark); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); z-index: 1; transform-style: preserve-3d; } .abstract-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.7; overflow: hidden; pointer-events: none; } .shape { position: absolute; border-radius: 50%; filter: blur(5px); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .shape-1 { width: 150px; height: 150px; background: var(--primary); top: -30px; left: -30px; animation: float 10s infinite alternate ease-in-out; } .shape-2 { width: 100px; height: 100px; background: var(--secondary); bottom: -20px; right: 20%; animation: float 7s infinite alternate-reverse ease-in-out; } .shape-3 { width: 70px; height: 70px; background: var(--accent); top: 40px; right: -10px; animation: float 8s infinite alternate ease-in-out; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(15px) rotate(10deg); } } .footer-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; position: relative; z-index: 2; } .footer-info h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--light); position: relative; display: inline-block; } .footer-info h2::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 40px; height: 4px; background: var(--accent); transition: width 0.3s ease; } .footer-info h2:hover::after { width: 100%; } .footer-info p { color: var(--light); margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6; opacity: 0.8; max-width: 90%; } .social-links { display: flex; gap: 1rem; margin-top: 1.5rem; } .social-link { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--light); text-decoration: none; font-size: 1.2rem; transition: transform 0.3s ease, background-color 0.3s ease; overflow: hidden; } .social-link:hover { transform: translateY(-5px) scale(1.1); background-color: var(--accent); } .social-link::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .social-link:hover::before { opacity: 1; } .portfolio-links h3 { font-family: 'Caveat', cursive; font-size: 1.8rem; color: var(--light); margin-bottom: 1.5rem; font-weight: 700; } .projects-list { list-style: none; } .project-link { position: relative; margin-bottom: 1rem; overflow: hidden; display: block; padding: 0.5rem 0; transform-style: preserve-3d; } .project-link a { color: var(--light); text-decoration: none; font-size: 1rem; position: relative; display: inline-block; padding: 0.3rem 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: left center; z-index: 1; } .project-link a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .project-link a:hover { transform: translateX(10px); color: var(--accent); } .project-link a:hover::before { transform: scaleX(1); } .project-year { font-family: 'Caveat', cursive; position: absolute; right: 0; color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; transform: translateY(0); transition: transform 0.3s ease, color 0.3s ease; } .project-link:hover .project-year { transform: translateY(-5px); color: var(--primary); } .drawing-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: var(--accent); transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; z-index: 999; opacity: 0; transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease; } .footer-bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; color: var(--light); font-size: 0.9rem; opacity: 0.7; } .handwritten { font-family: 'Caveat', cursive; font-size: 1.2rem; color: var(--accent); } @media (max-width: 640px) { .footer-content { grid-template-columns: 1fr; } .portfolio-footer { padding: 2rem 1.5rem; } .footer-info h2 { font-size: 1.8rem; } .project-year { position: relative; display: block; text-align: left; margin-top: 0.2rem; } } </style> </head> <body> <div class="drawing-cursor"></div> <div class="footer-wrapper"> <footer class="portfolio-footer"> <div class="abstract-shapes"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div> </div> <div class="footer-content"> <div class="footer-info"> <h2>Eliza Chen</h2> <p>I create visual narratives by blending digital techniques with analog sensibilities. Each project represents a unique conversation between concept and execution.</p> <div class="social-links"> <a href="#" class="social-link"> <i>Bē</i> </a> <a href="#" class="social-link"> <i>In</i> </a> <a href="#" class="social-link"> <i>Ig</i> </a> <a href="#" class="social-link"> <i>Dr</i> </a> </div> </div> <div class="portfolio-links"> <h3>Recent Projects</h3> <ul class="projects-list"> <li class="project-link"> <a href="#" class="project-name">Neon Dreams Typography Series</a> <span class="project-year">2023</span> </li> <li class="project-link"> <a href="#" class="project-name">Sustainable Packaging Design</a> <span class="project-year">2023</span> </li> <li class="project-link"> <a href="#" class="project-name">Generative Art Installations</a> <span class="project-year">2022</span> </li> <li class="project-link"> <a href="#" class="project-name">Kinetic Brand Identity</a> <span class="project-year">2022</span> </li> <li class="project-link"> <a href="#" class="project-name">Immersive Web Experiences</a> <span class="project-year">2021</span> </li> </ul> </div> </div> <div class="footer-bottom"> <div>© 2023 All rights reserved</div> <div class="handwritten">let's create something amazing!</div> </div> </footer> </div> <script> // Custom cursor const cursor = document.querySelector('.drawing-cursor'); const links = document.querySelectorAll('a'); const footer = document.querySelector('.portfolio-footer'); const shapes = document.querySelectorAll('.shape'); document.addEventListener('mousemove', (e) => { cursor.style.opacity = '1'; cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; // Move shapes slightly based on mouse position for parallax effect const moveX = e.clientX - window.innerWidth / 2; const moveY = e.clientY - window.innerHeight / 2; shapes.forEach((shape, index) => { const factor = (index + 1) * 0.01; shape.style.transform = `translate(${moveX * factor}px, ${moveY * factor}px) rotate(${moveX * 0.02}deg)`; }); }); document.addEventListener('mouseleave', () => { cursor.style.opacity = '0'; }); links.forEach(link => { link.addEventListener('mouseenter', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.backgroundColor = 'var(--primary)'; }); link.addEventListener('mouseleave', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'var(--accent)'; }); }); // 3D tilt effect on the footer footer.addEventListener('mousemove', (e) => { const footerRect = footer.getBoundingClientRect(); const x = e.clientX - footerRect.left; const y = e.clientY - footerRect.top; const xPercent = x / footerRect.width - 0.5; const yPercent = y / footerRect.height - 0.5; footer.style.transform = `rotateX(${yPercent * -5}deg) rotateY(${xPercent * 5}deg)`; }); footer.addEventListener('mouseleave', () => { footer.style.transform = 'rotateX(0deg) rotateY(0deg)'; }); // Prevent actual navigation links.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Add a little animation feedback on click const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '5px'; ripple.style.height = '5px'; ripple.style.background = 'var(--accent)'; ripple.style.borderRadius = '50%'; ripple.style.pointerEvents = 'none'; ripple.style.left = `${e.clientX}px`; ripple.style.top = `${e.clientY}px`; ripple.style.transform = 'translate(-50%, -50%)'; ripple.style.animation = 'ripple 0.6s linear forwards'; document.body.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Create keyframes for ripple effect const style = document.createElement('style'); style.innerHTML = ` @keyframes ripple { 0% { width: 5px; height: 5px; opacity: 1; } 100% { width: 100px; height: 100px; opacity: 0; } } `; document.head.appendChild(style); // Handle responsive behavior function handleResponsive() { if (window.innerWidth <= 640) { const projectLinks = document.querySelectorAll('.project-link'); projectLinks.forEach(link => { const year = link.querySelector('.project-year'); link.appendChild(year); }); } } window.addEventListener('resize', handleResponsive); handleResponsive(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SaaS Product Footer</title> <style> :root { --primary: #4361ee; --primary-hover: #3a56d4; --secondary: #f72585; --text-dark: #2b2d42; --text-light: #8d99ae; --background: #f8f9fa; --white: #ffffff; --footer-height: 72px; --footer-expanded-height: 320px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #f0f4f8; color: var(--text-dark); line-height: 1.6; height: 100%; position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .content { flex: 1; padding: 20px; max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .content h1 { font-size: 2rem; margin-bottom: 1rem; color: var(--primary); } .content p { margin-bottom: 0.8rem; color: var(--text-dark); } .footer { position: fixed; bottom: 0; width: 100%; background-color: var(--white); box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.05); height: var(--footer-height); transition: height var(--transition-speed) ease; overflow: hidden; z-index: 1000; } .footer.expanded { height: var(--footer-expanded-height); } .footer-toggle { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 15px rgba(67, 97, 238, 0.3); transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease; z-index: 1001; } .footer-toggle:hover { background-color: var(--primary-hover); transform: translateX(-50%) scale(1.05); } .footer-toggle i { transition: transform var(--transition-speed) ease; } .expanded .footer-toggle i { transform: rotate(180deg); } .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .footer-compact { display: flex; align-items: center; justify-content: space-between; height: var(--footer-height); } .logo { font-weight: 700; font-size: 1.2rem; color: var(--primary); display: flex; align-items: center; } .logo span { background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo svg { margin-right: 8px; } .quick-links { display: flex; gap: 20px; } .quick-link { color: var(--text-dark); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color var(--transition-speed) ease; position: relative; } .quick-link:hover { color: var(--primary); } .quick-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--primary); transition: width var(--transition-speed) ease; } .quick-link:hover::after { width: 100%; } .footer-expanded { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 30px; padding: 40px 0; opacity: 0; transform: translateY(20px); transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; } .expanded .footer-expanded { opacity: 1; transform: translateY(0); } .footer-col h4 { font-size: 1rem; margin-bottom: 15px; position: relative; display: inline-block; } .footer-col h4::after { content: ''; position: absolute; width: 30px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); bottom: -5px; left: 0; border-radius: 10px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: var(--text-light); text-decoration: none; font-size: 0.9rem; transition: all var(--transition-speed) ease; display: inline-flex; align-items: center; } .footer-col ul li a:hover { color: var(--primary); transform: translateX(5px); } .footer-col ul li a svg { opacity: 0; margin-right: 5px; transition: opacity var(--transition-speed) ease; } .footer-col ul li a:hover svg { opacity: 1; } .newsletter-form { display: flex; margin-top: 15px; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .newsletter-form input { flex: 1; padding: 12px 15px; border: none; outline: none; font-size: 0.9rem; } .newsletter-form button { background-color: var(--primary); color: var(--white); border: none; padding: 0 15px; cursor: pointer; transition: background-color var(--transition-speed) ease; display: flex; align-items: center; justify-content: center; } .newsletter-form button:hover { background-color: var(--primary-hover); } .social-links { display: flex; gap: 15px; margin-top: 20px; } .social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: #f0f2f5; color: var(--text-dark); transition: all var(--transition-speed) ease; } .social-link:hover { background-color: var(--primary); color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3); } .status-indicator { display: flex; align-items: center; font-size: 0.85rem; color: var(--text-light); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #4ade80; margin-right: 8px; position: relative; } .status-dot::after { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(74, 222, 128, 0.3); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 70% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } .support-chat { position: fixed; bottom: calc(var(--footer-height) + 20px); right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: var(--secondary); box-shadow: 0 5px 20px rgba(247, 37, 133, 0.3); display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; z-index: 999; transition: all var(--transition-speed) ease; } .support-chat:hover { transform: scale(1.1); box-shadow: 0 8px 25px rgba(247, 37, 133, 0.4); } .support-chat svg { width: 24px; height: 24px; } .support-chat-indicator { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #4ade80; border: 2px solid white; } /* Mobile responsiveness */ @media (max-width: 768px) { .quick-links { display: none; } .footer-expanded { grid-template-columns: 1fr; gap: 20px; } .footer.expanded { height: 480px; } .content { padding-bottom: 100px; } } /* Toast notification */ .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--primary); color: white; padding: 12px 25px; border-radius: 50px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); display: flex; align-items: center; z-index: 1000; opacity: 0; transition: all 0.3s ease; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast svg { margin-right: 10px; } </style> </head> <body> <div class="content"> <h1>Streamline Your Workflow</h1> <p>Our SaaS platform helps teams collaborate effectively with integrated tools for project management, communication, and analytics.</p> <p>Explore the footer below for quick access to support resources, documentation, and company information.</p> <p>We've designed this sticky footer to provide essential links while maximizing your screen space. Click the chevron to expand for more options.</p> </div> <div class="support-chat"> <div class="support-chat-indicator"></div> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> </svg> </div> <div class="toast"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> <span class="toast-message">Success! Your action was completed.</span> </div> <footer class="footer"> <div class="footer-toggle"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="18 15 12 9 6 15"></polyline> </svg> </i> </div> <div class="footer-container"> <div class="footer-compact"> <div class="logo"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="9" y1="3" x2="9" y2="21"></line> <line x1="15" y1="3" x2="15" y2="21"></line> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="3" y1="15" x2="21" y2="15"></line> </svg> <span>FlowStack</span> </div> <div class="quick-links"> <a href="#" class="quick-link">Docs</a> <a href="#" class="quick-link">Support</a> <a href="#" class="quick-link">Pricing</a> <a href="#" class="quick-link">Login</a> </div> <div class="status-indicator"> <div class="status-dot"></div> All systems operational </div> </div> <div class="footer-expanded"> <div class="footer-col"> <h4>Product</h4> <ul> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Features </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Integrations </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> API Access </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Changelog </a> </li> </ul> </div> <div class="footer-col"> <h4>Resources</h4> <ul> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Documentation </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Tutorials </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Best Practices </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Community </a> </li> </ul> </div> <div class="footer-col"> <h4>Support</h4> <ul> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Help Center </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Status Page </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> Contact Support </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> SLA Terms </a> </li> </ul> </div> <div class="footer-col"> <h4>Stay Updated</h4> <p style="color: var(--text-light); font-size: 0.9rem; margin-bottom: 10px;">Join 10,000+ developers receiving updates on new features and best practices.</p> <div class="newsletter-form"> <input type="email" placeholder="Enter your email"> <button type="button" id="subscribe-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="22" y1="2" x2="11" y2="13"></line> <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> </svg> </button> </div> <div class="social-links"> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line> </svg> </a> </div> </div> </div> </div> </footer> <script> document.addEventListener('DOMContentLoaded', function() { const footer = document.querySelector('.footer'); const footerToggle = document.querySelector('.footer-toggle'); const supportChat = document.querySelector('.support-chat'); const subscribeBtn = document.getElementById('subscribe-btn'); const toast = document.querySelector('.toast'); const toastMessage = document.querySelector('.toast-message'); // Toggle footer expansion footerToggle.addEventListener('click', function() { footer.classList.toggle('expanded'); }); // Support chat click supportChat.addEventListener('click', function() { showToast('Live support agents are ready to help!'); }); // Newsletter subscription subscribeBtn.addEventListener('click', function() { const input = this.previousElementSibling; if (input.value.trim()) { showToast('Thanks for subscribing to our newsletter!'); input.value = ''; } else { showToast('Please enter a valid email address'); } }); // Quick links animation on hover const quickLinks = document.querySelectorAll('.quick-link'); quickLinks.forEach(link => { link.addEventListener('mouseenter', function() { this.style.transition = 'color 0.3s ease, transform 0.2s ease'; this.style.transform = 'translateY(-2px)'; }); link.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); link.addEventListener('click', function(e) { e.preventDefault(); showToast('Navigating to ' + this.textContent); }); }); // Footer links click events const footerLinks = document.querySelectorAll('.footer-col ul li a'); footerLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); showToast('Navigating to ' + this.textContent.trim()); }); }); // Toast notification function function showToast(message) { toastMessage.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); } // Make social links interactive const socialLinks = document.querySelectorAll('.social-link'); socialLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); this.style.transform = 'scale(0.9) translateY(-3px)'; setTimeout(() => { this.style.transform = 'translateY(-3px)'; }, 100); let platform = ''; if (this.querySelector('svg path').getAttribute('d').startsWith('M23 3')) { platform = 'Twitter'; } else if (this.querySelector('svg path').getAttribute('d').startsWith('M16 8')) { platform = 'LinkedIn'; } else if (this.querySelector('svg path').getAttribute('d').startsWith('M9 19')) { platform = 'GitHub'; } else { platform = 'Instagram'; } showToast(`Following us on ${platform}`); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal Portal Footer</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --light: #ecf0f1; --success: #27ae60; --warning: #f39c12; --alert: #e74c3c; --text: #2c3e50; --text-light: #7f8c8d; --border: rgba(189, 195, 199, 0.5); --shadow: rgba(44, 62, 80, 0.15); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: #f8f9fa; color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 700px; margin: 0; padding: 0; overflow-x: hidden; } .portal-footer { width: 100%; max-width: 700px; background: white; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 20px var(--shadow); overflow: hidden; position: relative; transform: translateY(0); transition: var(--transition); } .footer-toggle { width: 100%; padding: 12px 20px; background: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .toggle-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .toggle-title .icon { font-size: 18px; } .toggle-control { display: flex; align-items: center; gap: 12px; } .toggle-control .status { font-size: 12px; opacity: 0.9; } .toggle-arrow { font-size: 18px; transition: var(--transition); } .toggle-arrow.open { transform: rotate(180deg); } .footer-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .footer-content.expanded { max-height: 500px; transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .footer-sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 24px; } @media (max-width: 700px) { .footer-sections { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .footer-sections { grid-template-columns: 1fr; } } .footer-section { display: flex; flex-direction: column; } .section-title { font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 15px; position: relative; display: flex; align-items: center; gap: 8px; } .section-title::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 30px; height: 2px; background: var(--accent); transition: var(--transition); } .footer-section:hover .section-title::after { width: 100%; } .section-links { display: flex; flex-direction: column; gap: 10px; } .link-item { font-size: 13px; color: var(--text-light); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: var(--transition); position: relative; padding-left: 0; } .link-item:hover { color: var(--accent); transform: translateX(5px); } .link-item .icon { font-size: 14px; opacity: 0.7; } .badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 10px; font-weight: 500; height: 18px; padding: 0 6px; margin-left: 5px; } .badge.new { background-color: var(--success); color: white; } .badge.updated { background-color: var(--warning); color: white; } .footer-bottom { background-color: #f5f7fa; border-top: 1px solid var(--border); padding: 15px 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-light); } .footer-actions { display: flex; align-items: center; gap: 15px; } .action-button { background: none; border: none; color: var(--text-light); cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 12px; transition: var(--transition); } .action-button:hover { color: var(--accent); } .pulse { position: relative; } .pulse::before { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--success); border-radius: 50%; right: -12px; top: 50%; transform: translateY(-50%); } .pulse::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--success); border-radius: 50%; right: -12px; top: 50%; transform: translateY(-50%); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: translateY(-50%) scale(1); opacity: 1; } 100% { transform: translateY(-50%) scale(3); opacity: 0; } } .search-container { width: 100%; padding: 15px 24px; background-color: white; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; transition: var(--transition); } .search-input { flex: 1; background-color: #f5f7fa; border: 1px solid var(--border); border-radius: 6px; padding: 8px 15px; font-size: 13px; color: var(--text); transition: var(--transition); } .search-input:focus { outline: none; border-color: var(--accent); background-color: white; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .search-button { background-color: var(--accent); border: none; border-radius: 6px; color: white; padding: 8px 15px; font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); } .search-button:hover { background-color: #2980b9; } .tooltip { position: absolute; background-color: var(--primary); color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transform: translateY(10px); transition: var(--transition); z-index: 1000; white-space: nowrap; } /* Customized scrollbar */ .footer-content::-webkit-scrollbar { width: 6px; } .footer-content::-webkit-scrollbar-track { background: #f1f1f1; } .footer-content::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .footer-content::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Wave animation for the footer */ .footer-wave { position: absolute; top: -10px; left: 0; width: 100%; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E"); background-size: cover; } /* User-presence indicator */ .user-presence { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 5px 10px; background-color: rgba(52, 152, 219, 0.1); border-radius: 4px; margin-bottom: 10px; } .presence-indicator { width: 8px; height: 8px; border-radius: 50%; background-color: var(--success); } /* Dark mode toggle */ .mode-toggle { background: var(--primary); border: none; border-radius: 20px; width: 40px; height: 20px; position: relative; cursor: pointer; } .mode-toggle::before { content: ''; position: absolute; width: 16px; height: 16px; background-color: white; border-radius: 50%; top: 2px; left: 2px; transition: var(--transition); } .mode-toggle.dark::before { transform: translateX(20px); } /* Dark mode styles */ body.dark-mode { background-color: #1a1a1a; } body.dark-mode .portal-footer { background: #2c2c2c; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); } body.dark-mode .footer-toggle { background: #1a1a1a; } body.dark-mode .section-title { color: white; } body.dark-mode .link-item { color: #abb2bf; } body.dark-mode .link-item:hover { color: var(--accent); } body.dark-mode .footer-bottom { background-color: #1a1a1a; border-top: 1px solid #3a3a3a; color: #abb2bf; } body.dark-mode .search-container { background-color: #2c2c2c; border-bottom: 1px solid #3a3a3a; } body.dark-mode .search-input { background-color: #3a3a3a; border-color: #4a4a4a; color: white; } body.dark-mode .search-input:focus { background-color: #3a3a3a; } body.dark-mode .action-button { color: #abb2bf; } /* Notification animation */ @keyframes notification-pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } } .notification-dot { width: 8px; height: 8px; background-color: var(--alert); border-radius: 50%; display: inline-block; margin-left: 5px; animation: notification-pulse 2s infinite; } </style> </head> <body> <div class="portal-footer"> <div class="footer-wave"></div> <div class="footer-toggle"> <div class="toggle-title"> <span class="icon">🏢</span> <span>ConnectHub Resources</span> </div> <div class="toggle-control"> <button class="mode-toggle" aria-label="Toggle dark mode"></button> <span class="status pulse">3 people online</span> <span class="toggle-arrow">▲</span> </div> </div> <div class="footer-content"> <div class="search-container"> <input type="text" class="search-input" placeholder="Search resources, teams, or announcements..."> <button class="search-button">Find</button> </div> <div class="footer-sections"> <div class="footer-section"> <h3 class="section-title"> <span class="icon">📊</span>Resources </h3> <div class="user-presence"> <span class="presence-indicator"></span> <span>8 team members active</span> </div> <div class="section-links"> <a href="#" class="link-item"> <span class="icon">📝</span> <span>Style Guidelines</span> <span class="badge updated">Updated</span> </a> <a href="#" class="link-item"> <span class="icon">📈</span> <span>Q3 Analytics Dashboard</span> </a> <a href="#" class="link-item"> <span class="icon">📄</span> <span>Project Templates</span> </a> <a href="#" class="link-item"> <span class="icon">🔐</span> <span>Security Protocols</span> <span class="notification-dot"></span> </a> </div> </div> <div class="footer-section"> <h3 class="section-title"> <span class="icon">👥</span>Team Directory </h3> <div class="section-links"> <a href="#" class="link-item"> <span class="icon">👩💻</span> <span>Engineering</span> </a> <a href="#" class="link-item"> <span class="icon">🎨</span> <span>Design</span> </a> <a href="#" class="link-item"> <span class="icon">📢</span> <span>Marketing</span> <span class="badge new">New</span> </a> <a href="#" class="link-item"> <span class="icon">📞</span> <span>Customer Support</span> </a> </div> </div> <div class="footer-section"> <h3 class="section-title"> <span class="icon">📣</span>Announcements </h3> <div class="section-links"> <a href="#" class="link-item"> <span class="icon">🚀</span> <span>Product Launch: v2.4</span> <span class="badge new">New</span> </a> <a href="#" class="link-item"> <span class="icon">🎉</span> <span>Company Offsite: Oct 15</span> </a> <a href="#" class="link-item"> <span class="icon">⚙️</span> <span>System Maintenance</span> </a> <a href="#" class="link-item"> <span class="icon">📆</span> <span>Quarterly All-Hands</span> </a> </div> </div> <div class="footer-section"> <h3 class="section-title"> <span class="icon">🛠️</span>Tools </h3> <div class="section-links"> <a href="#" class="link-item"> <span class="icon">📊</span> <span>Analytics Platform</span> </a> <a href="#" class="link-item"> <span class="icon">🗓️</span> <span>Team Calendar</span> <span class="notification-dot"></span> </a> <a href="#" class="link-item"> <span class="icon">💬</span> <span>Slack Channels</span> </a> <a href="#" class="link-item"> <span class="icon">🔄</span> <span>Workflow Manager</span> <span class="badge updated">Updated</span> </a> </div> </div> </div> <div class="footer-bottom"> <div class="copyright">© 2023 ConnectHub — Internal Portal v3.5.2</div> <div class="footer-actions"> <button class="action-button"> <span class="icon">⚙️</span> <span>Preferences</span> </button> <button class="action-button"> <span class="icon">❓</span> <span>Support</span> </button> <button class="action-button"> <span class="icon">📱</span> <span>Mobile App</span> </button> </div> </div> </div> </div> <div class="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Footer toggle functionality const footerToggle = document.querySelector('.footer-toggle'); const footerContent = document.querySelector('.footer-content'); const toggleArrow = document.querySelector('.toggle-arrow'); // Initialize footer state (expanded) footerContent.classList.add('expanded'); toggleArrow.classList.add('open'); footerToggle.addEventListener('click', function() { footerContent.classList.toggle('expanded'); toggleArrow.classList.toggle('open'); }); // Tooltip functionality const tooltip = document.querySelector('.tooltip'); const linkItems = document.querySelectorAll('.link-item'); linkItems.forEach(link => { link.addEventListener('mouseenter', function(e) { const text = this.querySelector('span:nth-child(2)').textContent; tooltip.textContent = text; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; // Position tooltip near the link const rect = this.getBoundingClientRect(); tooltip.style.left = `${rect.left}px`; tooltip.style.top = `${rect.top - 40}px`; }); link.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; }); }); // Dark mode toggle const modeToggle = document.querySelector('.mode-toggle'); const body = document.body; modeToggle.addEventListener('click', function() { this.classList.toggle('dark'); body.classList.toggle('dark-mode'); }); // Real-time search functionality const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('input', function() { const searchTerm = this.value.toLowerCase(); if (searchTerm === '') { // If search is empty, show all items linkItems.forEach(item => { item.style.display = 'flex'; }); return; } // Filter link items based on search term linkItems.forEach(item => { const text = item.textContent.toLowerCase(); if (text.includes(searchTerm)) { item.style.display = 'flex'; // Highlight matching text const textSpan = item.querySelector('span:nth-child(2)'); const originalText = textSpan.textContent; const startIndex = originalText.toLowerCase().indexOf(searchTerm); if (startIndex !== -1) { const prefix = originalText.substring(0, startIndex); const match = originalText.substring(startIndex, startIndex + searchTerm.length); const suffix = originalText.substring(startIndex + searchTerm.length); textSpan.innerHTML = `${prefix}<strong style="color: var(--accent);">${match}</strong>${suffix}`; } } else { item.style.display = 'none'; } }); }); // Reset highlighting when clearing search searchInput.addEventListener('blur', function() { if (this.value === '') { linkItems.forEach(item => { const textSpan = item.querySelector('span:nth-child(2)'); textSpan.innerHTML = textSpan.textContent; }); } }); // Simulate user presence counter const userPresence = document.querySelector('.status'); function updateUserPresence() { const onlineUsers = Math.floor(Math.random() * 5) + 2; // Random number between 2 and 6 userPresence.textContent = `${onlineUsers} people online`; } // Update presence every 30 seconds setInterval(updateUserPresence, 30000); // Action buttons functionality const actionButtons = document.querySelectorAll('.action-button'); actionButtons.forEach(button => { button.addEventListener('click', function() { // Create a subtle ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '100%'; ripple.style.height = '100%'; ripple.style.backgroundColor = 'rgba(52, 152, 219, 0.1)'; ripple.style.borderRadius = '4px'; ripple.style.left = '0'; ripple.style.top = '0'; ripple.style.opacity = '1'; ripple.style.transform = 'scale(0)'; ripple.style.transition = 'all 0.3s ease-out'; this.style.position = 'relative'; this.style.overflow = 'hidden'; this.appendChild(ripple); setTimeout(() => { ripple.style.transform = 'scale(1)'; ripple.style.opacity = '0'; }, 10); setTimeout(() => { ripple.remove(); }, 300); // Show action feedback in the tooltip const actionText = this.querySelector('span:nth-child(2)').textContent; tooltip.textContent = `${actionText} action triggered`; tooltip.style.backgroundColor = 'var(--success)'; const rect = this.getBoundingClientRect(); tooltip.style.left = `${rect.left}px`; tooltip.style.top = `${rect.top - 40}px`; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; setTimeout(() => { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(10px)'; tooltip.style.backgroundColor = 'var(--primary)'; }, 1500); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap'); :root { --primary-bg: #0c0c14; --secondary-bg: #14141f; --neon-cyan: #00e5ff; --neon-pink: #ff00a0; --neon-purple: #b300ff; --text-primary: #ffffff; --text-secondary: #b3b3cc; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Space Grotesk', sans-serif; background-color: var(--primary-bg); color: var(--text-primary); height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } #tech-footer { width: 100%; max-width: 700px; background-color: var(--secondary-bg); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 20px; position: relative; overflow: hidden; } #tech-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-purple)); z-index: 1; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; position: relative; z-index: 1; } .footer-column { display: flex; flex-direction: column; } .footer-title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; color: var(--text-primary); position: relative; display: inline-block; } .footer-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30px; height: 2px; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; display: inline-block; position: relative; transition: var(--transition); padding: 2px 0; } .footer-links a::before { content: '>'; opacity: 0; margin-right: 0; color: var(--neon-cyan); transform: translateX(-5px); display: inline-block; transition: var(--transition); } .footer-links a:hover { color: var(--text-primary); transform: translateX(5px); } .footer-links a:hover::before { opacity: 1; margin-right: 5px; transform: translateX(0); } .social-icons { display: flex; gap: 15px; margin-top: 15px; } .social-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); } .social-icon svg { width: 20px; height: 20px; fill: var(--text-secondary); transition: var(--transition); position: relative; z-index: 2; } .social-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); transition: var(--transition); } .social-icon:nth-child(1)::before { background-color: #1da1f2; } .social-icon:nth-child(2)::before { background-color: #ea4c89; } .social-icon:nth-child(3)::before { background-color: #ff0000; } .social-icon:nth-child(4)::before { background-color: #0077b5; } .social-icon:hover::before { width: 100%; height: 100%; } .social-icon:hover svg { fill: white; transform: scale(1.2); } .quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .quick-link { background-color: rgba(255, 255, 255, 0.05); padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; transition: var(--transition); position: relative; overflow: hidden; } .quick-link::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(to bottom, var(--neon-cyan), var(--neon-purple)); transition: var(--transition); } .quick-link:hover { color: var(--text-primary); transform: translateX(3px); } .quick-link:hover::before { width: 100%; opacity: 0.2; } .newsletter-form { margin-top: 15px; position: relative; } .newsletter-input { width: 100%; padding: 12px 15px; padding-right: 50px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; color: var(--text-primary); outline: none; transition: var(--transition); } .newsletter-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.3); } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.3); } .newsletter-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 5px; transition: var(--transition); } .newsletter-btn svg { width: 20px; height: 20px; fill: var(--neon-cyan); transition: var(--transition); } .newsletter-btn:hover svg { transform: translateX(3px); } .form-status { margin-top: 8px; font-size: 0.85rem; color: var(--neon-cyan); opacity: 0; transform: translateY(-10px); transition: var(--transition); } .form-status.show { opacity: 1; transform: translateY(0); } .footer-bottom { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; } .footer-logo { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 700; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 1px; } .copyright { font-size: 0.85rem; color: var(--text-secondary); } .tech-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.05); overflow: hidden; } .tech-line::before { content: ''; position: absolute; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent); animation: techLine 3s linear infinite; } @keyframes techLine { 0% { left: -100%; } 100% { left: 100%; } } #circuit-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; z-index: 0; } .particle { position: absolute; width: 3px; height: 3px; background-color: var(--neon-cyan); border-radius: 50%; filter: blur(1px); } .mode-toggle { position: absolute; top: 20px; right: 20px; width: 40px; height: 20px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; cursor: pointer; z-index: 10; } .mode-toggle::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--neon-cyan); transition: var(--transition); } .light-mode { --primary-bg: #f0f2f5; --secondary-bg: #ffffff; --text-primary: #333333; --text-secondary: #666666; } .light-mode .mode-toggle::before { transform: translateX(20px); background-color: var(--neon-pink); } .light-mode #tech-footer { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .light-mode .social-icon { background-color: rgba(0, 0, 0, 0.05); } .light-mode .quick-link { background-color: rgba(0, 0, 0, 0.05); } .light-mode .newsletter-input { background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } .light-mode .footer-bottom { border-top-color: rgba(0, 0, 0, 0.05); } .light-mode .tech-line { background: rgba(0, 0, 0, 0.05); } @media (max-width: 600px) { .footer-container { grid-template-columns: 1fr; gap: 25px; } .footer-bottom { flex-direction: column; align-items: flex-start; } } </style> </head> <body> <div id="tech-footer"> <div class="mode-toggle" id="modeToggle"></div> <div id="circuit-bg"></div> <div class="footer-container"> <div class="footer-column"> <h3 class="footer-title">NexTech Byte</h3> <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 15px;"> Exploring the bleeding edge of technology since 2018. Your source for insightful tech analysis and forward-thinking perspectives. </p> <div class="social-icons"> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path> </svg> </div> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.326 14.801c-.802.202-1.402.348-2.047.348-1.242 0-2.112-.667-2.112-1.885 0-.254.025-.493.074-.716l.808-3.37.512-1.925h-3.18l.147-.673c1.029-.117 1.825-.193 2.492-.268.961-.101 1.146-.377 1.359-1.442l.311-1.364h2.164l-1.194 5.111-.593 2.464c-.152.627-.174.91-.174 1.149 0 .453.156.665.529.665.262 0 .582-.09 1.011-.263l.316.953zm-.073-10.893c-.803 0-1.456-.674-1.456-1.5s.653-1.5 1.456-1.5c.815 0 1.464.674 1.464 1.5s-.648 1.5-1.464 1.5z"/> </svg> </div> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path> </svg> </div> <div class="social-icon"> <svg viewBox="0 0 24 24"> <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path> </svg> </div> </div> </div> <div class="footer-column"> <h3 class="footer-title">Quick Links</h3> <ul class="footer-links"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> </ul> </div> <div class="footer-column"> <h3 class="footer-title">Trending Topics</h3> <div class="quick-links"> <a href="#" class="quick-link">AI Ethics</a> <a href="#" class="quick-link">Quantum Computing</a> <a href="#" class="quick-link">Web3</a> <a href="#" class="quick-link">AR/VR</a> <a href="#" class="quick-link">Edge Computing</a> <a href="#" class="quick-link">Cybersecurity</a> <a href="#" class="quick-link">5G Applications</a> </div> </div> <div class="footer-column"> <h3 class="footer-title">Stay Updated</h3> <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 15px;"> Subscribe to our weekly tech digest for cutting-edge insights and exclusive content. </p> <div class="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Enter your email" id="newsletter-input"> <button class="newsletter-btn" id="newsletter-btn"> <svg viewBox="0 0 24 24"> <path d="M23.928 11.832c-.024-.048-.048-.072-.072-.12-.024-.024-.048-.048-.072-.072-.024-.024-.072-.048-.12-.072-.024 0-.048-.024-.072-.024l-22-7c-.168-.048-.36-.024-.504.072-.168.096-.264.264-.288.456.024.192.12.36.288.456l8.152 5.168 4.992 1.584-4.992 1.584-8.152 5.168c-.144.096-.24.264-.288.456s.12.36.288.456c.072.048.168.072.264.072.072 0 .168-.024.24-.072l22-7c.024 0 .048-.024.072-.024.048-.024.096-.048.12-.072.024-.024.048-.048.072-.072.024-.024.048-.072.072-.12.048-.096.072-.192.072-.312s-.024-.216-.072-.312z"/> </svg> </button> <div class="form-status" id="form-status">Thanks! Your subscription was successful.</div> </div> </div> </div> <div class="footer-bottom"> <div class="footer-logo">NexTech Byte</div> <div class="copyright">© 2023 NexTech Byte. All rights reserved.</div> </div> <div class="tech-line"></div> </div> <script> // Circuit background effect const circuitBg = document.getElementById('circuit-bg'); const generateCircuit = () => { circuitBg.innerHTML = ''; const size = Math.min(window.innerWidth, 700); const density = size / 10; for (let i = 0; i < density; i++) { for (let j = 0; j < density; j++) { if (Math.random() > 0.85) { const dot = document.createElement('div'); dot.classList.add('circuit-dot'); dot.style.width = '2px'; dot.style.height = '2px'; dot.style.backgroundColor = 'var(--neon-cyan)'; dot.style.position = 'absolute'; dot.style.left = `${i * 10 + Math.random() * 5}px`; dot.style.top = `${j * 10 + Math.random() * 5}px`; dot.style.opacity = '0.2'; if (Math.random() > 0.5) { const line = document.createElement('div'); line.style.position = 'absolute'; line.style.left = `${i * 10 + 1}px`; line.style.top = `${j * 10 + 1}px`; line.style.width = `${Math.random() * 20 + 10}px`; line.style.height = '1px'; line.style.backgroundColor = 'var(--neon-cyan)'; line.style.opacity = '0.15'; line.style.transform = `rotate(${Math.random() * 360}deg)`; circuitBg.appendChild(line); } circuitBg.appendChild(dot); } } } }; generateCircuit(); window.addEventListener('resize', generateCircuit); // Particle animation const createParticles = () => { const particleCount = 5; const footer = document.getElementById('tech-footer'); for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const x = Math.random() * footer.offsetWidth; const y = Math.random() * footer.offsetHeight; const size = Math.random() * 2 + 1; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random color from our neon palette const colors = ['var(--neon-cyan)', 'var(--neon-pink)', 'var(--neon-purple)']; particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; // Animation particle.style.opacity = Math.random() * 0.5 + 0.3; // Random movement const duration = Math.random() * 15 + 10; particle.style.animation = `float ${duration}s linear infinite`; // Random keyframe animation const animationName = `float-${i}`; const keyframes = ` @keyframes ${animationName} { 0% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.3}; } 25% { opacity: ${Math.random() * 0.5 + 0.3}; } 50% { transform: translate(${Math.random() * 50 - 25}px, ${Math.random() * 50 - 25}px); opacity: ${Math.random() * 0.5 + 0.3}; } 75% { opacity: ${Math.random() * 0.5 + 0.3}; } 100% { transform: translate(0, 0); opacity: ${Math.random() * 0.5 + 0.3}; } } `; const style = document.createElement('style'); style.innerHTML = keyframes; document.head.appendChild(style); particle.style.animation = `${animationName} ${duration}s linear infinite`; footer.appendChild(particle); } }; createParticles(); // Newsletter form handling const newsletterBtn = document.getElementById('newsletter-btn'); const emailInput = document.getElementById('newsletter-input'); const formStatus = document.getElementById('form-status'); newsletterBtn.addEventListener('click', (e) => { e.preventDefault(); if (emailInput.value.trim() === '') { formStatus.textContent = 'Please enter a valid email address.'; formStatus.style.color = 'var(--neon-pink)'; } else { formStatus.textContent = 'Thanks! Your subscription was successful.'; formStatus.style.color = 'var(--neon-cyan)'; emailInput.value = ''; } formStatus.classList.add('show'); setTimeout(() => { formStatus.classList.remove('show'); }, 3000); }); // Dark/Light mode toggle const modeToggle = document.getElementById('modeToggle'); modeToggle.addEventListener('click', () => { document.body.classList.toggle('light-mode'); }); // Social icons hover effect const socialIcons = document.querySelectorAll('.social-icon'); socialIcons.forEach(icon => { icon.addEventListener('mouseover', function() { const iconPosition = this.getBoundingClientRect(); const ripples = 3; for (let i = 0; i < ripples; i++) { const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.width = '30px'; ripple.style.height = '30px'; ripple.style.borderRadius = '50%'; ripple.style.border = '1px solid var(--neon-cyan)'; ripple.style.top = '50%'; ripple.style.left = '50%'; ripple.style.transform = 'translate(-50%, -50%)'; ripple.style.animation = `ripple 1.5s ease-out ${i * 0.3}s`; ripple.style.opacity = '0'; const keyframes = ` @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } `; const style = document.createElement('style'); style.innerHTML = keyframes; document.head.appendChild(style); this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 1500 + i * 300); } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EcoJustice Footer</title> <style> :root { --primary: #3a7d44; --secondary: #5d9c59; --accent: #f8b400; --background: #f5f9f1; --text: #2c3e2d; --light: #ffffff; --shadow: rgba(0, 0, 0, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f1f1f1; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .container { width: 100%; max-width: 700px; background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .footer { background-color: var(--background); overflow: hidden; position: relative; } .organic-shape { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%235d9c59' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); background-size: cover; opacity: 0.8; z-index: 0; animation: moveBg 60s linear infinite; } @keyframes moveBg { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } .footer-content { padding: 40px 30px; position: relative; z-index: 1; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; } .footer-section { flex: 1; min-width: 200px; margin-bottom: 30px; padding-right: 20px; } .footer-section h3 { color: var(--primary); font-size: 18px; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .footer-section h3::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 40px; background-color: var(--accent); border-radius: 5px; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 10px; } .footer-section ul li a { color: var(--text); text-decoration: none; transition: all 0.3s ease; display: inline-block; position: relative; } .footer-section ul li a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--secondary); transition: width 0.3s ease; } .footer-section ul li a:hover { color: var(--secondary); transform: translateX(5px); } .footer-section ul li a:hover::after { width: 100%; } .donation-form { background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px var(--shadow); margin-top: 15px; } .donation-amount { display: flex; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; } .amount-btn { flex: 1; min-width: 60px; padding: 8px 5px; background-color: var(--light); border: 2px solid var(--secondary); border-radius: 5px; color: var(--text); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .amount-btn:hover, .amount-btn.active { background-color: var(--secondary); color: var(--light); } .cta-button { display: inline-block; padding: 12px 24px; background-color: var(--accent); color: var(--text); font-weight: 600; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; text-align: center; text-decoration: none; position: relative; overflow: hidden; width: 100%; z-index: 1; } .cta-button::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 ease; z-index: -1; } .cta-button:hover { box-shadow: 0 5px 15px rgba(248, 180, 0, 0.3); transform: translateY(-3px); } .cta-button:hover::before { left: 100%; } .impact-numbers { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 20px; } .impact-item { flex: 1; min-width: 100px; text-align: center; padding: 10px; background-color: rgba(255, 255, 255, 0.7); border-radius: 8px; transition: transform 0.3s ease; } .impact-item:hover { transform: translateY(-5px); } .impact-number { font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 5px; } .impact-label { font-size: 13px; color: var(--text); } .volunteer-form { margin-top: 15px; } .form-group { margin-bottom: 15px; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; transition: border 0.3s ease; } .form-group input:focus { border-color: var(--secondary); outline: none; } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(44, 62, 45, 0.1); margin-top: 20px; } .social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--light); color: var(--primary); border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 3px 10px var(--shadow); } .social-links a:hover { background-color: var(--primary); color: var(--light); transform: translateY(-3px) rotate(10deg); } .social-links i { font-size: 18px; } .copyright { color: var(--text); font-size: 14px; margin-bottom: 10px; } .eco-badge { display: inline-flex; align-items: center; padding: 5px 10px; background-color: rgba(58, 125, 68, 0.1); border-radius: 30px; color: var(--primary); font-size: 12px; margin-bottom: 20px; } .eco-badge i { margin-right: 5px; font-size: 14px; } .newsletter-form { display: flex; margin-top: 15px; } .newsletter-form input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px 0 0 5px; border-right: none; } .newsletter-form input:focus { outline: none; border-color: var(--secondary); } .newsletter-form button { background-color: var(--secondary); color: white; border: none; padding: 0 15px; border-radius: 0 5px 5px 0; cursor: pointer; transition: background-color 0.3s ease; } .newsletter-form button:hover { background-color: var(--primary); } @media (max-width: 768px) { .footer-top { flex-direction: column; } .footer-section { width: 100%; padding-right: 0; } .impact-numbers { flex-direction: column; } .donation-amount { flex-wrap: wrap; } .amount-btn { min-width: 70px; } } /* Leaf animation */ .animated-leaf { position: absolute; width: 15px; height: 15px; background-color: rgba(58, 125, 68, 0.2); border-radius: 0 50% 50% 50%; transform: rotate(45deg); z-index: 0; animation: floatLeaf 15s linear infinite; opacity: 0; } @keyframes floatLeaf { 0% { transform: translateY(-100px) translateX(0) rotate(45deg); opacity: 1; } 100% { transform: translateY(700px) translateX(100px) rotate(445deg); opacity: 0; } } /* Progress bar */ .donation-progress { height: 10px; background-color: rgba(255, 255, 255, 0.5); border-radius: 5px; margin: 15px 0; overflow: hidden; position: relative; } .progress-bar { height: 100%; width: 75%; background-color: var(--secondary); border-radius: 5px; position: relative; animation: progressPulse 2s infinite; } @keyframes progressPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } .progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); margin-bottom: 5px; } </style> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="container"> <footer class="footer"> <div class="organic-shape"></div> <div id="leaves-container"></div> <div class="footer-content"> <div class="footer-top"> <div class="footer-section"> <h3>EcoJustice Alliance</h3> <p style="margin-bottom: 15px; color: var(--text);">Protecting ecosystems and empowering communities through direct action since 2008.</p> <div class="eco-badge"> <i class="fas fa-leaf"></i> Carbon-neutral organization </div> <div class="impact-numbers"> <div class="impact-item"> <div class="impact-number" id="tree-counter">0</div> <div class="impact-label">Trees Planted</div> </div> <div class="impact-item"> <div class="impact-number" id="community-counter">0</div> <div class="impact-label">Communities Supported</div> </div> <div class="impact-item"> <div class="impact-number" id="volunteer-counter">0</div> <div class="impact-label">Active Volunteers</div> </div> </div> </div> <div class="footer-section"> <h3>Our Programs</h3> <ul> <li><a href="#"><i class="fas fa-seedling"></i> Rainforest Restoration</a></li> <li><a href="#"><i class="fas fa-water"></i> Clean Water Initiative</a></li> <li><a href="#"><i class="fas fa-sun"></i> Renewable Energy Access</a></li> <li><a href="#"><i class="fas fa-graduation-cap"></i> Environmental Education</a></li> <li><a href="#"><i class="fas fa-hand-holding-heart"></i> Community Support</a></li> </ul> <h3 style="margin-top: 20px;">Newsletter</h3> <p style="font-size: 14px; margin-bottom: 10px; color: var(--text);">Get monthly updates on our impact</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="button"><i class="fas fa-paper-plane"></i></button> </form> </div> <div class="footer-section"> <h3>Support Our Work</h3> <p style="margin-bottom: 15px; color: var(--text);">Every donation helps us protect our planet's most vulnerable ecosystems.</p> <div class="donation-form"> <div class="progress-label"> <span>Quarterly Goal: $50,000</span> <span>75% Raised</span> </div> <div class="donation-progress"> <div class="progress-bar"></div> </div> <div class="donation-amount"> <button class="amount-btn">$25</button> <button class="amount-btn active">$50</button> <button class="amount-btn">$100</button> <button class="amount-btn">$250</button> </div> <button class="cta-button" id="donate-btn">Donate Now</button> </div> <h3 style="margin-top: 20px;">Volunteer</h3> <form class="volunteer-form"> <div class="form-group"> <input type="email" placeholder="Your email" required> </div> <button class="cta-button" id="volunteer-btn">Join Our Team</button> </form> </div> </div> <div class="footer-bottom"> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> <p class="copyright">© 2023 EcoJustice Alliance. All rights reserved.</p> <p style="font-size: 12px; color: var(--text);"> <a href="#" style="color: var(--text); margin: 0 10px;">Privacy Policy</a> | <a href="#" style="color: var(--text); margin: 0 10px;">Terms of Service</a> | <a href="#" style="color: var(--text); margin: 0 10px;">Contact Us</a> </p> </div> </div> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animated counter function animateCounter(element, target) { let current = 0; const increment = Math.ceil(target / 100); const timer = setInterval(() => { current += increment; element.textContent = current.toLocaleString(); if (current >= target) { element.textContent = target.toLocaleString(); clearInterval(timer); } }, 20); } // Create animated leaves function createLeaves() { const leafContainer = document.getElementById('leaves-container'); const leafCount = 10; for (let i = 0; i < leafCount; i++) { const leaf = document.createElement('div'); leaf.classList.add('animated-leaf'); // Randomize leaf properties leaf.style.left = `${Math.random() * 100}%`; leaf.style.animationDelay = `${Math.random() * 15}s`; leaf.style.animationDuration = `${15 + Math.random() * 10}s`; leaf.style.opacity = `${0.1 + Math.random() * 0.3}`; leaf.style.width = `${8 + Math.random() * 12}px`; leaf.style.height = `${8 + Math.random() * 12}px`; leafContainer.appendChild(leaf); } } // Handle donation amount buttons const amountBtns = document.querySelectorAll('.amount-btn'); amountBtns.forEach(btn => { btn.addEventListener('click', function() { amountBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); }); }); // Handle donate button click with animation const donateBtn = document.getElementById('donate-btn'); donateBtn.addEventListener('click', function(e) { e.preventDefault(); this.innerHTML = '<i class="fas fa-heart"></i> Thank You!'; this.style.backgroundColor = '#3a7d44'; this.style.color = 'white'; setTimeout(() => { this.innerHTML = 'Donate Now'; this.style.backgroundColor = ''; this.style.color = ''; }, 2000); }); // Handle volunteer button click with animation const volunteerBtn = document.getElementById('volunteer-btn'); volunteerBtn.addEventListener('click', function(e) { e.preventDefault(); this.innerHTML = '<i class="fas fa-check"></i> We\'ll be in touch!'; this.style.backgroundColor = '#3a7d44'; this.style.color = 'white'; setTimeout(() => { this.innerHTML = 'Join Our Team'; this.style.backgroundColor = ''; this.style.color = ''; document.querySelector('.volunteer-form input').value = ''; }, 2000); }); // Handle newsletter signup const newsletterForm = document.querySelector('.newsletter-form'); newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); }); newsletterForm.querySelector('button').addEventListener('click', function() { const input = newsletterForm.querySelector('input'); if (input.value) { this.innerHTML = '<i class="fas fa-check"></i>'; setTimeout(() => { this.innerHTML = '<i class="fas fa-paper-plane"></i>'; input.value = ''; }, 2000); } }); // Start animations when in view const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { // Start counter animations animateCounter(document.getElementById('tree-counter'), 537000); animateCounter(document.getElementById('community-counter'), 128); animateCounter(document.getElementById('volunteer-counter'), 4750); // Create animated leaves createLeaves(); observer.disconnect(); } }); }); observer.observe(document.querySelector('.footer')); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Into the Unknown - Documentary Footer</title> <style> :root { --dark-bg: #111111; --light-text: #f0f0f0; --accent: #e2b45f; --overlay: rgba(0, 0, 0, 0.7); --serif: 'Georgia', 'Times New Roman', serif; --sans: 'Helvetica', 'Arial', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--sans); background: var(--dark-bg); color: var(--light-text); line-height: 1.6; overflow-x: hidden; max-width: 700px; margin: 0 auto; height: 700px; display: flex; flex-direction: column; justify-content: flex-end; } .footer-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .video-background { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; opacity: 0.6; filter: grayscale(30%) brightness(0.5); } .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(0deg, var(--dark-bg) 20%, transparent 100%); z-index: 1; } .footer-content { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 25px; padding: 40px 25px; z-index: 2; border-top: 1px solid rgba(255, 255, 255, 0.1); } .brand { grid-column: 1 / 13; margin-bottom: 30px; } .brand h2 { font-family: var(--serif); font-size: 2rem; letter-spacing: 1px; font-weight: 400; color: var(--accent); margin-bottom: 8px; position: relative; } .brand h2::after { content: ""; position: absolute; height: 2px; width: 60px; background: var(--accent); bottom: -10px; left: 0; } .brand p { font-style: italic; opacity: 0.8; max-width: 80%; margin-top: 15px; } .navigation { grid-column: 1 / 4; } .credits { grid-column: 4 / 7; } .disclaimer { grid-column: 7 / 13; } h3 { font-family: var(--serif); font-weight: 500; margin-bottom: 15px; position: relative; display: inline-block; } h3::after { content: ""; position: absolute; height: 1px; width: 100%; background: var(--accent); bottom: -5px; left: 0; transform: scaleX(0.3); transform-origin: left; transition: transform 0.3s ease; } h3:hover::after { transform: scaleX(1); } ul { list-style: none; } li { margin-bottom: 10px; } a { color: var(--light-text); text-decoration: none; position: relative; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; } a::before { content: ""; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } a:hover { color: var(--accent); transform: translateX(3px); } a:hover::before { transform: scaleX(1); } .disclaimer p { font-size: 0.85rem; opacity: 0.7; margin-bottom: 10px; line-height: 1.5; } .disclaimer p:last-child { font-style: italic; } .copyright { grid-column: 1 / 13; text-align: center; margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; opacity: 0.6; display: flex; justify-content: space-between; align-items: center; } .social-links { display: flex; gap: 15px; } .social-links a { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease; } .social-links a:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); } .social-links a:hover::before { transform: scaleX(0); } .social-links i { font-size: 14px; } .scroll-top { position: absolute; right: 20px; bottom: 80px; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 10; transform: translateY(20px); } .scroll-top.visible { opacity: 0.7; transform: translateY(0); } .scroll-top:hover { opacity: 1; transform: translateY(-5px); background: rgba(226, 180, 95, 0.2); } .scroll-top::before { content: "↑"; color: var(--light-text); font-size: 20px; } /* Fade-in animation for links */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } li, .brand p, .disclaimer p { opacity: 0; animation: fadeIn 0.5s ease forwards; } li:nth-child(1) { animation-delay: 0.1s; } li:nth-child(2) { animation-delay: 0.2s; } li:nth-child(3) { animation-delay: 0.3s; } li:nth-child(4) { animation-delay: 0.4s; } .disclaimer p:nth-child(2) { animation-delay: 0.2s; } .disclaimer p:nth-child(3) { animation-delay: 0.3s; } /* Film strip effect */ .film-strip { position: absolute; top: 0; left: 0; width: 100%; height: 20px; background: repeating-linear-gradient( 90deg, transparent, transparent 20px, rgba(0, 0, 0, 0.8) 20px, rgba(0, 0, 0, 0.8) 40px ); z-index: 3; } /* Responsive Design */ @media (max-width: 700px) { .footer-content { grid-template-columns: repeat(6, 1fr); gap: 15px; padding: 30px 20px; } .brand { grid-column: 1 / 7; } .navigation { grid-column: 1 / 4; } .credits { grid-column: 4 / 7; } .disclaimer { grid-column: 1 / 7; margin-top: 20px; } .brand h2 { font-size: 1.5rem; } .brand p { max-width: 100%; } .copyright { grid-column: 1 / 7; flex-direction: column; gap: 10px; } .video-background { height: 120%; } } @media (max-width: 480px) { .navigation, .credits { grid-column: 1 / 7; } .credits { margin-top: 20px; } } </style> </head> <body> <div class="footer-container"> <video class="video-background" autoplay loop muted> <source src="https://assets.codepen.io/1149983/forest-bg.mp4" type="video/mp4"> </video> <div class="overlay"></div> <div class="film-strip"></div> <button class="scroll-top" id="scrollTop"></button> <div class="footer-content"> <div class="brand"> <h2>Into the Unknown</h2> <p>"Documenting the unexplored frontiers of our planet and the human spirit since 2015"</p> </div> <div class="navigation"> <h3>Explore</h3> <ul> <li><a href="#">Current Release</a></li> <li><a href="#">Film Archive</a></li> <li><a href="#">Behind the Scenes</a></li> <li><a href="#">Contact the Team</a></li> </ul> </div> <div class="credits"> <h3>Credits</h3> <ul> <li><a href="#">Director's Statement</a></li> <li><a href="#">Cinematography</a></li> <li><a href="#">Sound Design</a></li> <li><a href="#">Production Notes</a></li> </ul> </div> <div class="disclaimer"> <h3>Legal Disclaimer</h3> <p>All footage and content © Wilderness Lens Productions 2023. The views expressed in our documentaries represent those of the subjects and not necessarily those of the filmmakers or distributors.</p> <p>Our expeditions operate under permits from relevant authorities. Some sequences contain recreated scenarios based on firsthand accounts.</p> <p>For media inquiries: <a href="mailto:[email protected]">[email protected]</a></p> </div> <div class="copyright"> <span>© 2023 Into the Unknown Documentary Series. All Rights Reserved.</span> <div class="social-links"> <a href="#"><i>fb</i></a> <a href="#"><i>ig</i></a> <a href="#"><i>tw</i></a> <a href="#"><i>yt</i></a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const scrollTopBtn = document.getElementById('scrollTop'); // Text lines with cinematic fade animation const textElements = document.querySelectorAll('.footer-content p, .footer-content li'); // Create observer for text elements const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); textElements.forEach(el => { observer.observe(el); }); // Simulate scroll event for demo purposes setTimeout(() => { scrollTopBtn.classList.add('visible'); }, 1500); scrollTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Cinematic fade-in effect for links on hover const links = document.querySelectorAll('a'); links.forEach(link => { link.addEventListener('mouseenter', () => { const fadeEffect = [ { opacity: 0.7, transform: 'translateX(0)' }, { opacity: 1, transform: 'translateX(3px)' } ]; link.animate(fadeEffect, { duration: 300, fill: 'forwards', easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' }); }); link.addEventListener('mouseleave', () => { const fadeEffect = [ { opacity: 1, transform: 'translateX(3px)' }, { opacity: 0.7, transform: 'translateX(0)' } ]; link.animate(fadeEffect, { duration: 300, fill: 'forwards', easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)' }); }); }); // Film grain effect const footer = document.querySelector('.footer-container'); function createGrain() { const grain = document.createElement('div'); grain.classList.add('grain'); grain.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4wNSIvPjwvc3ZnPg=='); pointer-events: none; z-index: 3; opacity: 0.1; `; footer.appendChild(grain); } createGrain(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meridian Trust Financial - Footer</title> <style> :root { --primary: #0c2e60; --primary-dark: #071d3d; --accent: #1e88e5; --accent-light: #64b5f6; --light: #f5f9ff; --text: #333; --text-light: #6e7c91; --success: #0a9e58; --warning: #f2a100; --white: #ffffff; --gradient: linear-gradient(135deg, var(--primary) 0%, #1a4780 100%); --shadow: 0 5px 15px rgba(0, 0, 42, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--text); line-height: 1.6; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; max-width: 700px; margin: 0 auto; } .footer { background: var(--gradient); color: var(--white); border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: var(--shadow); position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--success) 50%, var(--warning) 100%); z-index: 10; } .footer-top { padding: 30px 25px 20px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .footer-logo { grid-column: span 12; display: flex; align-items: center; margin-bottom: 10px; } .logo-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--white); border-radius: 8px; margin-right: 12px; } .logo-text { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.5px; } .trust-badges { grid-column: span 12; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 10px 0 20px; padding: 15px; background-color: rgba(255, 255, 255, 0.05); border-radius: 8px; } .badge { display: flex; flex-direction: column; align-items: center; text-align: center; transition: var(--transition); padding: 8px 12px; border-radius: 8px; width: 85px; } .badge:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-5px); } .badge-icon { position: relative; width: 40px; height: 40px; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: var(--transition); } .badge:hover .badge-icon { background-color: var(--accent); box-shadow: 0 0 0 5px rgba(30, 136, 229, 0.2); } .badge:hover .badge-icon svg { transform: scale(1.1); fill: var(--white); } .badge-icon svg { width: 22px; height: 22px; fill: var(--light); transition: var(--transition); } .badge-text { font-size: 0.7rem; font-weight: 500; line-height: 1.2; } .quick-links { grid-column: span 6; } .account-services { grid-column: span 6; } .footer-col h4 { font-size: 0.95rem; margin-bottom: 15px; font-weight: 600; position: relative; padding-bottom: 8px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background-color: var(--accent); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.85rem; transition: var(--transition); display: flex; align-items: center; } .footer-col ul li a:hover { color: var(--white); padding-left: 5px; } .footer-col ul li a svg { width: 12px; height: 12px; margin-right: 6px; fill: var(--accent-light); } .footer-bottom { background-color: var(--primary-dark); padding: 15px 25px; text-align: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); display: flex; flex-direction: column; gap: 10px; } .regulatory-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; } .regulatory-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: var(--transition); font-size: 0.75rem; padding: 3px 6px; } .regulatory-links a:hover { color: var(--white); text-decoration: underline; } .copyright { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .locale-selector { position: relative; cursor: pointer; } .locale-display { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.05); border-radius: 4px; transition: var(--transition); } .locale-display:hover { background-color: rgba(255, 255, 255, 0.1); } .locale-display svg { width: 14px; height: 14px; fill: var(--accent-light); } .locale-options { position: absolute; bottom: 100%; left: 0; width: 180px; background-color: var(--primary); border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 5px; padding: 8px 0; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); } .locale-selector.active .locale-options { opacity: 1; visibility: visible; transform: translateY(0); } .locale-option { padding: 6px 12px; transition: var(--transition); display: flex; align-items: center; gap: 5px; } .locale-option:hover { background-color: rgba(255, 255, 255, 0.1); } .locale-option.selected { background-color: rgba(30, 136, 229, 0.2); color: var(--white); } .market-icon { width: 18px; height: 13px; border-radius: 2px; margin-right: 6px; } .icon-pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(30, 136, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); } } /* Responsive styles */ @media screen and (max-width: 600px) { .footer-top { grid-template-columns: 1fr; gap: 15px; padding: 20px 15px; } .quick-links, .account-services { grid-column: span 12; } .trust-badges { justify-content: space-around; gap: 10px; } .badge { width: 70px; } .footer-bottom { padding: 15px; } .copyright { flex-direction: column; gap: 10px; } .regulatory-links { gap: 8px; } } /* Animation for secure badge */ .secure-badge-animation { animation: secureRotate 1.5s ease-in-out infinite alternate; } @keyframes secureRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(10deg); } } /* Animate the header gradient */ .footer::before { animation: gradientShift 8s ease infinite; background-size: 200% 200%; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> </head> <body> <div class="container"> <footer class="footer"> <div class="footer-top"> <div class="footer-logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="#0c2e60" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.995M12 12a2 2 0 100-4 2 2 0 000 4z"/> </svg> </div> <div class="logo-text">Meridian Trust</div> </div> <div class="trust-badges"> <div class="badge"> <div class="badge-icon icon-pulse"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/> </svg> </div> <div class="badge-text">Bank-Grade Encryption</div> </div> <div class="badge"> <div class="badge-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/> </svg> </div> <div class="badge-text">Secure Authentication</div> </div> <div class="badge"> <div class="badge-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/> </svg> </div> <div class="badge-text">FDIC Insured</div> </div> <div class="badge"> <div class="badge-icon"> <svg class="secure-badge-animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 11c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 2c0-3.31-2.69-6-6-6s-6 2.69-6 6c0 2.22 1.21 4.15 3 5.19l1-1.74c-1.19-.7-2-1.97-2-3.45 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19zM12 3C6.48 3 2 7.48 2 13c0 3.7 2.01 6.92 4.99 8.65l1-1.73C5.61 18.53 4 15.96 4 13c0-4.42 3.58-8 8-8s8 3.58 8 8c0 2.96-1.61 5.53-4 6.92l1 1.73c2.99-1.73 5-4.95 5-8.65 0-5.52-4.48-10-10-10z"/> </svg> </div> <div class="badge-text">Fraud Monitoring</div> </div> </div> <div class="footer-col quick-links"> <h4>Quick Links</h4> <ul> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> ATM Locator </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Mortgage Calculator </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Current Rates </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Routing Numbers </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Contact Support </a> </li> </ul> </div> <div class="footer-col account-services"> <h4>Account Services</h4> <ul> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Online Banking </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Mobile Banking </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Cards Management </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Report Fraud </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> </svg> Statements & Documents </a> </li> </ul> </div> </div> <div class="footer-bottom"> <div class="regulatory-links"> <a href="#">Privacy Policy</a> <a href="#">Terms of Use</a> <a href="#">Security Center</a> <a href="#">Accessibility</a> <a href="#">FDIC Information</a> <a href="#">Equal Housing Lender</a> </div> <div class="copyright"> <div>© 2023 Meridian Trust Financial. NMLS #458721. All rights reserved.</div> <div class="locale-selector"> <div class="locale-display"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/> </svg> <span>English (US)</span> </div> <div class="locale-options"> <div class="locale-option selected"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0MHYxMjBIMHoiLz48cGF0aCBmaWxsPSIjYmQzZDQ0IiBkPSJNMCAwaDI0MHYxNUgwem0wIDMwaDI0MHYxNUgwem0wIDMwaDI0MHYxNUgwem0wIDMwaDI0MHYxNUgweiIvPjxwYXRoIGZpbGw9IiMxOTJmNWQiIGQ9Ik0wIDBoMTIwdjkwSDB6Ii8+PGcgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTYgMzYgOS44IDI0LjUgMTMuNiAzNmwxMi0uNS05LjggOC41IDQgMTEuNS05LjgtOC42LTkuOCA4LjYgNC0xMS41LTkuOS04LjUgMTIgLjV6TTE4IDIzLjUgMjAuMyAxN2wyLjMgNi41IDYuNi0uMy01LjQgNC43IDIuMiA2LjQtNS40LTQuNy01LjQgNC43IDIuMi02LjQtNS41LTQuN3pNMTggNzUuNSAyMC4zIDY5bDIuMyA2LjUgNi42LS4zLTUuNCA0LjcgMi4yIDYuNC01LjQtNC43LTUuNCA0LjcgMi4yLTYuNC01LjUtNC43ek00MC41IDUxbDIuMyA2LjUgNi41LS4zLTUuNCA0LjcgMi4yIDYuNS01LjQtNC43LTUuNCA0LjcgMi4xLTYuNS01LjQtNC43IDYuNi4zek02IDU4LjUgOC4zIDUybDIuMyA2LjUgNi41LS4zLTUuNCA0LjcgMi4yIDYuNS01LjQtNC43LTUuNCA0LjcgMi4xLTYuNS01LjQtNC43eiIvPjxnIGlkPSJmIj48cGF0aCBkPSJNMzQuNCA0OWwtMi0uMiAyLS4zIDIuMS01LjMtMS0uNSA1LjQtLjIgMS44IDQuNC40LTUgMi42LS4yLTIuNy0xLjgtMi40LTMuNHoiLz48cGF0aCBkPSJNMzEuOSA0OC44bC0xLjgtLjkgMS43LTEgLjQtNS42LTEuMi0uMiA1LS43IDMgMy43LS40LTUgMi41LS43LTIuMyAyLjMtMS44IDR6Ii8+PC9nPjx1c2UgeGxpbms6aHJlZj0iI2YiIHRyYW5zZm9ybT0icm90YXRlKDcyIDMwLjMgNDQuMSkiLz48dXNlIHhsaW5rOmhyZWY9IiNmIiB0cmFuc2Zvcm09InJvdGF0ZSgxNDQgMzAuMyA0NC4xKSIvPjx1c2UgeGxpbms6aHJlZj0iI2YiIHRyYW5zZm9ybT0icm90YXRlKDIxNiAzMC4zIDQ0LjEpIi8+PHVzZSB4bGluazpocmVmPSIjZiIgdHJhbnNmb3JtPSJyb3RhdGUoMjg4IDMwLjMgNDQuMSkiLz48L2c+PC9zdmc+" alt="US" class="market-icon" /> English (US) </div> <div class="locale-option"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0MHYxMjBIMHoiLz48cGF0aCBmaWxsPSIjY2UxMTI2IiBkPSJNMCAwaDgwdjEyMEgweiIvPjxwYXRoIGZpbGw9IiMwMDI2OWEiIGQ9Ik0xNjAgMGg4MHYxMjBoLTgweiIvPjwvc3ZnPg==" alt="FR" class="market-icon" /> Français </div> <div class="locale-option"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0MHYxMjBIMHoiLz48cGF0aCBmaWxsPSIjZDUyYjFlIiBkPSJNMCAzMGgyNDB2NjBIMHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCA0NWgyNDB2MzBIMHoiLz48cGF0aCBkPSJNODAgNjBhMjAgMjAgMCAxIDEtNDAgMCAyMCAyMCAwIDAgMSA0MCAweiIgZmlsbD0iI2Q1MmIxZSIvPjwvc3ZnPg==" alt="AT" class="market-icon" /> Español </div> <div class="locale-option"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDAgMTIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDI0MHYxMjBIMHoiLz48ZyBmaWxsPSIjMDAwIj48cGF0aCBkPSJNODAgMGg4MHYxMjBIODB6Ii8+PHBhdGggZD0iTTAgMGg4MHYxMjBIMHoiIGZpbGw9IiNkZDAwMDAiLz48L2c+PC9zdmc+" alt="DE" class="market-icon" /> Deutsch </div> </div> </div> </div> </div> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Locale selector functionality const localeSelector = document.querySelector('.locale-selector'); const localeDisplay = document.querySelector('.locale-display'); const localeOptions = document.querySelector('.locale-options'); const localeOptionItems = document.querySelectorAll('.locale-option'); localeDisplay.addEventListener('click', function(e) { e.stopPropagation(); localeSelector.classList.toggle('active'); }); localeOptionItems.forEach(option => { option.addEventListener('click', function() { // Update selected locale display (in a real app, this would change the language) const localeText = this.textContent.trim(); const localeIcon = this.querySelector('.market-icon').cloneNode(true); // Update display const displayText = localeDisplay.querySelector('span'); displayText.textContent = localeText; // Update selected class document.querySelector('.locale-option.selected').classList.remove('selected'); this.classList.add('selected'); // Close dropdown localeSelector.classList.remove('active'); }); }); // Close locale selector when clicking outside document.addEventListener('click', function(e) { if (!localeSelector.contains(e.target)) { localeSelector.classList.remove('active'); } }); // Add hover animations to badges const badges = document.querySelectorAll('.badge'); badges.forEach(badge => { badge.addEventListener('mouseenter', function() { const icon = this.querySelector('.badge-icon svg'); if (icon) { icon.style.transform = 'scale(1.1)'; } }); badge.addEventListener('mouseleave', function() { const icon = this.querySelector('.badge-icon svg'); if (icon) { icon.style.transform = 'scale(1)'; } }); }); }); </script> </body> </html>
