Inception Totem CR Chart

[randomtology]

Hey everyone! As part of my holiday giveaway, I have a simple Inception inspired CR code that allows for someone to post an visual image (or the totems in Inception's case) that's associated with a character! This was made for everlark, but anyone is free grab as well! I made two versions of the code, one with an option for text and one without. Enjoy!

Character Name
Canon

"Well, dreams, they feel real while we're in them right? Its only when we wake up then we realize that something was actually strange."

LINK

Character Name
Canon

Code by Yuff

CODE:

TEXT:

NO TEXT:

<cut><raw-code> <div class="container" style="width: 810px; margin: auto; "> <!--START CR ENTRY--> <div style="display: inline-block; width: 375px; height: 375px; background: #041c34; background: radial-gradient(farthest-side, #07354f, #041c34); background: -webkit-radial-gradient(farthest-side, #07354f, #041c34); border-radius: 5px; margin: 10px; border: 2px inset #6891a5;"> <!--START ICON & NAME--> <div style="display: inline-block; width: 150px; height: 225px; border-radius: 5px 0px 0px 0px;"><div style="width: 150px; height: 140px; border-radius: 5px 0px 0px 0px;"> <img src="ICON-URL" alt="Character" style="margin: 20px 20px 10px 20px; height: 100px; width: 100px; border-radius: 2px; border: 3px inset #6891a5;"></div> <div style="width: 150px; height: 75px; text-align: center; color: #cc1d24; font-family: Helvetica; font-size: 17px; line-height: 19px; font-weight: bold; text-transform: uppercase;">Character Name<br/> <span style="font-size: 13px; font-weight: normal; text-transform: none; font-variant: small-caps;">Canon</span></div></div> <!--END ICON & NAME--> <!--START IMAGE, IMAGE MUST BE 200px x 200px FOR BEST RESULT--> <div style="display: inline-block; float: right; width: 225px; height: 225px; border-radius: 0px 5px 0px 0px;"> <img src="IMAGE-URL" alt="IMAGE" style="border: 2px inset #6891a5; margin: 10px; border-radius: 2px; height: 200px; width: 200px;"></div> <!--END IMAGE--> <!--START TEXT--> <div style="display: inline-block; width: 345px; height: 100px; padding: 20px 15px 10px 15px; vertical-align: middle; color: #93a2b5; font-family: Helvetica; overflow: hidden;"> [ENTER 3-4 (OR LESS) LINES OF TEXT HERE] </div> <!--END TEXT--> <!--START LINK--> <div style="display: inline-block; width: 365px; height: 20px; border-radius: 0px 0px 5px 5px; padding-right: 10px; text-align: right; font-family: Helvetica; font-size: 11px; text-transform: uppercase;"> <a href="LINK-URL" style="color: #cc1d24; text-decoration: none;">LINK</a></div> <!--END LINK--> </div> <!--END CR ENTRY--> </div><div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div> </raw-code></cut>

<cut><raw-code> <div class="container" style="width: 810px; margin: auto; "> <!--START CR ENTRY--> <div style="display: inline-block; width: 375px; height: 225px; background: #041c34; background: radial-gradient(farthest-side, #07354f, #041c34); background: -webkit-radial-gradient(farthest-side, #07354f, #041c34); border-radius: 5px; margin: 10px; border: 2px inset #6891a5;"> <!--START ICON & NAME--> <div style="display: inline-block; width: 150px; height: 225px; border-radius: 5px 0px 0px 0px;"><div style="width: 150px; height: 140px; border-radius: 5px 0px 0px 0px;"> <img src="ICON-URL" alt="Character" style="margin: 20px 20px 10px 20px; height: 100px; width: 100px; border-radius: 2px; border: 3px inset #6891a5;"></div> <div style="width: 150px; height: 75px; text-align: center; color: #cc1d24; font-family: Helvetica; font-size: 17px; line-height: 19px; font-weight: bold; text-transform: uppercase;">Character Name<br/> <span style="font-size: 13px; font-weight: normal; text-transform: none; font-variant: small-caps;">Canon</span></div></div> <!--END ICON & NAME--> <!--START IMAGE, IMAGE MUST BE 200px x 200px FOR BEST RESULT--> <div style="display: inline-block; float: right; width: 225px; height: 225px; border-radius: 0px 5px 0px 0px;"> <img src="IMAGE-URL" alt="IMAGE" style="border: 2px inset #6891a5; margin: 10px; border-radius: 2px; height: 200px; width: 200px;"></div> <!--END IMAGE--> </div> <!--END CR ENTRY--> </div><div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div> </raw-code></cut>

NOTES:

The text area allows for about 3-4 lines of text. Basically just enough to have some quick notes about the CR.

Image size that works best is 200x200px. It will resize, but at least make sure the image is square form or it will distort the resolution.

It is possible to mix and match the two versions of the CR code, but you might have to play around with the placement of the two different boxes somewhat, because I notice it tends to fall out of alignment easily if put side by side.

Modifications are totally fine. I'd love to see what you do with it though!

Comments are nice but not necessary. However, please leave the credit line on!