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>
<ul class="m-4 text-lg">
<li class="flex">
<div class="w-1/2 p-4">
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<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 />
</div>
<div class="py-4 w-8">
<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">
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<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>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<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 />
</div>
<div class="py-4 w-8">
<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">
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
<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>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<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 />
</div>
<div class="py-4 w-8">
<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">
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<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>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
<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 />
</div>
<div class="py-4 w-8">
<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">
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
</div>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<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 />
</div>
<div class="py-4 w-8">
<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">
<div class="md:w-1/2 pl-4 flex items-center order-3">
<p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
</div>
</li>
<li class="flex flex-col items-center">
<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>
</div>
<p class="text-lg mt-4">