Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ajycc20/easy-css-layout

Easy css layout
https://github.com/ajycc20/easy-css-layout

button-animation container css3 loading loading-animations navbar-animation pagination searchbox

Last synced: 5 months ago
JSON representation

Easy css layout

Awesome Lists containing this project

README 

        
easy-css-layout

===============



## Demo



[View the Demo Page](https://ajycc20.github.io/easy-css-layout/index.html)



Foreword

----------------



Just for practice & backups



> About color setting of style, there're some problems here, but I don't want to modify them.



> If you want to practice by this demo



* First you need to view the demo in the Demo column & Writedown your code by yourself

* If you can't achieve these functions, you can view the source column



----------------



## [NavBar](https://github.com/ajycc20/easy-css-layout/tree/master/navbar)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|NavBar01|[navbar01](https://github.com/ajycc20/easy-css-layout/blob/master/navbar/navbar01.html)|[navBar01](https://ajycc20.github.io/easy-css-layout/navbar/navbar01.html)|![navBar01.gif](https://i.endpot.com/image/JJF62/navbar01.gif)|

|NavBar02|[navbar02](https://github.com/ajycc20/easy-css-layout/blob/master/navbar/navbar02.html)|[navBar02](https://ajycc20.github.io/easy-css-layout/navbar/navbar02.html)|![navBar02.gif](https://i.endpot.com/image/JONPX/navbar02.gif)|

|NavBar03|[navbar03](https://github.com/ajycc20/easy-css-layout/blob/master/navbar/navbar03.html)|[navBar03](https://ajycc20.github.io/easy-css-layout/navbar/navbar03.html)|![navBar03.gif](https://i.endpot.com/image/VEZ8B/navbar03.gif)|



-------------------



## [SearchBox](https://github.com/ajycc20/easy-css-layout/tree/master/searchbox)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Searchbox01|[searchbox01](https://github.com/ajycc20/easy-css-layout/blob/master/searchbox/searchbox01.html)|[searchBox01](https://ajycc20.github.io/easy-css-layout/searchbox/searchbox01.html)|![searchBox01.gif](https://i.endpot.com/image/GMAX1/searchbox01.gif)|

|Searchbox02|[searchbox02](https://github.com/ajycc20/easy-css-layout/blob/master/searchbox/searchbox02.html)|[searchBox02](https://ajycc20.github.io/easy-css-layout/searchbox/searchbox02.html)|![searchBox02.gif](https://i.endpot.com/image/LZXAZ/searchbox02.gif)|

|Searchbox03|[searchbox03](https://github.com/ajycc20/easy-css-layout/blob/master/searchbox/searchbox03.html)|[searchBox03](https://ajycc20.github.io/easy-css-layout/searchbox/searchbox03.html)|![searchBox03.gif](https://i.endpot.com/image/PWUV4/searchbox03.gif)|



---------------------



## [Button](https://github.com/ajycc20/easy-css-layout/tree/master/button)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Button01|[button01](https://github.com/ajycc20/easy-css-layout/blob/master/button/button01.html)|[button01](https://ajycc20.github.io/easy-css-layout/button/button01.html)|![button01.gif](https://i.endpot.com/image/GFPLC/button01.gif)|

|Button02|[button02](https://github.com/ajycc20/easy-css-layout/blob/master/button/button02.html)|[button02](https://ajycc20.github.io/easy-css-layout/button/button02.html)|![button02.gif](https://i.endpot.com/image/XXVAZ/button02.gif)|

|Button03|[button03](https://github.com/ajycc20/easy-css-layout/blob/master/button/button03.html)|[button03](https://ajycc20.github.io/easy-css-layout/button/button03.html)|![button03.gif](https://i.endpot.com/image/8B3NS/button03.gif)|

|Button04|[button04](https://github.com/ajycc20/easy-css-layout/blob/master/button/button04.html)|[button04](https://ajycc20.github.io/easy-css-layout/button/button04.html)|![button04.gif](https://i.endpot.com/image/SSIAZ/button04.gif)|

|Button05|[button05](https://github.com/ajycc20/easy-css-layout/blob/master/button/button05.html)|[button05](https://ajycc20.github.io/easy-css-layout/button/button05.html)|![button05.gif](https://i.endpot.com/image/CYX5P/button05.gif)|

|Button06|[button06](https://github.com/ajycc20/easy-css-layout/blob/master/button/button06.html)|[button06](https://ajycc20.github.io/easy-css-layout/button/button06.html)|![button06.gif](https://i.endpot.com/image/FOYJ5/button06.gif)|

|Button07|[button07](https://github.com/ajycc20/easy-css-layout/blob/master/button/button07.html)|[button07](https://ajycc20.github.io/easy-css-layout/button/button07.html)|![button07.gif](https://i.endpot.com/image/2CVNU/button07.gif)|

|Button08|[button08](https://github.com/ajycc20/easy-css-layout/blob/master/button/button08.html)|[button08](https://ajycc20.github.io/easy-css-layout/button/button08.html)|![button08.gif](https://i.endpot.com/image/1WDAZ/button08.gif)|

|Button09|[button09](https://github.com/ajycc20/easy-css-layout/blob/master/button/button09.html)|[button09](https://ajycc20.github.io/easy-css-layout/button/button09.html)|![button09.gif](https://i.endpot.com/image/SGHH9/button09.gif)|

|Button10|[button10](https://github.com/ajycc20/easy-css-layout/blob/master/button/button10.html)|[button10](https://ajycc20.github.io/easy-css-layout/button/button10.html)|![button10.gif](https://i.endpot.com/image/Y1G1R/button10.gif)|

|Button11|[button11](https://github.com/ajycc20/easy-css-layout/blob/master/button/button11.html)|[button11](https://ajycc20.github.io/easy-css-layout/button/button11.html)|![button11.gif](https://i.endpot.com/image/SF55K/button11.gif)|

|Button12|[button12](https://github.com/ajycc20/easy-css-layout/blob/master/button/button12.html)|[button12](https://ajycc20.github.io/easy-css-layout/button/button12.html)|![button12.gif](https://i.endpot.com/image/ZLS6E/button12.gif)|

|Button13|[button13](https://github.com/ajycc20/easy-css-layout/blob/master/button/button13.html)|[button13](https://ajycc20.github.io/easy-css-layout/button/button13.html)|![button13.gif](https://i.endpot.com/image/5UATY/button13.gif)|

|Button14|[button14](https://github.com/ajycc20/easy-css-layout/blob/master/button/button14.html)|[button14](https://ajycc20.github.io/easy-css-layout/button/button14.html)|![button14.gif](https://i.endpot.com/image/3P2E0/button14.gif)|



----------------------

## [Pagination](https://github.com/ajycc20/easy-css-layout/tree/master/pagination)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Pagination01|[pagination01](https://github.com/ajycc20/easy-css-layout/blob/master/pagination/pagination01.html)|[pagination01](https://ajycc20.github.io/easy-css-layout/pagination/pagination01.html)|![pagination01.gif](https://i.endpot.com/image/PDMJR/pagination01.gif)|

|Pagination02|[pagination02](https://github.com/ajycc20/easy-css-layout/blob/master/pagination/pagination02.html)|[pagination02](https://ajycc20.github.io/easy-css-layout/pagination/pagination02.html)|![pagination02.gif](https://i.endpot.com/image/VLNCQ/pagination02.gif)|

|Pagination03|[pagination03](https://github.com/ajycc20/easy-css-layout/blob/master/pagination/pagination03.html)|[pagination03](https://ajycc20.github.io/easy-css-layout/pagination/pagination03.html)|![pagination03.gif](https://i.endpot.com/image/FJVPO/pagination03.gif)|

|Pagination04|[pagination04](https://github.com/ajycc20/easy-css-layout/blob/master/pagination/pagination04.html)|[pagination04](https://ajycc20.github.io/easy-css-layout/pagination/pagination04.html)|![pagination04.gif](https://i.endpot.com/image/JBDGG/pagination04.gif)|



----------------------



## [Icon](https://github.com/ajycc20/easy-css-layout/tree/master/icon)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Arrow|[arrow](https://github.com/ajycc20/easy-css-layout/blob/master/icon/arrow.html)|[arrow](https://ajycc20.github.io/easy-css-layout/icon/arrow.html)|![arrow.jpg](https://i.endpot.com/image/JV2L2/arrow.jpg)|

|Loading|[loading](https://github.com/ajycc20/easy-css-layout/blob/master/icon/loading.html)|[loading](https://ajycc20.github.io/easy-css-layout/icon/loading.html)|![loading.gif](https://i.endpot.com/image/ZNBNK/loading.gif)|

|Star-five|[star-five](https://github.com/ajycc20/easy-css-layout/blob/master/icon/star-five.html)|[star-five](https://ajycc20.github.io/easy-css-layout/icon/star-five.html)|![star-five.jpg](https://i.endpot.com/image/FK98I/star-five.jpg)|

|Download|[download](https://github.com/ajycc20/easy-css-layout/blob/master/icon/download.html)|[download](https://ajycc20.github.io/easy-css-layout/icon/download.html)|![download.jpg](https://i.endpot.com/image/W8OTE/download.jpg)|

|Upload|[upload](https://github.com/ajycc20/easy-css-layout/blob/master/icon/upload.html)|[upload](https://ajycc20.github.io/easy-css-layout/icon/upload.html)|![upload.jpg](https://i.endpot.com/image/CQY2B/upload.jpg)|

|Power|[power](https://github.com/ajycc20/easy-css-layout/blob/master/icon/power.html)|[power](https://ajycc20.github.io/easy-css-layout/icon/power.html)|![power.jpg](https://i.endpot.com/image/KQYDX/power.jpg)|

|Search|[search](https://github.com/ajycc20/easy-css-layout/blob/master/icon/search.html)|[search](https://ajycc20.github.io/easy-css-layout/icon/search.html)|![search.jpg](https://i.endpot.com/image/BSZOK/search.jpg)|

|Change|[change](https://github.com/ajycc20/easy-css-layout/blob/master/icon/change.html)|[change](https://ajycc20.github.io/easy-css-layout/icon/change.html)|![change.jpg](https://i.endpot.com/image/XI3J0/change.jpg)|

|Change02|[change02](https://github.com/ajycc20/easy-css-layout/blob/master/icon/change02.html)|[change02](https://ajycc20.github.io/easy-css-layout/icon/change02.html)|![change02.jpg](https://i.endpot.com/image/RKUVZ/change02.jpg)|

|Scan|[scan](https://github.com/ajycc20/easy-css-layout/blob/master/icon/scan.html)|[scan](https://ajycc20.github.io/easy-css-layout/icon/scan.html)|![scan.jpg](https://i.endpot.com/image/DTOV4/scan.jpg)|

|Scan02|[scan02](https://github.com/ajycc20/easy-css-layout/blob/master/icon/scan02.html)|[scan02](https://ajycc20.github.io/easy-css-layout/icon/scan02.html)|![scan02.jpg](https://i.endpot.com/image/53BTH/scan02.jpg)|

|Code|[code](https://github.com/ajycc20/easy-css-layout/blob/master/icon/code.html)|[code](https://ajycc20.github.io/easy-css-layout/icon/code.html)|![code.jpg](https://i.endpot.com/image/IRTPP/code.jpg)|

|Moon-dark|[moon-dark](https://github.com/ajycc20/easy-css-layout/blob/master/icon/moon-dark.html)|[moon-dark](https://ajycc20.github.io/easy-css-layout/icon/moon-dark.html)|![moon-dark.jpg](https://i.endpot.com/image/8U4QT/moon-dark.jpg)|

|Moon-light|[moon-light](https://github.com/ajycc20/easy-css-layout/blob/master/icon/moon-light.html)|[moon-light](https://ajycc20.github.io/easy-css-layout/icon/moon-light.html)|![moon-light.jpg](https://i.endpot.com/image/2UOPN/moon-light.jpg)|

|Wifi|[wifi](https://github.com/ajycc20/easy-css-layout/blob/master/icon/wifi.html)|[wifi](https://ajycc20.github.io/easy-css-layout/icon/wifi.html)|![wifi.jpg](https://i.endpot.com/image/QA50U/wifi.jpg)|

|Link|[link](https://github.com/ajycc20/easy-css-layout/blob/master/icon/link.html)|[link](https://ajycc20.github.io/easy-css-layout/icon/link.html)|![link.jpg](https://i.endpot.com/image/IXOX7/link.jpg)|

|Star-Six|[star-six](https://github.com/ajycc20/easy-css-layout/blob/master/icon/star-six.html)|[star-six](https://ajycc20.github.io/easy-css-layout/icon/star-six.html)|![star-six.jpg](https://i.endpot.com/image/D9WWT/star-six.jpg)|

|Question-Mark|[question-mark](https://github.com/ajycc20/easy-css-layout/blob/master/icon/question-mark.html)|[question-mark](https://ajycc20.github.io/easy-css-layout/icon/question-mark.html)|![question-mark.jpg](https://i.endpot.com/image/BTU9V/question-mark.jpg)|

|BlueTooth|[bluetooth](https://github.com/ajycc20/easy-css-layout/blob/master/icon/bluetooth.html)|[bluetooth](https://ajycc20.github.io/easy-css-layout/icon/bluetooth.html)|![bluetooth.jpg](https://i.endpot.com/image/CFAL0/bluetooth.jpg)|

|Cloud|[cloud](https://github.com/ajycc20/easy-css-layout/blob/master/icon/cloud.html)|[cloud](https://ajycc20.github.io/easy-css-layout/icon/cloud.html)|![cloud.jpg](https://i.endpot.com/image/BJM6E/cloud.jpg)|

|Exit|[exit](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/exit.html)|[exit](https://ajycc20.github.io/easy-css-layout/unclassified/exit.html)|![exit.gif](https://i.endpot.com/image/KKCXU/exit.gif)|



----------------------



## [Loading](https://github.com/ajycc20/easy-css-layout/tree/master/loading)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Loading01|[loading01](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading01.html)|[loading01](https://ajycc20.github.io/easy-css-layout/loading/loading01.html)|![loading01.gif](https://i.endpot.com/image/RDZSW/loading01.gif)|

|Loading02|[loading02](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading02.html)|[loading02](https://ajycc20.github.io/easy-css-layout/loading/loading02.html)|![loading02.gif](https://i.endpot.com/image/B6WEF/loading02.gif)|

|Loading03|[loading03](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading03.html)|[loading03](https://ajycc20.github.io/easy-css-layout/loading/loading03.html)|![loading03.gif](https://i.endpot.com/image/CWP71/loading03.gif)|

|Loading04|[loading04](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading04.html)|[loading04](https://ajycc20.github.io/easy-css-layout/loading/loading04.html)|![loading04.gif](https://i.endpot.com/image/XUMGS/loading04.gif)|

|Loading05|[loading05](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading05.html)|[loading05](https://ajycc20.github.io/easy-css-layout/loading/loading05.html)|![loading05.gif](https://i.endpot.com/image/ZOM9M/loading05.gif)|

|Loading06|[loading06](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading06.html)|[loading06](https://ajycc20.github.io/easy-css-layout/loading/loading06.html)|![loading06.gif](https://i.endpot.com/image/LSPW9/loading06.gif)|

|Loading07|[loading07](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading07.html)|[loading07](https://ajycc20.github.io/easy-css-layout/loading/loading07.html)|![loading07.gif](https://i.endpot.com/image/VXC4C/loading07.gif)|

|Loading08|[loading08](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading08.html)|[loading08](https://ajycc20.github.io/easy-css-layout/loading/loading08.html)|![loading08.gif](https://i.endpot.com/image/JFVSY/loading08.gif)|

|Loading09|[loading09](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading09.html)|[loading09](https://ajycc20.github.io/easy-css-layout/loading/loading09.html)|![loading09.gif](https://i.endpot.com/image/LQVSD/loading09.gif)|

|Loading10|[loading10](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading10.html)|[loading10](https://ajycc20.github.io/easy-css-layout/loading/loading10.html)|![loading10.gif](https://i.endpot.com/image/GWLVX/loading10.gif)|

|Loading11|[loading11](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading11.html)|[loading11](https://ajycc20.github.io/easy-css-layout/loading/loading11.html)|![loading11.gif](https://i.endpot.com/image/5KVVK/loading11.gif)|

|Loading12|[loading12](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading12.html)|[loading12](https://ajycc20.github.io/easy-css-layout/loading/loading12.html)|![loading12.gif](https://i.endpot.com/image/VCDLN/loading12.gif)|

|Loading13|[loading13](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading13.html)|[loading13](https://ajycc20.github.io/easy-css-layout/loading/loading13.html)|![loading13.gif](https://i.endpot.com/image/ARVQA/loading13.gif)|

|Loading14|[loading14](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading14.html)|[loading14](https://ajycc20.github.io/easy-css-layout/loading/loading14.html)|![loading14.gif](https://i.endpot.com/image/7XKHN/loading14.gif)|

|Loading15|[loading15](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading15.html)|[loading15](https://ajycc20.github.io/easy-css-layout/loading/loading15.html)|![loading15.gif](https://i.endpot.com/image/9N7C9/loading15.gif)|

|Loading16|[loading16](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading15.html)|[loading16](https://ajycc20.github.io/easy-css-layout/loading/loading16.html)|![loading16.gif](https://i.endpot.com/image/KCAVA/loading16.gif)|

|Loading17|[loading17](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading17.html)|[loading17](https://ajycc20.github.io/easy-css-layout/loading/loading17.html)|![loading17.gif](https://i.endpot.com/image/D8LM7/loading17.gif)|

|Loading18|[loading18](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading18.html)|[loading18](https://ajycc20.github.io/easy-css-layout/loading/loading18.html)|![loading18.gif](https://i.endpot.com/image/UBFKB/loading18.gif)|

|Loading19|[loading19](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading19.html)|[loading19](https://ajycc20.github.io/easy-css-layout/loading/loading19.html)|![loading19.gif](https://i.endpot.com/image/S3OCM/loading19.gif)|

|Loading20|[loading20](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading20.html)|[loading20](https://ajycc20.github.io/easy-css-layout/loading/loading20.html)|![loading20.gif](https://i.endpot.com/image/BIZ5D/loading20.gif)|

|Loading21|[loading21](https://github.com/ajycc20/easy-css-layout/blob/master/loading/loading21.html)|[loading21](https://ajycc20.github.io/easy-css-layout/loading/loading21.html)|![loading21.gif](https://i.endpot.com/image/87OKY/loading21.gif)|



----------------------



## [Switch](https://github.com/ajycc20/easy-css-layout/tree/master/switch)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Switch01|[switch01](https://github.com/ajycc20/easy-css-layout/blob/master/switch/switch01.html)|[switch01](https://ajycc20.github.io/easy-css-layout/switch/switch01.html)|![switch01.gif](https://i.endpot.com/image/GTBJS/switch01.gif)|

|Switch02|[switch02](https://github.com/ajycc20/easy-css-layout/blob/master/switch/switch02.html)|[switch02](https://ajycc20.github.io/easy-css-layout/switch/switch02.html)|![switch02.gif](https://i.endpot.com/image/EZ225/switch02.gif)|

|Switch03|[switch03](https://github.com/ajycc20/easy-css-layout/blob/master/switch/switch03.html)|[switch03](https://ajycc20.github.io/easy-css-layout/switch/switch03.html)|![switch03.gif](https://i.endpot.com/image/AWLUS/switch03.gif)|

|Switch04|[switch04](https://github.com/ajycc20/easy-css-layout/blob/master/switch/switch04.html)|[switch04](https://ajycc20.github.io/easy-css-layout/switch/switch04.html)|![switch04.gif](https://i.endpot.com/image/JKPTV/switch04.gif)|

|Switch05|[switch05](https://github.com/ajycc20/easy-css-layout/blob/master/switch/switch05.html)|[switch05](https://ajycc20.github.io/easy-css-layout/switch/switch05.html)|![switch05.gif](https://i.endpot.com/image/OVBD0/switch05.gif)|



----------------------



## [Checkbox](https://github.com/ajycc20/easy-css-layout/tree/master/checkbox)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Checkbox01|[checkbox01](https://github.com/ajycc20/easy-css-layout/blob/master/checkbox/checkbox01.html)|[checkbox01](https://ajycc20.github.io/easy-css-layout/checkbox/checkbox01.html)|![checkbox01.gif](https://i.endpot.com/image/VTODR/checkbox01.gif)|

|Checkbox02|[checkbox02](https://github.com/ajycc20/easy-css-layout/blob/master/checkbox/checkbox02.html)|[checkbox02](https://ajycc20.github.io/easy-css-layout/checkbox/checkbox02.html)|![checkbox02.gif](https://i.endpot.com/image/23MOV/checkbox02.gif)|

|Checkbox03|[checkbox03](https://github.com/ajycc20/easy-css-layout/blob/master/checkbox/checkbox03.html)|[checkbox03](https://ajycc20.github.io/easy-css-layout/checkbox/checkbox03.html)|![checkbox03.gif](https://i.endpot.com/image/GCT44/checkbox03.gif)|



----------------------



## [Input](https://github.com/ajycc20/easy-css-layout/tree/master/input)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Input01|[input01](https://github.com/ajycc20/easy-css-layout/blob/master/input/input01.html)|[input01](https://ajycc20.github.io/easy-css-layout/input/input01.html)|![input01.gif](https://i.endpot.com/image/Y61QU/input01.gif)|



----------------------



## [Container](https://github.com/ajycc20/easy-css-layout/tree/master/container)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Container01|[container01](https://github.com/ajycc20/easy-css-layout/blob/master/container/container01.html)|[container01](https://ajycc20.github.io/easy-css-layout/container/container01.html)|![container01.jpg](https://i.endpot.com/image/SGZQ9/container01.jpg)|

|Container02|[container02](https://github.com/ajycc20/easy-css-layout/blob/master/container/container02.html)|[container02](https://ajycc20.github.io/easy-css-layout/container/container02.html)|![container02.jpg](https://i.endpot.com/image/JXRUF/container02.jpg)|

|Container03|[container03](https://github.com/ajycc20/easy-css-layout/blob/master/container/container03.html)|[container03](https://ajycc20.github.io/easy-css-layout/container/container03.html)|![container03.jpg](https://i.endpot.com/image/V4QN4/container03.jpg)|

|Container04|[container04](https://github.com/ajycc20/easy-css-layout/blob/master/container/container04.html)|[container04](https://ajycc20.github.io/easy-css-layout/container/container04.html)|![container04.jpg](https://i.endpot.com/image/EASHI/container04.jpg)|

|Container05|[container05](https://github.com/ajycc20/easy-css-layout/blob/master/container/container05.html)|[container05](https://ajycc20.github.io/easy-css-layout/container/container05.html)|![container05.jpg](https://i.endpot.com/image/WLNGH/container05.jpg)|

|Container06|[container06](https://github.com/ajycc20/easy-css-layout/blob/master/container/container06.html)|[container06](https://ajycc20.github.io/easy-css-layout/container/container06.html)|![container06.jpg](https://i.endpot.com/image/VL3TT/container06.jpg)|

|Container07|[container07](https://github.com/ajycc20/easy-css-layout/blob/master/container/container07.html)|[container07](https://ajycc20.github.io/easy-css-layout/container/container07.html)|![container07.jpg](https://i.endpot.com/image/UNYIX/container07.jpg)|



----------------------



## [Card](https://github.com/ajycc20/easy-css-layout/tree/master/card)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Card|[card01](https://github.com/ajycc20/easy-css-layout/blob/master/card/card01.html)|[card01](https://ajycc20.github.io/easy-css-layout/card/card01.html)|![card01.gif](https://i.endpot.com/image/QCWIP/card01.gif)|



----------------------



## [Unclassified](https://github.com/ajycc20/easy-css-layout/tree/master/unclassified)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Cube|[cube](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/cube.html)|[cube](https://ajycc20.github.io/easy-css-layout/unclassified/cube.html)|![cube.jpg](https://i.endpot.com/image/NW3WO/cube.jpg)|

|LetterA-D|[letterA-D](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterA-D.html)|[letterA-D](https://ajycc20.github.io/easy-css-layout/unclassified/letterA-D.html)|![letterA-D.jpg](https://i.endpot.com/image/RINJI/letterA-D.jpg)|

|LetterE-H|[letterE-H](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterE-H.html)|[letterE-H](https://ajycc20.github.io/easy-css-layout/unclassified/letterE-H.html)|![letterE-H.jpg](https://i.endpot.com/image/LNRLO/letterE-H.jpg)|

|LetterI-L|[letterI-L](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterI-L.html)|[letterI-L](https://ajycc20.github.io/easy-css-layout/unclassified/letterI-L.html)|![letterI-L.jpg](https://i.endpot.com/image/3ZBA6/letterI-L.jpg)|

|LetterM-P|[letterM-P](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterM-P.html)|[letterM-P](https://ajycc20.github.io/easy-css-layout/unclassified/letterM-P.html)|![letterM-P.jpg](https://i.endpot.com/image/4LATF/letterM-P.jpg)|

|LetterQ-T|[letterQ-T](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterQ-T.html)|[letterQ-T](https://ajycc20.github.io/easy-css-layout/unclassified/letterQ-T.html)|![letterQ-T.jpg](https://i.endpot.com/image/YDGXU/letterQ-T.jpg)|

|LetterU-X|[letterU-X](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterU-X.html)|[letterU-X](https://ajycc20.github.io/easy-css-layout/unclassified/letterU-X.html)|![letterU-X.jpg](https://i.endpot.com/image/WTPYN/letterU-X.jpg)|

|LetterY-Z|[letterY-Z](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/letterY-Z.html)|[letterY-Z](https://ajycc20.github.io/easy-css-layout/unclassified/letterY-Z.html)|![letterY-Z.jpg](https://i.endpot.com/image/6GJSC/letterY-Z.jpg)|

|Concentric-circles|[concentric-circles](https://github.com/ajycc20/easy-css-layout/blob/master/unclassified/concentric-circles.html)|[concentric-circles](https://ajycc20.github.io/easy-css-layout/unclassified/concentric-circles.html)|![concentric-circles.jpg](https://i.endpot.com/image/66GUF/concentric-circles.jpg)|



----------------------



## [List](https://github.com/ajycc20/easy-css-layout/tree/master/list)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|List01|[list01](https://github.com/ajycc20/easy-css-layout/blob/master/list/list01.html)|[list01](https://ajycc20.github.io/easy-css-layout/list/list01.html)|![list01.jpg](https://i.endpot.com/image/FI60B/list01.jpg)|

|List02|[list02](https://github.com/ajycc20/easy-css-layout/blob/master/list/list02.html)|[list02](https://ajycc20.github.io/easy-css-layout/list/list02.html)|![list02.gif](https://i.endpot.com/image/BGNIG/list02.gif)|

|List03|[list03](https://github.com/ajycc20/easy-css-layout/blob/master/list/list03.html)|[list03](https://ajycc20.github.io/easy-css-layout/list/list03.html)|![list03.gif](https://i.endpot.com/image/6EBN9/list03.gif)|



----------------------



## [Progress](https://github.com/ajycc20/easy-css-layout/tree/master/progress)



|Name|Source|Demo|Preview|

|:---:|:---:|:---:|:---:|

|Progress01|[progress01](https://github.com/ajycc20/easy-css-layout/blob/master/progress/progress01.html)|[progress01](https://ajycc20.github.io/easy-css-layout/progress/progress01.html)|![progress01.gif](https://i.endpot.com/image/MPFEG/progress01.gif)|

|Progress02|[progress02](https://github.com/ajycc20/easy-css-layout/blob/master/progress/progress02.html)|[progress02](https://ajycc20.github.io/easy-css-layout/progress/progress02.html)|![progress02.gif](https://i.endpot.com/image/TCP0E/progress02.gif)|

|Progress03|[progress03](https://github.com/ajycc20/easy-css-layout/blob/master/progress/progress03.html)|[progress03](https://ajycc20.github.io/easy-css-layout/progress/progress03.html)|![progress03.gif](https://i.endpot.com/image/XRU9I/progress03.gif)|