snipette-datpro-site/src/index.htm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Snipette Writers' Programme</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="bg-orange-100">
    <div class="bg-orange-800 p-10 text-center">
      <img src="img/penknife.png" class="w-1/2 sm:w-auto md:w-full lg:w-64 mx-auto my-10" />
      <p class="text-gray-300 text-4xl">You write. We set it right.</p>
    </div>
    <div class="bg-orange-900 text-gray-100 p-10 text-center">
      <p>Want to write an article, but don't know how to go about it? The Snipette Writers' Programme is here to help. <a href="#pricing" class="text-orange-300 hover:text-orange-400">And it's free!</a></p>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap mx-auto">
        <div class="sm:w-full md:w-1/2 lg:w-1/3">
        <img src="img/aspiring-writer.png" />
        </div>
        <div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
          <a name="aspiring-writers">
            <h1 class="text-2xl">Aspiring writers <i class="icon-paperclip"></i></h1>
          </a>
          <p>Whether it's giving you tips or writing paragraphs for you—we'll help you as much or as little as you need.</p>
          <ul class="list-disc">
            <li>Brainstorming help</li>
            <li>Layout and structure</li>
            <li>Grammar and punctuation</li>
            <li>Custom illustrations</li>
          </ul>
        </div>
      </div>
      <div class="flex flex-wrap mx-auto">
        <div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
          <a name="researchers">
            <h1 class="text-2xl">Scientists &amp; researchers <i class="icon-flask"></i></h1>
          </a>
          <p>Share your work beyond its specific niche. Put your technical writing on hold and let creativity run wild—because it's time the rest of the world knows what you're doing.</p>
          <ul class="list-disc">
            <li>Stories showcase the science</li>
            <li>Explain points using metaphors</li>
            <li>Grip readers with fiction techniques</li>
          </ul>
        </div>
        <div class="sm:w-full md:w-1/2 lg:w-1/3">
          <img src="img/researcher.png" />
        </div>
      </div>
      <div class="flex flex-wrap mx-auto">
        <div class="sm:w-full md:w-1/2 lg:w-1/3">
        <img src="img/established-writer.png" />
        </div>
        <div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
          <a name="established-writers">
            <h1 class="text-2xl">Established writers <i class="icon-edit"></i></h1>
          </a>
          <p>Try out a new writing style, with new quirky rules. What we're doing here is neither fact nor fiction—but something in between.</p>
          <ul class="list-disc">
            <li>Breathe new life into old pieces</li>
            <li>Try out new writing styles</li>
            <li>New people to brainstorm with</li>
          </ul>
          <p class="text-sm mt-1">or, skip the Programme and <a href="https://www.snipettemag.com/write/" class="text-orange-800 hover:text-orange-900">write for us directly.</a></p>
        </div>
      </div>
      <div class="bg-white flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded">
        <div class="sm:w-auto md:w-auto lg:w-1/3 p-4">
          <a name="pricing">
            <h2 class="text-center uppercase">Price</h2>
          </a>
          <p class="text-center text-4xl"><span class="text-base">$</span>0</p>
          <p class="text-center text-lg my-2">That's right—it's free!</p>
          <p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our some monetisation strategy ourselves: let us know if you want to know more.</p>
        </div>
        <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
          <h2 class="text-center uppercase">You give us</h2>
          <ul class="list-disc">
            <li>Content written in the Snipette Style</li>
            <li>Rights to publish your piece on our <a href="//www.snipettemag.com" target="_blank" class="text-orange-800 hover:text-orange-900">website</a> and <a href="//medium.com/snipette" target="_blank" class="text-orange-800 hover:text-orange-900">Medium publication</a></li>
            <li>Credit-lines to Snipette if you re-post elsewhere</li>
            <li>Good company to work with ;)</li>
          </ul>
        </div>
        <div class="sm:w-full md:w-auto lg:w-1/3 p-4">
          <h2 class="text-center uppercase">We give you</h2>
          <ul class="list-disc">
            <li>Help and guidance creating your piece</li>
            <li>More exposure for your piece</li>
            <li>Custom illustrations</li>
            <li>Rights to re-post <abbr title="You are free to re-post with permission from Snipette for the first 6 months after publication, and without permission ever afterwards">anywhere you like*</abbr></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bg-orange-900 text-orange-100">
      <div class="max-w-4xl mx-auto flex flex-wrap content-center">
        <img src="img/pup-with-penknife.png" class="w-auto h-48">
        <div class="w-auto my-auto ml-10">
          <div class="w-auto">
            <p class="text-3xl text-orange-200">Ready to give us a spin?
              <a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 bg-orange-500 text-orange-900 uppercase rounded">Apply Now</a>
            </p>
          </div>
          <p class="text-sm text-orange-200 text-center">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>
        </div>
      </div>
    </div>
    <div class="bg-black text-gray-100 p-4 text-xs">
      &copy; Snipette 2020
      <div class="float-right">
        <a href="//www.snipettemag.com">Home</a>
        <a href="//www.snipettemag.com/introducing-snipette">About</a>
        <a href="//facebook.com/snipette">Facebook</a>
        <a href="//twitter.com/snipettemag">Twitter</a>
        <a href="//squeet.me/u/snipette">Mastodon</a>
        <a href="//instagram.com/snipettemag">Instagram</a>
        <a href="//liberapay.com/snipettemag">Donate via Liberapay</a>
      </div>
    </div>
  </body>
