<div class="page">
	<div class="wrapper">
		<div class="content content-membership content-migrate">
			<h1>Welcome to MLTSHP!</h1>

			<p>Hi, YourName! We are thrilled to have you join us here.</p>

			<p>Here’s what to do next:</p>

			<ol>
				<li>Choose your membership plan</li>
				<li>Optionally restore your MLKSHK.com content</li>
			</ol>

			<form>
				<input
					type="submit"
					class="btn btn-primary btn-shadow btn-large"
					value="Select Membership"
				/>
			</form>
		</div>
	</div>
</div>

<div class="page">
	<div class="wrapper">
		<div class="content content-membership">
			<header class="membership-header">
				<div class="membership-header--illustration">
					<img
						class="membership-friend"
						src="https://mltshp-cdn.com/static/images/membership-friend.svg"
					/>
				</div>
				<div class="membership-header--content">
					<h1>MLTSHP Membership</h1>
					<h2>MLTSHP is community-supported.</h2>
					<p>
						We offer two membership levels that unlock abilities on the site.
						Questions? Please see our <a href="#">FAQ</a> page.
					</p>
				</div>
			</header>

			<form></form>

			<div class="fun-form fun-form-stacked membership-form">
				<div class="membership-options is-active-member">
					<div class="membership-options--plan is-active-plan">
						<span class="label label-success label-pastel"
							>Your Current Plan</span
						>

						<h3 class="membership-options--plan-title">Single Scoop</h3>
						<p>Roughly equivalent to MLKSHK’s free account.</p>

						<h3>Only $3/year</h3>
						<p class="membership-options--plan-tagline">
							A nice way to help support MLTSHP and feel great about it.
						</p>

						<ul>
							<li>Bask in the warm glow of supporting MLTSHP.</li>
							<li>
								Save images and video links to your personal shake, up to 300mb
								per month.
							</li>
							<li>Save, like, and comment on your friends’ images.</li>
							<li>Follow interesting people &amp; group shakes.</li>
						</ul>

						<div class="field field-submit">
							<button
								type="button"
								class="btn btn-primary btn-shadow btn-large"
							>
								Single Scoop
							</button>
						</div>
					</div>

					<div class="membership-options--or">
						<div class="membership-options--or-bullet">
							<span>or</span>
						</div>
					</div>

					<div class="membership-options--plan">
						<h3 class="membership-options--plan-title">Double Scoop</h3>
						<p>Roughly equivalent to MLKSHK’s Pro account.</p>

						<h3>Only $24/year</h3>
						<p class="membership-options--plan-tagline">
							Or enter a custom amount below if you’d like to give more support.
						</p>

						<ul>
							<li>
								All the benefits of a Single Scoop membership, with no upload
								limit.
							</li>
							<li>Create up to 100 group shakes!</li>
							<li>Invite your friends to post to your group shakes.</li>
							<li>RSS feeds for your shakes.</li>
							<li>
								Appear more attractive to other MLTSHP users with a fancy
								<img
									alt=""
									src="https://mltshp-cdn.com/static/images/icon_plus.svg"
									width="12"
									height="12"
								/>
								on your profile.
							</li>
						</ul>

						<div class="field subscribe-plan-quantity-wrapper">
							<span class="field--currency-label">$</span>
							<input
								title="Enter a custom subscription amount, if you want"
								class="input-text input-plan-quantity"
								type="number"
								min="24"
								max="500"
								step="1"
								name="quantity"
								value="24"
								pattern="[0-9]*"
							/>
						</div>

						<div class="field field-submit">
							<button
								type="button"
								class="btn btn-primary btn-shadow btn-large"
							>
								Double Scoop
							</button>
						</div>
					</div>
				</div>
			</div>

			<footer class="membership-footer">
				<p class="fine-print">
					We use Stripe to process subscriptions. After payment, you’ll be
					brought back to your freshly made MLTSHP Paid Account.
				</p>
			</footer>
		</div>
	</div>
</div>

<div class="page">
	<div class="wrapper">
		<div class="content content-membership content-membership-thanks">
			<h1>Thank You!</h1>
			<p>
				We really greatly appreciate your support. Having a MLTSHP membership
				enables us to create new features and continually improve the site. We
				hope you continue to enjoy MLTSHP as much as we do.
			</p>
			<p>Now get out there and <a href="#">share some stuff</a>!</p>
		</div>
	</div>
</div>

<div class="page">
	<div class="wrapper">
		<div class="content content-membership content-migrate">
			<h2>Restore Your MLKSHK Content?</h2>

			<p>
				Would you like to restore your content from MLKSHK.com or start over
				with a clean account? If you choose to restore, all your posts, shakes,
				and comments will be brought over (with the same IDs, exactly as on
				MLKSHK).
			</p>

			<p>
				Posts you have favorited may not all be restored, since those are owned
				by others; once those members restore their content, you’ll see them
				again.
			</p>

			<p>
				You’ll have until <strong>December 31st, 2017</strong> to choose to
				restore your content. After that time, we will need to remove it
				permanently.
			</p>

			<div style="float: left">
				<form>
					<input
						type="submit"
						class="btn btn-primary btn-shadow btn-large"
						value="Restore It!"
					/>
				</form>
			</div>
			<div style="float: left; margin-left: 20px">
				<form>
					<input
						type="submit"
						class="btn btn-primary btn-shadow btn-large"
						value="I’ll Decide Later!"
					/>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="page">
	<div class="wrapper">
		<div class="content content-membership content-migrate">
			<h1>MLKSHK Restore Complete!</h1>

			<p>Thanks for joining MLTSHP and for all your posts!</p>

			<form>
				<input
					type="submit"
					class="btn btn-primary btn-shadow btn-large"
					value="Take me home!"
				/>
			</form>
		</div>
	</div>
</div>

<div class="page">
	<div class="wrapper">
		<div class="content content-membership">
			<h1 class="thank-you">Canceling</h1>
			<p>
				Thanks for trying us out, we’re sorry to see you go but understand the
				site isn’t for everyone.
			</p>
			<p>
				To cancel your account right now, click this button to confirm your the
				cancellation of your subscription:
			</p>

			<form>
				<input
					type="submit"
					class="subscription-button"
					value="Yes, Please Cancel"
					border="0"
				/>
			</form>

			<div class="clear"></div>
			<p>
				If you have any questions or need help please email us at
				<a href="#">hello@mltshp.com</a>
				and we’ll get back to you as soon as possible.
			</p>
		</div>
	</div>
</div>