Template:CSS demo div list — coding help

About

Make divs on the left with explanations on the right. Here's an example:

background-color: pink; background: conic-gradient(Lavender, Pink, Khaki, LightGreen, PaleTurquoise, Lavender);

background: linear-gradient(Lavender, Turquoise);

Warning: Fragile code

Don't edit this intermediate-level template code unless you are familiar with complex code.

If not, don't let this stop you from learning! Visit your sandbox (User:<insert name here>/Sandbox), copy-paste the code, and tinker as much as you'd like.

More info

Base code by MissLunaRose.

Demo on left, description on right

Template parameters[Edit template data]
Parameter		Description	Type	Status
Demo box default style	`defaultStyle`	Add a default style to all demo boxes Example border-radius: 50%;	Unknown	suggested
Container style	`containerStyle`	Tweak the style of the outer container (rarely needed) Example grid-gap: 5px; font-family: monospace;	Unknown	optional
Demo box width	`width`	Default: 75px Example 50px	Unknown	suggested
Demo box height	`height`	Control the height. Default: unspecified Example 75px	Unknown	suggested
Description box width	`descriptionWidth`	Default: 300px Example 150px	Unknown	suggested
Demo box 1 style	`style1`	CSS styles to apply to demo box 1 Example font-family: serif;	Unknown	suggested
extra1	`extra1`	Secret CSS styles for demo box 1	Unknown	optional
Demo box 1 content (optional)	`demo1`	Text/code to go inside demo box 1 Example ♥	Unknown	suggested
Description of demo box 1	`description1`	Describe it or put STYLE to display its CSS styles Example Serif heart, STYLE	Unknown	suggested
Demo box 2 style	`style2`	CSS styles to apply to demo box 2 Example font-family: sans-serif;	Unknown	suggested
extra2	`extra2`	Secret CSS styles for demo box 2	Unknown	optional
Demo box 2 content (optional)	`demo2`	Text/code to go inside demo box 2 Example ♥	Unknown	suggested
Description of demo box 2	`description2`	Describe it or put STYLE to display its CSS styles Example Sans serif heart, STYLE	Unknown	suggested
Demo box 3 style	`style3`	CSS styles to apply to demo box 3 Example font-family: monospace;	Unknown	suggested
extra3	`extra3`	Secret CSS styles for demo box 3	Unknown	optional
Demo box 3 content (optional)	`demo3`	Text/code to go inside demo box 3 Example ♥	Unknown	suggested
Description of demo box 3	`description3`	Describe it or put STYLE to display its CSS styles Example Monospace heart, STYLE	Unknown	suggested
Demo box 4 style	`style4`	CSS styles to apply to demo box 4 Example font-family: cursive;	Unknown	suggested
extra4	`extra4`	Secret CSS styles for demo box 4	Unknown	optional
Demo box 4 content (optional)	`demo4`	Text/code to go inside demo box 4 Example ♥	Unknown	suggested
Description of demo box 4	`description4`	Describe it or put STYLE to display its CSS styles Example Cursive heart, STYLE	Unknown	suggested
Demo box 5 style	`style5`	CSS styles to apply to demo box 5 Example font-family: fantasy;	Unknown	suggested
extra5	`extra5`	Secret CSS styles for demo box 5	Unknown	optional
Demo box 5 content (optional)	`demo5`	Text/code to go inside demo box 5 Example ♥	Unknown	suggested
Description of demo box 5	`description5`	Describe it or put STYLE to display its CSS styles Example Fantasy heart, STYLE	Unknown	suggested
Demo box 6 style	`style6`	CSS styles to apply to demo box 6 Example font-family: serif;	Unknown	suggested
extra6	`extra6`	Secret CSS styles for demo box 6	Unknown	optional
Demo box 6 content (optional)	`demo6`	Text/code to go inside demo box 6 Example ♥	Unknown	suggested
Description of demo box 6	`description6`	Describe it or put STYLE to display its CSS styles Example Serif heart, STYLE	Unknown	suggested
Demo box 7 style	`style7`	CSS styles to apply to demo box 7 Example font-family: sans-serif;	Unknown	suggested
extra7	`extra7`	Secret CSS styles for demo box 7	Unknown	optional
Demo box 7 content (optional)	`demo7`	Text/code to go inside demo box 7 Example ♥	Unknown	suggested
Description of demo box 7	`description7`	Describe it or put STYLE to display its CSS styles Example Sans serif heart, STYLE	Unknown	suggested
Demo box 8 style	`style8`	CSS styles to apply to demo box 8 Example font-family: monospace;	Unknown	suggested
extra8	`extra8`	Secret CSS styles for demo box 8	Unknown	optional
Demo box 8 content (optional)	`demo8`	Text/code to go inside demo box 8 Example ♥	Unknown	suggested
Description of demo box 8	`description8`	Describe it or put STYLE to display its CSS styles Example Monospace heart, STYLE	Unknown	suggested
Demo box 9 style	`style9`	CSS styles to apply to demo box 9 Example font-family: cursive;	Unknown	suggested
extra9	`extra9`	Secret CSS styles for demo box 9	Unknown	optional
Demo box 9 content (optional)	`demo9`	Text/code to go inside demo box 9 Example ♥	Unknown	suggested
Description of demo box 9	`description9`	Describe it or put STYLE to display its CSS styles Example Cursive heart, STYLE	Unknown	suggested
Demo box 10 style	`style10`	CSS styles to apply to demo box 10 Example font-family: fantasy;	Unknown	suggested
extra10	`extra10`	Secret CSS styles for demo box 10	Unknown	optional
Demo box 10 content (optional)	`demo10`	Text/code to go inside demo box 10 Example ♥	Unknown	suggested
Description of demo box 10	`description10`	Describe it or put STYLE to display its CSS styles Example Fantasy heart, STYLE	Unknown	suggested