code

[bread]

Live previews

Aiichiro Nitori Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Aiichiro Nitori

<raw-code><div style="display:inline-block;width:110px;margin:10px;vertical-align:top!important;"> <img src="http://i.imgur.com/lVwAWAXl.png" style="border:5px solid #009989;border-bottom:0px;float:left; margin-right:10px;"> <div style="margin:10px 0;color:white;"><div style="width:100%;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> Aiichiro Nitori</div><div style="text-align:center;font-size:10px;font-family:lucida console;"> <div style="width:20px;height:5px;background-color:#A3A948;display:inline-block;"></div> <div style="width:20px;height:5px;background-color:#EDB92E;display:inline-block;"></div> <div style="width:20px;height:5px;background-color:#F85931;display:inline-block;"></div> <div style="width:20px;height:5px;background-color:#CE1836;display:inline-block;"></div> <div style="color:black;font-size:11px;font-family:georgia;padding:0;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. </div><div style="background-color:#009989;height:5px;"></div></div></div></div></raw-code>

Aiichiro Aiichiro Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis.

one line no text <raw-code> <div style="display:inline-block;width:128px;margin:10px;vertical-align:top!important;"><div style="display:inline-block;"> <img src="IMGURL" style="border:5px solid #009989;border-bottom:0px;float:left;"><div style="color:white;width:110px;"><div style="width:110px;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div></div></div> <div style="text-align:center;font-size:10px;font-family:lucida console;display:inline-block;"> <div style="height:25px;width:5px;background-color:#A3A948;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#EDB92E;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#F85931;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#CE1836;margin: 4px 0;"></div> </div><div style="background-color:#009989;width:5px;height:120px;display:inline-block;float:right;"></div></div></div></div></raw-code>

one line with text <raw-code> <div style="display:inline-block;width:328px;margin:10px;vertical-align:top!important;"><table><tr><td style="width:128px;vertical-align:top!important;"><div style="display:inline-block;"> <img src="http://i.imgur.com/lVwAWAXl.png" style="border:5px solid #009989;border-bottom:0px;float:left;"><div style="color:white;width:110px;"><div style="width:110px;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div> </div></div> <div style="text-align:center;font-size:10px;font-family:lucida console;display:inline-block;vertical-align:top;"> <div style="height:25px;width:5px;background-color:#A3A948;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#EDB92E;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#F85931;margin: 4px 0;"></div> <div style="height:25px;width:5px;background-color:#CE1836;margin: 4px 0;"></div> </div><div style="background-color:#009989;width:5px;height:120px;display:inline-block;float:right;"></div></div></div></div></td><td style="vertical-align:top!important;"><div style="color:black;font-size:11px;font-family:georgia;padding:0;text-align:justify;float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. </div></td></tr></table></div></raw-code>

Aiichiro Nitori Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue. Vestibulum nisi justo, suscipit interdum commodo ac, pretium fringilla dolor.

<raw-code><div style="display:inline-block;width:300px;margin:10px;vertical-align:top!important;"> <img src="IMGURLHERE" style="border:5px solid #009989;float:left; margin-right:10px;"><div style="margin:10px 0;color:white;"><div style="width:100%;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="text-align:center;font-size:10px;font-family:lucida console;margin-"> <div style="width:40px;height:5px;background-color:#A3A948;display:inline-block;"></div> <div style="width:40px;height:5px;background-color:#EDB92E;display:inline-block;"></div> <div style="width:40px;height:5px;background-color:#F85931;display:inline-block;"></div> <div style="width:40px;height:5px;background-color:#CE1836;display:inline-block;"></div> <div style="color:black;font-size:11px;font-family:georgia;padding:0;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue. Vestibulum nisi justo, suscipit interdum commodo ac, pretium fringilla dolor. </div><div style="background-color:#009989;height:5px;"></div></div></div></div></raw-code>

Aiichiro Nitori Aiichiro Nitori Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis.

two lines no text <raw-code> <div style="display:inline-block;width:128px;margin:10px;vertical-align:top!important;"><div style="display:inline-block;"> <img src="IMGURL" style="border:5px solid #009989;border-bottom:0px;float:left;"><div style="color:white;width:110px;"><div style="width:110px;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div></div></div> <div style="text-align:center;font-size:10px;font-family:lucida console;display:inline-block;"> <div style="height:29px;width:5px;background-color:#A3A948;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#EDB92E;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#F85931;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#CE1836;margin: 4px 0;"></div> </div><div style="background-color:#009989;width:5px;height:135px;display:inline-block;float:right;"></div></div></div></div></raw-code>

two lines with text <raw-code> <div style="display:inline-block;width:328px;margin:10px;vertical-align:top!important;"><table><tr><td style="width:128px;vertical-align:top!important;"><div style="display:inline-block;"> <img src="http://i.imgur.com/lVwAWAXl.png" style="border:5px solid #009989;border-bottom:0px;float:left;"><div style="color:white;width:110px;"><div style="width:110px;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div> </div></div> <div style="text-align:center;font-size:10px;font-family:lucida console;display:inline-block;vertical-align:top;"> <div style="height:29px;width:5px;background-color:#A3A948;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#EDB92E;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#F85931;margin: 4px 0;"></div> <div style="height:29px;width:5px;background-color:#CE1836;margin: 4px 0;"></div> </div><div style="background-color:#009989;width:5px;height:135px;display:inline-block;float:right;"></div></div></div></div></td><td style="vertical-align:top!important;"><div style="color:black;font-size:11px;font-family:georgia;padding:0;text-align:justify;float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. </div></td></tr></table></div></raw-code>

