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

712 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Guide &#8212; Make Post Sell</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#5871ad">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="mps.css">
<link rel="stylesheet" href="landing.css">
<style>
body { color: #515151; background-color: #F9F9FA; }
a { color: #a3c765; font-weight: 600; }
.bold-dark { color: #0b0b0b; font-weight: 550; }
.big-bold-dark { color: #0b0b0b; font-size: 1.4em; font-weight: 550; }
.huge-bold-dark { color: #0b0b0b; font-size: 2.7em; font-weight: 550; }
section.content { background-color: #F9F9FA; }
section.well-white { background-color: #FFFFFF; }
.sg-section { margin-bottom: 40px; }
.sg-section-title {
color: #0b0b0b;
font-size: 1.6em;
font-weight: 550;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 8px;
margin-bottom: 20px;
}
.sg-subsection { margin-bottom: 24px; }
.sg-label {
font-size: 13px;
font-weight: 600;
color: #777;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.sg-swatches {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.sg-swatch {
width: 120px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
}
.sg-swatch-color {
height: 60px;
}
.sg-swatch-info {
padding: 8px;
background: #fff;
font-size: 12px;
line-height: 1.4;
}
.sg-swatch-name { font-weight: 600; color: #0b0b0b; }
.sg-swatch-hex { color: #999; }
.sg-code {
background: #f0f0f0;
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 12px 16px;
font-family: monospace;
font-size: 13px;
overflow-x: auto;
white-space: pre;
margin-top: 8px;
}
.sg-demo {
padding: 20px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 8px;
}
.sg-demo-alt {
background: #F9F9FA;
}
.sg-demo-dark {
background: #f0f6ff;
}
</style>
</head>
<body style="color: #515151; background-color: #F9F9FA;">
<div class="message-ribbon">
Style Guide &#8212; Make Post Sell Design System
</div>
<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="/">Home</a>
<span class="nav-sep">|</span>
<a href="/styleguide.html">Style Guide</a>
</section>
</section>
</section>
<section class="content">
<section class="one-column well">
<span class="huge-bold-dark">Style Guide</span>
<br/><br/>
Live reference of every component on makepostsell.com. Use this to keep the design consistent as we grow.
<br/><br/><br/>
<!-- ======== COLORS ======== -->
<div class="sg-section">
<div class="sg-section-title">Colors</div>
<div class="sg-subsection">
<div class="sg-label">Primary &amp; CTA</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #a3c765;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Green CTA</div>
<div class="sg-swatch-hex">#a3c765</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #98b6fa;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Blue Secondary</div>
<div class="sg-swatch-hex">#98b6fa</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #5871ad;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Navy Brand</div>
<div class="sg-swatch-hex">#5871ad</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #82A8FF;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Light Navy</div>
<div class="sg-swatch-hex">#82A8FF</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #9B59B6;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple</div>
<div class="sg-swatch-hex">#9B59B6</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #7B2D8E;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Purple Dark</div>
<div class="sg-swatch-hex">#7B2D8E</div>
</div>
</div>
</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Status &amp; Feedback</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #678731;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Check Green</div>
<div class="sg-swatch-hex">#678731</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #c77765;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Cross Red</div>
<div class="sg-swatch-hex">#c77765</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #CC6958;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Danger Red</div>
<div class="sg-swatch-hex">#CC6958</div>
</div>
</div>
</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Text &amp; Background</div>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #0b0b0b;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Dark</div>
<div class="sg-swatch-hex">#0b0b0b</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #515151;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Body</div>
<div class="sg-swatch-hex">#515151</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #666666;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Desc</div>
<div class="sg-swatch-hex">#666666</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #777;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Muted</div>
<div class="sg-swatch-hex">#777777</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #999;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Text Faint</div>
<div class="sg-swatch-hex">#999999</div>
</div>
</div>
</div>
<br/>
<div class="sg-swatches">
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #F9F9FA; border-bottom: 1px solid #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">BG Light</div>
<div class="sg-swatch-hex">#F9F9FA</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #FFFFFF; border-bottom: 1px solid #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">White</div>
<div class="sg-swatch-hex">#FFFFFF</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #e0e0e0;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Border</div>
<div class="sg-swatch-hex">#e0e0e0</div>
</div>
</div>
<div class="sg-swatch">
<div class="sg-swatch-color" style="background: #eeeeee;"></div>
<div class="sg-swatch-info">
<div class="sg-swatch-name">Border Light</div>
<div class="sg-swatch-hex">#eeeeee</div>
</div>
</div>
</div>
</div>
</div>
<!-- ======== TYPOGRAPHY ======== -->
<div class="sg-section">
<div class="sg-section-title">Typography</div>
<div class="sg-subsection">
<div class="sg-label">App Typography (common.css)</div>
<div class="sg-demo">
<span class="huge-bold-dark">Huge Bold Dark</span>
<br/><br/>
<span class="big-bold-dark">Big Bold Dark</span>
<br/><br/>
<span class="bold-dark">Bold Dark</span>
<br/><br/>
Body text in #515151 on Helvetica.
<br/><br/>
<a href="#">Link style &#8212; green #a3c765, weight 600</a>
</div>
<div class="sg-code">.huge-bold-dark &#8212; 2.7em, weight 550, color #0b0b0b
.big-bold-dark &#8212; 1.4em, weight 550, color #0b0b0b
.bold-dark &#8212; weight 550, color #0b0b0b
body text &#8212; default size, color #515151
a (links) &#8212; color #a3c765, weight 600</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Landing Typography (landing.css)</div>
<div class="sg-demo">
<h1 class="landing-hero-title" style="white-space: normal;">Hero Title</h1>
<p class="landing-hero-subtitle">Hero subtitle line</p>
<h2 class="landing-section-title">Section Title</h2>
<p class="landing-body">Landing body text with <a href="#">inline link</a> and proper line-height.</p>
<p class="landing-muted">Muted caption text, centered.</p>
</div>
<div class="sg-code">.landing-hero-title &#8212; 2.4em mobile / 4.5em desktop, weight 700
.landing-hero-subtitle &#8212; 1.25em, weight 500
.landing-section-title &#8212; 2em, weight 700, centered
.landing-body &#8212; 1.05em, line-height 1.7, color #515151
.landing-muted &#8212; 14px, color #999, centered</div>
</div>
</div>
<!-- ======== BUTTONS ======== -->
<div class="sg-section">
<div class="sg-section-title">Buttons</div>
<div class="sg-subsection">
<div class="sg-label">App Buttons (common.css)</div>
<div class="sg-demo">
<a href="#" class="shop-new-button mps-button">+ New Shop</a>
<a href="#" class="product-edit-button mps-button">&#128366; Edit</a>
<a href="#" class="source-button mps-button">&#x2710; Source Code</a>
<a href="#" class="log-out-button mps-button">Log Out</a>
<a href="#" class="cart-delete-button mps-button">Delete</a>
<a href="#" class="shop-switch-button mps-button">Switch Shop</a>
</div>
<div class="sg-code">Green CTA: .shop-new-button.mps-button
Blue: .product-edit-button.mps-button
Purple: .source-button.mps-button
Navy: .log-out-button.mps-button
Danger: .cart-delete-button.mps-button
Outline: .shop-switch-button.mps-button
border-radius: 4px, min-width: 250px</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Landing Page CTAs (landing.css)</div>
<div class="sg-demo">
<div class="landing-cta-group">
<a href="#" class="shop-new-button mps-button landing-cta">+ Open a Shop</a>
<a href="#" class="source-button mps-button landing-cta">&#x2710; Source Code</a>
</div>
</div>
<div class="sg-code">Add .landing-cta for pill shape + hover lift
border-radius: 50px, padding: 16px 32px
box-shadow: 0 2px 8px rgba(0,0,0,0.08)
hover: translateY(-1px), deeper shadow
.landing-cta-large &#8212; 18px font, 48px horizontal padding</div>
</div>
</div>
<!-- ======== LANDING SECTIONS ======== -->
<div class="sg-section">
<div class="sg-section-title">Landing Sections</div>
<div class="sg-subsection">
<div class="sg-label">Alternating sections (no HR dividers)</div>
<div class="sg-demo" style="padding: 0; overflow: hidden;">
<div style="padding: 24px; background: #FFFFFF;">
<h2 class="landing-section-title" style="font-size: 1.2em;">White section (.landing-section)</h2>
</div>
<div style="padding: 24px; background: #F9F9FA;">
<h2 class="landing-section-title" style="font-size: 1.2em;">Alt section (.landing-section-alt)</h2>
</div>
<div style="padding: 24px; background: #FFFFFF;">
<h2 class="landing-section-title" style="font-size: 1.2em;">White section</h2>
</div>
</div>
<div class="sg-code">&lt;section class="landing-section"&gt;...&lt;/section&gt;
&lt;section class="landing-section landing-section-alt"&gt;...&lt;/section&gt;
.landing-section &#8212; padding: 64px mobile, 80px tablet, 100px desktop
.landing-section-alt &#8212; background: #F9F9FA
.landing-final-cta &#8212; gradient: #f8faf5 to #f0f6ff</div>
</div>
</div>
<!-- ======== PRICING CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Pricing Cards</div>
<div class="sg-demo sg-demo-alt">
<div class="landing-pricing" style="max-width: 500px;">
<div class="landing-pricing-card">
<span class="landing-pricing-icon">&#128197;</span>
<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>
<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>
</div>
</div>
</div>
<div class="sg-code">.landing-pricing-card &#8212; white bg, 1px border, 16px radius
.landing-pricing-featured &#8212; 2px green border, green shadow
.landing-pricing-badge &#8212; absolute pill, green bg, white text
.landing-pricing-amount &#8212; 3em, weight 700
.landing-pricing-period &#8212; 0.35em, color #999</div>
</div>
<!-- ======== FEATURE CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Feature Cards</div>
<div class="sg-demo">
<div class="mps-card-grid" style="max-width: 500px;">
<div class="mps-card">
<span class="mps-card-icon">&#128176;</span>
<span class="mps-card-title">Card Title</span>
<span class="mps-card-desc">Card description with details about the feature goes here.</span>
</div>
<div class="mps-card">
<span class="mps-card-icon">&#128200;</span>
<span class="mps-card-title"><a href="#">Linked Card Title</a></span>
<span class="mps-card-desc">Cards with links in the title use green hover.</span>
</div>
</div>
</div>
<div class="sg-code">&lt;div class="mps-card-grid"&gt;
&lt;div class="mps-card"&gt;
&lt;span class="mps-card-icon"&gt;...&lt;/span&gt;
&lt;span class="mps-card-title"&gt;Title&lt;/span&gt;
&lt;span class="mps-card-desc"&gt;Description&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
Landing: 12px radius, subtle shadow, hover lift
Grid: 1 col mobile, 2 col tablet+, .three-col for 3</div>
</div>
<!-- ======== STEP CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Step Cards</div>
<div class="sg-demo">
<div class="mps-card-grid three-col" style="max-width: 600px;">
<div class="mps-card landing-step-card">
<span class="landing-step-number">1</span>
<span class="mps-card-title">First Step</span>
<span class="mps-card-desc">Description of the first step.</span>
</div>
<div class="mps-card landing-step-card">
<span class="landing-step-number">2</span>
<span class="mps-card-title">Second Step</span>
<span class="mps-card-desc">Description of the second step.</span>
</div>
<div class="mps-card landing-step-card">
<span class="landing-step-number">3</span>
<span class="mps-card-title">Third Step</span>
<span class="mps-card-desc">Description of the third step.</span>
</div>
</div>
</div>
<div class="sg-code">.landing-step-card &#8212; centered text
.landing-step-number &#8212; 44px green circle, white number, weight 700</div>
</div>
<!-- ======== PROTECTION LISTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Protection Lists</div>
<div class="sg-demo">
<div class="landing-two-lists" style="max-width: 600px;">
<div class="landing-list-card landing-list-bad">
<ul>
<li><span class="landing-x">&#x274C;</span> Negative item</li>
<li><span class="landing-x">&#x274C;</span> Another negative</li>
</ul>
</div>
<div class="landing-list-card landing-list-good">
<ul>
<li><span class="landing-check">&#x2714;</span> <b>Positive item</b> <span class="landing-list-detail">&#8212; Details</span></li>
<li><span class="landing-check">&#x2714;</span> <b>Another positive</b> <span class="landing-list-detail">&#8212; More details</span></li>
</ul>
</div>
</div>
</div>
<div class="sg-code">.landing-list-bad &#8212; bg #fef2f2, border #f5d5d5
.landing-list-good &#8212; bg #f0f9e8, border #d5e8c0
.landing-x &#8212; color #c77765
.landing-check &#8212; color #678731
.landing-list-detail &#8212; color #666
Grid: stacked mobile, 2 col at 800px+</div>
</div>
<!-- ======== COMPARISON CARDS ======== -->
<div class="sg-section">
<div class="sg-section-title">Comparison Cards</div>
<div class="sg-demo">
<div class="mps-comparison" style="max-width: 500px;">
<div class="mps-comparison-card marketplace">
<span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
<span class="mps-comparison-label">Marketplace (30% commission)</span>
</div>
<div class="mps-comparison-card mps">
<span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
<span class="mps-comparison-label">Make Post Sell (0% commission)</span>
</div>
</div>
</div>
<div class="sg-code">.mps-comparison-card.marketplace &#8212; bg #f8d7da, border #c77765
.mps-comparison-card.mps &#8212; bg #e8f5d4, border #678731
.mps-comparison-amount &#8212; 2.4em, weight 600
Landing: 16px radius, 32px padding</div>
</div>
<!-- ======== RIBBON ======== -->
<div class="sg-section">
<div class="sg-section-title">Ribbons</div>
<div class="sg-subsection">
<div class="sg-label">Message Ribbon (top banner, desktop only)</div>
<div class="sg-demo">
<div class="message-ribbon" style="display: block;">
Sell digital downloads or physical products &#8212; commission free!
</div>
</div>
<div class="sg-code">&lt;div class="message-ribbon"&gt;
Your message here
&lt;/div&gt;
Gradient: #5871ad &#8594; #82A8FF
Hidden on mobile, visible at 800px+</div>
</div>
</div>
<!-- ======== WELLS ======== -->
<div class="sg-section">
<div class="sg-section-title">Wells</div>
<div class="sg-subsection">
<div class="sg-label">Well (gray background)</div>
<div class="sg-demo">
<section class="one-column well">
Content inside a gray well with rounded corners.
</section>
</div>
<div class="sg-code">&lt;section class="one-column well"&gt;...&lt;/section&gt;
Background: #F9F9FA, border-radius: 10px, padding: 10px</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Well White</div>
<div class="sg-demo">
<section class="one-column well well-white">
Content inside a white well with rounded corners.
</section>
</div>
<div class="sg-code">&lt;section class="one-column well well-white"&gt;...&lt;/section&gt;
Background: #FFFFFF</div>
</div>
</div>
<!-- ======== ALERTS ======== -->
<div class="sg-section">
<div class="sg-section-title">Alerts</div>
<div class="sg-demo">
<div class="alert alert-success" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Success alert &#8212; green background #a3c765</div>
</div>
<div class="alert alert-info" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Info alert &#8212; blue background #98b6fa</div>
</div>
<div class="alert alert-warning" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Warning alert &#8212; yellow background #fff3cd</div>
</div>
<div class="alert alert-danger" style="display: block; padding: 10px; margin-bottom: 8px; border-radius: 4px;">
<div class="alert-message">Danger alert &#8212; red background #f8d7da</div>
</div>
</div>
<div class="sg-code">Variants: alert-success, alert-info, alert-warning, alert-danger</div>
</div>
<!-- ======== LAYOUT ======== -->
<div class="sg-section">
<div class="sg-section-title">Layout</div>
<div class="sg-subsection">
<div class="sg-label">One Column (max-width 800px, centered)</div>
<div class="sg-code">&lt;section class="one-column"&gt;...&lt;/section&gt;
&lt;section class="one-column well"&gt;...&lt;/section&gt;
&lt;section class="one-column-thin"&gt;...&lt;/section&gt; (max-width 400px)</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Navigation Grid</div>
<div class="sg-code">&lt;section class="nav-grid"&gt;
&lt;section class="nav"&gt;
&lt;section class="logo"&gt;...&lt;/section&gt;
&lt;section class="middle"&gt;...&lt;/section&gt;
&lt;section class="log-in"&gt;...&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;
Mobile: stacked (1 column)
Desktop (800px+): 3 columns (logo | middle | log-in)</div>
</div>
<div class="sg-subsection">
<div class="sg-label">Breakpoints</div>
<div class="sg-code">Mobile first (no media query)
@media (min-width: 800px) &#8212; tablet/desktop
@media (min-width: 1200px) &#8212; wide desktop</div>
</div>
<div class="sg-subsection">
<div class="sg-label">CSS Files</div>
<div class="sg-code">common.css &#8212; shared app styles (layout, buttons, nav, wells, footer, cards)
mps.css &#8212; message ribbon, alerts
landing.css &#8212; landing page (hero, sections, pricing, CTAs, lists, steps)</div>
</div>
</div>
<!-- ======== FOOTER ======== -->
<div class="sg-section">
<div class="sg-section-title">Footer</div>
<div class="sg-code">&lt;footer class="mps-footer"&gt;
&lt;div class="mps-footer-grid"&gt;
&lt;div class="mps-footer-brand"&gt;...&lt;/div&gt;
&lt;div class="mps-footer-group"&gt;
&lt;span class="mps-footer-group-title"&gt;Title&lt;/span&gt;
&lt;nav class="mps-footer-links"&gt;
&lt;a href="#"&gt;Link&lt;/a&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="mps-footer-ctas"&gt;...&lt;/div&gt;
&lt;div class="mps-footer-bottom"&gt;...&lt;/div&gt;
&lt;/footer&gt;
Mobile: stacked (1 column)
Desktop (800px+): 4 columns (2fr 1fr 1fr 1fr)</div>
<p>See live footer below &#x2193;</p>
</div>
</section>
</section>
</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 digital downloads &amp; physical product sales for creators.
</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">New Shop</a>
</nav>
</div>
</div>
<div class="mps-footer-ctas">
<a href="https://my.makepostsell.com/s/new" class="shop-new-button mps-button">+ New Shop</a>
<a href="https://blog.makepostsell.com/" class="product-edit-button mps-button">&#128366; Blog</a>
</div>
<div class="mps-footer-bottom">
makepostsell.com &copy; 2026 &mdash; Commission-free sales by <a href="https://www.unturf.com/software/" target="_blank">unturf.com</a>
</div>
</footer>
</body>
</html>
Reference in a new issue View git blame Copy permalink