russell@unturf.com
d8425867c5
tokens.css: CSS custom properties for colors, surfaces, text, borders, typography scale (major third), spacing (4px base), shape (7 radius levels), elevation (5 shadow levels), motion (4 easing curves, 7 durations), state layers, ripple effect, entrance animations (6 types + stagger), skeleton loading, spinner, scroll reveal, disabled states, spacing/margin utilities, prefers-reduced-motion, font smoothing, box-sizing reset. styleguide.html: live interactive demos for every token and component. Elevation boxes, motion curve hover demos, ripple click demo, skeleton shimmer, spinner sizes, focus ring demo, state layer demo, full TOC with anchor links.
450 lines
21 KiB
HTML
450 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<title>Make Post Sell — Commission-free shops for creators, makers, and media</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#5871ad">
|
|
<meta name="description" content="Open your own commission-free shop. Sell digital downloads, physical products, and media. Accept Stripe, PayPal, Monero, and Dogecoin. Open source and public domain.">
|
|
|
|
<link rel="stylesheet" href="tokens.css">
|
|
<link rel="stylesheet" href="common.css">
|
|
<link rel="stylesheet" href="mps.css">
|
|
<link rel="stylesheet" href="landing.css">
|
|
|
|
<!-- <script defer data-domain="makepostsell.com" src="https://analytics.unturf.com/js/plausible.js"></script> -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="message-ribbon">
|
|
Open source & public domain — no moat, no castle, just infrastructure that outlasts its builders
|
|
</div>
|
|
|
|
<noscript>
|
|
<style>
|
|
.js-only {display: none;}
|
|
</style>
|
|
</noscript>
|
|
|
|
<section class="main">
|
|
|
|
<section class="nav-grid">
|
|
<section class="nav">
|
|
<section class="logo">
|
|
<a href="/"><img class="logo" src="/static/mps.png" /></a>
|
|
</section>
|
|
<section class="middle"></section>
|
|
<section class="log-in">
|
|
<a href="https://blog.makepostsell.com/">Blog</a>
|
|
<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>
|
|
|
|
<section class="content landing-content">
|
|
|
|
<!-- ======== HERO ======== -->
|
|
<section class="landing-hero">
|
|
<div class="landing-hero-inner">
|
|
<h1 class="landing-hero-title">Make it. Post it. Sell it.</h1>
|
|
<p class="landing-hero-subtitle">Your shop. Your brand. Your money. Zero commission fees.</p>
|
|
<p class="landing-hero-body">
|
|
Launch a commission-free online shop in minutes. Sell digital downloads, physical products, and media to anyone, anywhere. Accept five payment methods. Keep every dollar minus only payment processing.
|
|
</p>
|
|
<div class="landing-cta-group">
|
|
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
|
|
</div>
|
|
<p class="landing-muted">Close anytime, no questions asked.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== PRICING ======== -->
|
|
<section class="landing-section landing-section-alt">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Simple pricing</h2>
|
|
|
|
<div class="landing-pricing">
|
|
<div class="landing-pricing-card">
|
|
<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">
|
|
<div class="landing-pricing-banner landing-pricing-banner-featured">Best value — save 42%</div>
|
|
<span class="landing-pricing-amount">$97<span class="landing-pricing-period">/year</span></span>
|
|
<span class="landing-pricing-desc">Two months free. Same features.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="landing-muted">Zero commission fees. You keep every dollar minus only payment processing.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== WHAT YOU GET ======== -->
|
|
<section class="landing-section">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Everything a creator needs</h2>
|
|
|
|
<div class="mps-card-grid">
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">🎭</span>
|
|
<span class="mps-card-title">Watch Mode & Media Channel</span>
|
|
<span class="mps-card-desc">Turn your shop into a streaming channel. Continuous playback with DJ-style crossfade, discovery ring, queue management, pop-out player, and <b>/tv</b> + <b>/random</b> endpoints. Video, audio, images, PDFs.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">💰</span>
|
|
<span class="mps-card-title">Five Payment Options</span>
|
|
<span class="mps-card-desc">Stripe, PayPal, Adyen, Monero (XMR), and Dogecoin (DOGE). Mix and match. Fully automated crypto cash register with built-in refund system. No humans in a loop.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">📨</span>
|
|
<span class="mps-card-title">Subscriptions & Feeds</span>
|
|
<span class="mps-card-desc">Grow an audience. Email digests deliver new posts on their schedule — immediately, daily, or weekly. Every shop gets RSS, Atom, and sitemap endpoints automatically.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">📈</span>
|
|
<span class="mps-card-title">Analytics Dashboard</span>
|
|
<span class="mps-card-desc">Per-product and per-shop analytics with line charts, keyword tracking, and referrer domain insights. Know what works. Grow what converts.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">🎨</span>
|
|
<span class="mps-card-title">Sandbox & Creative Tools</span>
|
|
<span class="mps-card-desc">Built-in creative filter toolbar, canvas export, and RGB color chains. Karaoke mode with vocal isolation. Experiment, remix, and publish from one place.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-icon">👥</span>
|
|
<span class="mps-card-title">Multi-tenant & Team</span>
|
|
<span class="mps-card-desc">Run multiple shops from one account. Invite owners and editors. Each shop gets its own brand, products, domain, and audience. No competition — only your products appear.</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== WHY COMMISSION-FREE ======== -->
|
|
<section class="landing-section landing-section-alt">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Keep what you earn</h2>
|
|
|
|
<p class="landing-body">
|
|
Marketplaces charge 15–40% commission on every sale. That adds up fast. On a $20 sale at a 30% marketplace, you walk away with $14. On Make Post Sell, you keep <b>$19.12</b> after <a href="https://stripe.com/pricing" target="_blank">payment processing</a>.
|
|
</p>
|
|
|
|
<div class="mps-comparison">
|
|
|
|
<!-- Marketplace donut -->
|
|
<div class="mps-comparison-card marketplace">
|
|
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200">
|
|
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
|
|
stroke="#678731" stroke-width="30"
|
|
stroke-dasharray="307.8 131.9" stroke-dashoffset="110"
|
|
transform="rotate(-90 100 100)" />
|
|
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
|
|
stroke="#d4a843" stroke-width="30"
|
|
stroke-dasharray="15.4 424.3" stroke-dashoffset="-197.8"
|
|
transform="rotate(-90 100 100)" />
|
|
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
|
|
stroke="#c77765" stroke-width="30"
|
|
stroke-dasharray="116.5 323.2" stroke-dashoffset="-213.2"
|
|
transform="rotate(-90 100 100)" />
|
|
<circle cx="100" cy="100" r="55" fill="#f8d7da" />
|
|
</svg>
|
|
|
|
<div class="donut-legend">
|
|
<span><span style="color: #678731;">■</span> You 70%</span>
|
|
<span><span style="color: #d4a843;">■</span> Processing 3.5%</span>
|
|
<span><span style="color: #c77765;">■</span> Marketplace 26.5%</span>
|
|
</div>
|
|
|
|
<span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
|
|
<span class="mps-comparison-label">Marketplace (30% commission)</span>
|
|
</div>
|
|
|
|
<!-- MPS donut -->
|
|
<div class="mps-comparison-card mps">
|
|
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200">
|
|
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
|
|
stroke="#678731" stroke-width="30"
|
|
stroke-dasharray="424.3 15.4" stroke-dashoffset="110"
|
|
transform="rotate(-90 100 100)" />
|
|
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
|
|
stroke="#d4a843" stroke-width="30"
|
|
stroke-dasharray="15.4 424.3" stroke-dashoffset="-314.3"
|
|
transform="rotate(-90 100 100)" />
|
|
<circle cx="100" cy="100" r="55" fill="#e8f5d4" />
|
|
</svg>
|
|
|
|
<div class="donut-legend">
|
|
<span><span style="color: #678731;">■</span> You 96.5%</span>
|
|
<span><span style="color: #d4a843;">■</span> Processing 3.5%</span>
|
|
</div>
|
|
|
|
<span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
|
|
<span class="mps-comparison-label">Make Post Sell (0% commission)</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="landing-body">
|
|
That gap compounds. Run <a target="_blank" href="https://docs.google.com/spreadsheets/d/138fW3wlNowTv09nKeIe_TZrWsLIHVoD7PdlI2HXGmLs/copy?usp=sharing">your own numbers</a> to see how much commission-free saves over a year.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// Animate donut charts when they scroll into view
|
|
(function() {
|
|
var animated = false;
|
|
var segments = document.querySelectorAll('.donut-animate');
|
|
|
|
segments.forEach(function(seg) {
|
|
seg.style.opacity = '0';
|
|
seg.style.transition = 'stroke-dasharray 1.2s ease-out, opacity 0.4s ease';
|
|
});
|
|
|
|
function animateDonuts() {
|
|
if (animated) return;
|
|
var charts = document.querySelectorAll('.donut-chart');
|
|
for (var i = 0; i < charts.length; i++) {
|
|
var rect = charts[i].getBoundingClientRect();
|
|
if (rect.top < window.innerHeight * 0.85) {
|
|
animated = true;
|
|
segments.forEach(function(seg, idx) {
|
|
setTimeout(function() {
|
|
seg.style.opacity = '1';
|
|
}, idx * 150);
|
|
});
|
|
window.removeEventListener('scroll', animateDonuts);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', animateDonuts);
|
|
animateDonuts();
|
|
})();
|
|
</script>
|
|
|
|
<!-- ======== PROTECTION ======== -->
|
|
<section class="landing-section">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Own your platform, skip their rules</h2>
|
|
|
|
<div class="landing-two-lists">
|
|
<div class="landing-list-card landing-list-bad">
|
|
<ul>
|
|
<li><span class="landing-x">❌</span> Sales commissions and platform fees</li>
|
|
<li><span class="landing-x">❌</span> Censorship and de-platforming</li>
|
|
<li><span class="landing-x">❌</span> Bad algorithms burying your work</li>
|
|
<li><span class="landing-x">❌</span> Competitor products next to yours</li>
|
|
<li><span class="landing-x">❌</span> Frivolous DMCA takedowns</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="landing-list-card landing-list-good">
|
|
<ul>
|
|
<li><span class="landing-check">✔</span> <b>Always open</b> <span class="landing-list-detail">— Sell online 24/7</span></li>
|
|
<li><span class="landing-check">✔</span> <b>Risk free</b> <span class="landing-list-detail">— Make nothing, pay nothing</span></li>
|
|
<li><span class="landing-check">✔</span> <b>Commission free</b> <span class="landing-list-detail">— Your products, your sales, your money</span></li>
|
|
<li><span class="landing-check">✔</span> <b>Walk away anytime</b> <span class="landing-list-detail">— Close shop, no questions asked</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== WHO IT SERVES ======== -->
|
|
<section class="landing-section landing-section-alt">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">For makers of all kinds</h2>
|
|
|
|
<p class="landing-body">
|
|
Art, crafts, books, clip-art, code, comics, curriculum, drafting, games, graphics, movies, music, photography, videos, video games, farm stand products, merch, zines, or whatever else you dream up.
|
|
</p>
|
|
|
|
<p class="landing-body">
|
|
Whether you run a homestead farm stand, a music channel, a digital art shop, or a small brand — this platform adapts to what you make and how you sell it.
|
|
</p>
|
|
|
|
<div class="landing-cta-group">
|
|
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== GETTING STARTED ======== -->
|
|
<section class="landing-section">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Get started in three steps</h2>
|
|
|
|
<div class="mps-card-grid three-col">
|
|
|
|
<div class="mps-card landing-step-card">
|
|
<span class="landing-step-number">1</span>
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a></span>
|
|
<span class="mps-card-desc">Pick a name, add a description, customize your brand. Done in under a minute.</span>
|
|
</div>
|
|
|
|
<div class="mps-card landing-step-card">
|
|
<span class="landing-step-number">2</span>
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Post a Product</a></span>
|
|
<span class="mps-card-desc">Upload files, set a price, write a description. Digital downloads deliver instantly.</span>
|
|
</div>
|
|
|
|
<div class="mps-card landing-step-card">
|
|
<span class="landing-step-number">3</span>
|
|
<span class="mps-card-title">Start Selling</span>
|
|
<span class="mps-card-desc">Share your shop link. Accept payments. Watch your dashboard grow.</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== MORE GUIDES ======== -->
|
|
<section class="landing-section landing-section-alt">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Guides & Documentation</h2>
|
|
|
|
<div class="mps-card-grid">
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/59c8c980-3a3b-11ef-8208-c3d535a3beac/how-to-create-new-content-on-makepostsell">Create Content</a></span>
|
|
<span class="mps-card-desc">Post articles, media, and updates to your shop feed.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/64903474-3a3c-11ef-8208-c3d535a3beac/how-to-create-a-digital-bundle-for-products-content-on-makepostsell">Create a Digital Bundle</a></span>
|
|
<span class="mps-card-desc">Package multiple products together at a bundled price.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/a9be53fc-3a35-11ef-8208-c3d535a3beac/how-to-create-a-new-coupon-on-makepostsell">Create Coupons</a></span>
|
|
<span class="mps-card-desc">Offer discounts and run promotions for your audience.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/c8a73ae4-3a36-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-location-on-makepostsell">Add Shop Locations</a></span>
|
|
<span class="mps-card-desc">Manage physical pickup points or retail locations.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/f5d7fd2c-3a37-11ef-8208-c3d535a3beac/how-to-invite-owners-editors-to-a-shop-on-makepostsell">Invite Collaborators</a></span>
|
|
<span class="mps-card-desc">Add owners and editors to help manage your shop.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/91d9119d-9c8e-11f0-9d98-02dfe05770ee/how-to-accept-monero-payments">Accept Monero (XMR)</a></span>
|
|
<span class="mps-card-desc">Add cryptocurrency payments alongside cards.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/c/e7ae7ab9-9e38-11f0-9ff6-02dfe05770ee/how-to-accept-dogecoin-payments">Accept Dogecoin (DOGE)</a></span>
|
|
<span class="mps-card-desc">Enable DOGE payments for your customers.</span>
|
|
</div>
|
|
|
|
<div class="mps-card">
|
|
<span class="mps-card-title"><a href="https://blog.makepostsell.com/">Read More on Our Blog</a></span>
|
|
<span class="mps-card-desc">Catch up on new features and platform updates.</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== OPEN SOURCE ======== -->
|
|
<section class="landing-section">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Open Source & Public Domain</h2>
|
|
|
|
<p class="landing-body">
|
|
Make Post Sell runs on Python (<a href="https://docs.pylonsproject.org/projects/pyramid/en/2.0-branch/" target="_blank">Pyramid</a>). Every line of code belongs to everyone. No moat, no castle — just infrastructure that outlasts its builders. Fork it, run it, improve it.
|
|
</p>
|
|
|
|
<div class="landing-cta-group">
|
|
<a href="https://pypi.org/project/make-post-sell/" target="_blank" class="source-button mps-button landing-cta">🕮 PyPi</a>
|
|
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button landing-cta">✐ Source Code</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======== FINAL CTA ======== -->
|
|
<section class="landing-section landing-final-cta">
|
|
<div class="one-column">
|
|
<h2 class="landing-section-title">Ready to make, post, and sell?</h2>
|
|
<div class="landing-cta-group">
|
|
<a href="https://my.makepostsell.com/s/new" target="_blank" class="shop-new-button mps-button landing-cta landing-cta-large">+ Open a Shop</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- content -->
|
|
</section>
|
|
|
|
<!-- main -->
|
|
</section>
|
|
|
|
<footer class="mps-footer">
|
|
<div class="mps-footer-grid">
|
|
|
|
<div class="mps-footer-brand">
|
|
<a href="/" class="mps-footer-logo">Make Post Sell</a>
|
|
<p class="mps-footer-tagline">
|
|
Commission-free shops for creators, makers, and media. Public domain software by <a href="https://www.unturf.com/software/" target="_blank">unturf</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mps-footer-group">
|
|
<span class="mps-footer-group-title">Get Started</span>
|
|
<nav class="mps-footer-links">
|
|
<a href="https://blog.makepostsell.com/c/0b408430-3a2a-11ef-8208-c3d535a3beac/how-to-create-a-new-shop-on-makepostsell">Create a Shop</a>
|
|
<a href="https://blog.makepostsell.com/c/83c41f98-3a2f-11ef-8208-c3d535a3beac/how-to-create-a-new-product-on-makepostsell">Create a Product</a>
|
|
<a href="https://blog.makepostsell.com/c/59c8c980-3a3b-11ef-8208-c3d535a3beac/how-to-create-new-content-on-makepostsell">Create Content</a>
|
|
<a href="https://blog.makepostsell.com/c/64903474-3a3c-11ef-8208-c3d535a3beac/how-to-create-a-digital-bundle-for-products-content-on-makepostsell">Create a Bundle</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mps-footer-group">
|
|
<span class="mps-footer-group-title">Resources</span>
|
|
<nav class="mps-footer-links">
|
|
<a href="https://blog.makepostsell.com/">Blog</a>
|
|
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank">Source Code</a>
|
|
<a href="https://pypi.org/project/make-post-sell/" target="_blank">PyPi</a>
|
|
<a href="/styleguide.html">Style Guide</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="mps-footer-group">
|
|
<span class="mps-footer-group-title">Account</span>
|
|
<nav class="mps-footer-links">
|
|
<a href="https://my.makepostsell.com/u/settings">My Account</a>
|
|
<a href="https://my.makepostsell.com/s/new">Open a Shop</a>
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mps-footer-ctas">
|
|
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ Open a Shop</a>
|
|
<a href="https://git.unturf.com/engineering/make-post-sell/make_post_sell" target="_blank" class="source-button mps-button">✐ Contribute Code</a>
|
|
</div>
|
|
|
|
<div class="mps-footer-bottom">
|
|
makepostsell.com © 2026 — Public domain software by <a href="https://www.unturf.com/software/" target="_blank">unturf.com</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|