add food-ninja subfolder

Author: solygambas

README.md

@@ -1,12 +1,23 @@
-# Food Ninja - Tailwind CSS
+# CSS Frameworks
+
+This repo is made of 1 project:
+
+1. [**Food Ninja**](#food): A recipe website to understand Tailwind CSS basics.
+<!-- 2. [**Star Wars Info**](#starwars): A web app about Star Wars to understand React Query basics. -->
+
+## <a name="food"></a>1) Food Ninja - Tailwind CSS
 
 A recipe website to understand Tailwind CSS basics.
 
+[See food-ninja folder](https://github.com/solygambas/html-css-frameworks/tree/master/food-ninja)
+
 <p align="center">
-    <img src="screenshot.png">
+    <a href="https://github.com/solygambas/html-css-frameworks/tree/master/food-ninja">
+        <img src="food-ninja/screenshot.png">
+    </a>
 </p>
 
-## Features
+### Features
 
 - setting up Tailwind CSS for development.
 - handling fonts, colors, margin, padding and borders.

.gitignore renamed to food-ninja/.gitignore

@@ -0,0 +1,20 @@
+# Food Ninja - Tailwind CSS
+
+A recipe website to understand Tailwind CSS basics.
+
+<p align="center">
+    <img src="screenshot.png">
+</p>
+
+## Features
+
+- setting up Tailwind CSS for development.
+- handling fonts, colors, margin, padding and borders.
+- extending theme colors and customizing font with tailwind.config.js.
+- using flexbox, grid and responsive classes.
+- reusing classes for cards, badges and buttons with @apply directive.
+- displaying icons from Heroicons.
+- building a responsive navbar.
+- adding effects and transitions on hover.
+
+Based on [Tailwind CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) by Shaun Pelling - The Net Ninja (2020).

food-ninja/README.md

@@ -9,14 +9,14 @@
   "keywords": [],
  "repository": {
     "type": "git",
-    "url": "git+https://github.com/solygambas/html-css-tailwind-tutorial.git"
+    "url": "git+https://github.com/solygambas/html-css-frameworks.git"
   },
   "author": "solygambas",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/solygambas/html-css-tailwind-tutorial/issues"
+    "url": "https://github.com/solygambas/html-css-frameworks/issues"
   },
-  "homepage": "https://github.com/solygambas/html-css-tailwind-tutorial#readme",
+  "homepage": "https://github.com/solygambas/html-css-frameworks#readme",
   "dependencies": {
     "autoprefixer": "^10.2.4",
     "tailwindcss": "^2.0.2"