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

Make "How it works" flowchart mobile-friendly

Browse source 
We'll remove the lines, move the circles up, and make it all
single-column. Flexbox rocks!
This commit is contained in:
Hippo 2021-10-26 17:03:58 +05:30
parent e2a35462bc
commit baa40ea8ac
1 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/index.htm
View file

@ -142,69 +142,69 @@
<p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p> <p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p>
<ul class="m-4 text-lg"> <ul class="m-4 text-lg">
<li class="flex"> <li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="w-1/2 p-4"> <div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 /> <img width=640 height=480 />
</div> </div>
<div class="py-4 w-8"> <div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p> <p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p>
</div> </div>
</li> </li>
<li class="flex flex-row-reverse"> <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<div class="w-1/2 p-4"> <div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 /> <img width=640 height=480 />
</div> </div>
<div class="py-4 w-8"> <div class="md:w-1/2 md:pr-4 flex items-center order-3">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your topic is chosen, we will work together on finding links, resources, and publicly available datasets. Of course, all details and final choices will be up to you.</</p> <p>Once your topic is chosen, we will work together on finding links, resources, and publicly available datasets. Of course, all details and final choices will be up to you.</</p>
</div> </div>
</li> </li>
<li class="flex"> <li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="w-1/2 p-4"> <div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 /> <img width=640 height=480 />
</div> </div>
<div class="py-4 w-8"> <div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>You will then switch to a Google Colab notebook, where you will document your project, data analytics, and visualization with state of the art Python-based data analysis tools.</p> <p>You will then switch to a Google Colab notebook, where you will document your project, data analytics, and visualization with state of the art Python-based data analysis tools.</p>
</div> </div>
</li> </li>
<li class="flex flex-row-reverse"> <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<div class="w-1/2 p-4"> <div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 /> <img width=640 height=480 />
</div> </div>
<div class="py-4 w-8"> <div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>We will guide you in constructing a compelling data-based story based on your analyses.</p> <p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
</div> </div>
</li> </li>
<li class="flex"> <li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="w-1/2 p-4"> <div class="py-4 w-8 order-1 md:order-2">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
<div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 /> <img width=640 height=480 />
</div> </div>
<div class="py-4 w-8"> <div class="md:w-1/2 pl-4 flex items-center order-3">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p> <p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
</div> </div>
</li> </li>
<li class="flex flex-col items-center"> <li class="flex flex-col items-center">
<div class="py-4 w-8"> <div class="py-4 w-8">
<div class="w-0 h-full border border-blue-700 mx-auto"></div> <div class="w-0 h-full border border-blue-700 mx-auto hidden md:block"></div>
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p> <p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
</div> </div>
<p class="text-lg mt-4"> <p class="text-lg mt-4">