code | pays to know

[manual]

character inbox how's my driving visualosities

VERSION 1
<raw-code> <table style="font-size: 10pt; font-family: raavi, helvetica, sans-serif; color: #000; line-height: auto; text-transform: uppercase;"> <tr> <td width="300px"> <div style="width: 300px; height: 125px; text-align: left; display: inline-block; border: solid 1px #aaa; box-shadow: #ccc 2px 2px 1px;"> <div style="height: 80px; width: 80px; background: url(IMGURL); margin-left: 18px; margin-top: 16px; padding: 5px; box-shadow: #ccc 2px 2px 1px;"></div> <div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -110px; margin-left: 116px;"> <div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK1</a></center></div> <div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK2</a></center></div> <div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK3</a></center></div> </div> </div> </td> </tr> </table></raw-code>

*notes:
- the link boxes's heights are fixed; you could add more, but it won't align with the icon anymore.
- if you insist on having more links, ctrl+f height: 125px; and add at least 30px per link box to the current height.

- - - - -

character inbox how's my driving visualosities jemma simmons (AOS)

VERSION 2
<raw-code> <table style="font-size: 10pt; font-family: raavi, helvetica, sans-serif; color: #000; line-height: auto; text-transform: uppercase;"> <tr> <td width="300px"> <div style="width: 300px; height: 165px; text-align: left; display: inline-block; border: solid 1px #aaa; box-shadow: #ccc 2px 2px 1px;"> <div style="height: 80px; width: 80px; background: url(IMGURL); margin-left: 18px; margin-top: 16px; padding: 5px; box-shadow: #ccc 2px 2px 1px;"></div> <div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -110px; margin-left: 118px;"> <div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK1</a></center></div> <div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK2</a></center></div> <div style="width: auto; height: 16px; color: #fff; background-color: #000; margin-top: 6px; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK3</a></center></div> </div> <div style="width: 260px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -18px; margin-left: 8px;"><!--start copying from this tag--><div style="width: auto; height: 16px; color: #fff; background-color: #000; padding: 5px; text-align: middle; box-shadow: #ccc 2px 2px 1px;"><center><a href="URL" style="text-decoration: none; color: #fff;">LINK4</a></center></div><!--you can stop now, paste directly after this tag--></div> </div> </td> </tr> </table> </raw-code>

*notes:
- the link boxes's heights are fixed, and I haven't tested out the coding with additional linkboxes nvm I tested it
- find the area marked with !-- within the code, follow the instructions, and then inside the div style values add margin-top: 6px; in there
- ctrl+f height: 165px and add 30px per additional link box