diff --git a/submissions/examples/modern-pricing-spotlight-jc/README.md b/submissions/examples/modern-pricing-spotlight-jc/README.md new file mode 100644 index 0000000000..22a0b686ad --- /dev/null +++ b/submissions/examples/modern-pricing-spotlight-jc/README.md @@ -0,0 +1,20 @@ +# Modern pricing spotlight + +## What does this do? + +This submission provides a responsive three-tier pricing table with a visually highlighted recommended plan and subtle, accessible interaction states. + +## How is it used? + +Add a pricing grid and give each plan the `pricing-card-jc` class; add `pricing-card-featured-jc` to the plan that should be emphasized. + +```html +
+
...
+
...
+
+``` + +## Why is it useful? + +Pricing is a common decision point on product and portfolio sites. This standalone HTML and CSS example makes the primary choice clear while keeping every plan readable on smaller screens, keyboard accessible, and respectful of reduced-motion preferences. diff --git a/submissions/examples/modern-pricing-spotlight-jc/demo.html b/submissions/examples/modern-pricing-spotlight-jc/demo.html new file mode 100644 index 0000000000..789f6b6bb0 --- /dev/null +++ b/submissions/examples/modern-pricing-spotlight-jc/demo.html @@ -0,0 +1,57 @@ + + + + + + Modern pricing spotlight + + + +
+
+

Simple, transparent pricing

+

Find the plan that fits your next idea.

+

Start small, scale when you are ready, and change plans whenever your needs change.

+ +
+
+

Starter

+

For personal projects and first launches.

+

$9/month

+ Choose Starter +
    +
  • 5 active projects
    • +
  • 10 GB secure storage
    • +
  • Community support
    • +
+
+ +
+

Most popular

+

Pro

+

For ambitious makers growing a real product.

+

$29/month

+ Start 14-day trial +
    +
  • Unlimited projects
    • +
  • 100 GB secure storage
    • +
  • Priority email support
    • +
+
+ +
+

Scale

+

For teams that need more room to move.

+

$79/month

+ Talk to us +
    +
  • Everything in Pro
    • +
  • 1 TB secure storage
    • +
  • Dedicated success partner
    • +
+
+
+
+
+ + diff --git a/submissions/examples/modern-pricing-spotlight-jc/style.css b/submissions/examples/modern-pricing-spotlight-jc/style.css new file mode 100644 index 0000000000..8203a653bc --- /dev/null +++ b/submissions/examples/modern-pricing-spotlight-jc/style.css @@ -0,0 +1,124 @@ +:root { + color: #1d2440; + background: #f5f7ff; + font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; +} + +* { box-sizing: border-box; } +body { margin: 0; } + +.pricing-demo-jc { + min-height: 100vh; + padding: clamp(2.5rem, 7vw, 6rem) 1.25rem; + display: grid; + place-items: center; + overflow: hidden; + background: + radial-gradient(circle at 12% 4%, rgba(125, 87, 255, .2), transparent 28rem), + radial-gradient(circle at 88% 96%, rgba(38, 190, 175, .18), transparent 26rem), + #f5f7ff; +} + +.pricing-section-jc { width: min(100%, 72rem); text-align: center; } + +.pricing-eyebrow-jc { + margin: 0 0 .85rem; + color: #5f42d6; + font-size: .78rem; + font-weight: 800; + letter-spacing: .12em; + text-transform: uppercase; +} + +.pricing-section-jc h1 { + max-width: 16ch; + margin: 0 auto; + color: #202745; + font-size: clamp(2rem, 5vw, 3.8rem); + letter-spacing: -.055em; + line-height: 1.04; +} + +.pricing-intro-jc { + max-width: 38rem; + margin: 1.25rem auto 3.25rem; + color: #5c6688; + font-size: 1.04rem; + line-height: 1.65; +} + +.pricing-grid-jc { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-items: stretch; + gap: 1.25rem; +} + +.pricing-card-jc { + position: relative; + padding: 2.1rem 1.8rem; + display: flex; + flex-direction: column; + text-align: left; + border: 1px solid rgba(87, 105, 164, .18); + border-radius: 1.5rem; + background: rgba(255, 255, 255, .76); + box-shadow: 0 1rem 2.6rem rgba(39, 53, 105, .1); + backdrop-filter: blur(12px); + transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; +} + +.pricing-card-jc:hover, +.pricing-card-jc:focus-within { + z-index: 1; + transform: translateY(-.45rem); + border-color: rgba(95, 66, 214, .4); + box-shadow: 0 1.5rem 3.5rem rgba(47, 44, 111, .18); +} + +.pricing-card-jc h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; } +.pricing-summary-jc { min-height: 3.4rem; margin: .75rem 0 1.15rem; color: #66718f; line-height: 1.55; } +.pricing-price-jc { margin: 0; color: #232b50; font-size: 3rem; font-weight: 800; letter-spacing: -.07em; line-height: 1; } +.pricing-currency-jc { vertical-align: .8em; font-size: 1.15rem; letter-spacing: 0; } +.pricing-period-jc { margin-left: .35rem; color: #707b99; font-size: .88rem; font-weight: 600; letter-spacing: 0; } + +.pricing-action-jc { + margin: 1.75rem 0 1.55rem; + padding: .82rem 1rem; + display: flex; + align-items: center; + justify-content: space-between; + border: 2px solid transparent; + border-radius: .8rem; + font-weight: 750; + text-decoration: none; + transition: transform 180ms ease, background-color 180ms ease, color 180ms ease; +} + +.pricing-action-jc:hover { transform: translateX(.2rem); } +.pricing-action-jc:focus-visible { outline: 3px solid #26a99a; outline-offset: 3px; } +.pricing-action-outline-jc { border-color: #d9dff1; color: #35406a; background: #fff; } +.pricing-action-outline-jc:hover { background: #eef0fb; } +.pricing-action-solid-jc { color: #fff; background: #5f42d6; box-shadow: 0 .7rem 1.3rem rgba(95, 66, 214, .28); } +.pricing-action-solid-jc:hover { background: #4e34bd; } + +.pricing-features-jc { margin: auto 0 0; padding: 0; list-style: none; color: #53607e; font-size: .93rem; line-height: 1.5; } +.pricing-features-jc li { display: flex; gap: .65rem; padding: .55rem 0; border-top: 1px solid #e8ebf5; } +.pricing-features-jc li::before { content: "✓"; color: #15a18d; font-weight: 900; } + +.pricing-card-featured-jc { color: #fff; border-color: #5f42d6; background: linear-gradient(145deg, #6849e0, #44319e); box-shadow: 0 1.5rem 3.5rem rgba(76, 52, 185, .28); } +.pricing-card-featured-jc h2, .pricing-card-featured-jc .pricing-price-jc { color: #fff; } +.pricing-card-featured-jc .pricing-summary-jc, .pricing-card-featured-jc .pricing-period-jc, .pricing-card-featured-jc .pricing-features-jc { color: #e4dcff; } +.pricing-card-featured-jc .pricing-features-jc li { border-color: rgba(255, 255, 255, .18); } +.pricing-card-featured-jc .pricing-features-jc li::before { color: #8cf1d7; } + +.pricing-badge-jc { position: absolute; top: -1rem; right: 1.5rem; margin: 0; padding: .42rem .75rem; border-radius: 99px; color: #41309a; background: #b7fff0; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } + +@media (max-width: 48rem) { + .pricing-grid-jc { grid-template-columns: minmax(0, 28rem); justify-content: center; } + .pricing-summary-jc { min-height: 0; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } +}