Add main page content
This commit is contained in:
Hippo
parent
378a0cb060
commit
154caab594
BIN
src/header.png
Normal file
BIN
src/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 541 KiB |
111
src/index.htm
111
src/index.htm
|
|
@ -2,10 +2,115 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>My First Parcel App</title>
|
||||
<title>Snipette Crowdfunding: Analog for Everyone</title>
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
|
||||
<!-- Fonts: Crimson Text, Abhaya Libre, Open Sans -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Crimson+Text&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="text-2xl text-center font-heading">Hello, peeps :)</h1>
|
||||
<body class="bg-orange-200 font-serif">
|
||||
<div class="bg-orange-600 uppercase text-lg text-orange-800 p-5 font-sans">
|
||||
Snipette Analog Fundraiser
|
||||
</div>
|
||||
<div class="bg-orange-600 text-center p-10">
|
||||
<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>
|
||||
</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">
|
||||
<h1 class="font-heading font-extrabold text-xl">
|
||||
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 Snpette, and make it cost-effective for everybody else as well!</p>
|
||||
<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 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 class="bg-orange-600 text-orange-100">
|
||||
<div class="max-w-4xl mx-auto p-10">
|
||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Who we are</h1>
|
||||
<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="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>
|
||||
|
||||
<div class="bg-yellow-800 text-yellow-100">
|
||||
<div class="max-w-4xl mx-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="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>
|
||||
</div>
|
||||
|
||||
<div class="bg-red-900 text-red-100">
|
||||
<div class="max-w-4xl mx-auto p-10">
|
||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Our problem</h1>
|
||||
<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="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>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-900 text-green-100">
|
||||
<div class="max-w-4xl mx-auto p-10">
|
||||
<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">
|
||||
<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 class="bg-green-200 text-green-900">
|
||||
<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">
|
||||
<h1 class="text-4xl font-heading font-extrabold lowercase text-center">Frequently asked questions</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue