snipette/snipette-crowdfunding-site
snipette/snipette-crowdfunding-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rearrange page to have floating donation box

Browse source
This commit is contained in:
Hippo 2021-12-27 23:17:20 +05:30
parent 8bc309a936
commit ebedadd38d
1 changed files with 97 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/index.htm
View file

@ -18,18 +18,16 @@
<img alt="Snipette" class="text-5xl uppercase font-sans w-full max-w-3xl mx-auto" src="header.png"/> <img alt="Snipette" class="text-5xl uppercase font-sans w-full max-w-3xl mx-auto" src="header.png"/>
<p class="text-5xl text-orange-200 lowercase font-heading font-extrabold">Analog <span class="text-yellow-300">for Everyone</span></p> <p class="text-5xl text-orange-200 lowercase font-heading font-extrabold">Analog <span class="text-yellow-300">for Everyone</span></p>
</div> </div>
<div class="flex flex-wrap xs:flex-col md:flex-row max-w-4xl mx-auto">
<div class="w-full xs:w-full md:w-3/5 p-10 text-lg"> <!-- This container will include the floating donation box -->
<h1 class="font-heading font-extrabold text-xl"> <div>
Help us make the Snipette print magazine affordable for everyone
</h1> <div class="float-right w-full md:w-2/5 lg:w-1/4 p-0 md:p-5 sticky top-0 md:top-0.5">
<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> <div class="bg-white flex flex-col md:rounded-md md:drop-shadow-md">
<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> <div class="h-0 md:h-auto bg-orange-600 w-full p-0 md:p-3 md:rounded-t-md">
<p class="py-1">Your donation of ₹500 or more will get you a full years' worth of Snpette, and make it cost-effective for everybody else as well!</p> <h4 class="font-sans text-center text-white">Make Analog affordable</h4>
<a href="#pledge-form" class="font-sans text-base mt-4 p-4 border-2 border-solid border-orange-700 text-orange-700 hover:border-orange-500 hover:text-orange-500 uppercase rounded w-full inline-block text-center">Add your Pledge</a>
</div> </div>
<div class="w-full xs:w-full md:w-2/5 p-10"> <div class="p-5">
<div class="bg-white p-2 flex flex-col">
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
<span class="text-base font-medium text-orange-700 dark:text-white">80,000 rupees</span> <span class="text-base font-medium text-orange-700 dark:text-white">80,000 rupees</span>
<span class="text-sm font-medium text-orange-700 dark:text-white">Goal: ₹5,00,000</span> <span class="text-sm font-medium text-orange-700 dark:text-white">Goal: ₹5,00,000</span>
@ -52,63 +50,94 @@
</div> </div>
</div> </div>
<div class="bg-orange-600 text-orange-100"> <div class="w-full md:w-3/5 lg:w-3/4 text-orange-800">
<div class="max-w-4xl mx-auto p-10"> <div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1> <h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1>
<div class="flex flex-wrap text-xl font-sans"> <div class="flex flex-wrap text-xl font-sans">
<img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/> <img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<p class="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">
We are a web and print magazine seeking to explain the world in an easy to understand way. Our key words are: understandability, perspective, and fun. We are a web and print magazine seeking to explain the world in an easy to understand way. Our key words are: understandability, perspective, and fun.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-yellow-800 text-yellow-100"> <div class="text-yellow-800 w-full md:w-3/5 lg:w-3/4">
<div class="max-w-4xl mx-auto p-10"> <div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">What we do</h1> <h1 class="text-4xl font-heading font-extrabold lowercase text-center">What we do</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="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/> <img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<p class="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">
In order to make our content more accessible, we have been bringing out a print version, Snipette Analog, which is a better medium for long-form articles. <a href="#">Sample the latest issue here</a>. In order to make our content more accessible, we have been bringing out a print version, Snipette Analog, which is a better medium for long-form articles. <a href="#">Sample the latest issue here</a>.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-red-900 text-red-100"> <div class="text-red-800 w-full md:w-3/5 lg:w-3/4">
<div class="max-w-4xl mx-auto p-10"> <div class="max-w-4xl ml-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1> <h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1>
<div class="flex flex-wrap text-xl font-sans"> <div class="flex flex-wrap text-xl font-sans">
<img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/> <img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<p class="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">
Digital printing is expensive. Offset printing is more cost-effective, but it only works at scale—1000 copies or more. So we need more subscribers to bring down our costs, but lower costs to get more subscribers. <a href="https://en.wiktionary.org/wiki/Catch-22" target="_blank">Catch-22</a>. Digital printing is expensive. Offset printing is more cost-effective, but it only works at scale—1000 copies or more. So we need more subscribers to bring down our costs, but lower costs to get more subscribers. <a href="https://en.wiktionary.org/wiki/Catch-22" target="_blank">Catch-22</a>.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-green-900 text-green-100"> <div class="text-green-800 w-full md:w-3/5 lg:w-3/4">
<div class="max-w-4xl mx-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="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/> <img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
<p class="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. 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.
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-green-200 text-green-900"> <div class="w-full xs:w-full md:w-3/5 lg:w-3/4 p-10 text-lg">
<div class="max-w-4xl mx-auto p-10"> <div class="max-w-4xl ml-auto p-2 md:p-10">
<p>[TK donation deets]</p> <h1 class="font-heading font-extrabold text-2xl">
Help us make the Snipette print magazine affordable for everyone
</h1>
<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>
<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> </div>
</div> </div>
<div class="bg-orange-200 text-orange-900"> </div>
<!-- Here, the floating donation box ceases to float -->
<div class="text-green-900 w-full md:w-3/5 lg:w-3/40">
<div class="max-w-4xl mx-auto p-10">
<p class="p-5 text-xl">[TK donation deets]</p>
</div>
</div>
<div class="bg-orange-200 text-orange-900 w-full md:w-3/5 lg:w-3/4">
<div class="max-w-4xl mx-auto p-10"> <div class="max-w-4xl mx-auto p-10">
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Frequently asked questions</h1> <h1 class="text-4xl font-heading font-extrabold lowercase text-center">Frequently asked questions</h1>
<ul>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
</ul>
</div> </div>
</div> </div>