Neha · Neha · Jun 30, 2019
diff --git a/README.md b/README.md
@@ -1,12 +1,23 @@
-# :computer: CSS3 New Features Code Demos & more.
+# :computer: All About CSS :heart:
+CSS3 new Features Code Demos & Ready to Use Code Snippts.
+
+This repo is dedicated to all the new CSS features releasing in the CSS (So, it will remain WIP). This repo also has ready to use CSS + HTML based code snippets such as  - buttons, alert, etc.
 
-This repo is dedicated to all the new CSS features releasing in the CSS.
 This is WIP repo and less jazzy UI (I know it should be jazzy , as we are talking about CSS).
 
-# :grey_question: Why?
+## :grey_question: Why?
 
 While learning new CSS3 features and making youtube videos for JSLovers, I started this repo. Also, to reduce the development efforts I have created ready-to-use code samples for the devs.
 
+## Browser Support
+Working on Chrome 
+
+## How to use this?
+
+- Clone or download the repo.
+- Ready to use code is marked with `css-demo`.
+- Copy the code and use it in your project.
+
 # :pushpin: TOC
 
 ### New Features
@@ -29,7 +40,7 @@ While learning new CSS3 features and making youtube videos for JSLovers, I start
 - :white_check_mark: Tags
 - :white_check_mark: List
 - :white_check_mark: Card
-- Badegs
+- Badges
 - Tables
 - Images
 - Forms
@@ -40,6 +51,9 @@ While learning new CSS3 features and making youtube videos for JSLovers, I start
 - Icons
 - Tabs
 - Slideshow
+- Search
+- Loaders
+- Animations
 
 # :bulb: Ready to use code - HTML and CSS
 
@@ -121,6 +135,15 @@ Below are the new CSS3 features code samples.
 # :heart: Contribution
 
 If you would like to contribute please raise the PR.
+If you would like to add any CSS Demo:
+
+0) The demo should be only CSS based. No package, no Javascript, no pre/post-processors.
+1) Create the folder with `css-demo-<nameofthecomponent>`
+2) Add the dependent files. Keep the CSS and HTML into seprate files.
+3) Add readme.md to explain how to use the code.
+4) Add the screenshot of the UI
+5) Make sure the HTML and CSS is valid
+6) Add if any property is not supported in modern browser.
 
 # Reach Me :woman:
 