</html>
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset="utf-8">`
			`<title>Snipette Writers' Programme</title>`
@import all styles to style.css Let's modularise our CSS and @import it all to one place! 2020-04-10 06:11:24 -04:00			`<link rel="stylesheet" href="style.css" />`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</head>`
			`<body class="bg-orange-100">`
			`<div class="bg-orange-800 p-10 text-center">`
Add images and move to img/ folder 2020-04-10 05:58:41 -04:00			`<img src="img/penknife.png" class="w-1/2 sm:w-auto md:w-full lg:w-64 mx-auto my-10" />`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`<p class="text-gray-300 text-4xl">You write. We set it right.</p>`
			`</div>`
			`<div class="bg-orange-900 text-gray-100 p-10 text-center">`
			`<p>Want to write an article, but don't know how to go about it? The Snipette Writers' Programme is here to help. <a href="#pricing" class="text-orange-300 hover:text-orange-400">And it's free!</a></p>`
			`</div>`
			`<div class="max-w-4xl mx-auto">`
			`<div class="flex flex-wrap mx-auto">`
			`<div class="sm:w-full md:w-1/2 lg:w-1/3">`
Add images and move to img/ folder 2020-04-10 05:58:41 -04:00			`<img src="img/aspiring-writer.png" />`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</div>`
			`<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">`
			`<a name="aspiring-writers">`
Show icons in subheadings 2020-04-10 06:38:37 -04:00			`<h1 class="text-2xl">Aspiring writers <i class="icon-paperclip"></i></h1>`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</a>`
			`<p>Whether it's giving you tips or writing paragraphs for you—we'll help you as much or as little as you need.</p>`
			`<ul class="list-disc">`
			`<li>Brainstorming help</li>`
			`<li>Layout and structure</li>`
			`<li>Grammar and punctuation</li>`
			`<li>Custom illustrations</li>`
			`</ul>`
			`</div>`
			`</div>`
			`<div class="flex flex-wrap mx-auto">`
			`<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">`
			`<a name="researchers">`
Show icons in subheadings 2020-04-10 06:38:37 -04:00			`<h1 class="text-2xl">Scientists & researchers <i class="icon-flask"></i></h1>`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</a>`
			`<p>Share your work beyond its specific niche. Put your technical writing on hold and let creativity run wild—because it's time the rest of the world knows what you're doing.</p>`
			`<ul class="list-disc">`
			`<li>Stories showcase the science</li>`
			`<li>Explain points using metaphors</li>`
			`<li>Grip readers with fiction techniques</li>`
			`</ul>`
			`</div>`
			`<div class="sm:w-full md:w-1/2 lg:w-1/3">`
Add images and move to img/ folder 2020-04-10 05:58:41 -04:00			`<img src="img/researcher.png" />`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</div>`
			`</div>`
			`<div class="flex flex-wrap mx-auto">`
			`<div class="sm:w-full md:w-1/2 lg:w-1/3">`
Add images and move to img/ folder 2020-04-10 05:58:41 -04:00			`<img src="img/established-writer.png" />`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</div>`
			`<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">`
			`<a name="established-writers">`
