From 110d349a5119e14b45387bfa9ffefc49c3baf7c8 Mon Sep 17 00:00:00 2001 From: JC_005 <152909047+JC230903@users.noreply.github.com> Date: Sat, 25 Jul 2026 11:03:01 +0530 Subject: [PATCH 1/3] feat: add modern pricing table demo --- .../modern-pricing-spotlight-jc/demo.html | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 submissions/examples/modern-pricing-spotlight-jc/demo.html 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
    • +
+
+
+
+
+ + From 0e26f8c6df6e41947bc4350e3e21a19d9d2dc142 Mon Sep 17 00:00:00 2001 From: JC_005 <152909047+JC230903@users.noreply.github.com> Date: Sat, 25 Jul 2026 11:08:10 +0530 Subject: [PATCH 2/3] feat: add modern pricing table styles --- .../modern-pricing-spotlight-jc/style.css | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 submissions/examples/modern-pricing-spotlight-jc/style.css 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; } +} From 9f10ef3f2278e0e6c56935880da718455a63fef1 Mon Sep 17 00:00:00 2001 From: JC_005 <152909047+JC230903@users.noreply.github.com> Date: Sat, 25 Jul 2026 11:09:25 +0530 Subject: [PATCH 3/3] docs: add pricing table usage guide --- .../modern-pricing-spotlight-jc/README.md | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 submissions/examples/modern-pricing-spotlight-jc/README.md 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.