Pricing tables are essential tools for businesses to present their service tiers and pricing options clearly. They help potential customers make informed decisions quickly and efficiently.
In this article, we will explore 10 exemplary pricing tables that stand out for their design, functionality, and user experience. These examples will provide inspiration for creating your own effective pricing tables.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect pricing tables effortlessly, ensuring a seamless user experience every time.
Join the community of satisfied users and elevate your UI design. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect UIs, including stunning pricing tables, in minutes. Experience unparalleled efficiency with our drag-and-drop editor and beautifully crafted components.
Don't wait—start creating immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Enterprise Pricing</title> <style> :root { --primary: #2a3f54; --secondary: #4c6887; --accent: #00a3e0; --light: #f7f9fc; --dark: #1a2530; --success: #21d07c; --border: #e9ecef; --shadow: rgba(42, 63, 84, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 700px; width: 100%; } h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; color: var(--primary); text-align: center; } .subtitle { font-size: 16px; color: var(--secondary); margin-bottom: 32px; text-align: center; max-width: 500px; margin-left: auto; margin-right: auto; } .toggle-container { display: flex; align-items: center; justify-content: center; margin-bottom: 40px; } .toggle-label { font-size: 14px; color: var(--secondary); cursor: pointer; } .toggle-label.active { color: var(--primary); font-weight: 500; } .toggle { position: relative; width: 60px; height: 32px; margin: 0 12px; background-color: var(--light); border: 2px solid var(--border); border-radius: 16px; cursor: pointer; transition: all 0.3s ease; } .toggle-handle { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background-color: var(--accent); border-radius: 50%; transition: all 0.3s ease; } .toggle.yearly .toggle-handle { left: 30px; } .pricing-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .pricing-card { background-color: white; border-radius: 12px; padding: 32px; flex: 1; min-width: 200px; max-width: 300px; border: 1px solid var(--border); transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 4px 6px var(--shadow); display: flex; flex-direction: column; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px var(--shadow); border-color: var(--accent); } .pricing-card.popular::before { content: "Popular"; position: absolute; top: 12px; right: -30px; background-color: var(--accent); color: white; padding: 4px 30px; font-size: 12px; transform: rotate(45deg); font-weight: 500; } .plan-name { font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 16px; } .plan-price { font-size: 36px; font-weight: 700; color: var(--primary); margin-bottom: 8px; display: flex; align-items: baseline; } .plan-price .currency { font-size: 20px; margin-right: 4px; } .plan-price .period { font-size: 14px; color: var(--secondary); margin-left: 4px; font-weight: 400; } .plan-description { font-size: 14px; color: var(--secondary); margin-bottom: 24px; } .features { list-style: none; margin-bottom: 24px; flex-grow: 1; } .feature { display: flex; align-items: center; font-size: 14px; color: var(--secondary); margin-bottom: 12px; } .feature-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; margin-right: 12px; color: var(--success); } .feature-icon.unavailable { color: var(--border); } .btn { background-color: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; text-align: center; outline: none; } .btn-primary { background-color: var(--accent); color: white; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 163, 224, 0.2); } .btn-primary:hover { background-color: #0091c7; border-color: #0091c7; } .save-badge { display: inline-block; background-color: rgba(33, 208, 124, 0.1); color: var(--success); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; margin-left: 8px; transform: scale(0); transition: transform 0.3s ease; } .save-badge.show { transform: scale(1); } .yearly-price { display: none; } .pricing-card .pulse { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 163, 224, 0.1); border-radius: 12px; z-index: -1; transform: scale(0.95); opacity: 0; } @media (max-width: 768px) { .pricing-container { flex-direction: column; align-items: center; } .pricing-card { width: 100%; max-width: 100%; } } .feature-tooltip { position: relative; display: inline-flex; align-items: center; } .info-icon { margin-left: 4px; color: var(--secondary); opacity: 0.5; font-size: 12px; cursor: help; } .tooltip-text { position: absolute; top: -8px; left: 100%; transform: translateY(-100%); background-color: var(--dark); color: white; padding: 8px 12px; border-radius: 4px; font-size: 12px; width: 180px; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 10; } .tooltip-text::after { content: ""; position: absolute; bottom: -5px; left: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--dark); } .feature-tooltip:hover .tooltip-text { opacity: 1; visibility: visible; } .badge { position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: var(--accent) transparent transparent transparent; z-index: 1; } .badge-text { position: absolute; top: 10px; left: 10px; transform: rotate(-45deg); color: white; font-size: 10px; font-weight: 600; z-index: 2; } </style> </head> <body> <div class="container"> <h1>Enterprise Solutions Pricing</h1> <p class="subtitle">Transparent pricing designed for organizations of all sizes. No hidden fees, no complex calculations.</p> <div class="toggle-container"> <span class="toggle-label monthly active">Monthly</span> <div class="toggle"> <div class="toggle-handle"></div> </div> <span class="toggle-label yearly">Annual</span> <span class="save-badge">Save 20%</span> </div> <div class="pricing-container"> <div class="pricing-card"> <div class="pulse"></div> <div class="plan-name">Startup</div> <div class="plan-price monthly-price"><span class="currency">$</span>299<span class="period">/mo</span></div> <div class="plan-price yearly-price"><span class="currency">$</span>239<span class="period">/mo</span></div> <p class="plan-description">Perfect for emerging businesses with essential needs</p> <ul class="features"> <li class="feature"> <span class="feature-icon">✓</span> <span>Up to 10 team members</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>500GB secure storage</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>Basic analytics dashboard</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>24/5 customer support</span> </li> <li class="feature"> <span class="feature-icon unavailable">✓</span> <span>Advanced security features</span> </li> <li class="feature"> <span class="feature-icon unavailable">✓</span> <span>Integration APIs</span> </li> </ul> <button class="btn">Get Started</button> </div> <div class="pricing-card popular"> <div class="pulse"></div> <div class="plan-name">Business</div> <div class="plan-price monthly-price"><span class="currency">$</span>699<span class="period">/mo</span></div> <div class="plan-price yearly-price"><span class="currency">$</span>559<span class="period">/mo</span></div> <p class="plan-description">Ideal for growing companies with scaling requirements</p> <ul class="features"> <li class="feature"> <span class="feature-icon">✓</span> <span>Up to 50 team members</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>2TB secure storage</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>Advanced analytics with insights</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>24/7 priority support</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <div class="feature-tooltip"> <span>Advanced security features</span> <span class="info-icon">ⓘ</span> <div class="tooltip-text">Includes SSO, role-based permissions, and audit logs</div> </div> </li> <li class="feature"> <span class="feature-icon unavailable">✓</span> <span>Full API suite</span> </li> </ul> <button class="btn btn-primary">Get Started</button> </div> <div class="pricing-card"> <div class="pulse"></div> <div class="badge"></div> <div class="badge-text">NEW</div> <div class="plan-name">Enterprise</div> <div class="plan-price monthly-price"><span class="currency">$</span>1299<span class="period">/mo</span></div> <div class="plan-price yearly-price"><span class="currency">$</span>1039<span class="period">/mo</span></div> <p class="plan-description">Complete solution for large-scale organizational needs</p> <ul class="features"> <li class="feature"> <span class="feature-icon">✓</span> <span>Unlimited team members</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>10TB secure storage</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>Predictive analytics & reporting</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <span>24/7 dedicated support team</span> </li> <li class="feature"> <span class="feature-icon">✓</span> <div class="feature-tooltip"> <span>Advanced security features</span> <span class="info-icon">ⓘ</span> <div class="tooltip-text">Includes everything in Business plus custom security policies and encryption controls</div> </div> </li> <li class="feature"> <span class="feature-icon">✓</span> <div class="feature-tooltip"> <span>Full API suite & custom integrations</span> <span class="info-icon">ⓘ</span> <div class="tooltip-text">Access to all APIs with dedicated integration support</div> </div> </li> </ul> <button class="btn">Contact Sales</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggle = document.querySelector('.toggle'); const monthlyLabel = document.querySelector('.toggle-label.monthly'); const yearlyLabel = document.querySelector('.toggle-label.yearly'); const saveBadge = document.querySelector('.save-badge'); const monthlyPrices = document.querySelectorAll('.monthly-price'); const yearlyPrices = document.querySelectorAll('.yearly-price'); const cards = document.querySelectorAll('.pricing-card'); toggle.addEventListener('click', function() { this.classList.toggle('yearly'); monthlyLabel.classList.toggle('active'); yearlyLabel.classList.toggle('active'); saveBadge.classList.toggle('show'); if (this.classList.contains('yearly')) { monthlyPrices.forEach(price => price.style.display = 'none'); yearlyPrices.forEach(price => price.style.display = 'flex'); } else { monthlyPrices.forEach(price => price.style.display = 'flex'); yearlyPrices.forEach(price => price.style.display = 'none'); } }); cards.forEach(card => { card.addEventListener('mouseenter', function() { const pulse = this.querySelector('.pulse'); pulse.style.opacity = '1'; pulse.style.transform = 'scale(1.05)'; setTimeout(() => { pulse.style.opacity = '0'; pulse.style.transform = 'scale(0.95)'; }, 300); }); card.addEventListener('mouseleave', function() { const pulse = this.querySelector('.pulse'); pulse.style.opacity = '0'; pulse.style.transform = 'scale(0.95)'; }); }); const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); // Show confirmation or additional action would go here console.log(`Selected plan: ${this.closest('.pricing-card').querySelector('.plan-name').textContent}`); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile-First Pricing Table</title> <style> :root { --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --light-color: #f8f9fa; --dark-color: #212529; --success-color: #2ec4b6; --warning-color: #ff9f1c; --border-radius: 12px; --box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fb; color: var(--dark-color); line-height: 1.6; overflow-x: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .container { max-width: 700px; width: 100%; height: 100%; max-height: 700px; overflow-y: auto; padding: 1.5rem 1rem; position: relative; } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } .container::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 10px; } .header { text-align: center; margin-bottom: 2rem; position: relative; } .header::before { content: ""; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, var(--accent-color) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0.4; z-index: -1; border-radius: 50%; animation: pulse 8s infinite alternate; } .header::after { content: ""; position: absolute; bottom: -20px; left: -20px; width: 80px; height: 80px; background: radial-gradient(circle, var(--primary-color) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0.3; z-index: -1; border-radius: 50%; animation: pulse 6s infinite alternate-reverse; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.2; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(1); opacity: 0.2; } } h1 { font-size: 2.2rem; margin-bottom: 0.5rem; color: var(--secondary-color); position: relative; display: inline-block; } h1::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--accent-color); border-radius: 3px; } .subtitle { font-size: 1rem; color: #6c757d; max-width: 80%; margin: 1rem auto; } .toggle-container { display: flex; align-items: center; justify-content: center; margin: 1.5rem 0; font-weight: 500; } .toggle-label { margin: 0 1rem; cursor: pointer; opacity: 0.6; transition: var(--transition); } .toggle-label.active { opacity: 1; color: var(--secondary-color); } .toggle-switch { position: relative; width: 50px; height: 24px; border-radius: 12px; background: var(--light-color); border: 2px solid var(--primary-color); cursor: pointer; transition: var(--transition); } .toggle-switch::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; top: 1px; left: 1px; transition: var(--transition); } .toggle-switch.yearly::after { transform: translateX(26px); } .pricing-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 1rem; position: relative; } .pricing-cards::-webkit-scrollbar { height: 0; width: 0; display: none; } .swipe-hint { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.8); padding: 8px; border-radius: 50%; box-shadow: var(--box-shadow); color: var(--primary-color); display: flex; align-items: center; justify-content: center; z-index: 10; animation: swipeIndicator 2s infinite; opacity: 0; transition: opacity 0.5s; } @keyframes swipeIndicator { 0% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-10px); } 100% { transform: translateY(-50%) translateX(0); } } .card { flex: 0 0 85%; scroll-snap-align: center; max-width: 300px; background: white; border-radius: var(--border-radius); padding: 1.5rem; margin-right: 1rem; box-shadow: var(--box-shadow); transition: var(--transition); position: relative; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95); } .card:last-child { margin-right: 0; } .card.active { transform: scale(1); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); } .card.premium::before { background: linear-gradient(to right, var(--accent-color), var(--secondary-color)); } .popular-badge { position: absolute; top: 12px; right: -30px; background: var(--accent-color); color: white; padding: 4px 30px; font-size: 0.7rem; transform: rotate(45deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); font-weight: bold; z-index: 1; } .card-header { text-align: center; margin-bottom: 1.5rem; } .plan-name { font-size: 1.4rem; margin-bottom: 0.3rem; font-weight: 600; color: var(--secondary-color); } .plan-subtitle { font-size: 0.85rem; color: #6c757d; margin-bottom: 1.2rem; } .price { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); display: flex; align-items: flex-start; justify-content: center; margin-bottom: 0.5rem; position: relative; } .price .currency { font-size: 1rem; margin-right: 0.2rem; } .price .period { font-size: 0.9rem; font-weight: 400; color: #6c757d; margin-left: 0.3rem; align-self: flex-end; } .original-price { font-size: 1rem; color: #adb5bd; text-decoration: line-through; margin-left: 0.5rem; font-weight: normal; } .save-text { font-size: 0.8rem; padding: 3px 8px; background-color: #fff4e6; color: var(--warning-color); display: inline-block; border-radius: 20px; margin-top: 0.5rem; } .card-body { flex: 1; } .features-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); cursor: pointer; font-weight: 500; } .toggle-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--light-color); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .toggle-icon::before, .toggle-icon::after { content: ""; position: absolute; background: var(--primary-color); transition: var(--transition); } .toggle-icon::before { width: 10px; height: 2px; } .toggle-icon::after { width: 2px; height: 10px; } .features-toggle.active .toggle-icon::after { transform: rotate(90deg); opacity: 0; } .features-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .feature-item { display: flex; align-items: flex-start; margin: 0.8rem 0; font-size: 0.9rem; } .feature-icon { color: var(--success-color); margin-right: 0.5rem; flex-shrink: 0; } .card-footer { margin-top: 1.5rem; text-align: center; } .btn { display: inline-block; padding: 0.8rem 1.5rem; border-radius: 50px; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; transition: var(--transition); width: 100%; border: none; outline: none; font-size: 1rem; } .btn-primary { background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); color: white; box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3); } .btn-premium { background: linear-gradient(to right, var(--accent-color), var(--secondary-color)); color: white; box-shadow: 0 4px 10px rgba(247, 37, 133, 0.3); } .btn-outline { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); } .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .pagination { display: flex; justify-content: center; margin-top: 1.5rem; } .page-dot { width: 10px; height: 10px; border-radius: 50%; background: #dee2e6; margin: 0 5px; cursor: pointer; transition: var(--transition); } .page-dot.active { background: var(--primary-color); transform: scale(1.2); } @media (min-width: 768px) { .pricing-cards { justify-content: center; flex-wrap: nowrap; overflow-x: visible; scroll-snap-type: none; } .card { flex: 0 0 auto; transform: scale(1); } .swipe-hint { display: none; } .pagination { display: none; } } @media (max-width: 767px) { .container { padding: 1rem 0.5rem; } h1 { font-size: 1.8rem; } .subtitle { font-size: 0.9rem; } .card { padding: 1.2rem; } .plan-name { font-size: 1.2rem; } .price { font-size: 1.8rem; } } .info-tooltip { position: relative; display: inline-block; margin-left: 5px; cursor: help; } .info-tooltip .tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e9ecef; color: #6c757d; font-size: 10px; font-weight: bold; } .info-tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; font-weight: normal; line-height: 1.4; pointer-events: none; } .info-tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; } .info-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } .card-body { position: relative; } .feature-card { position: relative; display: inline-block; margin-top: 10px; width: 100%; } .feature-highlight { position: relative; overflow: hidden; border-radius: 8px; padding: 12px 15px; font-weight: 500; font-size: 0.85rem; margin-bottom: 20px; background: rgba(67, 97, 238, 0.08); color: var(--primary-color); border-left: 3px solid var(--primary-color); } .feature-highlight.premium { background: rgba(247, 37, 133, 0.08); color: var(--accent-color); border-left: 3px solid var(--accent-color); } .feature-highlight p { margin: 0; } .dot-pattern { position: absolute; width: 60px; height: 60px; top: -15px; right: -15px; opacity: 0.1; z-index: 0; } .dot-pattern::before, .dot-pattern::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; } .dot-pattern::before { top: 0; left: 0; box-shadow: 10px 0 0 var(--primary-color), 20px 0 0 var(--primary-color), 30px 0 0 var(--primary-color), 40px 0 0 var(--primary-color), 0 10px 0 var(--primary-color), 10px 10px 0 var(--primary-color), 20px 10px 0 var(--primary-color), 30px 10px 0 var(--primary-color), 40px 10px 0 var(--primary-color), 0 20px 0 var(--primary-color), 10px 20px 0 var(--primary-color), 20px 20px 0 var(--primary-color), 30px 20px 0 var(--primary-color), 40px 20px 0 var(--primary-color), 0 30px 0 var(--primary-color), 10px 30px 0 var(--primary-color), 20px 30px 0 var(--primary-color), 30px 30px 0 var(--primary-color), 40px 30px 0 var(--primary-color), 0 40px 0 var(--primary-color), 10px 40px 0 var(--primary-color), 20px 40px 0 var(--primary-color), 30px 40px 0 var(--primary-color), 40px 40px 0 var(--primary-color); } .premium .dot-pattern::before { box-shadow: 10px 0 0 var(--accent-color), 20px 0 0 var(--accent-color), 30px 0 0 var(--accent-color), 40px 0 0 var(--accent-color), 0 10px 0 var(--accent-color), 10px 10px 0 var(--accent-color), 20px 10px 0 var(--accent-color), 30px 10px 0 var(--accent-color), 40px 10px 0 var(--accent-color), 0 20px 0 var(--accent-color), 10px 20px 0 var(--accent-color), 20px 20px 0 var(--accent-color), 30px 20px 0 var(--accent-color), 40px 20px 0 var(--accent-color), 0 30px 0 var(--accent-color), 10px 30px 0 var(--accent-color), 20px 30px 0 var(--accent-color), 30px 30px 0 var(--accent-color), 40px 30px 0 var(--accent-color), 0 40px 0 var(--accent-color), 10px 40px 0 var(--accent-color), 20px 40px 0 var(--accent-color), 30px 40px 0 var(--accent-color), 40px 40px 0 var(--accent-color); } </style> </head> <body> <div class="container"> <div class="header"> <h1>Choose Your Plan</h1> <p class="subtitle">Find the perfect fit for your mobile app or website needs with our flexible pricing options</p> <div class="toggle-container"> <div class="toggle-label monthly active">Monthly</div> <div class="toggle-switch"></div> <div class="toggle-label yearly">Yearly</div> </div> </div> <div class="pricing-cards"> <div class="swipe-hint"> <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"> <path d="M5 12h14"></path> <path d="M12 5l7 7-7 7"></path> </svg> </div> <div class="card" data-card="1"> <div class="card-header"> <div class="plan-name">Starter</div> <div class="plan-subtitle">Perfect for individuals & small projects</div> <div class="price"> <span class="currency">$</span> <span class="amount">19</span> <span class="period">/mo</span> </div> </div> <div class="card-body"> <div class="feature-card"> <div class="feature-highlight"> <div class="dot-pattern"></div> <p>Includes mobile-optimized templates with swipe navigation</p> </div> </div> <div class="features-toggle"> <span>Key Features</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>3 responsive layouts</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Basic mobile analytics</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Touch-friendly interface elements</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>1GB storage for offline content</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Basic email support</span> </div> </div> <div class="features-toggle"> <span>Mobile Optimizations</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Collapsible navigation menus</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Touchscreen-friendly buttons</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Basic load time optimization</span> <div class="info-tooltip"> <span class="tooltip-icon">i</span> <span class="tooltip-text">Optimizes images and assets for faster loading on mobile networks</span> </div> </div> </div> </div> <div class="card-footer"> <button class="btn btn-outline">Get Started</button> </div> </div> <div class="card premium active" data-card="2"> <div class="popular-badge">POPULAR</div> <div class="card-header"> <div class="plan-name">Pro</div> <div class="plan-subtitle">Enhanced features for growing businesses</div> <div class="price"> <span class="currency">$</span> <span class="amount">49</span> <span class="original-price">$59</span> <span class="period">/mo</span> </div> <div class="save-text">Save 17%</div> </div> <div class="card-body"> <div class="feature-card"> <div class="feature-highlight premium"> <div class="dot-pattern"></div> <p>Includes gesture-based interactions & offline capabilities</p> </div> </div> <div class="features-toggle"> <span>Key Features</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Everything in Starter</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>10 responsive layouts</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Advanced mobile analytics</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Custom gesture controls</span> <div class="info-tooltip"> <span class="tooltip-icon">i</span> <span class="tooltip-text">Add swipe, pinch, and other mobile-specific interactions</span> </div> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>10GB storage for offline content</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Priority email support</span> </div> </div> <div class="features-toggle"> <span>Mobile Optimizations</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Offline data synchronization</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Advanced battery optimization</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Enhanced loading animations</span> </div> </div> </div> <div class="card-footer"> <button class="btn btn-premium">Get Started</button> </div> </div> <div class="card" data-card="3"> <div class="card-header"> <div class="plan-name">Enterprise</div> <div class="plan-subtitle">Custom solutions for large organizations</div> <div class="price"> <span class="currency">$</span> <span class="amount">99</span> <span class="period">/mo</span> </div> </div> <div class="card-body"> <div class="feature-card"> <div class="feature-highlight"> <div class="dot-pattern"></div> <p>Includes custom mobile integrations & white-labeling</p> </div> </div> <div class="features-toggle"> <span>Key Features</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Everything in Pro</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Unlimited responsive layouts</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>White-label mobile experience</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Enterprise-level security</span> <div class="info-tooltip"> <span class="tooltip-icon">i</span> <span class="tooltip-text">Advanced encryption & compliance features for mobile data</span> </div> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Unlimited storage for offline content</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>24/7 dedicated support</span> </div> </div> <div class="features-toggle"> <span>Mobile Optimizations</span> <span class="toggle-icon"></span> </div> <div class="features-list"> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Multi-device sync dashboard</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>Custom mobile device targeting</span> </div> <div class="feature-item"> <span class="feature-icon">✓</span> <span>AI-powered performance optimization</span> </div> </div> </div> <div class="card-footer"> <button class="btn btn-primary">Get Started</button> </div> </div> </div> <div class="pagination"> <div class="page-dot" data-card="1"></div> <div class="page-dot active" data-card="2"></div> <div class="page-dot" data-card="3"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggleSwitch = document.querySelector('.toggle-switch'); const monthlyLabel = document.querySelector('.toggle-label.monthly'); const yearlyLabel = document.querySelector('.toggle-label.yearly'); const pricingCards = document.querySelector('.pricing-cards'); const cards = document.querySelectorAll('.card'); const pageDots = document.querySelectorAll('.page-dot'); const featuresToggle = document.querySelectorAll('.features-toggle'); const swipeHint = document.querySelector('.swipe-hint'); // Monthly/Yearly toggle toggleSwitch.addEventListener('click', function() { this.classList.toggle('yearly'); monthlyLabel.classList.toggle('active'); yearlyLabel.classList.toggle('active'); // Update prices for yearly (20% discount) if (this.classList.contains('yearly')) { document.querySelectorAll('.amount')[0].textContent = '15'; document.querySelectorAll('.amount')[1].textContent = '39'; document.querySelectorAll('.original-price')[0].textContent = '$49'; document.querySelectorAll('.amount')[2].textContent = '79'; document.querySelectorAll('.period').forEach(period => { period.textContent = '/mo'; }); document.querySelectorAll('.save-text')[0].textContent = 'Save 20% annually'; } else { document.querySelectorAll('.amount')[0].textContent = '19'; document.querySelectorAll('.amount')[1].textContent = '49'; document.querySelectorAll('.original-price')[0].textContent = '$59'; document.querySelectorAll('.amount')[2].textContent = '99'; document.querySelectorAll('.period').forEach(period => { period.textContent = '/mo'; }); document.querySelectorAll('.save-text')[0].textContent = 'Save 17%'; } }); // Expand/collapse feature lists featuresToggle.forEach(toggle => { toggle.addEventListener('click', function() { this.classList.toggle('active'); const featuresList = this.nextElementSibling; if (this.classList.contains('active')) { featuresList.style.maxHeight = featuresList.scrollHeight + 'px'; } else { featuresList.style.maxHeight = '0'; } }); }); // Pagination functionality pageDots.forEach(dot => { dot.addEventListener('click', function() { const cardIndex = this.getAttribute('data-card'); const cardToShow = document.querySelector(`.card[data-card="${cardIndex}"]`); // Scroll to the card cardToShow.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); // Update active state pageDots.forEach(d => d.classList.remove('active')); this.classList.add('active'); }); }); // Card active state on scroll const updateActiveCard = () => { const scrollPosition = pricingCards.scrollLeft; const cardWidth = cards[0].offsetWidth + parseInt(window.getComputedStyle(cards[0]).marginRight); const activeIndex = Math.round(scrollPosition / cardWidth); cards.forEach(card => card.classList.remove('active')); pageDots.forEach(dot => dot.classList.remove('active')); if (cards[activeIndex]) { cards[activeIndex].classList.add('active'); const cardId = cards[activeIndex].getAttribute('data-card'); document.querySelector(`.page-dot[data-card="${cardId}"]`).classList.add('active'); } }; // Listen for scroll events on the pricing cards container pricingCards.addEventListener('scroll', updateActiveCard); // Show swipe hint on mobile if (window.innerWidth < 768) { setTimeout(() => { swipeHint.style.opacity = '1'; setTimeout(() => { swipeHint.style.opacity = '0'; }, 3000); }, 1000); } // Initialize feature lists in collapsed state document.querySelectorAll('.features-list').forEach(list => { list.style.maxHeight = '0'; }); // Expand the first features list in each active card const activeCard = document.querySelector('.card.active'); if (activeCard) { const firstToggle = activeCard.querySelector('.features-toggle'); if (firstToggle) { firstToggle.classList.add('active'); const featuresList = firstToggle.nextElementSibling; featuresList.style.maxHeight = featuresList.scrollHeight + 'px'; } } // Button click effects document.querySelectorAll('.btn').forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); }); }); // Initialize touch detection for mobile swipe let touchStartX = 0; let touchEndX = 0; pricingCards.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, false); pricingCards.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, false); function handleSwipe() { const threshold = 50; if (touchEndX < touchStartX - threshold) { // Swipe left const activeCard = document.querySelector('.card.active'); const nextCard = activeCard.nextElementSibling; if (nextCard) { const cardId = nextCard.getAttribute('data-card'); document.querySelector(`.page-dot[data-card="${car
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #6366f1; --primary-dark: #4f46e5; --secondary: #f43f5e; --light: #f8fafc; --dark: #0f172a; --gray: #64748b; --gray-light: #cbd5e1; --border-radius: 12px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } * { 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: var(--light); color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 650px; padding: 20px; overflow-x: hidden; } .container { max-width: 100%; width: 100%; margin: 0 auto; } .pricing-header { text-align: center; margin-bottom: 2rem; } .pricing-header h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .pricing-header p { font-size: 1rem; color: var(--gray); max-width: 500px; margin: 0 auto; line-height: 1.6; } .toggle-container { margin: 2rem auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; } .toggle-option { font-weight: 600; cursor: pointer; user-select: none; transition: all 0.3s ease; font-size: 1rem; color: var(--gray); } .toggle-option.active { color: var(--dark); } .toggle-switch { position: relative; width: 60px; height: 30px; background: var(--primary); border-radius: 30px; padding: 4px; cursor: pointer; overflow: hidden; box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } .toggle-switch::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: white; left: 4px; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .toggle-switch.yearly::before { transform: translateX(30px); } .savings-badge { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 1.5rem; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; margin-left: 1rem; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25); opacity: 0; transform: translateY(5px); transition: all 0.3s ease; } .savings-badge.show { opacity: 1; transform: translateY(0); } .pricing-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 3rem; perspective: 1000px; } .pricing-plan { background: white; border-radius: var(--border-radius); padding: 2rem; flex: 1; min-width: 280px; max-width: 320px; box-shadow: var(--shadow); transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; border: 1px solid var(--gray-light); transform-style: preserve-3d; } .pricing-plan:hover { transform: translateY(-10px) rotateX(2deg) rotateY(2deg); box-shadow: var(--shadow-lg); border-color: var(--primary); } .pricing-plan::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; z-index: 1; } .pricing-plan:hover::after { transform: scaleX(1); } .pricing-plan.popular { border-color: var(--primary); transform: scale(1.05); z-index: 2; } .pricing-plan.popular:hover { transform: scale(1.05) translateY(-10px) rotateX(2deg) rotateY(2deg); } .plan-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 1.5rem; font-size: 0.75rem; font-weight: 600; } .plan-header { margin-bottom: 1.5rem; } .plan-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--dark); } .plan-description { font-size: 0.9rem; color: var(--gray); line-height: 1.5; margin-bottom: 1.5rem; } .price-container { margin-bottom: 1.5rem; display: flex; align-items: baseline; position: relative; height: 60px; } .price-monthly, .price-yearly { position: absolute; top: 0; left: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); opacity: 0; transform: translateY(20px); } .price-monthly.active, .price-yearly.active { opacity: 1; transform: translateY(0); } .price-amount { font-size: 2.5rem; font-weight: 800; color: var(--dark); line-height: 1; } .price-currency { font-size: 1.25rem; font-weight: 600; vertical-align: top; margin-right: 0.25rem; color: var(--dark); } .price-period { font-size: 0.9rem; color: var(--gray); margin-left: 0.5rem; } .plan-features { list-style: none; margin-bottom: 2rem; } .feature-item { display: flex; align-items: center; margin-bottom: 0.75rem; font-size: 0.95rem; color: var(--gray); } .feature-icon { color: var(--primary); margin-right: 0.75rem; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .cta-button { display: block; width: 100%; padding: 0.9rem 1.5rem; border-radius: var(--border-radius); text-align: center; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; border: none; outline: none; position: relative; overflow: hidden; text-decoration: none; } .cta-primary { background: var(--primary); color: white; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25); } .cta-primary:hover { background: var(--primary-dark); box-shadow: 0 6px 15px rgba(99, 102, 241, 0.35); transform: translateY(-2px); } .cta-secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); } .cta-secondary:hover { background: rgba(99, 102, 241, 0.1); transform: translateY(-2px); } .cta-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; transform: scale(0); opacity: 0; transition: all 0.6s; } .cta-button:active::after { transform: scale(20); opacity: 0; transition: 0s; } .faq-section { text-align: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--gray-light); } .faq-header { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark); } .faq-text { font-size: 0.95rem; color: var(--gray); margin-bottom: 1.5rem; } .faq-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; } .faq-link:hover { color: var(--primary-dark); text-decoration: underline; } .faq-link-icon { margin-left: 0.5rem; transition: transform 0.3s ease; } .faq-link:hover .faq-link-icon { transform: translateX(3px); } @media (max-width: 768px) { .pricing-grid { flex-direction: column; align-items: center; } .pricing-plan { width: 100%; max-width: 400px; } .pricing-plan.popular { transform: scale(1); order: -1; } .pricing-plan.popular:hover { transform: translateY(-10px) rotateX(2deg) rotateY(2deg); } .pricing-header h1 { font-size: 1.75rem; } } /* Animation for pricing table */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pricing-plan { animation: fadeInUp 0.5s ease forwards; opacity: 0; } .pricing-plan:nth-child(1) { animation-delay: 0.2s; } .pricing-plan:nth-child(2) { animation-delay: 0.4s; } .pricing-plan:nth-child(3) { animation-delay: 0.6s; } /* Gradient background pattern */ .bg-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.05; background-image: radial-gradient(var(--primary) 2px, transparent 2px), radial-gradient(var(--secondary) 2px, transparent 2px); background-size: 60px 60px; background-position: 0 0, 30px 30px; } </style> </head> <body> <div class="bg-pattern"></div> <div class="container"> <div class="pricing-header"> <h1>Flexible Pricing for Growing Businesses</h1> <p>Choose the perfect plan that scales with your needs. Start with monthly billing and upgrade anytime as your business grows.</p> </div> <div class="toggle-container"> <span class="toggle-option active" id="monthly">Monthly</span> <div class="toggle-switch" id="toggle"></div> <span class="toggle-option" id="yearly">Yearly</span> <div class="savings-badge" id="savings-badge">Save 20%</div> </div> <div class="pricing-grid"> <div class="pricing-plan"> <div class="plan-header"> <h3 class="plan-name">Starter</h3> <p class="plan-description">Perfect for freelancers and individuals starting their journey.</p> </div> <div class="price-container"> <div class="price-monthly active"> <span class="price-currency">$</span> <span class="price-amount">19</span> <span class="price-period">/month</span> </div> <div class="price-yearly"> <span class="price-currency">$</span> <span class="price-amount">182</span> <span class="price-period">/year</span> </div> </div> <ul class="plan-features"> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Access to core features</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Up to 10 projects</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>100GB storage</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Email support (48h response)</span> </li> </ul> <a href="#" class="cta-button cta-secondary">Start with Starter</a> </div> <div class="pricing-plan popular"> <div class="plan-badge">Most Popular</div> <div class="plan-header"> <h3 class="plan-name">Professional</h3> <p class="plan-description">For growing teams that need more power and flexibility.</p> </div> <div class="price-container"> <div class="price-monthly active"> <span class="price-currency">$</span> <span class="price-amount">49</span> <span class="price-period">/month</span> </div> <div class="price-yearly"> <span class="price-currency">$</span> <span class="price-amount">470</span> <span class="price-period">/year</span> </div> </div> <ul class="plan-features"> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Everything in Starter</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Unlimited projects</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>500GB storage</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Priority support (24h response)</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Advanced analytics</span> </li> </ul> <a href="#" class="cta-button cta-primary">Choose Professional</a> </div> <div class="pricing-plan"> <div class="plan-header"> <h3 class="plan-name">Enterprise</h3> <p class="plan-description">For large organizations with complex requirements and needs.</p> </div> <div class="price-container"> <div class="price-monthly active"> <span class="price-currency">$</span> <span class="price-amount">99</span> <span class="price-period">/month</span> </div> <div class="price-yearly"> <span class="price-currency">$</span> <span class="price-amount">950</span> <span class="price-period">/year</span> </div> </div> <ul class="plan-features"> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Everything in Professional</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Unlimited everything</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>24/7 dedicated support</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Custom integrations</span> </li> <li class="feature-item"> <span class="feature-icon">✓</span> <span>Executive quarterly reviews</span> </li> </ul> <a href="#" class="cta-button cta-secondary">Contact Sales</a> </div> </div> <div class="faq-section"> <h3 class="faq-header">Have questions?</h3> <p class="faq-text">Our team is ready to help you find the perfect plan for your needs.</p> <a href="#" class="faq-link"> View pricing FAQ <span class="faq-link-icon">→</span> </a> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggle = document.getElementById('toggle'); const monthly = document.getElementById('monthly'); const yearly = document.getElementById('yearly'); const savingsBadge = document.getElementById('savings-badge'); const monthlyPrices = document.querySelectorAll('.price-monthly'); const yearlyPrices = document.querySelectorAll('.price-yearly'); toggle.addEventListener('click', function() { toggle.classList.toggle('yearly'); if (toggle.classList.contains('yearly')) { monthly.classList.remove('active'); yearly.classList.add('active'); savingsBadge.classList.add('show'); monthlyPrices.forEach(price => { price.classList.remove('active'); }); yearlyPrices.forEach(price => { price.classList.add('active'); }); } else { monthly.classList.add('active'); yearly.classList.remove('active'); savingsBadge.classList.remove('show'); monthlyPrices.forEach(price => { price.classList.add('active'); }); yearlyPrices.forEach(price => { price.classList.remove('active'); }); } }); monthly.addEventListener('click', function() { if (toggle.classList.contains('yearly')) { toggle.classList.remove('yearly'); monthly.classList.add('active'); yearly.classList.remove('active'); savingsBadge.classList.remove('show'); monthlyPrices.forEach(price => { price.classList.add('active'); }); yearlyPrices.forEach(price => { price.classList.remove('active'); }); } }); yearly.addEventListener('click', function() { if (!toggle.classList.contains('yearly')) { toggle.classList.add('yearly'); monthly.classList.remove('active'); yearly.classList.add('active'); savingsBadge.classList.add('show'); monthlyPrices.forEach(price => { price.classList.remove('active'); }); yearlyPrices.forEach(price => { price.classList.add('active'); }); } }); // Ripple effect for buttons const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Pricing Comparison</title> <style> :root { --primary: #4e54c8; --primary-light: #8f94fb; --secondary: #ff7676; --success: #2ecc71; --dark: #2c3e50; --light: #f5f7fa; --shadow: 0 4px 12px rgba(0,0,0,0.1); --border-radius: 12px; --font-main: 'Inter', system-ui, -apple-system, sans-serif; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--light); color: var(--dark); line-height: 1.6; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 100%; height: 100vh; overflow-x: hidden; } .container { max-width: 700px; width: 100%; } header { text-align: center; margin-bottom: 20px; } h1 { color: var(--dark); font-size: 28px; margin-bottom: 10px; position: relative; display: inline-block; } h1::after { content: ""; position: absolute; bottom: -6px; left: 25%; width: 50%; height: 3px; background: linear-gradient(90deg, var(--primary-light), var(--primary)); border-radius: 3px; } .subtitle { color: #666; font-size: 16px; max-width: 500px; margin: 0 auto; } .filter-container { margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .filter-btn { background-color: white; border: 1px solid #ddd; padding: 8px 16px; border-radius: 30px; cursor: pointer; font-size: 14px; transition: var(--transition); font-weight: 500; } .filter-btn:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .filter-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); } .comparison-table { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; perspective: 1000px; transition: var(--transition); } .plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; width: 100%; } .plan-card { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); transform-origin: center; position: relative; display: flex; flex-direction: column; } .plan-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(78, 84, 200, 0.15); } .plan-card.popular::before { content: "Most Popular"; position: absolute; top: 10px; right: 0; background-color: var(--secondary); color: white; font-size: 12px; padding: 5px 10px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 10; } .plan-header { padding: 20px; text-align: center; border-bottom: 1px solid #eee; background-color: white; position: relative; z-index: 1; } .plan-name { font-size: 20px; font-weight: 600; margin-bottom: 5px; color: var(--dark); } .plan-price { font-size: 30px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; justify-content: center; color: var(--primary); } .plan-price .currency { font-size: 16px; font-weight: 600; margin-right: 2px; } .plan-price .period { font-size: 14px; color: #888; margin-left: 5px; font-weight: 400; } .plan-description { font-size: 14px; color: #666; margin-bottom: 10px; } .plan-cta { margin-top: 10px; } .cta-btn { display: inline-block; padding: 10px 20px; background-color: var(--primary); color: white; text-decoration: none; border-radius: 30px; font-weight: 600; font-size: 14px; transition: var(--transition); border: none; cursor: pointer; box-shadow: 0 3px 8px rgba(78, 84, 200, 0.3); } .cta-btn:hover { transform: translateY(-2px); background-color: var(--primary-light); box-shadow: 0 5px 12px rgba(78, 84, 200, 0.4); } .plan-features { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; background-repeat: repeat; position: relative; } .plan-features::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.85); z-index: 0; } .starter .plan-features { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%23f0f4f9' fill-opacity='0.5' fill-rule='evenodd'/%3E%3C/svg%3E"); } .pro .plan-features { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%238f94fb' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } .business .plan-features { background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20L0 20z' fill='%234e54c8' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } .feature-item { display: flex; align-items: center; margin-bottom: 12px; font-size: 14px; position: relative; z-index: 1; } .feature-icon { margin-right: 10px; font-size: 18px; display: flex; align-items: center; justify-content: center; min-width: 24px; transition: var(--transition); } .feature-icon.check { color: var(--success); } .feature-icon.cross { color: #ccc; } .feature-text { flex-grow: 1; } .feature-more { display: inline-block; margin-left: 5px; color: var(--primary); cursor: pointer; font-size: 14px; transition: var(--transition); } .feature-more:hover { color: var(--primary-light); text-decoration: underline; } .tooltip { position: relative; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateY(0); } .tooltip-text { visibility: hidden; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%) translateY(10px); width: 180px; background-color: var(--dark); color: white; text-align: center; padding: 8px; border-radius: 6px; font-size: 12px; z-index: 100; opacity: 0; transition: var(--transition); pointer-events: none; } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .comparison-footer { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .compare-all { margin-top: 10px; display: inline-block; color: var(--primary); cursor: pointer; transition: var(--transition); text-decoration: none; font-weight: 500; } .compare-all:hover { color: var(--primary-light); text-decoration: underline; } .feature-detail-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: var(--transition); } .feature-detail-modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: white; border-radius: var(--border-radius); padding: 25px; max-width: 450px; width: 90%; box-shadow: var(--shadow); position: relative; transform: translateY(20px); transition: var(--transition); } .feature-detail-modal.active .modal-content { transform: translateY(0); } .modal-close { position: absolute; top: 15px; right: 15px; font-size: 20px; cursor: pointer; color: #666; transition: var(--transition); } .modal-close:hover { color: var(--dark); } .modal-title { font-size: 20px; margin-bottom: 10px; color: var(--dark); } .modal-description { font-size: 14px; color: #666; margin-bottom: 15px; line-height: 1.6; } .modal-comparison { border-top: 1px solid #eee; padding-top: 15px; } .modal-feature-item { display: flex; margin-bottom: 12px; } .modal-plan-name { width: 120px; font-weight: 600; font-size: 14px; } .modal-feature-detail { flex-grow: 1; font-size: 14px; } @media screen and (max-width: 480px) { .plan-cards { grid-template-columns: 1fr; } h1 { font-size: 24px; } .subtitle { font-size: 14px; } } /* Animation & Hover Effects */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .popular .plan-header { animation: pulse 2.5s infinite; } .feature-item:hover .feature-icon { transform: scale(1.2); } .plan-feature-highlight { background-color: rgba(78, 84, 200, 0.05); padding: 5px; border-radius: 5px; transition: var(--transition); } .plan-feature-highlight:hover { background-color: rgba(78, 84, 200, 0.1); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } </style> </head> <body> <div class="container"> <header> <h1>Compare Our Plans</h1> <p class="subtitle">Find the perfect solution for your needs with our flexible pricing options.</p> </header> <div class="filter-container"> <button class="filter-btn active" data-filter="all">All Features</button> <button class="filter-btn" data-filter="basic">Basic Features</button> <button class="filter-btn" data-filter="advanced">Advanced Features</button> <button class="filter-btn" data-filter="support">Support Options</button> </div> <div class="comparison-table"> <div class="plan-cards"> <div class="plan-card starter"> <div class="plan-header"> <div class="plan-name">Starter</div> <div class="plan-price"> <span class="currency">$</span>19<span class="period">/month</span> </div> <div class="plan-description">Perfect for beginners & small projects</div> <div class="plan-cta"> <button class="cta-btn">Get Started</button> </div> </div> <div class="plan-features"> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">5 projects</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">20GB storage</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">Basic analytics</div> </div> <div class="feature-item" data-category="advanced"> <div class="feature-icon cross">✕</div> <div class="feature-text">API access</div> </div> <div class="feature-item" data-category="advanced"> <div class="feature-icon cross">✕</div> <div class="feature-text">White labeling</div> </div> <div class="feature-item" data-category="support"> <div class="feature-icon check">✓</div> <div class="feature-text">Email support <span class="tooltip"> <span class="feature-more">?</span> <span class="tooltip-text">24-hour response time during business days</span> </span> </div> </div> <div class="feature-item plan-feature-highlight" data-category="support"> <div class="feature-icon cross">✕</div> <div class="feature-text">Priority support</div> </div> </div> </div> <div class="plan-card pro popular"> <div class="plan-header"> <div class="plan-name">Pro</div> <div class="plan-price"> <span class="currency">$</span>49<span class="period">/month</span> </div> <div class="plan-description">For growing teams & businesses</div> <div class="plan-cta"> <button class="cta-btn">Get Started</button> </div> </div> <div class="plan-features"> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">20 projects</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">50GB storage</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">Advanced analytics <span class="tooltip"> <span class="feature-more">?</span> <span class="tooltip-text">Includes user behavior tracking</span> </span> </div> </div> <div class="feature-item plan-feature-highlight" data-category="advanced"> <div class="feature-icon check">✓</div> <div class="feature-text">API access <span class="feature-more" onclick="showFeatureDetail('api')">details</span> </div> </div> <div class="feature-item" data-category="advanced"> <div class="feature-icon check">✓</div> <div class="feature-text">White labeling</div> </div> <div class="feature-item" data-category="support"> <div class="feature-icon check">✓</div> <div class="feature-text">Email support</div> </div> <div class="feature-item" data-category="support"> <div class="feature-icon check">✓</div> <div class="feature-text">Priority support</div> </div> </div> </div> <div class="plan-card business"> <div class="plan-header"> <div class="plan-name">Business</div> <div class="plan-price"> <span class="currency">$</span>99<span class="period">/month</span> </div> <div class="plan-description">For enterprises & large organizations</div> <div class="plan-cta"> <button class="cta-btn">Get Started</button> </div> </div> <div class="plan-features"> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">Unlimited projects</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">200GB storage</div> </div> <div class="feature-item" data-category="basic"> <div class="feature-icon check">✓</div> <div class="feature-text">Enterprise analytics <span class="tooltip"> <span class="feature-more">?</span> <span class="tooltip-text">Includes AI-driven insights & forecasting</span> </span> </div> </div> <div class="feature-item" data-category="advanced"> <div class="feature-icon check">✓</div> <div class="feature-text">Advanced API access</div> </div> <div class="feature-item plan-feature-highlight" data-category="advanced"> <div class="feature-icon check">✓</div> <div class="feature-text">Enterprise integration <span class="feature-more" onclick="showFeatureDetail('integration')">details</span> </div> </div> <div class="feature-item" data-category="support"> <div class="feature-icon check">✓</div> <div class="feature-text">24/7 phone support</div> </div> <div class="feature-item" data-category="support"> <div class="feature-icon check">✓</div> <div class="feature-text">Dedicated account manager</div> </div> </div> </div> </div> </div> <div class="comparison-footer"> <p>Not sure which plan is right for you?</p> <a href="#" class="compare-all" id="compareAllLink">See detailed feature comparison</a> </div> </div> <!-- Feature Detail Modal --> <div class="feature-detail-modal" id="featureDetailModal"> <div class="modal-content"> <div class="modal-close" onclick="closeFeatureDetail()">×</div> <h3 class="modal-title" id="modalTitle">Feature Details</h3> <p class="modal-description" id="modalDescription">Detailed information about this feature across different plans.</p> <div class="modal-comparison" id="modalComparison"> <!-- Populated dynamically --> </div> </div> </div> <script> // Filter functionality const filterButtons = document.querySelectorAll('.filter-btn'); const featureItems = document.querySelectorAll('.feature-item'); filterButtons.forEach(button => { button.addEventListener('click', () => { // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); const filter = button.getAttribute('data-filter'); // Show/hide features based on filter featureItems.forEach(item => { if (filter === 'all' || item.getAttribute('data-category') === filter) { item.style.display = 'flex'; } else { item.style.display = 'none'; } }); }); }); // Feature detail modal const featureDetailModal = document.getElementById('featureDetailModal'); const modalTitle = document.getElementById('modalTitle'); const modalDescription = document.getElementById('modalDescription'); const modalComparison = document.getElementById('modalComparison'); function showFeatureDetail(feature) { // Set content based on feature if (feature === 'api') { modalTitle.textContent = 'API Access Comparison'; modalDescription.textContent = 'Access our platform programmatically with our comprehensive API. Different plans offer varying levels of access and request limits.'; modalComparison.innerHTML = ` <div class="modal-feature-item"> <div class="modal-plan-name">Starter</div> <div class="modal-feature-detail">Not available</div> </div> <div class="modal-feature-item"> <div class="modal-plan-name">Pro</div> <div class="modal-feature-detail">1,000 API calls/day with standard endpoints</div> </div> <div class="modal-feature-item"> <div class="modal-plan-name">Business</div> <div class="modal-feature-detail">Unlimited API calls with priority access and advanced endpoints</div> </div> `; } else if (feature === 'integration') { modalTitle.textContent = 'Enterprise Integration'; modalDescription.textContent = 'Connect our platform with your existing enterprise software stack. Our integration options vary by plan.'; modalComparison.innerHTML = ` <div class="modal-feature-item"> <div class="modal-plan-name">Starter</div> <div class="modal-feature-detail">Basic integrations with popular tools only</div> </div> <div class="modal-feature-item"> <div class="modal-plan-name">Pro</div> <div class="modal-feature-detail">Advanced integrations with popular enterprise tools</div> </div> <div class="modal-feature-item"> <div class="modal-plan-name">Business</div> <div class="modal-feature-detail">Custom integrations with any enterprise system, including legacy software</div> </div> `; } // Show modal with animation featureDetailModal.classList.add('active'); } function closeFeatureDetail() { featureDetailModal.classList.remove('active'); } // Close modal when clicking outside featureDetailModal.addEventListener('click', (e) => { if (e.target === featureDetailModal) { closeFeatureDetail(); } }); // Handle "Compare All" button document.getElementById('compareAllLink').addEventListener('click', (e) => { e.preventDefault(); // Reset filters to show all features filterButtons.forEach(btn => btn.classList.remove('active')); document.querySelector('[data-filter="all"]').classList.add('active'); featureItems.forEach(item => { item.style.display = 'flex'; }); // Subtle animation to draw attention document.querySelectorAll('.plan-card').forEach(card => { card.style.transform = 'scale(1.02)'; setTimeout(() => { card.style.transform = ''; }, 300); }); }); // Add button ripple effect const buttons = document.querySelectorAll('.cta-btn'); buttons.forEach(button => { button.addEventListener('click', function(e) { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripples = document.createElement('span'); ripples.style.left = x + 'px'; ripples.style.top = y + 'px'; this.appendChild(ripples); setTimeout(() => { ripples.remove(); }, 600); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeonVerse Pricing</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #0d1117; --bg-secondary: #161b22; --text-primary: #f0f6fc; --text-secondary: #8b949e; --accent-blue: #58a6ff; --accent-purple: #bc8cff; --accent-pink: #ff79c6; --accent-green: #26cb7c; --border-color: rgba(128, 128, 128, 0.1); --hover-color: rgba(255, 255, 255, 0.03); --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } body { background-color: var(--bg-primary); color: var(--text-primary); font-family: 'Inter', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; padding: 20px; } .pricing-container { max-width: 700px; width: 100%; margin: 0 auto; } .pricing-header { text-align: center; margin-bottom: 40px; } .pricing-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; margin-bottom: 0.5rem; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; } .pricing-header h1::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); border-radius: 2px; } .pricing-header p { color: var(--text-secondary); font-size: 1rem; max-width: 500px; margin: 1rem auto; } .toggle-container { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } .toggle-text { color: var(--text-secondary); font-size: 0.9rem; margin: 0 10px; transition: color 0.3s ease; } .toggle-text.active { color: var(--text-primary); font-weight: 500; } .toggle-switch { position: relative; display: inline-block; width: 52px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-secondary); border: 1px solid var(--border-color); transition: .4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3px; background-color: var(--accent-purple); transition: .4s; border-radius: 50%; box-shadow: 0 0 10px 1px rgba(188, 140, 255, 0.4); } input:checked + .toggle-slider:before { transform: translateX(26px); background-color: var(--accent-pink); box-shadow: 0 0 10px 1px rgba(255, 121, 198, 0.4); } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; align-items: stretch; } .pricing-card { background-color: var(--bg-secondary); border-radius: 12px; padding: 25px; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .card-popular { position: relative; } .card-popular::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); z-index: 1; } .popular-tag { position: absolute; top: 12px; right: 12px; background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple)); color: white; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 12px; text-transform: uppercase; } .card-tier { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; font-family: 'Space Grotesk', sans-serif; } .card-starter .card-tier { color: var(--accent-blue); } .card-pro .card-tier { color: var(--accent-purple); } .card-enterprise .card-tier { color: var(--accent-pink); } .card-description { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 20px; line-height: 1.4; } .card-price { font-size: 2.5rem; font-weight: 700; margin-bottom: 5px; font-family: 'Space Grotesk', sans-serif; } .price-cycle { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 20px; } .card-features { list-style-type: none; margin-bottom: 25px; flex-grow: 1; } .card-features li { margin-bottom: 12px; display: flex; align-items: center; font-size: 0.9rem; color: var(--text-secondary); } .card-features li::before { content: "✓"; margin-right: 10px; font-size: 0.8rem; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .card-starter .card-features li::before { color: var(--accent-blue); } .card-pro .card-features li::before { color: var(--accent-purple); } .card-enterprise .card-features li::before { color: var(--accent-pink); } .card-button { background-color: transparent; color: var(--text-primary); border: 1px solid; padding: 12px 20px; border-radius: 8px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; font-family: 'Inter', sans-serif; } .card-button::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: width 0.3s ease; } .card-starter .card-button { border-color: var(--accent-blue); } .card-starter .card-button::before { background-color: var(--accent-blue); } .card-pro .card-button { border-color: var(--accent-purple); } .card-pro .card-button::before { background-color: var(--accent-purple); } .card-enterprise .card-button { border-color: var(--accent-pink); } .card-enterprise .card-button::before { background-color: var(--accent-pink); } .card-button:hover::before { width: 100%; } .card-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .savings-badge { display: inline-block; background-color: rgba(38, 203, 124, 0.1); color: var(--accent-green); font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-left: 8px; } .original-price { text-decoration: line-through; opacity: 0.5; font-size: 1rem; margin-right: 5px; } .faq-link { color: var(--text-secondary); font-size: 0.85rem; text-align: center; margin-top: 30px; display: block; text-decoration: none; } .faq-link:hover { color: var(--accent-purple); } .highlight-feature { color: var(--text-primary) !important; position: relative; } .tooltip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: var(--bg-secondary); border: 1px solid var(--border-color); padding: 5px 10px; border-radius: 5px; font-size: 0.7rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 10; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--border-color); } .highlight-feature:hover .tooltip { opacity: 1; } .glow-effect { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(188, 140, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%); pointer-events: none; transform: translate(-50%, -50%); z-index: 0; opacity: 0; transition: opacity 0.5s ease; } .pricing-card:hover .glow-effect { opacity: 1; } .pricing-guarantee { margin-top: 30px; text-align: center; font-size: 0.85rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; } .guarantee-icon { margin-right: 5px; width: 16px; height: 16px; fill: var(--accent-green); } @media (max-width: 700px) { .pricing-cards { grid-template-columns: 1fr; max-width: 350px; margin: 0 auto; } .pricing-header h1 { font-size: 2rem; } .pricing-header p { font-size: 0.9rem; padding: 0 10px; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(188, 140, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(188, 140, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(188, 140, 255, 0); } } .card-popular .card-button { animation: pulse 2s infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } </style> </head> <body> <div class="pricing-container"> <div class="pricing-header"> <h1>NeonVerse Studio</h1> <p>Professional design tools with neon-powered precision. Choose the plan that illuminates your creative journey.</p> </div> <div class="toggle-container"> <span class="toggle-text monthly active">Monthly</span> <label class="toggle-switch"> <input type="checkbox" id="billing-toggle"> <span class="toggle-slider"></span> </label> <span class="toggle-text annually">Annually</span> </div> <div class="pricing-cards"> <div class="pricing-card card-starter"> <div class="glow-effect"></div> <h3 class="card-tier">Starter</h3> <p class="card-description">Perfect for individual creators starting their digital journey</p> <div class="card-price monthly-price">$12</div> <div class="card-price annual-price" style="display: none;"><span class="original-price">$144</span>$96<span class="savings-badge">Save 33%</span></div> <div class="price-cycle monthly-cycle">per month</div> <div class="price-cycle annual-cycle" style="display: none;">per year</div> <ul class="card-features"> <li>3 design projects</li> <li>Basic neon effects library</li> <li>Standard export formats</li> <li>Community support</li> <li>7-day revision history</li> </ul> <button class="card-button">Get Started</button> </div> <div class="pricing-card card-pro card-popular"> <div class="popular-tag">Popular</div> <div class="glow-effect"></div> <h3 class="card-tier">Pro</h3> <p class="card-description">Advanced tools for professionals seeking creative excellence</p> <div class="card-price monthly-price">$24</div> <div class="card-price annual-price" style="display: none;"><span class="original-price">$288</span>$192<span class="savings-badge">Save 33%</span></div> <div class="price-cycle monthly-cycle">per month</div> <div class="price-cycle annual-cycle" style="display: none;">per year</div> <ul class="card-features"> <li>Unlimited design projects</li> <li class="highlight-feature">Advanced neon effects suite<span class="tooltip">300+ premium effects</span></li> <li>All export formats + source files</li> <li>Priority email support</li> <li>30-day revision history</li> <li>Custom color profiles</li> </ul> <button class="card-button">Upgrade to Pro</button> </div> <div class="pricing-card card-enterprise"> <div class="glow-effect"></div> <h3 class="card-tier">Enterprise</h3> <p class="card-description">Complete creative solution for teams and agencies</p> <div class="card-price monthly-price">$49</div> <div class="card-price annual-price" style="display: none;"><span class="original-price">$588</span>$392<span class="savings-badge">Save 33%</span></div> <div class="price-cycle monthly-cycle">per month</div> <div class="price-cycle annual-cycle" style="display: none;">per year</div> <ul class="card-features"> <li>Team collaboration (up to 10)</li> <li class="highlight-feature">Exclusive enterprise effects<span class="tooltip">Including AI-powered generators</span></li> <li>Advanced analytics dashboard</li> <li>Dedicated account manager</li> <li>Unlimited revision history</li> <li>White-labeling options</li> </ul> <button class="card-button">Contact Sales</button> </div> </div> <div class="pricing-guarantee"> <svg class="guarantee-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg> 14-day money-back guarantee. No questions asked. </div> <a href="#" class="faq-link">Have questions? View our FAQ</a> </div> <script> // Toggle between monthly and annual billing const billingToggle = document.getElementById('billing-toggle'); const monthlyPrices = document.querySelectorAll('.monthly-price'); const annualPrices = document.querySelectorAll('.annual-price'); const monthlyCycles = document.querySelectorAll('.monthly-cycle'); const annualCycles = document.querySelectorAll('.annual-cycle'); const monthlyText = document.querySelector('.toggle-text.monthly'); const annualText = document.querySelector('.toggle-text.annually'); billingToggle.addEventListener('change', function() { if (this.checked) { // Annual monthlyPrices.forEach(price => price.style.display = 'none'); annualPrices.forEach(price => price.style.display = 'block'); monthlyCycles.forEach(cycle => cycle.style.display = 'none'); annualCycles.forEach(cycle => cycle.style.display = 'block'); monthlyText.classList.remove('active'); annualText.classList.add('active'); } else { // Monthly monthlyPrices.forEach(price => price.style.display = 'block'); annualPrices.forEach(price => price.style.display = 'none'); monthlyCycles.forEach(cycle => cycle.style.display = 'block'); annualCycles.forEach(cycle => cycle.style.display = 'none'); monthlyText.classList.add('active'); annualText.classList.remove('active'); } }); // Glow effect on card hover const cards = document.querySelectorAll('.pricing-card'); cards.forEach(card => { const glowEffect = card.querySelector('.glow-effect'); card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; glowEffect.style.left = x + 'px'; glowEffect.style.top = y + 'px'; glowEffect.style.opacity = '1'; }); card.addEventListener('mouseleave', () => { glowEffect.style.opacity = '0'; }); }); // Prevent default on button clicks const buttons = document.querySelectorAll('.card-button'); buttons.forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); // Add a click effect button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = ''; }, 200); }); }); // Floating animation for the popular card const popularCard = document.querySelector('.card-popular'); if (popularCard) { popularCard.style.animation = 'float 3s ease-in-out infinite'; } </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gradient-Pop Pricing Table</title> <style> :root { --primary-gradient: linear-gradient(135deg, #ff6b6b, #ff8e53); --premium-gradient: linear-gradient(135deg, #4facfe, #00f2fe); --enterprise-gradient: linear-gradient(135deg, #667eea, #764ba2); --bg-color: #f8f9fa; --text-dark: #1e2022; --text-light: #ffffff; --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12); --border-radius: 16px; --card-spacing: 16px; --transition-slow: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); --transition-fast: 0.2s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px 0; perspective: 1000px; } .container { max-width: 700px; width: 100%; padding: 0 20px; } .header { text-align: center; margin-bottom: 40px; } .header h1 { font-size: 2.5rem; color: var(--text-dark); margin-bottom: 12px; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 60%; height: 4px; background: linear-gradient(90deg, #ff6b6b, #4facfe, #764ba2); border-radius: 2px; } .header p { font-size: 1.1rem; color: #6c757d; max-width: 600px; margin: 0 auto; } .pricing-toggle { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .pricing-toggle span { font-size: 1rem; font-weight: 500; color: #6c757d; margin: 0 10px; } .toggle-switch { position: relative; display: inline-block; width: 60px; height: 32px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e9ecef; border-radius: 34px; transition: var(--transition-fast); } .toggle-slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background: linear-gradient(135deg, #ff6b6b, #4facfe); border-radius: 50%; transition: var(--transition-fast); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } input:checked + .toggle-slider { background-color: #e9ecef; } input:checked + .toggle-slider:before { transform: translateX(28px); background: linear-gradient(135deg, #4facfe, #764ba2); } .pricing-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; perspective: 1000px; } .pricing-card { flex: 1; min-width: 200px; max-width: 300px; background: white; border-radius: var(--border-radius); overflow: hidden; padding: var(--card-spacing); box-shadow: var(--shadow-sm); transition: all var(--transition-slow); position: relative; transform-style: preserve-3d; z-index: 1; } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.95; border-radius: var(--border-radius); transition: opacity var(--transition-slow); } .starter::before { background: var(--primary-gradient); } .premium::before { background: var(--premium-gradient); } .enterprise::before { background: var(--enterprise-gradient); } .pricing-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: var(--shadow-lg); z-index: 2; } .pricing-card:hover::before { opacity: 1; } .pricing-card:hover .card-content { transform: translateZ(15px); } .card-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; transition: transform var(--transition-slow); } .card-icon { width: 80px; height: 80px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transition: transform var(--transition-fast); } .pricing-card:hover .card-icon { transform: rotate(10deg) scale(1.1); } .card-icon svg { width: 40px; height: 40px; fill: var(--text-light); } .card-title { font-size: 1.4rem; font-weight: 700; color: var(--text-light); margin-bottom: 5px; transition: transform var(--transition-fast); } .pricing-card:hover .card-title { transform: scale(1.05); } .card-subtitle { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; } .card-price { font-size: 2.2rem; font-weight: 800; color: var(--text-light); margin-bottom: 5px; display: flex; align-items: center; justify-content: center; } .price-currency { font-size: 1rem; font-weight: 600; margin-right: 2px; opacity: 0.9; } .price-duration { font-size: 0.9rem; font-weight: 500; opacity: 0.8; margin-left: 4px; } .annual-price { display: none; } .card-savings { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; background: rgba(255, 255, 255, 0.15); padding: 4px 10px; border-radius: 20px; display: inline-block; margin: 0 auto 20px; } .card-features { list-style-type: none; margin: 20px 0; flex-grow: 1; } .card-features li { color: rgba(255, 255, 255, 0.85); margin-bottom: 12px; font-size: 0.95rem; position: relative; padding-left: 28px; } .card-features li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: bold; color: var(--text-light); background: rgba(255, 255, 255, 0.2); width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; } .card-btn { padding: 12px 24px; border: none; border-radius: 30px; background: rgba(255, 255, 255, 0.2); color: var(--text-light); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all var(--transition-fast); margin-top: 10px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); } .card-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .popular-badge { position: absolute; top: -10px; right: 20px; background: #ff6b6b; color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4); transform: translateZ(30px); z-index: 2; } @media (max-width: 768px) { .pricing-cards { flex-direction: column; align-items: center; } .pricing-card { width: 100%; max-width: 350px; margin-bottom: 20px; } .header h1 { font-size: 2rem; } .header p { font-size: 1rem; } } /* Floating Particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; border-radius: 50%; opacity: 0.5; animation: float 15s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0) rotate(0); } 100% { transform: translateY(-100vh) translateX(20px) rotate(360deg); } } /* Bubble animation for features */ @keyframes bubbleUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .card-features li { animation: bubbleUp 0.3s forwards; opacity: 0; } .card-features li:nth-child(1) { animation-delay: 0.1s; } .card-features li:nth-child(2) { animation-delay: 0.2s; } .card-features li:nth-child(3) { animation-delay: 0.3s; } .card-features li:nth-child(4) { animation-delay: 0.4s; } .card-features li:nth-child(5) { animation-delay: 0.5s; } </style> </head> <body> <div class="particles" id="particles"></div> <div class="container"> <div class="header"> <h1>Choose Your Creative Suite</h1> <p>Unlock powerful design tools with our flexible pricing plans tailored for every creative professional</p> </div> <div class="pricing-toggle"> <span class="monthly-label">Monthly</span> <label class="toggle-switch"> <input type="checkbox" id="pricingToggle"> <span class="toggle-slider"></span> </label> <span class="annual-label">Annual</span> </div> <div class="pricing-cards"> <div class="pricing-card starter"> <div class="card-content"> <div class="card-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-2V13h2v5.5zm0-7h-2v-2h2v2zm4 7h-2V11h2v7.5zm0-9h-2v-2h2v2zm-8 9h-2v-4h2v4z"/> </svg> </div> <h3 class="card-title">Starter</h3> <p class="card-subtitle">Perfect for solo designers</p> <div class="card-price monthly-price"> <span class="price-currency">$</span>29<span class="price-duration">/mo</span> </div> <div class="card-price annual-price"> <span class="price-currency">$</span>24<span class="price-duration">/mo</span> </div> <div class="card-savings annual-savings">Save $60 yearly</div> <ul class="card-features"> <li>Essential design templates</li> <li>5GB cloud storage</li> <li>Basic font library</li> <li>Up to 3 projects</li> <li>Email support</li> </ul> <button class="card-btn">Get Started</button> </div> </div> <div class="pricing-card premium"> <div class="popular-badge">Most Popular</div> <div class="card-content"> <div class="card-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z"/> </svg> </div> <h3 class="card-title">Premium</h3> <p class="card-subtitle">Ideal for growing teams</p> <div class="card-price monthly-price"> <span class="price-currency">$</span>59<span class="price-duration">/mo</span> </div> <div class="card-price annual-price"> <span class="price-currency">$</span>49<span class="price-duration">/mo</span> </div> <div class="card-savings annual-savings">Save $120 yearly</div> <ul class="card-features"> <li>Advanced design templates</li> <li>25GB cloud storage</li> <li>Premium font collection</li> <li>Unlimited projects</li> <li>Priority support</li> </ul> <button class="card-btn">Choose Premium</button> </div> </div> <div class="pricing-card enterprise"> <div class="card-content"> <div class="card-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <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> <h3 class="card-title">Enterprise</h3> <p class="card-subtitle">For professional studios</p> <div class="card-price monthly-price"> <span class="price-currency">$</span>99<span class="price-duration">/mo</span> </div> <div class="card-price annual-price"> <span class="price-currency">$</span>79<span class="price-duration">/mo</span> </div> <div class="card-savings annual-savings">Save $240 yearly</div> <ul class="card-features"> <li>Exclusive design system</li> <li>Unlimited storage</li> <li>Complete asset library</li> <li>Team collaboration tools</li> <li>24/7 dedicated support</li> </ul> <button class="card-btn">Contact Sales</button> </div> </div> </div> </div> <script> // Toggle between monthly and annual pricing const pricingToggle = document.getElementById('pricingToggle'); const monthlyPrices = document.querySelectorAll('.monthly-price'); const annualPrices = document.querySelectorAll('.annual-price'); const annualSavings = document.querySelectorAll('.annual-savings'); pricingToggle.addEventListener('change', function() { if (this.checked) { monthlyPrices.forEach(price => price.style.display = 'none'); annualPrices.forEach(price => price.style.display = 'flex'); annualSavings.forEach(saving => saving.style.display = 'inline-block'); } else { monthlyPrices.forEach(price => price.style.display = 'flex'); annualPrices.forEach(price => price.style.display = 'none'); annualSavings.forEach(saving => saving.style.display = 'none'); } }); // Initially hide annual prices and savings window.addEventListener('DOMContentLoaded', () => { annualPrices.forEach(price => price.style.display = 'none'); annualSavings.forEach(saving => saving.style.display = 'none'); }); // Create floating particles function createParticles() { const particlesContainer = document.getElementById('particles'); const colors = ['#ff6b6b', '#4facfe', '#667eea', '#ff8e53', '#00f2fe', '#764ba2']; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 15 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = color; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.opacity = `${Math.random() * 0.3 + 0.1}`; // Set random animation duration and delay const duration = Math.random() * 15 + 10; const delay = Math.random() * 5; particle.style.animationDuration = `${duration}s`; particle.style.animationDelay = `${delay}s`; particlesContainer.appendChild(particle); } } createParticles(); // 3D tilt effect on hover const cards = document.querySelectorAll('.pricing-card'); cards.forEach(card => { card.addEventListener('mousemove', (e) => { const cardRect = card.getBoundingClientRect(); const cardCenterX = cardRect.left + cardRect.width / 2; const cardCenterY = cardRect.top + cardRect.height / 2; const mouseX = e.clientX - cardCenterX; const mouseY = e.clientY - cardCenterY; // Calculate rotation angle (max 10 degrees) const rotateY = mouseX / (cardRect.width / 2) * 5; const rotateX = -mouseY / (cardRect.height / 2) * 5; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`; }); card.addEventListener('mouseleave', () => { card.style.transform = ''; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #ff4757; --secondary: #2f3542; --accent: #5352ed; --light: #f1f2f6; --dark: #2f3542; --success: #2ed573; --warning: #ffa502; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--light); color: var(--dark); overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 700px; padding: 20px; } @font-face { font-family: 'Inter'; src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); } @font-face { font-family: 'Montserrat'; src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap'); } .container { max-width: 660px; margin: 0 auto; position: relative; } .retail-header { margin-bottom: 30px; text-align: center; position: relative; } .retail-title { font-family: var(--font-heading); font-weight: 800; font-size: 2.2rem; background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; position: relative; } .retail-subtitle { font-size: 1rem; color: var(--secondary); opacity: 0.8; max-width: 80%; margin: 0 auto; } .currency-selector { position: absolute; top: 10px; right: 0; display: flex; align-items: center; background: white; padding: 8px 12px; border-radius: 30px; box-shadow: var(--shadow); z-index: 10; } .currency-selector span { font-size: 0.75rem; margin-right: 8px; color: var(--secondary); opacity: 0.7; } .currency-options { display: flex; gap: 8px; } .currency-option { font-weight: 600; font-size: 0.85rem; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); user-select: none; } .currency-option.active { background-color: var(--primary); color: white; } .pricing-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; } .price-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); position: relative; display: flex; flex-direction: column; } .price-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .price-card.featured { border: 2px solid var(--primary); } .price-card.featured::before { content: "POPULAR"; position: absolute; top: 12px; right: 12px; background: var(--primary); color: white; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px; } .price-card-image { height: 110px; overflow: hidden; position: relative; } .price-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .price-card:hover .price-card-image img { transform: scale(1.1); } .price-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; } .price-card-tier { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; color: var(--dark); } .price-tag { display: flex; align-items: flex-start; margin-bottom: 15px; } .currency { font-size: 1.2rem; font-weight: 600; margin-right: 2px; color: var(--dark); } .amount { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--dark); } .period { font-size: 0.85rem; color: var(--secondary); opacity: 0.7; margin-left: 5px; align-self: flex-end; margin-bottom: 5px; } .old-price { font-size: 0.9rem; text-decoration: line-through; color: var(--secondary); opacity: 0.6; margin-left: 8px; display: inline-flex; align-items: center; } .discount-badge { background-color: var(--success); color: white; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; margin-left: 8px; display: inline-block; } .feature-list { list-style: none; margin: 15px 0; flex-grow: 1; } .feature-item { display: flex; align-items: center; margin-bottom: 12px; font-size: 0.9rem; color: var(--secondary); } .feature-icon { color: var(--success); font-size: 1rem; margin-right: 10px; flex-shrink: 0; } .feature-text { line-height: 1.3; } .cta-button { background: var(--secondary); color: white; border: none; border-radius: 30px; font-weight: 600; font-size: 0.9rem; padding: 12px 20px; cursor: pointer; transition: var(--transition); width: 100%; text-align: center; margin-top: 10px; display: flex; align-items: center; justify-content: center; } .featured .cta-button { background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .featured .cta-button:hover { box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4); } .promo-banner { background: linear-gradient(45deg, var(--secondary), var(--dark)); border-radius: 12px; padding: 20px; color: white; position: relative; overflow: hidden; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; } .promo-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.3; } .promo-content { flex: 1; position: relative; z-index: 2; } .promo-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; display: flex; align-items: center; } .promo-title i { margin-right: 8px; color: var(--warning); } .promo-text { font-size: 0.85rem; opacity: 0.9; line-height: 1.4; margin-bottom: 0; } .promo-code { background: rgba(255, 255, 255, 0.2); padding: 6px 16px; border-radius: 20px; font-weight: 700; letter-spacing: 1px; font-size: 0.9rem; margin-left: 15px; } .region-select { margin-bottom: 20px; display: flex; justify-content: center; gap: 10px; } .region-option { background: white; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 30px; padding: 8px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; user-select: none; } .region-option i { margin-right: 6px; font-size: 0.9rem; } .region-option:hover { border-color: var(--accent); transform: translateY(-2px); } .region-option.active { background: var(--accent); color: white; border-color: var(--accent); } @media (max-width: 700px) { .pricing-table { grid-template-columns: 1fr; gap: 15px; } .retail-title { font-size: 1.8rem; } .price-card-image { height: 100px; } .currency-selector { position: relative; top: 0; right: 0; margin: 0 auto 20px; justify-content: center; } .retail-subtitle { max-width: 100%; } .region-select { flex-wrap: wrap; justify-content: center; } } /* Animation classes */ .price-pulse { animation: pulsate 1.5s ease-in-out; } @keyframes pulsate { 0% { transform: scale(1); } 50% { transform: scale(1.05); color: var(--primary); } 100% { transform: scale(1); } } /* Tooltip */ .tooltip { position: relative; } .tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--dark); color: white; font-size: 0.7rem; padding: 5px 10px; border-radius: 5px; white-space: nowrap; z-index: 10; margin-bottom: 5px; } .tooltip:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dark); margin-bottom: -5px; z-index: 10; } /* Utility classes */ .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Font Awesome Icons (minimal subset) */ .fa { font-family: Arial, sans-serif; font-weight: 900; display: inline-block; } .fa-check::before { content: '✓'; color: var(--success); } .fa-tag::before { content: '🏷️'; } .fa-globe-americas::before { content: '🌎'; } .fa-globe-europe::before { content: '🌍'; } .fa-globe-asia::before { content: '🌏'; } </style> </head> <body> <div class="container"> <div class="retail-header"> <h1 class="retail-title">ShopSmart Retail Solutions</h1> <p class="retail-subtitle">Scale your retail business with our customized pricing plans tailored to your regional market</p> </div> <div class="currency-selector"> <span>Currency:</span> <div class="currency-options"> <div class="currency-option active" data-currency="USD">$</div> <div class="currency-option" data-currency="EUR">€</div> <div class="currency-option" data-currency="GBP">£</div> </div> </div> <div class="region-select"> <div class="region-option active" data-region="americas"> <i class="fa fa-globe-americas"></i> Americas </div> <div class="region-option" data-region="europe"> <i class="fa fa-globe-europe"></i> Europe </div> <div class="region-option" data-region="asia"> <i class="fa fa-globe-asia"></i> Asia-Pacific </div> </div> <div class="pricing-table"> <div class="price-card fade-in"> <div class="price-card-image"> <img src="https://images.unsplash.com/photo-1556742031-c6961e8560b0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Starter package"> </div> <div class="price-card-content"> <h3 class="price-card-tier">Starter</h3> <div class="price-tag"> <span class="currency">$</span> <span class="amount" data-usd="29" data-eur="26" data-gbp="22">29</span> <span class="period">/month</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Single retail location support</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Basic inventory management</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Standard POS integration</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text tooltip" data-tooltip="9am-5pm Mon-Fri">Email support</span> </li> </ul> <button class="cta-button">Get Started</button> </div> </div> <div class="price-card featured fade-in" style="animation-delay: 0.1s"> <div class="price-card-image"> <img src="https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Growth package"> </div> <div class="price-card-content"> <h3 class="price-card-tier">Growth</h3> <div class="price-tag"> <span class="currency">$</span> <span class="amount" data-usd="89" data-eur="79" data-gbp="69">89</span> <span class="period">/month</span> <span class="old-price">$119</span> <span class="discount-badge">SAVE 25%</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Up to 5 retail locations</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Advanced inventory forecasting</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Multi-channel sales integration</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Customer loyalty program</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Priority support (24/7)</span> </li> </ul> <button class="cta-button">Choose Growth</button> </div> </div> <div class="price-card fade-in" style="animation-delay: 0.2s"> <div class="price-card-image"> <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Enterprise package"> </div> <div class="price-card-content"> <h3 class="price-card-tier">Enterprise</h3> <div class="price-tag"> <span class="currency">$</span> <span class="amount" data-usd="219" data-eur="199" data-gbp="179">219</span> <span class="period">/month</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Unlimited retail locations</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">AI-powered demand forecasting</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Custom API integrations</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Advanced analytics dashboard</span> </li> <li class="feature-item"> <span class="feature-icon fa fa-check"></span> <span class="feature-text">Dedicated account manager</span> </li> </ul> <button class="cta-button">Contact Sales</button> </div> </div> </div> <div class="promo-banner fade-in" style="animation-delay: 0.3s"> <div class="promo-content"> <div class="promo-title"> <i class="fa fa-tag"></i> Summer Retail Special </div> <p class="promo-text">Get 3 months free when you pay annually on any plan!</p> </div> <div class="promo-code">RETAIL25</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Currency switcher const currencyOptions = document.querySelectorAll('.currency-option'); const currencySymbols = { 'USD': '$', 'EUR': '€', 'GBP': '£' }; currencyOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options currencyOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Get selected currency const currency = this.getAttribute('data-currency'); // Update currency symbol document.querySelectorAll('.currency').forEach(el => { el.textContent = currencySymbols[currency]; }); // Update amounts with animation document.querySelectorAll('.amount').forEach(el => { const value = el.getAttribute(`data-${currency.toLowerCase()}`); el.classList.add('price-pulse'); el.textContent = value; setTimeout(() => { el.classList.remove('price-pulse'); }, 1500); }); }); }); // Region selector const regionOptions = document.querySelectorAll('.region-option'); const pricingTable = document.querySelector('.pricing-table'); const regionPricing = { 'americas': { 'starter': { 'USD': 29, 'EUR': 26, 'GBP': 22 }, 'growth': { 'USD': 89, 'EUR': 79, 'GBP': 69 }, 'enterprise': { 'USD': 219, 'EUR': 199, 'GBP': 179 } }, 'europe': { 'starter': { 'USD': 32, 'EUR': 29, 'GBP': 25 }, 'growth': { 'USD': 99, 'EUR': 89, 'GBP': 79 }, 'enterprise': { 'USD': 239, 'EUR': 219, 'GBP': 199 } }, 'asia': { 'starter': { 'USD': 27, 'EUR': 24, 'GBP': 20 }, 'growth': { 'USD': 79, 'EUR': 69, 'GBP': 59 }, 'enterprise': { 'USD': 199, 'EUR': 179, 'GBP': 159 } } }; const priceTiers = ['starter', 'growth', 'enterprise']; regionOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options regionOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Get selected region const region = this.getAttribute('data-region'); // Get current currency const currentCurrency = document.querySelector('.currency-option.active').getAttribute('data-currency'); // Update prices for current region priceTiers.forEach((tier, index) => { const amountEl = document.querySelectorAll('.amount')[index]; const newPrice = regionPricing[region][tier][currentCurrency]; // Temporarily hide the pricing table pricingTable.style.opacity = '0.5'; // Update data attributes Object.keys(regionPricing[region][tier]).forEach(currency => { amountEl.setAttribute(`data-${currency.toLowerCase()}`, regionPricing[region][tier][currency]); }); // Update visible price setTimeout(() => { amountEl.textContent = newPrice; // Show the pricing table pricingTable.style.opacity = '1'; pricingTable.classList.add('fade-in'); // Remove animation class setTimeout(() => { pricingTable.classList.remove('fade-in'); }, 500); }, 300); }); }); }); // Add hover animations for CTA buttons const ctaButtons = document.querySelectorAll('.cta-button'); ctaButtons.forEach(button => { button.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); button.addEventListener('click', function(e) { e.preventDefault(); // Animation effect on click this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 150); const tierName = this.closest('.price-card').querySelector('.price-card-tier').textContent; const price = this.closest('.price-card').querySelector('.amount').textContent; const currency = this.closest('.price-card').querySelector('.currency').textContent; console.log(`Selected ${tierName} plan at ${currency}${price}`); }); }); // Promo code interaction const promoCode = document.querySelector('.promo-code'); promoCode.addEventListener('click', function() { const originalText = this.textContent; this.textContent = 'Copied!'; this.style.backgroundColor = 'rgba(46, 213, 115, 0.5)'; // Copy to clipboard navigator.clipboard.writeText(originalText).then(() => { setTimeout(() => { this.textContent = originalText; this.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; }, 1500); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elegant Subscription Pricing</title> <style> :root { --color-bg: #f9f7f5; --color-text: #2d2b2a; --color-muted: #8a8584; --color-accent: #c8b6a6; --color-accent-hover: #d9cfc4; --color-highlight: #e8d8c9; --color-card: #ffffff; --color-card-popular: #f5f1ee; --font-primary: 'Baskerville', 'Garamond', serif; --font-secondary: 'Avenir', 'Montserrat', sans-serif; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2.5rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.07); --transition-fast: 0.2s ease; --transition-medium: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-secondary); line-height: 1.6; padding: var(--spacing-md); height: 100%; display: flex; justify-content: center; align-items: center; overflow-x: hidden; } .container { max-width: 700px; width: 100%; margin: 0 auto; } .pricing-header { text-align: center; margin-bottom: var(--spacing-md); } h1 { font-family: var(--font-primary); font-weight: 400; font-size: 2.2rem; letter-spacing: -0.01em; margin-bottom: var(--spacing-xs); color: var(--color-text); position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 40px; height: 2px; background-color: var(--color-accent); bottom: -8px; left: 50%; transform: translateX(-50%); transition: width var(--transition-medium); } h1:hover::after { width: 70px; } .header-description { color: var(--color-muted); font-size: 0.95rem; max-width: 500px; margin: 0 auto; font-weight: 300; } .toggle-container { display: flex; justify-content: center; align-items: center; margin: var(--spacing-md) 0; } .toggle-label { font-size: 0.9rem; color: var(--color-muted); cursor: pointer; transition: color var(--transition-fast); } .toggle-label.active { color: var(--color-text); font-weight: 500; } .toggle-switch { position: relative; width: 50px; height: 24px; margin: 0 var(--spacing-sm); background-color: var(--color-accent); border-radius: 30px; cursor: pointer; transition: background-color var(--transition-fast); } .toggle-switch::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background-color: white; border-radius: 50%; transition: transform var(--transition-medium); } .toggle-switch.yearly::after { transform: translateX(26px); } .savings-badge { background-color: var(--color-highlight); color: var(--color-text); font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-md); margin-left: var(--spacing-xs); opacity: 0; transform: translateX(-10px); transition: opacity var(--transition-medium), transform var(--transition-medium); } .savings-badge.visible { opacity: 1; transform: translateX(0); } .pricing-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .pricing-card { background-color: var(--color-card); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); transition: transform var(--transition-medium), box-shadow var(--transition-medium); position: relative; overflow: hidden; } .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .pricing-card.popular { background-color: var(--color-card-popular); transform: scale(1.03); } .pricing-card.popular:hover { transform: scale(1.03) translateY(-5px); } .popular-badge { position: absolute; top: 12px; right: 12px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); background-color: var(--color-highlight); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); opacity: 0.9; } .tier-title { font-family: var(--font-primary); font-size: 1.2rem; margin-bottom: var(--spacing-xs); font-weight: 500; } .tier-description { color: var(--color-muted); font-size: 0.85rem; margin-bottom: var(--spacing-md); min-height: 40px; } .price-container { margin-bottom: var(--spacing-md); } .price { font-family: var(--font-primary); font-size: 2.2rem; display: inline-block; margin-right: 4px; position: relative; } .price-currency { position: absolute; font-size: 1rem; top: 0.3rem; left: -0.8rem; color: var(--color-muted); } .price-period { font-size: 0.85rem; color: var(--color-muted); vertical-align: middle; } .original-price { text-decoration: line-through; font-size: 1rem; color: var(--color-muted); margin-right: 0.5rem; opacity: 0; transition: opacity var(--transition-medium); } .original-price.visible { opacity: 1; } .feature-list { list-style: none; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .feature-item { display: flex; align-items: flex-start; margin-bottom: var(--spacing-xs); font-size: 0.9rem; } .feature-icon { width: 16px; height: 16px; margin-right: 8px; color: var(--color-accent); opacity: 0.8; flex-shrink: 0; margin-top: 4px; } .feature-text { line-height: 1.5; } .cta-button { width: 100%; background-color: transparent; color: var(--color-text); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); padding: var(--spacing-xs) var(--spacing-sm); font-family: var(--font-secondary); font-size: 0.9rem; cursor: pointer; transition: background-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast); position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--color-accent); transition: transform var(--transition-medium); z-index: -1; transform: skewX(-15deg); } .cta-button:hover::before { transform: translateX(100%) skewX(-15deg); } .cta-button:hover { color: var(--color-text); background-color: var(--color-accent-hover); } .cta-button:active { transform: scale(0.98); } .pricing-card.popular .cta-button { background-color: var(--color-accent); color: white; border-color: var(--color-accent); } .pricing-card.popular .cta-button:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .guarantee { text-align: center; font-size: 0.8rem; color: var(--color-muted); margin-top: var(--spacing-md); opacity: 0.8; } .guarantee-highlight { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } @media (max-width: 700px) { .pricing-cards { grid-template-columns: 1fr; gap: var(--spacing-sm); } .pricing-card { margin-bottom: var(--spacing-sm); transform: none !important; } .pricing-card.popular { transform: none !important; order: -1; } .tier-description { min-height: auto; } h1 { font-size: 1.8rem; } .header-description { font-size: 0.85rem; } } @media (min-width: 701px) and (max-width: 900px) { .pricing-cards { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); } } /* Elegant animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .pricing-card { animation: fadeIn var(--transition-medium) forwards; } .pricing-card:nth-child(1) { animation-delay: 0.1s; } .pricing-card:nth-child(2) { animation-delay: 0.2s; } .pricing-card:nth-child(3) { animation-delay: 0.3s; } /* Custom Decorative Element */ .elegant-decorator { position: absolute; width: 80px; height: 80px; border-radius: 50%; background-color: var(--color-accent); opacity: 0.05; z-index: 0; transition: transform var(--transition-slow); } .pricing-card:hover .elegant-decorator { transform: scale(1.5); } </style> </head> <body> <div class="container"> <div class="pricing-header"> <h1>Curated Artisanal Collections</h1> <p class="header-description">Experience our handpicked selections delivered to your doorstep with a subscription that suits your refined taste.</p> </div> <div class="toggle-container"> <span class="toggle-label monthly active">Monthly</span> <div class="toggle-switch"></div> <span class="toggle-label yearly">Annually</span> <span class="savings-badge">Save 16%</span> </div> <div class="pricing-cards"> <div class="pricing-card"> <div class="elegant-decorator" style="top: -20px; right: -20px;"></div> <h3 class="tier-title">Essential</h3> <p class="tier-description">Perfect for newcomers seeking to explore the finer things.</p> <div class="price-container"> <span class="original-price">$<span class="original-price-value">36</span></span> <span class="price"><span class="price-currency">$</span><span class="price-value">29</span></span> <span class="price-period">/month</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Monthly curated selection</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Digital collection guidebook</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Access to member events</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Customization options</span> </li> </ul> <button class="cta-button">Begin Your Journey</button> </div> <div class="pricing-card popular"> <div class="elegant-decorator" style="top: -40px; left: 50%; transform: translateX(-50%);"></div> <span class="popular-badge">Most Popular</span> <h3 class="tier-title">Connoisseur</h3> <p class="tier-description">Elevated selections for the discerning individual.</p> <div class="price-container"> <span class="original-price">$<span class="original-price-value">69</span></span> <span class="price"><span class="price-currency">$</span><span class="price-value">59</span></span> <span class="price-period">/month</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Premium curated selection</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Artisan stories & provenance</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Early access to limited editions</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Personalized curator consultation</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Complimentary gift wrapping</span> </li> </ul> <button class="cta-button">Elevate Your Experience</button> </div> <div class="pricing-card"> <div class="elegant-decorator" style="bottom: -20px; left: -20px;"></div> <h3 class="tier-title">Virtuoso</h3> <p class="tier-description">The pinnacle of curation for the true aficionado.</p> <div class="price-container"> <span class="original-price">$<span class="original-price-value">119</span></span> <span class="price"><span class="price-currency">$</span><span class="price-value">99</span></span> <span class="price-period">/month</span> </div> <ul class="feature-list"> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Rare & exclusive selections</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Private atelier visits</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Bespoke customization</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Priority concierge service</span> </li> <li class="feature-item"> <span class="feature-icon">✦</span> <span class="feature-text">Seasonal collector's items</span> </li> </ul> <button class="cta-button">Indulge in Excellence</button> </div> </div> <div class="guarantee"> <p>All subscriptions include a <span class="guarantee-highlight">30-day satisfaction guarantee</span> and can be paused or modified at any time.</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const toggleSwitch = document.querySelector('.toggle-switch'); const monthlyLabel = document.querySelector('.toggle-label.monthly'); const yearlyLabel = document.querySelector('.toggle-label.yearly'); const savingsBadge = document.querySelector('.savings-badge'); const priceElements = document.querySelectorAll('.price-value'); const originalPrices = document.querySelectorAll('.original-price'); const originalPriceValues = document.querySelectorAll('.original-price-value'); const periodElements = document.querySelectorAll('.price-period'); const monthlyPrices = [29, 59, 99]; const yearlyPrices = [24, 49, 83]; // Prices calculation for original prices (showing the savings) const originalMonthlyPrices = [36, 69, 119]; const originalYearlyPrices = [29, 59, 99]; toggleSwitch.addEventListener('click', function() { toggleSwitch.classList.toggle('yearly'); monthlyLabel.classList.toggle('active'); yearlyLabel.classList.toggle('active'); savingsBadge.classList.toggle('visible'); const isYearly = toggleSwitch.classList.contains('yearly'); priceElements.forEach((price, index) => { // Animate price change const startValue = parseInt(price.textContent); const endValue = isYearly ? yearlyPrices[index] : monthlyPrices[index]; const duration = 400; const startTime = performance.now(); function updatePrice(currentTime) { const elapsedTime = currentTime - startTime; if (elapsedTime < duration) { const progress = elapsedTime / duration; const currentValue = Math.round(startValue + (endValue - startValue) * progress); price.textContent = currentValue; requestAnimationFrame(updatePrice); } else { price.textContent = endValue; } } requestAnimationFrame(updatePrice); // Update period text periodElements[index].textContent = isYearly ? '/month, billed annually' : '/month'; // Show original prices with line-through for yearly plan to highlight savings if (isYearly) { originalPrices[index].classList.add('visible'); originalPriceValues[index].textContent = originalYearlyPrices[index]; } else { originalPrices[index].classList.remove('visible'); } }); }); // Elegant hover effects for pricing cards const pricingCards = document.querySelectorAll('.pricing-card'); pricingCards.forEach(card => { card.addEventListener('mouseenter', function() { const ctaButton = this.querySelector('.cta-button'); ctaButton.style.transform = 'translateY(-2px)'; }); card.addEventListener('mouseleave', function() { const ctaButton = this.querySelector('.cta-button'); ctaButton.style.transform = 'translateY(0)'; }); }); // Add ripple effect to buttons const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback only, no actual submission const ripple = document.createElement('span'); ripple.classList.add('ripple'); const diameter = Math.max(button.clientWidth, button.clientHeight); const radius = diameter / 2; ripple.style.width = ripple.style.height = `${diameter}px`; ripple.style.left = `${e.clientX - button.getBoundingClientRect().left - radius}px`; ripple.style.top = `${e.clientY - button.getBoundingClientRect().top - radius}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Show "selected" state temporarily this.classList.add('selected'); setTimeout(() => { this.classList.remove('selected'); }, 800); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Startup Pricing Plans</title> <style> :root { --primary: #5664FF; --primary-light: #7A85FF; --secondary: #FF6B6B; --dark: #2A3041; --light: #F9FAFF; --gray: #8A93A7; --gray-light: #EFF1F8; --success: #41C79D; --radius: 16px; --shadow-sm: 0 2px 8px rgba(86, 100, 255, 0.08); --shadow-md: 0 8px 24px rgba(42, 48, 65, 0.12); --shadow-lg: 0 16px 32px rgba(42, 48, 65, 0.15); --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; overflow-x: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .pricing-container { max-width: 700px; width: 100%; padding: 20px; display: flex; flex-direction: column; } .pricing-header { text-align: center; margin-bottom: 30px; position: relative; } .pricing-header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; background: linear-gradient(120deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } .pricing-header p { font-size: 1rem; color: var(--gray); max-width: 500px; margin: 0 auto; } .pricing-tabs { display: flex; justify-content: center; margin-bottom: 30px; padding: 6px; background-color: var(--gray-light); border-radius: 30px; width: fit-content; margin-left: auto; margin-right: auto; position: relative; } .pricing-tab { padding: 8px 20px; cursor: pointer; font-weight: 600; transition: var(--transition); position: relative; z-index: 2; font-size: 0.9rem; } .tab-slider { position: absolute; left: 6px; top: 6px; height: calc(100% - 12px); width: calc(50% - 6px); background-color: white; border-radius: 25px; box-shadow: var(--shadow-sm); transition: var(--transition); z-index: 1; } .pricing-tab.active { color: var(--primary); } .pricing-card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; position: relative; } .pricing-card { background-color: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; position: relative; transition: var(--transition); overflow: hidden; display: flex; flex-direction: column; height: 100%; z-index: 1; } .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .popular-badge { position: absolute; top: 12px; right: 12px; background-color: var(--success); color: white; font-size: 0.7rem; font-weight: 600; padding: 4px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: 0.5px; } .card-accent { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-light)); } .pricing-card.featured { border: 2px solid var(--primary); box-shadow: var(--shadow-md); } .pricing-card.featured::before { content: ""; position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); border-radius: calc(var(--radius) + 5px); background: linear-gradient(45deg, var(--primary), transparent 70%); opacity: 0.1; z-index: -1; } .package-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; } .package-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: var(--primary); border-radius: 8px; margin-right: 10px; } .package-icon svg { width: 16px; height: 16px; fill: white; } .package-description { font-size: 0.9rem; color: var(--gray); margin-bottom: 20px; } .price-value { font-size: 2.5rem; font-weight: 800; margin-bottom: 4px; display: flex; align-items: baseline; } .currency { font-size: 1rem; font-weight: 600; margin-right: 4px; } .billing-cycle { font-size: 0.9rem; color: var(--gray); margin-bottom: 20px; } .features-list { list-style-type: none; margin-top: 20px; margin-bottom: 30px; flex-grow: 1; } .feature-item { display: flex; align-items: flex-start; margin-bottom: 12px; font-size: 0.95rem; } .check-icon { display: inline-flex; margin-right: 10px; color: var(--success); transform: translateY(2px); } .info-icon { display: inline-flex; margin-left: 6px; opacity: 0.5; cursor: help; position: relative; transition: var(--transition); } .info-icon:hover { opacity: 1; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); min-width: 200px; background-color: var(--dark); color: white; padding: 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 400; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none; z-index: 10; } .info-icon:hover .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-10px); } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--dark) transparent transparent transparent; } .cta-button { display: inline-block; background-color: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; padding: 12px 20px; font-weight: 600; cursor: pointer; text-align: center; transition: var(--transition); text-decoration: none; outline: none; width: 100%; position: relative; overflow: hidden; z-index: 1; font-size: 0.95rem; } .cta-button.primary { background-color: var(--primary); color: white; } .cta-button::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--primary); transition: width 0.3s ease; z-index: -1; } .cta-button:not(.primary):hover { color: white; } .cta-button:not(.primary):hover::before { width: 100%; } .cta-button.primary::before { background-color: var(--primary-light); } .cta-button.primary:hover::before { width: 100%; } .pattern { position: absolute; bottom: -20px; right: -20px; width: 120px; height: 120px; opacity: 0.05; background-image: radial-gradient(var(--primary) 2px, transparent 2px); background-size: 18px 18px; z-index: 0; } .annual-savings { display: inline-block; background-color: rgba(65, 199, 157, 0.1); color: var(--success); font-size: 0.8rem; font-weight: 600; padding: 2px 10px; border-radius: 4px; margin-left: 10px; } .guarantee { text-align: center; margin-top: 40px; font-size: 0.9rem; color: var(--gray); display: flex; align-items: center; justify-content: center; } .guarantee-icon { margin-right: 8px; color: var(--success); } @media (max-width: 600px) { .pricing-card-container { grid-template-columns: 1fr; } .pricing-card { margin-bottom: 20px; } .pricing-header h1 { font-size: 2rem; } } /* Animated elements */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-pulse { animation: pulse 2s infinite; animation-delay: 2s; } </style> </head> <body> <div class="pricing-container"> <div class="pricing-header"> <h1>Startup Pricing Plans</h1> <p>Tailored packages for startups at any stage. Simple, transparent pricing to help you scale without breaking the bank.</p> </div> <div class="pricing-tabs"> <div class="pricing-tab active" data-type="monthly">Monthly</div> <div class="pricing-tab" data-type="annual">Annual</div> <div class="tab-slider"></div> </div> <div class="pricing-card-container"> <div class="pricing-card"> <div class="card-accent"></div> <div class="pattern"></div> <div class="package-name"> <div class="package-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M13 19h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2z"/> </svg> </div> Seed </div> <p class="package-description">Perfect for pre-seed startups and solo founders validating their ideas.</p> <div class="pricing-values"> <div class="monthly-price price-active"> <div class="price-value"><span class="currency">$</span>29</div> <div class="billing-cycle">per month</div> </div> <div class="annual-price price-hidden"> <div class="price-value"><span class="currency">$</span>24</div> <div class="billing-cycle">per month, billed annually <span class="annual-savings">Save 17%</span></div> </div> </div> <ul class="features-list"> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Up to 1,000 active users</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Product analytics</span> <span class="info-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/> </svg> <span class="tooltip">Basic event tracking and user behavior analysis, limited to 10 custom events per month.</span> </span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Email support (24h response)</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>1 team member</span> </li> </ul> <button class="cta-button">Get Started</button> </div> <div class="pricing-card featured"> <div class="popular-badge">Most Popular</div> <div class="card-accent"></div> <div class="pattern"></div> <div class="package-name"> <div class="package-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6h-6z"/> </svg> </div> Growth </div> <p class="package-description">For funded startups ready to accelerate growth and expand operations.</p> <div class="pricing-values"> <div class="monthly-price price-active"> <div class="price-value"><span class="currency">$</span>99</div> <div class="billing-cycle">per month</div> </div> <div class="annual-price price-hidden"> <div class="price-value"><span class="currency">$</span>79</div> <div class="billing-cycle">per month, billed annually <span class="annual-savings">Save 20%</span></div> </div> </div> <ul class="features-list"> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Up to 25,000 active users</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Advanced analytics suite</span> <span class="info-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/> </svg> <span class="tooltip">Unlimited event tracking, cohort analysis, funnel visualization, retention tracking, and user segmentation.</span> </span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>A/B testing capabilities</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Priority email support (12h)</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Up to 10 team members</span> </li> </ul> <button class="cta-button primary animate-pulse">Get Started</button> </div> <div class="pricing-card"> <div class="card-accent"></div> <div class="pattern"></div> <div class="package-name"> <div class="package-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> </svg> </div> Scale </div> <p class="package-description">For rapidly scaling startups with enterprise-grade requirements.</p> <div class="pricing-values"> <div class="monthly-price price-active"> <div class="price-value"><span class="currency">$</span>299</div> <div class="billing-cycle">per month</div> </div> <div class="annual-price price-hidden"> <div class="price-value"><span class="currency">$</span>229</div> <div class="billing-cycle">per month, billed annually <span class="annual-savings">Save 23%</span></div> </div> </div> <ul class="features-list"> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Unlimited active users</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Enterprise analytics</span> <span class="info-icon"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/> </svg> <span class="tooltip">Everything in Growth plus predictive analytics, custom data retention policies, and dedicated data warehouse integration.</span> </span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Multi-variant testing & rollouts</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Dedicated success manager</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>99.9% uptime SLA</span> </li> <li class="feature-item"> <span class="check-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/> </svg> </span> <span>Unlimited team members</span> </li> </ul> <button class="cta-button">Get Started</button> </div> </div> <div class="guarantee"> <span class="guarantee-icon"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <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" fill="currentColor"/> </svg> </span> <span>14-day money-back guarantee. No contracts, cancel anytime.</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const monthlyTab = document.querySelector('.pricing-tab[data-type="monthly"]'); const annualTab = document.querySelector('.pricing-tab[data-type="annual"]'); const tabSlider = document.querySelector('.tab-slider'); const monthlyPrices = document.querySelectorAll('.monthly-price'); const annualPrices = document.querySelectorAll('.annual-price'); function setActiveTab(tab) { // Remove active class from both tabs monthlyTab.classList.remove('active'); annualTab.classList.remove('active'); // Add active class to clicked tab tab.classList.add('active'); // Move slider if (tab === monthlyTab) { tabSlider.style.transform = 'translateX(0)'; // Show monthly prices monthlyPrices.forEach(price => { price.style.display = 'block'; }); annualPrices.forEach(price => { price.style.display = 'none'; }); } else { tabSlider.style.transform = 'translateX(100%)'; // Show annual prices monthlyPrices.forEach(price => { price.style.display = 'none'; }); annualPrices.forEach(price => { price.style.display = 'block'; }); } } monthlyTab.addEventListener('click', function() { setActiveTab(monthlyTab); }); annualTab.addEventListener('click', function() { setActiveTab(annualTab); }); // Interactive button effects const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('mousedown', function() { this.style.transform = 'scale(0.98)'; }); button.addEventListener('mouseup', function() { this.style.transform = 'scale(1)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); }); }); </script> </body> </html>
<html> <head> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #5b21b6; --primary-light: #7c3aed; --primary-dark: #4c1d95; --accent: #10b981; --accent-light: #34d399; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-600: #4b5563; --gray-800: #1f2937; --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } html, body { height: 100%; width: 100%; overflow-x: hidden; background-color: #f8fafc; } .container { max-width: 700px; min-height: 700px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .header { text-align: center; animation: fadeIn 0.8s ease-out; } .header h1 { color: var(--gray-800); margin-bottom: 0.5rem; font-size: 2rem; font-weight: 700; background: linear-gradient(45deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .header p { color: var(--gray-600); font-size: 1rem; max-width: 85%; margin: 0 auto; line-height: 1.5; } .calculator { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); transition: box-shadow 0.3s ease; position: relative; overflow: hidden; animation: slideUp 0.5s ease-out 0.3s both; } .calculator:hover { box-shadow: var(--shadow-lg); } .calculator::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--primary), var(--accent)); } .calculator-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .calculator-title h2 { font-size: 1.5rem; color: var(--gray-800); font-weight: 600; } .calculator-title .price-display { display: flex; flex-direction: column; align-items: flex-end; } .price-value { font-size: 2rem; font-weight: 700; color: var(--accent); transition: all 0.3s ease; } .price-period { font-size: 0.875rem; color: var(--gray-400); } .controls { display: grid; gap: 1.5rem; } .control-group { display: flex; flex-direction: column; gap: 0.75rem; } .control-header { display: flex; justify-content: space-between; align-items: baseline; } .control-label { font-size: 1rem; font-weight: 500; color: var(--gray-600); } .control-value { font-size: 1rem; font-weight: 600; color: var(--primary); } .slider-container { position: relative; height: 38px; display: flex; align-items: center; } .slider-track { position: absolute; width: 100%; height: 8px; background-color: var(--gray-200); border-radius: 9999px; overflow: hidden; } .slider-fill { position: absolute; height: 100%; background: linear-gradient(90deg, var(--primary-light), var(--primary)); border-radius: 9999px; transition: width 0.2s ease; } .slider { -webkit-appearance: none; width: 100%; height: 8px; background: transparent; position: relative; z-index: 2; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: white; border: 2px solid var(--primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; } .slider::-webkit-slider-thumb:hover { background: var(--primary-light); transform: scale(1.1); } .slider::-moz-range-thumb { width: 22px; height: 22px; background: white; border: 2px solid var(--primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; } .slider::-moz-range-thumb:hover { background: var(--primary-light); transform: scale(1.1); } .slider-ticks { position: absolute; width: 100%; height: 10px; display: flex; justify-content: space-between; padding: 0 11px; bottom: -5px; } .tick { width: 2px; height: 8px; background-color: var(--gray-300); position: relative; } .tick-label { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: var(--gray-400); white-space: nowrap; } .features-table { margin-top: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); animation: slideUp 0.5s ease-out 0.5s both; } .features-table table { width: 100%; border-collapse: collapse; } .features-table th, .features-table td { padding: 0.75rem 1rem; text-align: left; font-size: 0.875rem; } .features-table th { background-color: var(--gray-100); color: var(--gray-600); font-weight: 500; } .features-table td { border-top: 1px solid var(--gray-200); color: var(--gray-800); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; margin-right: 0.5rem; color: white; background-color: var(--accent); font-size: 0.75rem; } .feature-available { color: var(--accent); font-weight: 500; } .feature-unavailable { color: var(--gray-400); text-decoration: line-through; } .summary { margin-top: 0.5rem; background: white; border-radius: 12px; padding: 1.25rem; box-shadow: var(--shadow); animation: slideUp 0.5s ease-out 0.7s both; } .summary h3 { font-size: 1.125rem; color: var(--gray-800); margin-bottom: 0.75rem; font-weight: 600; } .summary-items { display: grid; gap: 0.75rem; } .summary-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--gray-200); } .summary-item:last-child { border-bottom: none; } .summary-label { font-size: 0.875rem; color: var(--gray-600); } .summary-value { font-size: 0.875rem; font-weight: 500; color: var(--gray-800); } .total-row { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 2px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; } .total-label { font-size: 1rem; font-weight: 600; color: var(--gray-800); } .total-value { font-size: 1.25rem; font-weight: 700; color: var(--accent); } .pulse { animation: pulse 0.6s cubic-bezier(0.4, 0, 0.6, 1); } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: var(--gray-800); color: white; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; white-space: nowrap; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 10; } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--gray-800) transparent transparent transparent; } .control-header:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-5px); } .pricing-badge { display: inline-flex; align-items: center; background-color: var(--primary-light); color: white; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; position: absolute; top: 1rem; right: 1rem; } .badge-dot { width: 6px; height: 6px; background-color: white; border-radius: 50%; margin-right: 0.5rem; animation: pulseDot 1.5s infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes pulseDot { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } @media (max-width: 640px) { .container { padding: 1rem; } .calculator { padding: 1.25rem; } .header h1 { font-size: 1.75rem; } .calculator-title { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .calculator-title .price-display { align-items: flex-start; } .control-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .slider-ticks { display: none; } .features-table th, .features-table td { padding: 0.5rem 0.75rem; font-size: 0.75rem; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Cloud Service Pricing Calculator</h1> <p>Customize your cloud infrastructure and see pricing in real-time. Adjust resources to match your specific project needs.</p> </div> <div class="calculator"> <div class="pricing-badge"> <span class="badge-dot"></span> <span>Live Pricing</span> </div> <div class="calculator-title"> <h2>Build Your Plan</h2> <div class="price-display"> <div class="price-value" id="total-price">$59.00</div> <div class="price-period">per month</div> </div> </div> <div class="controls"> <div class="control-group"> <div class="control-header"> <span class="control-label">CPU Cores</span> <span class="control-value" id="cpu-value">4 Cores</span> <div class="tooltip">Dedicated vCPU cores for your workloads</div> </div> <div class="slider-container"> <div class="slider-track"> <div class="slider-fill" id="cpu-fill" style="width: 40%"></div> </div> <input type="range" class="slider" id="cpu-slider" min="1" max="10" value="4" data-cost="10"> <div class="slider-ticks"> <div class="tick" style="left: 0%"><span class="tick-label">1</span></div> <div class="tick" style="left: 25%"><span class="tick-label">3</span></div> <div class="tick" style="left: 50%"><span class="tick-label">5</span></div> <div class="tick" style="left: 75%"><span class="tick-label">8</span></div> <div class="tick" style="left: 100%"><span class="tick-label">10</span></div> </div> </div> </div> <div class="control-group"> <div class="control-header"> <span class="control-label">Memory (RAM)</span> <span class="control-value" id="ram-value">8 GB</span> <div class="tooltip">High-performance memory allocation</div> </div> <div class="slider-container"> <div class="slider-track"> <div class="slider-fill" id="ram-fill" style="width: 37.5%"></div> </div> <input type="range" class="slider" id="ram-slider" min="2" max="32" value="8" step="2" data-cost="4"> <div class="slider-ticks"> <div class="tick" style="left: 0%"><span class="tick-label">2 GB</span></div> <div class="tick" style="left: 25%"><span class="tick-label">8 GB</span></div> <div class="tick" style="left: 50%"><span class="tick-label">16 GB</span></div> <div class="tick" style="left: 75%"><span class="tick-label">24 GB</span></div> <div class="tick" style="left: 100%"><span class="tick-label">32 GB</span></div> </div> </div> </div> <div class="control-group"> <div class="control-header"> <span class="control-label">Storage (SSD)</span> <span class="control-value" id="storage-value">250 GB</span> <div class="tooltip">NVMe SSD high-performance storage</div> </div> <div class="slider-container"> <div class="slider-track"> <div class="slider-fill" id="storage-fill" style="width: 25%"></div> </div> <input type="range" class="slider" id="storage-slider" min="100" max="1000" value="250" step="50" data-cost="0.1"> <div class="slider-ticks"> <div class="tick" style="left: 0%"><span class="tick-label">100 GB</span></div> <div class="tick" style="left: 25%"><span class="tick-label">250 GB</span></div> <div class="tick" style="left: 50%"><span class="tick-label">500 GB</span></div> <div class="tick" style="left: 75%"><span class="tick-label">750 GB</span></div> <div class="tick" style="left: 100%"><span class="tick-label">1 TB</span></div> </div> </div> </div> <div class="control-group"> <div class="control-header"> <span class="control-label">Bandwidth</span> <span class="control-value" id="bandwidth-value">2 TB</span> <div class="tooltip">Monthly data transfer allowance</div> </div> <div class="slider-container"> <div class="slider-track"> <div class="slider-fill" id="bandwidth-fill" style="width: 33.3%"></div> </div> <input type="range" class="slider" id="bandwidth-slider" min="1" max="10" value="2" step="1" data-cost="5"> <div class="slider-ticks"> <div class="tick" style="left: 0%"><span class="tick-label">1 TB</span></div> <div class="tick" style="left: 25%"><span class="tick-label">3 TB</span></div> <div class="tick" style="left: 50%"><span class="tick-label">5 TB</span></div> <div class="tick" style="left: 75%"><span class="tick-label">7 TB</span></div> <div class="tick" style="left: 100%"><span class="tick-label">10 TB</span></div> </div> </div> </div> </div> </div> <div class="features-table"> <table> <thead> <tr> <th>Feature Availability</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td><span class="feature-icon">✓</span> High-Availability Setup</td> <td class="feature-available" id="highAvailability">Available</td> </tr> <tr> <td><span class="feature-icon">✓</span> Automated Backups</td> <td class="feature-available" id="backups">Available</td> </tr> <tr> <td><span class="feature-icon">✓</span> DDoS Protection</td> <td class="feature-available">Included</td> </tr> <tr> <td><span class="feature-icon">✓</span> Dedicated IP Address</td> <td class="feature-available">Included</td> </tr> <tr> <td><span class="feature-icon">✓</span> 24/7 Priority Support</td> <td class="feature-available" id="prioritySupport">Available</td> </tr> </tbody> </table> </div> <div class="summary"> <h3>Cost Breakdown</h3> <div class="summary-items"> <div class="summary-item"> <span class="summary-label">CPU Cores</span> <span class="summary-value" id="cpu-cost">$40.00</span> </div> <div class="summary-item"> <span class="summary-label">Memory (RAM)</span> <span class="summary-value" id="ram-cost">$32.00</span> </div> <div class="summary-item"> <span class="summary-label">Storage (SSD)</span> <span class="summary-value" id="storage-cost">$25.00</span> </div> <div class="summary-item"> <span class="summary-label">Bandwidth</span> <span class="summary-value" id="bandwidth-cost">$10.00</span> </div> <div class="summary-item" id="backup-item" style="display: none;"> <span class="summary-label">Daily Backups</span> <span class="summary-value" id="backup-cost">$10.00</span> </div> </div> <div class="total-row"> <span class="total-label">Estimated Monthly Cost</span> <span class="total-value" id="summary-total">$107.00</span> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize sliders and pricing const cpuSlider = document.getElementById('cpu-slider'); const ramSlider = document.getElementById('ram-slider'); const storageSlider = document.getElementById('storage-slider'); const bandwidthSlider = document.getElementById('bandwidth-slider'); const cpuFill = document.getElementById('cpu-fill'); const ramFill = document.getElementById('ram-fill'); const storageFill = document.getElementById('storage-fill'); const bandwidthFill = document.getElementById('bandwidth-fill'); const cpuValue = document.getElementById('cpu-value'); const ramValue = document.getElementById('ram-value'); const storageValue = document.getElementById('storage-value'); const bandwidthValue = document.getElementById('bandwidth-value'); const cpuCost = document.getElementById('cpu-cost'); const ramCost = document.getElementById('ram-cost'); const storageCost = document.getElementById('storage-cost'); const bandwidthCost = document.getElementById('bandwidth-cost'); const totalPrice = document.getElementById('total-price'); const summaryTotal = document.getElementById('summary-total'); const highAvailability = document.getElementById('highAvailability'); const backups = document.getElementById('backups'); const prioritySupport = document.getElementById('prioritySupport'); const backupItem = document.getElementById('backup-item'); const backupCost = document.getElementById('backup-cost'); // Update sliders function updateSlider(slider, fill, value, costElement, formatter) { const percent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100; fill.style.width = `${percent}%`; value.textContent = formatter(slider.value); const cost = calculateCost(slider); costElement.textContent = formatCurrency(cost); updateTotalPrice(); // Add pulse animation value.classList.add('pulse'); costElement.classList.add('pulse'); // Remove animation class after animation completes setTimeout(() => { value.classList.remove('pulse'); costElement.classList.remove('pulse'); }, 600); } // Calculate costs based on slider value function calculateCost(slider) { return slider.value * parseFloat(slider.dataset.cost); } // Format currency function formatCurrency(value) { return `$${value.toFixed(2)}`; } // Update total price function updateTotalPrice() { const cpuCostValue = calculateCost(cpuSlider); const ramCostValue = calculateCost(ramSlider); const storageCostValue = calculateCost(storageSlider); const bandwidthCostValue = calculateCost(bandwidthSlider); let backupCostValue = 0; if (parseInt(cpuSlider.value) >= 4) { backupItem.style.display = 'flex'; backupCostValue = 10; backupCost.textContent = formatCurrency(backupCostValue); backups.classList.remove('feature-unavailable'); backups.classList.add('feature-available'); backups.textContent = 'Available'; } else { backupItem.style.display = 'none'; backups.classList.remove('feature-available'); backups.classList.add('feature-unavailable'); backups.textContent = 'Unavailable (Min 4 CPU)'; } // Update high availability status if (parseInt(ramSlider.value) >= 8) { highAvailability.classList.remove('feature-unavailable'); highAvailability.classList.add('feature-available'); highAvailability.textContent = 'Available'; } else { highAvailability.classList.remove('feature-available'); highAvailability.classList.add('feature-unavailable'); highAvailability.textContent = 'Unavailable (Min 8GB RAM)'; } // Update priority support status if (cpuCostValue + ramCostValue + storageCostValue + bandwidthCostValue > 100) { prioritySupport.classList.remove('feature-unavailable'); prioritySupport.classList.add('feature-available'); prioritySupport.textContent = 'Included'; } else { prioritySupport.classList.remove('feature-available'); prioritySupport.classList.add('feature-unavailable'); prioritySupport.textContent = 'Unavailable (Min $100 spend)'; } const totalCost = cpuCostValue + ramCostValue + storageCostValue + bandwidthCostValue + backupCostValue; totalPrice.textContent = formatCurrency(totalCost); summaryTotal.textContent = formatCurrency(totalCost); // Animate total price change totalPrice.classList.add('pulse'); summaryTotal.classList.add('pulse'); setTimeout(() => { totalPrice.classList.remove('pulse'); summaryTotal.classList.remove('pulse'); }, 600); } // Initialize sliders function initSlider(slider, fill, value, costElement, formatter) { updateSlider(slider, fill, value, costElement, formatter); slider.addEventListener('input', () => { updateSlider(slider, fill, value, costElement, formatter); }); } // Format CPU value function cpuFormatter(value) { return `${value} Core${value > 1 ? 's' : ''}`; } // Format RAM value function ramFormatter(value) { return `${value} GB`; } // Format Storage value function storageFormatter(value) { return value >= 1000 ? `${value/1000} TB` : `${value} GB`; } // Format Bandwidth value function bandwidthFormatter(value) { return `${value} TB`; } // Initialize all sliders initSlider(cpuSlider, cpuFill, cpuValue, cpuCost, cpuFormatter); initSlider(ramSlider, ramFill, ramValue, ramCost, ramFormatter); initSlider(storageSlider, storageFill, storageValue, storageCost, storageFormatter); initSlider(bandwidthSlider, bandwidthFill, bandwidthValue, bandwidthCost, bandwidthFormatter); // Initial update updateTotalPrice(); }); </script> </body> </html>
