Update readme.md

readme.md

@@ -1,7 +1,72 @@
-# Slate
+# SlateBoard
 
-## About
+### Table-Of-Contents :
 
-## Desktop controls
+* [Intro](#intro)  
 
-## Mobile controls
+* [Features](#Features)
+
+* [Shapes](#shapes)
+
+* [Color-picker / Undo-Redo](#Color-picker) 
+
+* [Download & Upload](#download)
+
+* [Click here to Use](https://knd-devsnest.github.io/slateboard/) ▶
+
+
+<a name="intro" />
+
+### Intro :- 
+
+<img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/intro.gif" width=50%>
+
+The Whiteboard app is a tool underestimated by many but used by even more people than we can think of !! , so how about a whiteboard which is easy to use 
+and coded just with HTML5 and JS ? ,well that's the question that we were given when we set out to make this awesome whiteboard and would like to discuss
+the UI so that you won't get lost drawing lines over lines.
+
+<a name="Features" />
+
+#### Features :- 
+
+* #### Toolbar :- 
+
+<img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/toolbar" width=50%>
+
+* #### Pen :- 
+
+ <img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/using%20pen.gif" width=50%>
+
+  Behold the Pen , grants the user power over the movement of the strokes that he / she desires.
+
+<a name="shapes" />
+
+* #### Shapes :-
+
+<img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/shapes.gif.gif" width=50% style="float:right; padding:16px" >
+
+  Added Shapes tool for easy access to geometrical shapes.
+
+<a name="Color-picker" />
+
+* #### Color-picker / Undo-Redo :- 
+
+<img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/color%20picker%20and%20undo%20redo.gif" width=50% align="center" >
+
+ <br>
+
+   * Added Color picker for easy selection of colours that the user wants to match to.
+
+   *  Undo / Redo button added because everyone makes mistakes (even the HBO intern).
+
+<a name="download" />
+
+* #### Download & Upload :- 
+
+<img  src="https://github.com/KND-Devsnest/slateboard/blob/prod/Readme-gif/update%20and%20download.gif" width=50% align="center" >
+
+   * Download your generated sketch so you can show it to others !!! by simply clicking the download button .<br>
+   Or better yet Upload your own json type file by simply dragging it into the browser window !!!
+
+  <a name="play" />  
+