Aiichiro Nitori section 1 section 2 section 3 section 4 Aiichiro Nitori section 1 section 2 section 3 section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue.

<raw-code><div style="display:inline-block;width:300px;margin:10px;vertical-align:top!important;"> <img src="IMGURLHERE" style="border:5px solid #009989;float:left;"><div style="margin:10px 0;color:white;"><div style="width:100%;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="text-align:center;font-size:10px;font-family:lucida console;"> <div style="background-color:#A3A948">section 1</div> <div style="background-color:#EDB92E">section 2</div> <div style="background-color:#F85931">section 3</div> <div style="background-color:#CE1836">section 4</div> <div style="background-color:#009989;height:5px;"></div></div> <br style="clear:both;"><div style="color:black;font-size:11px;font-family:georgia;padding:10px;text-align:justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue. </div></div></div></raw-code>

Aiichiro Nitori section 1 section 2 section 3 section 4 Aiichiro Nitori section 1 section 2 section 3 section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue.

<raw-code><div style="display:inline-block;width:300px;margin:10px;vertical-align:top!important;"> <img src="IMGURLHERE" style="box-shadow:5px 5px 0 #009989;border-radius:100px;float:right;"><div style="margin:10px 0;color:white;"><div style="width:80%;background-color:#009989;font-family:georgia;font-style:italic;font-size:25px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="width:80%;text-align:center;font-size:10px;font-family:lucida console;"> <div style="background-color:#A3A948">section 1</div> <div style="background-color:#EDB92E">section 2</div> <div style="background-color:#F85931">section 3</div> <div style="background-color:#CE1836">section 4</div> <div style="background-color:#009989;height:5px;"></div></div><br style="clear:both;"><div style="width:90%;color:black;font-size:11px;font-family:georgia;text-align:justify;padding:0px 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. Sed mattis at mauris nec sagittis. Aenean scelerisque odio in magna condimentum eleifend. Fusce eget urna non libero lacinia euismod ut nec augue. </div></div></div></raw-code>

Aiichiro Nitori section 1 section 2 section 3 section 4 Aiichiro Nitori section 1 section 2 section 3 section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius.

<raw-code><div style="display:inline-block;width:200px;margin:10px;vertical-align:top!important;"><div style="Color:white;"> <img src="IMGURLHERE" style="margin-bottom:-5px;float:left;"><div style="height:35px;background-color:#009989;font-family:georgia;font-style:italic;font-size:20px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="text-align:center;font-size:10px;font-family:lucida console;"> <div style="background-color:#A3A948">section 1</div> <div style="background-color:#EDB92E">section 2</div> <div style="background-color:#F85931">section 3</div> <div style="background-color:#CE1836">section 4</div> <div style="background-color:#009989;height:5px;"></div> <br style="clear:both;"><div style="color:black;font-size:11px;font-family:georgia;text-align:justify;padding:0px 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. </div></div></div></div></raw-code>

Aiichiro Nitori section 1 section 2 section 3 section 4 Aiichiro Nitori section 1 section 2 section 3 section 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius.

Without text <raw-code><div style="display:inline-block;width:100px;margin:10px;vertical-align:top!important;"><div style="Color:white;"> <img src="IMGURLHERE" style="margin-bottom:-5px;"><div style="background-color:#009989;font-family:georgia;font-style:italic;font-size:20px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="text-align:center;font-size:10px;font-family:lucida console;"> <div style="background-color:#A3A948">section 1</div> <div style="background-color:#EDB92E">section 2</div> <div style="background-color:#F85931">section 3</div> <div style="background-color:#CE1836">section 4</div> <div style="background-color:#009989;height:5px;"></div></div></div></div></raw-code>

With text <raw-code><div style="display:inline-block;width:250px;margin:10px;vertical-align:top!important;"><div style="width:100px;Color:white;float:left;margin:0 5px;"> <img src="IMGURLHERE" style="margin-bottom:-5px;"><div style="background-color:#009989;font-family:georgia;font-style:italic;font-size:20px;text-align:center;line-height:15px;"> CHARACTERNAME</div><div style="text-align:center;font-size:10px;font-family:lucida console;"> <div style="background-color:#A3A948">section 1</div> <div style="background-color:#EDB92E">section 2</div> <div style="background-color:#F85931">section 3</div> <div style="background-color:#CE1836">section 4</div> <div style="background-color:#009989;height:5px;"></div></div></div><div style="color:black;font-size:11px;font-family:georgia;text-align:justify;margin:10px;padding:0px 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia leo. Sed mollis nulla odio, non commodo nibh ultricies id. Cras vitae ultricies turpis, quis cursus tortor. Etiam rutrum auctor varius. </div></div></raw-code>

Notes ⇀ For codes with two examples, but only one textarea, to get the no-text version, just delete the Lorem Ipsum text
⇀ The colored bars on all examples can be deleted, kind of like a gauge
⇀ "x Line(s) with/without text" are all part of a "set", but needed drastically different coding for each to work correctly.

Comments

[imps]

I love these colors and the overall look of this! I'm using one version as a muselist, with credit. Thanks for coding it!