# SingleDivProject
![Single Div](https://img.shields.io/badge/Single%20Div-Yes-brightgreen.svg) ![CSS](https://img.shields.io/badge/CSS-Yes-brightgreen.svg)

> ☝️ One `<div>`. Many possibilities.

## What is this?

This project focuses on exploring all the possibilities that can be done with a single `<div>` element using CSS only.

## Why?

1. Great way to explore CSS properties.
2. Restrictions forces you to learn new properties and different ways to do particular styling.
3. Because we can.

## How to contribute?

Please go through the [Contributions](https://github.com/manrajgrover/SingleDivProject/blob/master/.github/CONTRIBUTING.md) guidelines before sending a pull request.

# Reddit threads

1. [What all can you do with a single `<div>` element using pure CSS? Check this out!](https://www.reddit.com/r/programming/comments/4oyd9w/what_all_can_you_do_with_a_single_div_element/) on [/r/programming/](https://www.reddit.com/r/programming/)
2. [One `<div>`. Many possibilities.](https://www.reddit.com/r/web_design/comments/4otxnk/one_div_many_possibilities/) on [/r/web_design/](https://www.reddit.com/r/web_design/)
3. [One `<div>`. Many possibilities.](https://www.reddit.com/r/coolgithubprojects/comments/4oy7y1/one_div_many_possibilities/) on [/r/coolgithubprojects/](https://www.reddit.com/r/coolgithubprojects/)

## Demos

### Designs
| Project Name | Your Name / Github Handle | Demo/Gif |
| :---: | :---: | :---: |
| [Battery](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Battery.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Battery.gif" /> |
| [Hamburger Menu](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Hamburger.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Hamburger.png" /> |
| [Magnifying Glass](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Magnifying%20Glass.html)  | [kamito98](https://github.com/kamito98) | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Magnifying Glass.png" /> |
| [New Instagram Logo](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Instagram%20New%20Logo.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/instagram.jpg" /> |

### Loaders

| Project Name | Your Name / Github Handle | Demo/Gif |
| :---: | :---: | :---: |
| [Awesome Dots](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Awesome%20Dots.html) |  [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Awesome%20Dots.gif" /> |
| [Bouncing Ball](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Bouncing%20Ball.html) |  [mtacchino](https://github.com/mtacchino) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bouncing%20Ball.gif" /> |
| [Box Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Box%20Loader.html) |  [AnubrataDS](https://github.com/anubratads) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Box%20Loader.gif" /> |
| [Clock](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Clock.html) |  [richardj](https://github.com/richardj) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Clock.gif" /> |
| [Dot Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Dot%20Loader.html) |  [aaroniker](https://github.com/aaroniker) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Dot%20Loader.gif" /> |
| [Fill up](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Fill%20up.html) |  [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Fill%20up.gif" /> |
| [Iron Factory](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Iron%20Factory.html) | [NorthernTwig](https://github.com/NorthernTwig) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Iron%20Factory.gif" /> |
| [Revolving Circles](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Revolving%20Circles.html) |  [dcrousso](https://github.com/dcrousso) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Revolving%20Circles.gif" /> |
| [Revolving Dots](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Revolving%20Dots.html) |  [dcrousso](https://github.com/dcrousso) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Revolving%20Dots.gif" /> |
| [Ripple Effect](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Ripple%20Effect.html) |  [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Ripple%20Effect.gif" /> |
| [Play Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Play%20Loader.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://raw.githubusercontent.com/manrajgrover/SingleDivProject/master/Assets/Play%20Loader.gif" /> |
| [Simple Spinner](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Simple%20Spinner.html) |  [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Simple%20Spinner.gif" /> |
| [Simple Text Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Simple%20Text%20Loader.html) |  [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Simple%20Text%20Loader.gif" /> |
| [Melting Ice Cream Loader](https://github.com/taranvohra/SingleDivProject/blob/master/Loaders/Melting%20Ice%20Cream.html) |  [TaranVohra](https://github.com/taranvohra) | <img width="350" src="https://github.com/taranvohra/SingleDivProject/blob/master/Assets/Melting%20Ice%20Cream.gif" /> |


### Flags

| Project Name | Your Name / Github Handle | Demo |
| :---: | :---: | :---: |
| [Armenia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Armenia.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Armenia.png" /> |
| [Austria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Austria.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Austria.png" /> |
| [Bahamas](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bahamas.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bahamas.png" /> |
| [Bangladesh](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bangladesh.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bangladesh.png" /> |
| [Belgium](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Belgium.html) | [AndyMathys](https://github.com/AndyMathys) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Belgium.png" /> |
| [Brazil](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Brazil.html) | [esganzerla](https://github.com/esganzerla) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Brazil.png" /> |
| [Bulgaria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bulgaria.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bulgaria.png" /> |
| [Chile](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/chile.html) | [adavis46](https://github.com/adavis46) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/chile.PNG" /> |
| [Canada](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Canada.html) | [Scott Kaye](https://github.com/ScottKaye) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Canada.png" /> |
| [Cameroon](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Cameroon.html) | [1forh](https://github.com/1forh) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Cameroon.png" /> |
| [Colombia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Colombia.html) | [DHernandex](https://github.com/dhernandex) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Colombia.png" /> |
| [Czech Republic](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/CzechRepublic.html) | [fadilf](https://github.com/fadilf) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/CzechRepublic.png" /> |
| [Denmark](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Denmark.html) | [jacksarick](https://github.com/jacksarick) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Denmark.png" /> |
| [England](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/England.html) | [TheWebartist](https://github.com/TheWebartist) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/England.png" /> |
| [Finland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Finland.html) | [jacksarick](https://github.com/jacksarick) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Finland.png" /> |
| [France](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/France.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/France.png" /> |
| [Germany](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Germany.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Germany.png" /> |
| [Greece](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Greece.html) | [jdhoek](https://github.com/jdhoek) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Greece.png" /> |
| [Hungary](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Hungary.html) | [jabbalaci](https://github.com/jabbalaci) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Hungary.png" /> |
| [India](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/India.html) | [fadilf](https://github.com/fadilf) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/India.png" /> |
| [Indonesia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Indonesia.html) | [karuna](https://github.com/karuna) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Indonesia.png" /> |
| [Ireland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Ireland.html) | [skeevey](https://github.com/skeevey) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Ireland.png" /> |
| [Israel](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Israel.html) | [hillai](https://github.com/hillai) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Israel.png" /> |
| [Italy](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Italy.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Italy.png" /> |
| [Ivory Coast](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/IvoryCoast.html) | [skeevey](https://github.com/skeevey) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/IvoryCoast.png" /> |
| [Japan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Japan.html) | [manrajgrover](https://github.com/manrajgrover) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Japan.png" /> |
| [Laos](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Laos.html) | [jamcgrath](https://github.com/jamcgrath) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Laos.png" /> |
| [Latvia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Latvia.html) | [vasiljevs](https://github.com/vasiljevs) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Latvia.png" /> | 
| [Lithuania](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Lithuania.html) | [fosron](https://github.com/fosron) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Lithuania.png" /> |
| [Nigeria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Nigeria.html) | [skeevey](https://github.com/skeevey) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Nigeria.png" /> |
| [Pakistan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/pakistan.html) | [ObaidAshraf](https://github.com/ObaidAshraf) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Pakistan.png" /> |
| [Poland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Poland.html) | [mschweichler](https://github.com/mschweichler) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Poland.png" /> |
| [Puerto Rico](Flags/PuertoRico.html) | [aallfredo](https://github.com/aallfredo) and [jorluiseptor](https://github.com/jorluiseptor) | ![PuertoRico](Assets/PuertoRico.png) |
| [Russia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Russia.html) | [ad222kr](https://github.com/ad222kr) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Russia.png" /> |
| [Senegal](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Senegal.html) | [Death259](https://github.com/Death259) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Senegal.png" /> |
| [South Africa](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/South%20Africa.html) | [DHernandex](https://github.com/dhernandex) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/South%20Africa.png" /> |
| [Sierra Leone](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/SierraLeone.html) | [ts96](https://github.com/ts96) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/SierraLeone.png" /> |
| [Suriname](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Suriname.html) | [adavis46](https://github.com/adavis46) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Suriname.png" /> |
| [Sweden](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Sweden.html) | [jacksarick](https://github.com/jacksarick) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Sweden.png" /> |
| [Switzerland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Switzerland.html) | [thijswerrij](https://github.com/thijswerrij) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Switzerland.png" /> |
| [Syria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Syria.html) | [iSWORD](https://github.com/iSWORD) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Syria.png" /> |
| [Taiwan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Taiwan.html) | [amowu](https://github.com/amowu) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Taiwan.png" /> |
| [Texas](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Texas.html) | [domspad](https://github.com/domspad) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Texas.png" /> |
| [Thailand](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Thailand.html) | [jamcgrath](https://github.com/jamcgrath) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Thailand.png" /> |
| [The Netherlands](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Netherlands.html) | [jdhoek](https://github.com/jdhoek) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Netherlands.png" /> |
| [Turkey](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Turkey.html) | [mehmetuken](https://github.com/mehmetuken) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Turkey.png" /> |
| [United Kingdom](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/UK.html) | [jdhoek](https://github.com/jdhoek) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/UK.png" /> |
| [United States of America](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/USA.html) | [jdhoek](https://github.com/jdhoek) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/USA.png" /> |
| [Yemen](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Yemen.html) | [Death259](https://github.com/Death259) | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Yemen.png" /> |

### Tools

| Project Name | Your Name / Github Handle | Demo/Gif |
| :---: | :---: | :---: |
| [Box Breathing](https://github.com/manrajgrover/SingleDivProject/blob/master/Tools/BoxBreathing.html) |  [gnclmorais](https://github.com/gnclmorais) | <img width="350" src="https://raw.githubusercontent.com/manrajgrover/SingleDivProject/master/Assets/BoxBreathing.gif" /> |

## License
[MIT](https://github.com/manrajgrover/SingleDivProject/blob/master/LICENSE) © [Manraj Singh](https://github.com/manrajgrover)