Information

This tool is made to test/preview elemental web designs such as inputs, carousels, etc. There are a total of 15 div elements to be arranged as needed. To select them, write "d(1-15)" to the Selection input and click the select button below it. Then you can simply click around the css modifiers below them to make your adjustments. Inserting a div into another can be done with Child appending or InsertBefore at the HTML Modifier section.

You can easily extract the html source, yet the problem is that the css properties shall be expressed as inline css, which is rather innefficient and should be edited manually.

Have fun! :)

Simple HTML generator by Jedidiah David

CSS Modifiers

top
Selection


display


position


z-index


overflow-x


overflow-y


float


clear


colors


width


height


opacity

padding:

margin:

font-family

font-size


font-weight


text-align


text-transform


line-height

word-spacing



HTML Modifiers

top
innerHTML generator

Child appending


insertBefore


Generate HTML

top




Hover / tap at the top right corner of the screen.