| thirteen. one cr chart code.

[spoinks]

gradient
Inspired by the game I Love Hue.

Notes:
⇨ I haven't added title code to the divs, if you want to, please add this code to the div with the icon:
title="character name / canon / anything else"

⇨ If you want an easy way to find HTML gradients, I recommend W3 Schools' Colour Picker!

⇨ When adding a new row, please note that the top: command in the first div should be +2px of whatever the last value was (the default code goes from 0 to 8px, so the next row would be top: 10px;).

CODE:
<raw-code><center><span style="font-family: serif; font-size: 28px; font-style: italic; font-weight: bold; color: #000;">character relations</span><br /> <span style="font-family: monospace; font-size: 11pt; font-weight: bold;"><font color="#ROM-HEX">romantic</font> | <font color="#POS-HEX">positive</font> | <font color="#NEU-HEX">neutral</font> | <font color="#NEG-HEX">negative</font></span> <div style="width: 410px; height: 500px; overflow: visible; padding: 10px; margin-bottom: 10px; align: top;"> <!--characters--> <div style="width: 100px; height: 100px; background-color: #HEX; border-radius: 5px 0 0 0; display: inline-block; float: left; position: relative; margin-right: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); border-radius: 5px 0 0 0; opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; border-radius: 0 5px 0 0;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 5px 0 0;"> </div> </div> <!--line2--> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <!--line3--> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <!--line4--> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <!--line5--> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px; border-radius: 0 0 0 5px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 0 5px;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px; border-radius: 0 0 5px 0;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 5px 0;"> </div> </div> </div>

NEW ROW:
<!--lineXX--> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx; border-radius: 0 0 0 5px;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 0 5px;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;"> </div> </div> <div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx; border-radius: 0 0 5px 0;"> <div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 5px 0;"> </div> </div> </div>