Rearrange page to have floating donation box
This commit is contained in:
Hippo
parent
8bc309a936
commit
ebedadd38d
1 changed files with 97 additions and 68 deletions
165
src/index.htm
165
src/index.htm
|
|
@ -18,97 +18,126 @@
|
||||||
<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 class="w-full xs:w-full md:w-2/5 p-10">
|
|
||||||
<div class="bg-white p-2 flex flex-col">
|
|
||||||
<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-sm font-medium text-orange-700 dark:text-white">Goal: ₹5,00,000</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
<div class="p-5">
|
||||||
<div class="bg-orange-600 h-2.5 rounded-full" style="width: calc(80000/500000*100)%"></div>
|
<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-sm font-medium text-orange-700 dark:text-white">Goal: ₹5,00,000</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||||
|
<div class="bg-orange-600 h-2.5 rounded-full" style="width: calc(80000/500000*100)%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<span class="text-base font-medium text-orange-700 dark:text-white">129 people</span>
|
||||||
|
<span class="text-sm font-medium text-orange-700 dark:text-white">Goal: 750</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
||||||
|
<div class="bg-orange-600 h-2.5 rounded-full" style="width: calc(129/750*100)%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#pledge-form" class="font-sans text-base mt-4 p-2 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full md:w-3/5 lg:w-3/4 text-orange-800">
|
||||||
<div class="flex justify-between mb-1">
|
<div class="max-w-4xl ml-auto p-10">
|
||||||
<span class="text-base font-medium text-orange-700 dark:text-white">129 people</span>
|
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1>
|
||||||
<span class="text-sm font-medium text-orange-700 dark:text-white">Goal: 750</span>
|
<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"/>
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
</div>
|
||||||
<div class="bg-orange-600 h-2.5 rounded-full" style="width: calc(129/750*100)%"></div>
|
</div>
|
||||||
|
|
||||||
|
<div class="text-yellow-800 w-full md:w-3/5 lg:w-3/4">
|
||||||
|
<div class="max-w-4xl ml-auto p-10">
|
||||||
|
<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">
|
||||||
|
<img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/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>.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="#pledge-form" class="font-sans text-base mt-4 p-2 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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-orange-600 text-orange-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">Who we are</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">
|
||||||
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.
|
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-yellow-800 text-yellow-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">What we do</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">
|
||||||
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>.
|
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-red-900 text-red-100">
|
<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">
|
||||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1>
|
<h1 class="font-heading font-extrabold text-2xl">
|
||||||
<div class="flex flex-wrap text-xl font-sans">
|
Help us make the Snipette print magazine affordable for everyone
|
||||||
<img alt="[TK pup]" class="p-5 sm:w-full md:w-1/2 lg:w-1/3"/>
|
</h1>
|
||||||
<p class="p-5 sm:w-full md:w-1/2 lg:w-2/3">
|
<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>
|
||||||
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 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>
|
<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>
|
|
||||||
|
|
||||||
<div class="bg-green-900 text-green-100">
|
</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">
|
<div class="max-w-4xl mx-auto p-10">
|
||||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Your Solution</h1>
|
<p class="p-5 text-xl">[TK donation deets]</p>
|
||||||
<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"/>
|
|
||||||
<p class="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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bg-green-200 text-green-900">
|
<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">
|
|
||||||
<p>[TK donation deets]</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-orange-200 text-orange-900">
|
|
||||||
<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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue