add materialize setup

solygambas · solygambas · commit 3b79dc51ff2b · 2021-05-14T07:48:00.000+02:00
diff --git a/README.md b/README.md
@@ -1,9 +1,10 @@
 # CSS Frameworks
 
-This repo is made of 2 projects:
+This repo is made of 3 projects:
 
 1. [**Food Ninja**](#food): A recipe website to understand Tailwind CSS basics.
 2. [**Ninja Coffee**](#coffee): A product page to understand Bulma basics.
+3. [**Photo Ninja**](#photo): A photography portfolio website to learn Materialize basics.
 
 ## <a name="food"></a>1) Food Ninja - Tailwind CSS
 
@@ -56,3 +57,23 @@ A product page to understand Bulma basics.
 - creating a form with text, checkbox and select fields.
 
 Based on [Bulma CSS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a) by Shaun Pelling - The Net Ninja (2020).
+
+## <a name="photo"></a>3) Photo Ninja - Materialize
+
+A photography portfolio website to learn Materialize basics.
+
+<!-- [See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw) -->
+
+[See photo-ninja folder](https://github.com/solygambas/html-css-frameworks/tree/master/photo-ninja)
+
+<!-- <p align="center">
+    <a href="https://github.com/solygambas/html-css-frameworks/tree/master/photo-ninja">
+        <img src="photo-ninja/screenshot.png">
+    </a>
+</p> -->
+
+### Features
+
+-
+
+Based on [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff) by Shaun Pelling - The Net Ninja (2018).
diff --git a/photo-ninja/README.md b/photo-ninja/README.md
@@ -0,0 +1,15 @@
+# Photo Ninja - Materialize
+
+A photography portfolio website to learn Materialize basics.
+
+<!-- [See Demo on CodePen](https://codepen.io/solygambas/full/KKWzKxw) -->
+
+<p align="center">
+    <!-- <img src="screenshot.png"> -->
+</p>
+
+## Features
+
+-
+
+Based on [Materialize Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff) by Shaun Pelling - The Net Ninja (2018).
diff --git a/photo-ninja/index.html b/photo-ninja/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+    />
+
+    <title>Materialize</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Materialize</h1>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  </body>
+</html>
