Issue 33: Add README.md file below the Tile grid on the web page

README.html

@@ -0,0 +1,21 @@
+<img src="docs/src/openconnectart.png" width="200">
+
+<p><img src="https://img.shields.io/github/hacktoberfest/2019/bhaumikmistry/open-connect-art?style=plastic" alt="GitHub Hacktoberfest combined status">
+<img src="https://img.shields.io/github/issues-pr-closed/bhaumikmistry/open-connect-art?color=gree&style=plastic" alt="GitHub closed pull requests">
+<img src="https://img.shields.io/github/forks/bhaumikmistry/open-connect-art?color=aqua&label=open-connect-art%20Forks&style=plastic" alt="GitHub forks">
+<img src="https://img.shields.io/github/license/bhaumikmistry/open-connect-art?style=plastic" alt="GitHub"></p>
+<h1 id="open-connect-art">Open connect ART</h1>
+<p>This is an ART project to teach you how to contribute and make use of an opportunity to use art and engineering to create a master piece.</p>
+<p>Anyone who wished to learn how to create a pull request for a project on GitHub can use this project to contribute 1 or maximum 2 tile on the canvas. </p>
+<ul>
+<li>You will be able to create only 1 PR for the tile that is empty.</li>
+<li>The second PR should be created if your neighboring tile does not match and it a dead lock or a mismatch, this way you can ask other contributor to collaborate and fix the dead lock.</li>
+</ul>
+<h3 id="options-for-tiles">Options for tiles</h3>
+<p><img src="docs/src/empty_cell.png" width="50"> <img src="docs/src/plus.png" width="50"> <img src="docs/src/quarter_0.png" width="50"> <img src="docs/src/quarter_90.png" width="50"> <img src="docs/src/quarter_180.png" width="50"> <img src="docs/src/quarter_270.png" width="50"> <img src="docs/src/right_angle_0.png" width="50"> <img src="docs/src/right_angle_90.png" width="50"> <img src="docs/src/right_angle_180.png" width="50"> <img src="docs/src/right_angle_270.png" width="50"> <img src="docs/src/start_end_0.png" width="50"> <img src="docs/src/start_end_90.png" width="50"> <img src="docs/src/start_end_180.png" width="50"> <img src="docs/src/start_end_270.png" width="50"> <img src="docs/src/straight_0.png" width="50"> <img src="docs/src/straight_90.png" width="50"> <img src="docs/src/t_0.png" width="50"> <img src="docs/src/t_90.png" width="50"> <img src="docs/src/t_180.png" width="50"> <img src="docs/src/t_270.png" width="50"></p>
+<h2 id="contributing">Contributing</h2>
+<p>In order to contribute a tile to the canvas you&#39;ll have to create a <a href="https://opensource.guide/how-to-contribute/#opening-a-pull-request">pull request</a>. please check the <a href="https://github.com/bhaumikmistry/open-connect-art/blob/master/CONTRIBUTING.md">Contributing guide</a> </p>
+<h2 id="code-of-conduct">Code of conduct</h2>
+<p>The goal of this project is to complete the canvas in highly respectful and fun manner. </p>
+<h2 id="license">License</h2>
+<p>MIT</p>

docs/css/style.css

@@ -276,3 +276,15 @@ body.night-mode {
     transform: translate3d(0, 4px, 0);
   }
 }
+
+/* Code for the readme */
+object {
+  display: -ms-flexbox; /* IE 10 */
+  display: flex;
+  -ms-flex-wrap: wrap; /* IE 10 */
+  flex-wrap: wrap;
+  padding: 0 4px;
+  margin: 0 auto;
+  width: 900px;
+  height: 900px;
+}

docs/index.html

@@ -168,6 +168,10 @@
         </div>
     </div>
 
+    <div class="readme">
+            <object data="../README.html" type="text/html"></object>
+    </div>
+
     <button class="nightmode" id="day-night" title="Toggle Night Mode"><img class="button-image" src="src/night_mode.png" /></button>
 
     <a href="https://github.com/bhaumikmistry/open-connect-art" id="nightCat" class="github-corner"
@@ -270,5 +274,6 @@
 <script src="js/index.js"></script>
 <script src="js/flicker.js"></script>
 <script src="js/vibrate.js"></script>
+<script src="js/markdown.js"></script>
 
 </html>

docs/js/markdown.js

@@ -0,0 +1,5 @@
+var marked = require('marked'); //Node library used to handle the markdown to HTML
+var fs = require('fs'); //library used to read and write files
+
+var README = fs.readFileSync('../../README.md'); //reads README.md file
+fs.writeFileSync('../`../README.html', marked(README)); //Converts README.md file into a HTML file known as "README.html"