engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nav CTA pill button, hero gradient background, pricing top banners, final CTA gradient

Browse source
This commit is contained in:
russell@unturf.com 2026-03-06 07:56:12 -05:00
parent c939abde8d
commit 088a2259c4
2 changed files with 46 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -39,8 +39,8 @@ Open source & public domain — no moat, no castle, just infrastructure
<section class="middle"></section>
<section class="log-in">
<a href="https://blog.makepostsell.com/">Blog</a>
<span class="nav-sep">|</span>
<a href="https://my.makepostsell.com/u/settings">My Account</a>
<a href="https://my.makepostsell.com/s/new" target="_blank" class="nav-cta">Open a Shop</a>
</section>
</section>
</section>
@ -69,15 +69,14 @@ Open source &amp; public domain &#8212; no moat, no castle, just infrastructure
<div class="landing-pricing">
<div class="landing-pricing-card">
<span class="landing-pricing-icon">&#128197;</span>
<div class="landing-pricing-banner">Monthly</div>
<span class="landing-pricing-amount">$14<span class="landing-pricing-period">/month</span></span>
<span class="landing-pricing-desc">Pay as you go. Cancel anytime.</span>
</div>
<div class="landing-pricing-card landing-pricing-featured">
<span class="landing-pricing-badge">Best value</span>
<span class="landing-pricing-icon">&#127775;</span>
<div class="landing-pricing-banner landing-pricing-banner-featured">Best value &#8212; save 42%</div>
<span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
<span class="landing-pricing-desc">Save 42%. Two months free.</span>
<span class="landing-pricing-desc">Two months free. Same features.</span>
</div>
</div>

73
landing.css
View file

@ -33,11 +33,7 @@
margin: 0;
display: flex;
align-items: center;
gap: 16px;
}
.nav-sep {
color: #e0e0e0;
gap: 20px;
}
.nav-grid .log-in a {
@ -51,10 +47,27 @@
color: #a3c765;
}
.nav-cta {
background: #0b0b0b;
color: #fff !important;
font-weight: 600 !important;
font-size: 14px !important;
padding: 10px 24px;
border-radius: 50px;
transition: background 0.2s ease, transform 0.15s ease;
white-space: nowrap;
}
.nav-cta:hover {
background: #333;
color: #fff !important;
transform: translateY(-1px);
}
/* ---- Hero ---- */
.landing-hero {
background-color: #FFFFFF;
background: linear-gradient(180deg, #f0f7e6 0%, #FFFFFF 100%);
padding: 60px 24px 70px;
text-align: center;
max-width: none;
@ -79,7 +92,7 @@
.landing-hero-subtitle {
font-size: 1.25em;
font-weight: 500;
color: #0b0b0b;
color: #333;
margin: 0 0 24px;
line-height: 1.4;
}
@ -188,9 +201,10 @@ a.mps-button.landing-cta-large {
background: #FFFFFF;
border: 1px solid #e0e0e0;
border-radius: 16px;
padding: 36px 24px;
padding: 0;
text-align: center;
position: relative;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
@ -199,39 +213,35 @@ a.mps-button.landing-cta-large {
transform: translateY(-2px);
}
.landing-pricing-banner {
background: #F9F9FA;
color: #515151;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 10px 24px;
border-bottom: 1px solid #e0e0e0;
}
.landing-pricing-banner-featured {
background: #a3c765;
color: #fff;
border-bottom: none;
}
.landing-pricing-featured {
border: 2px solid #a3c765;
box-shadow: 0 4px 20px rgba(163, 199, 101, 0.15);
}
.landing-pricing-badge {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
background: #a3c765;
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 16px;
border-radius: 50px;
}
.landing-pricing-icon {
font-size: 28px;
display: block;
margin-bottom: 12px;
}
.landing-pricing-amount {
font-size: 3em;
font-weight: 700;
color: #0b0b0b;
display: block;
line-height: 1;
margin-bottom: 8px;
margin: 28px 0 8px;
}
.landing-pricing-period {
@ -244,6 +254,7 @@ a.mps-button.landing-cta-large {
font-size: 15px;
color: #666;
display: block;
padding: 0 24px 28px;
}
/* ---- Cards (override common.css for landing) ---- */
@ -396,7 +407,7 @@ a.mps-button.landing-cta-large {
/* ---- Final CTA ---- */
.landing-final-cta {
background: linear-gradient(135deg, #f8faf5 0%, #f0f6ff 100%);
background: linear-gradient(135deg, #f0f7e6 0%, #f0f6ff 100%);
text-align: center;
padding: 80px 24px;
}