Add "How it Works" section

As suggested by Nia

src/index.htm

@@ -94,6 +94,20 @@
         </div>
       </div>
     </div>
+
+    <div class="p-4 pb-20 max-w-4xl mx-auto text-justify">
+      <h1 class="text-3xl text-center">How it works</h1>
+      <p>We understand that no two peoples’ requirements of us will be the same. No two people’s ideas or problems or finished products will be identical. Having said that, we do have some ideas about the system, that will hold constant for all our applicants</p>
+
+      <ul class="list-chevron m-4">
+        <li>Your workplace will be an empty Google Docs sheet. This is where you’ll be writing your article and we, the Snipette editors, will be using the “comments” and “suggestions” features to help you out and suggest edits.</li>
+        <li>Meanwhile, we’ll also keep an email thread going. This is where we, writer and editors, will be discussing the article in general. You can also ask any questions you might have or ask for help if you need it.</li>
+        <li>When your article is done, you will need to copy-paste it to a Medium draft, and submit it to Snipette. This is so that we can publish it under your name. This is where we’ll adjust the images and text formatting.</li>
+        <li>Once you give your approval, your article will be scheduled for publication <a href="https://medium.com/snipette/" target="_blank" style="text-orange-100 hover:text-orange-900">on Medium</a> as well as <a href="https://www.snipettemag.com" target="_blank" style="text-orange-100 hover:text-orange-900">on our own website.</a></li>
+      </ul>
+      <p>And that's it! Time to sit back and show off your brand-new article :)</p>
+    </div>
+
     <div class="bg-orange-900 text-orange-100">
       <div class="max-w-4xl mx-auto flex flex-wrap justify-center">
         <img src="img/pup-with-penknife.png" class="w-auto h-48">