diff --git a/cssCounter/index.html → css-counter/index.html b/cssCounter/index.html → css-counter/index.html
diff --git a/cssCounter/style.css → css-counter/style.css b/cssCounter/style.css → css-counter/style.css
diff --git a/currentcolor/index.html → css-currentcolor/index.html b/currentcolor/index.html → css-currentcolor/index.html
diff --git a/currentcolor/style.css → css-currentcolor/style.css b/currentcolor/style.css → css-currentcolor/style.css
diff --git a/css-alert-status/index.html → css-demo-alert-status/index.html b/css-alert-status/index.html → css-demo-alert-status/index.html
diff --git a/css-alert-status/style.css → css-demo-alert-status/style.css b/css-alert-status/style.css → css-demo-alert-status/style.css
diff --git a/CSSButtons/index.html → css-demo-buttons/index.html b/CSSButtons/index.html → css-demo-buttons/index.html
diff --git a/CSSButtons/style.css → css-demo-buttons/style.css b/CSSButtons/style.css → css-demo-buttons/style.css
diff --git a/cssCalc/index.html → css-demo-calc/index.html b/cssCalc/index.html → css-demo-calc/index.html
diff --git a/cssCalc/style.css → css-demo-calc/style.css b/cssCalc/style.css → css-demo-calc/style.css
diff --git a/css-cards/index.html → css-demo-cards/index.html b/css-cards/index.html → css-demo-cards/index.html
diff --git a/css-cards/style.css → css-demo-cards/style.css b/css-cards/style.css → css-demo-cards/style.css
diff --git a/css-tags/index.html → css-demo-tags/index.html b/css-tags/index.html → css-demo-tags/index.html
diff --git a/css-tags/style.css → css-demo-tags/style.css b/css-tags/style.css → css-demo-tags/style.css
diff --git a/cssFilters/index.html → css-filters/index.html b/cssFilters/index.html → css-filters/index.html
diff --git a/cssFilters/script.js → css-filters/script.js b/cssFilters/script.js → css-filters/script.js
diff --git a/cssFilters/style.css → css-filters/style.css b/cssFilters/style.css → css-filters/style.css
diff --git a/CSSFlexbox/#1 Template/index.html → css-flexbox/#1 Template/index.html b/CSSFlexbox/#1 Template/index.html → css-flexbox/#1 Template/index.html
diff --git a/CSSFlexbox/#1 Template/style.css → css-flexbox/#1 Template/style.css b/CSSFlexbox/#1 Template/style.css → css-flexbox/#1 Template/style.css
diff --git a/CSSFlexbox/#2 display flex/index.html → css-flexbox/#2 display flex/index.html b/CSSFlexbox/#2 display flex/index.html → css-flexbox/#2 display flex/index.html
diff --git a/CSSFlexbox/#2 display flex/style.css → css-flexbox/#2 display flex/style.css b/CSSFlexbox/#2 display flex/style.css → css-flexbox/#2 display flex/style.css
diff --git a/CSSFlexbox/#3 Flex Wrap/index.html → css-flexbox/#3 Flex Wrap/index.html b/CSSFlexbox/#3 Flex Wrap/index.html → css-flexbox/#3 Flex Wrap/index.html
diff --git a/CSSFlexbox/#3 Flex Wrap/style.css → css-flexbox/#3 Flex Wrap/style.css b/CSSFlexbox/#3 Flex Wrap/style.css → css-flexbox/#3 Flex Wrap/style.css
diff --git a/CSSFlexbox/#4 Flex JustifyContent/index.html → ...flexbox/#4 Flex JustifyContent/index.html b/CSSFlexbox/#4 Flex JustifyContent/index.html → ...flexbox/#4 Flex JustifyContent/index.html
diff --git a/CSSFlexbox/#4 Flex JustifyContent/style.css → css-flexbox/#4 Flex JustifyContent/style.css b/CSSFlexbox/#4 Flex JustifyContent/style.css → css-flexbox/#4 Flex JustifyContent/style.css
diff --git a/CSSFlexbox/#5 Flex basis/index.html → css-flexbox/#5 Flex basis/index.html b/CSSFlexbox/#5 Flex basis/index.html → css-flexbox/#5 Flex basis/index.html
diff --git a/CSSFlexbox/#5 Flex basis/style.css → css-flexbox/#5 Flex basis/style.css b/CSSFlexbox/#5 Flex basis/style.css → css-flexbox/#5 Flex basis/style.css
diff --git a/CSSFlexbox/#6 Flex grow/index.html → css-flexbox/#6 Flex grow/index.html b/CSSFlexbox/#6 Flex grow/index.html → css-flexbox/#6 Flex grow/index.html
diff --git a/CSSFlexbox/#6 Flex grow/style.css → css-flexbox/#6 Flex grow/style.css b/CSSFlexbox/#6 Flex grow/style.css → css-flexbox/#6 Flex grow/style.css
diff --git a/CSSFlexbox/#7 Flex shrink /index.html → css-flexbox/#7 Flex shrink /index.html b/CSSFlexbox/#7 Flex shrink /index.html → css-flexbox/#7 Flex shrink /index.html
diff --git a/CSSFlexbox/#7 Flex shrink /style.css → css-flexbox/#7 Flex shrink /style.css b/CSSFlexbox/#7 Flex shrink /style.css → css-flexbox/#7 Flex shrink /style.css
diff --git a/CSSFlexbox/#8 Flex order/index.html → css-flexbox/#8 Flex order/index.html b/CSSFlexbox/#8 Flex order/index.html → css-flexbox/#8 Flex order/index.html
diff --git a/CSSFlexbox/#8 Flex order/style.css → css-flexbox/#8 Flex order/style.css b/CSSFlexbox/#8 Flex order/style.css → css-flexbox/#8 Flex order/style.css
diff --git a/cssGrids/01/index.html → css-grids/01/index.html b/cssGrids/01/index.html → css-grids/01/index.html
diff --git a/cssGrids/01/style.css → css-grids/01/style.css b/cssGrids/01/style.css → css-grids/01/style.css
diff --git a/cssMixins/index.html → css-mixins/index.html b/cssMixins/index.html → css-mixins/index.html
diff --git a/cssMixins/style.css → css-mixins/style.css b/cssMixins/style.css → css-mixins/style.css
diff --git a/CSSScrollBehaviour/index.html → css-scroll-behaviour/index.html b/CSSScrollBehaviour/index.html → css-scroll-behaviour/index.html
diff --git a/CSSScrollBehaviour/style.css → css-scroll-behaviour/style.css b/CSSScrollBehaviour/style.css → css-scroll-behaviour/style.css
diff --git a/cssVariables/index.html → css-variables/index.html b/cssVariables/index.html → css-variables/index.html
diff --git a/cssVariables/style.css → css-variables/style.css b/cssVariables/style.css → css-variables/style.css
diff --git a/cssWritingModes/index.html → css-writing-modes/index.html b/cssWritingModes/index.html → css-writing-modes/index.html
diff --git a/cssWritingModes/style.css → css-writing-modes/style.css b/cssWritingModes/style.css → css-writing-modes/style.css