Move timeline up and remove redundant description
The "help us to..." section was redundant since everything has already been explained in a more visual way!
This commit is contained in:
Hippo
parent
faa1b2d132
commit
25bd7acca2
1 changed files with 70 additions and 80 deletions
150
src/index.htm
150
src/index.htm
|
|
@ -90,29 +90,88 @@
|
||||||
<div class="max-w-4xl ml-auto p-10">
|
<div class="max-w-4xl ml-auto p-10">
|
||||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Your Solution</h1>
|
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Your Solution</h1>
|
||||||
<div class="flex flex-wrap flex-row md:flex-row-reverse text-xl font-sans">
|
<div class="flex flex-wrap flex-row md:flex-row-reverse text-xl font-sans">
|
||||||
<img alt="Puppies catching subscribers and money in a safety net" src="img/sheetpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
|
<img alt="Puppies catching subscribers and money in a safety net" src="img/sheetpup.png" class="p-5 sm:w-full md:w-1/2 lg:w-1/3 h-full"/>
|
||||||
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
|
<p class="md:p-5 sm:w-full md:w-1/2 lg:w-2/3">
|
||||||
Here's your chance to pledge to pay the lower rate for our print version. Once we hit our target numbers, we will ask you to actually make the payment, and start printing! You get a Snipette subscription, we get more subscribers, and the world gets to read Snipette at lower rates: a win-win all round.
|
Here's your chance to pledge to pay the lower rate for our print version. Your donation of ₹500 or more will get you a full years' worth of Snipette, and make it cost-effective for everybody else as well—a win-win situation all round.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full xs:w-full md:w-3/5 lg:w-3/4 p-10 text-lg">
|
<div class="w-full md:w-3/5 lg:w-3/4 mt-12">
|
||||||
<div class="max-w-4xl ml-auto p-2 md:p-10">
|
<div class="max-w-4xl ml-auto p-10 bg-orange-900 text-orange-100 md:rounded-md md:ml-4">
|
||||||
<h1 class="font-heading font-extrabold text-2xl">
|
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">How it works</h1>
|
||||||
Help us make the Snipette print magazine affordable for everyone
|
|
||||||
</h1>
|
<ul class="my-4 text-xl font-sans">
|
||||||
<p class="py-1">Snipette is a magazine aiming to explain the world in a fun and accessible way. We aim to make our articles accessible to everyone, without requiring special skills or advanced technical knowledge to follow along. Our authors hail from diverse backgrounds and are based all around the world.</p>
|
|
||||||
<p class="py-1">Our print edition, Snipette Analog, is now 2 years old and we have brought out 8 issues to date. However, due to low subscriber numbers, our subscription rates are very high (nearly ₹500 per issue). If we get a thousand subscribers, we will be able to switch to the more cost-effective <a href="#" target="_blank">offset printing</a>, which will bring the price down by 75% and make it affordable for a wider audience.</p>
|
<li class="flex flex-col md:flex-row items-center md:items-stretch">
|
||||||
<p class="py-1">Your donation of ₹500 or more will get you a full years' worth of Snipette, and make it cost-effective for everybody else as well!</p>
|
<div class="py-4 w-8 order-1 md:order-2">
|
||||||
|
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">1</p>
|
||||||
|
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
||||||
|
<img width=640 height=480 src="img/pledgeperson.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
|
||||||
|
<p>You make your pledge, saying how much you're willing to donate to us (or "subscribe", if that's how you prefer to think about it)</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
|
||||||
|
<div class="py-4 w-8 order-1 md:order-2">
|
||||||
|
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">2</p>
|
||||||
|
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
||||||
|
<img width=640 height=480 src="img/phonepup.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
|
||||||
|
<p>Once we've collected enough pledges to start operations, we'll reach out to you to make the payment (so be sure to provide us with valid contact details!)</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex flex-col md:flex-row items-center md:items-stretch">
|
||||||
|
<div class="py-4 w-8 order-1 md:order-2">
|
||||||
|
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">3</p>
|
||||||
|
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
||||||
|
<img width=640 height=480 src="img/coinpup.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
|
||||||
|
<p>You can make your payment through Internet Banking, card, UPI, cheque, or any other preferred method</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
|
||||||
|
<div class="py-4 w-8 order-1 md:order-2">
|
||||||
|
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">4</p>
|
||||||
|
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
||||||
|
<img width=640 height=480 src="img/presspup.png"/>
|
||||||
|
</div>
|
||||||
|
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
|
||||||
|
<p>When all the payments have come in, we will be ready to start printing! The first print run will happen 3-6 months after we reach our goal, and every 3 months from then onwards</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="flex flex-col items-center">
|
||||||
|
<div class="py-4 w-8">
|
||||||
|
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
||||||
|
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">…</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-center">We will be posting updates on the progress of this campaign on social media. If you have any questions, don't hesitate to drop us a line there or email <a href="mailto:editors@snipettemag.com">editors@snipettemag.com</a>.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Here, the floating donation box ceases to float -->
|
<!-- Here, the floating donation box ceases to float -->
|
||||||
|
|
||||||
<div class="w-full">
|
<div class="w-full mt-12">
|
||||||
<div class="max-w-4xl mx-auto p-10">
|
<div class="max-w-4xl mx-auto p-10">
|
||||||
<h1 class="text-center text-2xl font-sans">Donation options</h1>
|
<h1 class="text-center text-2xl font-sans">Donation options</h1>
|
||||||
|
|
||||||
|
|
@ -222,75 +281,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-orange-200 text-orange-900 w-full">
|
|
||||||
<div class="max-w-4xl mx-auto p-10">
|
|
||||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">What happens next?</h1>
|
|
||||||
|
|
||||||
<ul class="my-4 text-xl font-sans">
|
|
||||||
|
|
||||||
<li class="flex flex-col md:flex-row items-center md:items-stretch">
|
|
||||||
<div class="py-4 w-8 order-1 md:order-2">
|
|
||||||
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">1</p>
|
|
||||||
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
|
||||||
<img width=640 height=480 src="img/pledgeperson.png"/>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
|
|
||||||
<p>You make your pledge, saying how much you're willing to donate to us</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
|
|
||||||
<div class="py-4 w-8 order-1 md:order-2">
|
|
||||||
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">2</p>
|
|
||||||
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
|
||||||
<img width=640 height=480 src="img/phonepup.png"/>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
|
|
||||||
<p>Once we've collected enough pledges to start operations, we'll reach out to you to make the payment</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="flex flex-col md:flex-row items-center md:items-stretch">
|
|
||||||
<div class="py-4 w-8 order-1 md:order-2">
|
|
||||||
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">3</p>
|
|
||||||
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
|
||||||
<img width=640 height=480 src="img/coinpup.png"/>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
|
|
||||||
<p>You can make your payment through Internet Banking, card, UPI, cheque, or any other preferred method</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
|
|
||||||
<div class="py-4 w-8 order-1 md:order-2">
|
|
||||||
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">4</p>
|
|
||||||
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 p-4 order-2 md:order-1">
|
|
||||||
<img width=640 height=480 src="img/presspup.png"/>
|
|
||||||
</div>
|
|
||||||
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
|
|
||||||
<p>When all the payments have come in, we will be ready to start printing!</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="flex flex-col items-center">
|
|
||||||
<div class="py-4 w-8">
|
|
||||||
<div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
|
|
||||||
<p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">.</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-orange-200 text-orange-900 w-full">
|
<div class="bg-orange-200 text-orange-900 w-full">
|
||||||
<div class="max-w-4xl mx-auto p-10 text-lg">
|
<div class="max-w-4xl mx-auto p-10 text-lg">
|
||||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center mb-5">Frequently asked questions</h1>
|
<h1 class="text-4xl font-heading font-extrabold lowercase text-center mb-5">Frequently asked questions</h1>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue