diff --git a/Responsive Pricing Table Feature/index.html b/Responsive Pricing Table Feature/index.html new file mode 100644 index 00000000..ffdd6992 --- /dev/null +++ b/Responsive Pricing Table Feature/index.html @@ -0,0 +1,102 @@ + + + + + + Responsive Pricing Table + + + + + + + + +
+
+

Choose Your Plan

+

Select the perfect plan for your needs

+
+ +
+ +
+
+ +

Basic

+

Perfect for getting started

+
+
+ $ + 9 + /month +
+
    +
  • 5 Projects
    • +
  • 10 GB Storage
    • +
  • Community Support
    • +
  • Basic Analytics
    • +
  • Mobile App Access
    • +
+ Get Started +
+ + +
+
Most Popular
+
+ +

Extended

+

Best for growing businesses

+
+
+ $ + 29 + /month +
+
    +
  • 20 Projects
    • +
  • 100 GB Storage
    • +
  • Priority Support
    • +
  • Advanced Analytics
    • +
  • Mobile App Access
    • +
  • API Access
    • +
  • Custom Integrations
    • +
+ Get Started +
+ + +
+
+ +

Premium

+

For enterprise needs

+
+
+ $ + 99 + /month +
+
    +
  • Unlimited Projects
    • +
  • 1 TB Storage
    • +
  • 24/7 Priority Support
    • +
  • Premium Analytics
    • +
  • Mobile App Access
    • +
  • Full API Access
    • +
  • Custom Integrations
    • +
  • Dedicated Account Manager
    • +
  • White-label Options
    • +
+ Get Started +
+
+ + +
+ + + diff --git a/Responsive Pricing Table Feature/style.css b/Responsive Pricing Table Feature/style.css new file mode 100644 index 00000000..f841cfcd --- /dev/null +++ b/Responsive Pricing Table Feature/style.css @@ -0,0 +1,322 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #6366f1; + --primary-dark: #4f46e5; + --secondary-color: #8b5cf6; + --text-dark: #1f2937; + --text-muted: #6b7280; + --bg-light: #f9fafb; + --bg-white: #ffffff; + --border-color: #e5e7eb; + --success-color: #10b981; + --featured-color: #fef3c7; + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: var(--text-dark); + line-height: 1.6; + padding: 2rem 1rem; + min-height: 100vh; +} + +/* Container */ +.pricing-container { + max-width: 1200px; + margin: 0 auto; + background: var(--bg-white); + border-radius: 20px; + padding: 3rem 2rem; + box-shadow: var(--shadow-xl); +} + +/* Header */ +.pricing-header { + text-align: center; + margin-bottom: 3rem; +} + +.pricing-header h1 { + font-size: 2.5rem; + font-weight: 700; + color: var(--text-dark); + margin-bottom: 0.5rem; +} + +.pricing-header p { + font-size: 1.125rem; + color: var(--text-muted); +} + +/* Pricing Grid */ +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +/* Pricing Card */ +.pricing-card { + position: relative; + background: var(--bg-white); + border: 2px solid var(--border-color); + border-radius: 16px; + padding: 2rem; + transition: all 0.3s ease; + overflow: hidden; +} + +.pricing-card:hover { + transform: translateY(-8px); + box-shadow: var(--shadow-xl); + border-color: var(--primary-color); +} + +.pricing-card.featured { + border-color: var(--primary-color); + background: linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 0%, var(--bg-white) 50%); + box-shadow: var(--shadow-lg); +} + +.pricing-card.featured:hover { + box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25); +} + +/* Popular Badge */ +.popular-badge { + position: absolute; + top: 1rem; + right: 1rem; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + color: white; + font-size: 0.75rem; + font-weight: 600; + padding: 0.5rem 1rem; + border-radius: 20px; + text-transform: uppercase; + letter-spacing: 0.5px; + box-shadow: var(--shadow-md); +} + +/* Plan Header */ +.plan-header { + text-align: center; + margin-bottom: 2rem; +} + +.plan-icon { + font-size: 3rem; + color: var(--primary-color); + margin-bottom: 1rem; + display: block; +} + +.pricing-card.featured .plan-icon { + color: var(--secondary-color); +} + +.plan-header h2 { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-dark); + margin-bottom: 0.5rem; +} + +.plan-subtitle { + font-size: 0.875rem; + color: var(--text-muted); +} + +/* Plan Price */ +.plan-price { + text-align: center; + margin-bottom: 2rem; + padding-bottom: 2rem; + border-bottom: 2px solid var(--border-color); +} + +.currency { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-muted); + vertical-align: top; +} + +.amount { + font-size: 3.5rem; + font-weight: 700; + color: var(--text-dark); + line-height: 1; +} + +.period { + font-size: 1rem; + color: var(--text-muted); + font-weight: 500; +} + +/* Plan Features */ +.plan-features { + list-style: none; + margin-bottom: 2rem; + min-height: 280px; +} + +.plan-features li { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.75rem 0; + color: var(--text-dark); + font-size: 0.9375rem; +} + +.plan-features li i { + color: var(--success-color); + font-size: 1rem; + margin-top: 0.125rem; + flex-shrink: 0; +} + +/* Plan Button */ +.plan-button { + display: block; + width: 100%; + text-align: center; + background: var(--primary-color); + color: white; + text-decoration: none; + padding: 1rem 2rem; + border-radius: 12px; + font-weight: 600; + font-size: 1rem; + transition: all 0.3s ease; + border: 2px solid var(--primary-color); +} + +.plan-button:hover { + background: var(--primary-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.pricing-card.featured .plan-button { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + border: none; +} + +.pricing-card.featured .plan-button:hover { + background: linear-gradient(135deg, var(--primary-dark) 0%, #7c3aed 100%); + box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4); +} + +/* Footer */ +.pricing-footer { + text-align: center; + padding-top: 2rem; + border-top: 2px solid var(--border-color); + margin-top: 2rem; +} + +.pricing-footer p { + color: var(--text-muted); + font-size: 0.875rem; +} + +/* Responsive Design */ +@media (max-width: 968px) { + .pricing-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + } + + .pricing-container { + padding: 2rem 1.5rem; + } + + .pricing-header h1 { + font-size: 2rem; + } +} + +@media (max-width: 640px) { + body { + padding: 1rem 0.5rem; + } + + .pricing-container { + padding: 1.5rem 1rem; + border-radius: 16px; + } + + .pricing-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .pricing-header { + margin-bottom: 2rem; + } + + .pricing-header h1 { + font-size: 1.75rem; + } + + .pricing-header p { + font-size: 1rem; + } + + .pricing-card { + padding: 1.5rem; + } + + .plan-icon { + font-size: 2.5rem; + } + + .plan-header h2 { + font-size: 1.5rem; + } + + .amount { + font-size: 3rem; + } + + .plan-features { + min-height: auto; + } + + .popular-badge { + top: 0.75rem; + right: 0.75rem; + font-size: 0.6875rem; + padding: 0.375rem 0.75rem; + } +} + +@media (max-width: 480px) { + .pricing-header h1 { + font-size: 1.5rem; + } + + .amount { + font-size: 2.5rem; + } + + .plan-features li { + font-size: 0.875rem; + } +} +