2nd: get ready

[yanyan]

I got inspiration for another code as soon as I finished my last one. My life... The images used are 160px by 320px.

Character Name Canon

single version
<center><table> <tr> <td><center><a href="LINK GOES HERE"><img src="IMAGE URL GOES HERE" style="height: 320px; width: 160px; border-radius: 50px; box-shadow: 0px 1px 5px #777;"></a> <div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;"><span style="font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.05em;">Character Name</span> <div style="position: relative; top: -10px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;">Canon</span> </div></div></center></td> </tr> </table> <span style="font-size: 10px;">code by <user name="cawaii"></center>

Character Name Canon

Character Name Canon

Character Name Canon

3-column version
<center><table> <tr> <td><center><a href="LINK GOES HERE"><img src="IMAGE URL GOES HERE" style="height: 320px; width: 160px; border-radius: 50px; box-shadow: 0px 1px 5px #777;"></a> <div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;"><span style="font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.05em;">Character Name</span> <div style="position: relative; top: -10px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;">Canon</span> </div></div></center></td> <td><center><a href="LINK GOES HERE"><img src="IMAGE URL GOES HERE" style="height: 320px; width: 160px; border-radius: 50px; box-shadow: 0px 1px 5px #777;"></a> <div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;"><span style="font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.05em;">Character Name</span> <div style="position: relative; top: -10px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;">Canon</span> </div></div></center></td> <td><center><a href="LINK GOES HERE"><img src="IMAGE URL GOES HERE" style="height: 320px; width: 160px; border-radius: 50px; box-shadow: 0px 1px 5px #777;"></a> <div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;"><span style="font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.05em;">Character Name</span> <div style="position: relative; top: -10px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;">Canon</span> </div></div></center></td> </tr> </table> <span style="font-size: 10px;">code by <user name="cawaii"></center>

Comments

[craftings]

Okay this? Is gorgeous like whoa. Is there any way to turn that line for the character name and make it into a full box below the image? I'm kinda thinking I want to use it for a CR chart of mine.

[yanyan]

There is! Just remove the parts in red and modify the part in blue to your liking.

<div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;">

Thank you very much for the comment!

[themaninred]

AHHHHHHHHHHHH wow you are totally amazing and i love you sfahgjasfghjkgkjh

You'll find the WIP and end result here if you're ever curious. Thank you so much! ♥

[yanyan]

ehehehe no problem! Just ping me if you need any help with it.

[craftings]

Hello again! Would there be any way to possibly have both (the current character name/canon line and the box below) for this? I'm awful at html/css so trying to figure it out on my own has really not worked well at all haha. Thank you!

[yanyan]

Sorry for only getting to this now! Hold on, let me try something for you.

<raw-code><center><table width="160"> <tr> <td><center> <a href="LINK GOES HERE"><img src="http://i.imgur.com/4pkL2zD.png" style="height: 320px; width: 160px; box-shadow: 0px 1px 5px #000;"></a> <div style="height: 42px; width: 160px; color: white; background: black; position: relative; top: -96px;"><span style="font-family: Monaco, Consolas, 'Lucida Console', monospace; font-size: 20px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.05em;">Character Name</span> <div style="position: relative; top: -10px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;">Canon</span> </div></div> <div style="background: black; position: relative; top: -46px; box-shadow: 0px 1px 5px #000; text-align: justify; padding: 4px;"><span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; color: #fff;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></div> </center></td> </tr> </table></raw-code> <span style="font-size: 10px;">code by <user name="cawaii"></center>

Preview is here!

[craftings]

YOU'RE AMAZING AND I LOVE YOU

here let me just

crawl all over you and then go hide in a rock for eternity