Show icons in subheadings 2020-04-10 06:38:37 -04:00			`<h1 class="text-2xl">Established writers <i class="icon-edit"></i></h1>`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`</a>`
			`<p>Try out a new writing style, with new quirky rules. What we're doing here is neither fact nor fiction—but something in between.</p>`
			`<ul class="list-disc">`
			`<li>Breathe new life into old pieces</li>`
			`<li>Try out new writing styles</li>`
			`<li>New people to brainstorm with</li>`
			`</ul>`
			`<p class="text-sm mt-1">or, skip the Programme and <a href="https://www.snipettemag.com/write/" class="text-orange-800 hover:text-orange-900">write for us directly.</a></p>`
			`</div>`
			`</div>`
			`<div class="bg-white flex flex-wrap mx-auto my-16 shadow-xl sm:mx-4 rounded">`
			`<div class="sm:w-auto md:w-auto lg:w-1/3 p-4">`
			`<a name="pricing">`
			`<h2 class="text-center uppercase">Price</h2>`
			`</a>`
			`<p class="text-center text-4xl"><span class="text-base">$</span>0</p>`
			`<p class="text-center text-lg my-2">That's right—it's free!</p>`
			`<p class="text-sm">You can even earn money through the <a href="//medium.com/creators" target="_blank" class="text-orange-800 hover:text-orange-900">Medium Partner Programme</a>. We're working on setting up our some monetisation strategy ourselves: let us know if you want to know more.</p>`
			`</div>`
			`<div class="sm:w-full md:w-auto lg:w-1/3 p-4">`
			`<h2 class="text-center uppercase">You give us</h2>`
			`<ul class="list-disc">`
			`<li>Content written in the Snipette Style</li>`
			`<li>Rights to publish your piece on our <a href="//www.snipettemag.com" target="_blank" class="text-orange-800 hover:text-orange-900">website</a> and <a href="//medium.com/snipette" target="_blank" class="text-orange-800 hover:text-orange-900">Medium publication</a></li>`
			`<li>Credit-lines to Snipette if you re-post elsewhere</li>`
			`<li>Good company to work with ;)</li>`
			`</ul>`
			`</div>`
			`<div class="sm:w-full md:w-auto lg:w-1/3 p-4">`
			`<h2 class="text-center uppercase">We give you</h2>`
			`<ul class="list-disc">`
			`<li>Help and guidance creating your piece</li>`
			`<li>More exposure for your piece</li>`
			`<li>Custom illustrations</li>`
			`<li>Rights to re-post <abbr title="You are free to re-post with permission from Snipette for the first 6 months after publication, and without permission ever afterwards">anywhere you like*</abbr></li>`
			`</ul>`
			`</div>`
			`</div>`
			`</div>`
			`<div class="bg-orange-900 text-orange-100">`
			`<div class="max-w-4xl mx-auto flex flex-wrap content-center">`
Add images and move to img/ folder 2020-04-10 05:58:41 -04:00			`<img src="img/pup-with-penknife.png" class="w-auto h-48">`
Initial project with Tailwind (and no media) 2020-04-06 12:02:22 -04:00			`<div class="w-auto my-auto ml-10">`
			`<div class="w-auto">`
			`<p class="text-3xl text-orange-200">Ready to give us a spin?`
			`<a href="//goo.gl/forms/NAf4TRKFBZ73v9C02"class="text-base m-4 p-4 bg-orange-500 text-orange-900 uppercase rounded">Apply Now</a>`
			`</p>`
			`</div>`
			`<p class="text-sm text-orange-200 text-center">Or, email <a href="mailto:editors@snipettemag.com" class="text-orange-300">editors@snipettemag.com</a> to know more</p>`
			`</div>`
			`</div>`
			`</div>`
			`<div class="bg-black text-gray-100 p-4 text-xs">`
			`© Snipette 2020`
			`<div class="float-right">`
			`<a href="//www.snipettemag.com">Home</a>`
			`<a href="//www.snipettemag.com/introducing-snipette">About</a>`
			`<a href="//facebook.com/snipette">Facebook</a>`
			`<a href="//twitter.com/snipettemag">Twitter</a>`
			`<a href="//squeet.me/u/snipette">Mastodon</a>`
			`<a href="//instagram.com/snipettemag">Instagram</a>`
			`<a href="//liberapay.com/snipettemag">Donate via Liberapay</a>`
			`</div>`
			`</div>`
			`</body>`
			`</html>`