[OOC] Recolle Status Code

[youraffection]

Status

Yosuke Hanamura

Some blurb goes here or something probably Blah blah blah stuff here we go. oh boy i need this for testing. even more words how many can we fit in here without it getting weird

Birth

2000.07.22, 16 y.o.

Stats

5'9"/175cm, 128lbs/58kg

Gender

Male

Status

Single (Regretably, but unsurprisingly)

Job

Student @ Recolle High, Freshen's Clerk

Thing

And stuff

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque risus non enim ultrices tempus. Fusce condimentum non ligula at convallis. Nunc a aliquet nunc. Integer luctus sem nec mollis bibendum. Mauris nec sapien eu mi pretium porta at a turpis. Aenean in ullamcorper leo, in vehicula risus.

Vestibulum bibendum, nunc non malesuada cursus, orci orci pharetra lacus, et efficitur neque urna non justo. Quisque mollis sem vitae porttitor molestie. Curabitur pulvinar quis arcu quis tincidunt. Duis a metus pellentesque, efficitur massa ac, facilisis ligula. Aliquam porta cursus nibh quis volutpat. Curabitur luctus turpis quis felis finibus pharetra. Nunc sit amet eleifend lacus. Sed et lacinia quam.

Duis pulvinar rutrum eros, non rhoncus enim bibendum hendrerit. Fusce sit amet ornare dui. Duis elementum leo lorem, ac consequat tortor elementum eget. Mauris vel risus eget ex tincidunt gravida eu ac lectus.

Coding by youraffection

CODE:

<center><raw-code><div width="700px;"> <div style="background: #FCE92B; background-image: url(http://imgur.com/IwMW2lU.png), url(http://imgur.com/DLLjlBp.png), url(http://i.imgur.com/e20a24L.png); background-position: top right, top right, bottom left; background-repeat: no-repeat, repeat-y, repeat-y; width: 820px; height: 600px; box-shadow: 5px 5px 5px #ccc; text-align: left; vertical-align: top; position: relative: z-index: 1;"> <!--HEADER--> <div style="position: relative; z-index: 2; top: -10px; left: 5px;"><span style="font-family: arial black, gadget, sans-serif; font-size: 40pt; text-shadow: -3px -3px 0px #132672, 0px -3px 0px #132672, 3px -3px 0px #132672, -3px 0px 0px #132672, 3px 0px 0px #132672, -3px 3px 0px #132672, 0px 3px 0px #132672, 3px 3px 0px #132672; letter-spacing: 0.0em; color: #fff; position: relative; left: 50px; top: 5px;">Status</span></div> <div style="position: relative; z-index: 3; top: -25px; left: 0px; height: 30px; width: 300px; border-radius: 0px 5px 5px 0px; background-color: #fff; font-family: arial black, gadget, sans-serif; font-size: 14pt; color: #132672; text-align: center;">**CHARACTER NAME***</div> <div style="position: relative; z-index: 3; top: -20px; left: 0px; height: 50px; width: 380px; border-radius: 0px 5px 5px 0px; background-color: #132672; font-weight: bold; font-family: minerva, sans-serif; font-size: 10pt; line-height: 12px; color: #fff; text-align: left; padding: 5px 5px 5px 6px; overflow: none;">***Some blurb goes here or something probably Blah blah blah stuff here we go. oh boy i need this for testing. even more words how many can we fit in here without it getting weird****</div> <!--HEADER--> <!--STATS--> <div style="position: relative; z-index: 3; top: -14px; left: 0px; font-family: minerva, sans-serif; font-weight: bold; font-size: 11pt; color: #fff; text-align: left;"> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <div style="float: left; position: relative; left: 15px; color: #fff; text-shadow: #47738E 2px 2px 0px; font-family: arial black, gadget, sans-serif; width: 60px; overflow: none;">***STAT***</div> <div style="margin: 0px 0px 3px 83px; height: 18px; width: 300px; border-radius: 5px; background-color: #132672; padding: 2px 2px 2px 6px; vertical-align: top; font-size: 13px; text-align: left;">***STAT BLURB***</div> <!--STATS--> <!--BLURB--> <div style="position: relative; z-index: 500; top: -3px; left: 30px; height: 220px; width: 390px; background-color: #a0dffa; text-align: left; overflow: none; border-radius: 8px; padding: 5px;"> <div style="height: 210px; width: 380px; padding: 5px; overflow: auto; font-size: 12px; line-height: 13px; color: #132672; text-align: justify;"> ***Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pellentesque risus non enim ultrices tempus. Fusce condimentum non ligula at convallis. Nunc a aliquet nunc. Integer luctus sem nec mollis bibendum. Mauris nec sapien eu mi pretium porta at a turpis. Aenean in ullamcorper leo, in vehicula risus. <P></P> Vestibulum bibendum, nunc non malesuada cursus, orci orci pharetra lacus, et efficitur neque urna non justo. Quisque mollis sem vitae porttitor molestie. Curabitur pulvinar quis arcu quis tincidunt. Duis a metus pellentesque, efficitur massa ac, facilisis ligula. Aliquam porta cursus nibh quis volutpat. Curabitur luctus turpis quis felis finibus pharetra. Nunc sit amet eleifend lacus. Sed et lacinia quam. <p></p> Duis pulvinar rutrum eros, non rhoncus enim bibendum hendrerit. Fusce sit amet ornare dui. Duis elementum leo lorem, ac consequat tortor elementum eget. Mauris vel risus eget ex tincidunt gravida eu ac lectus.*** </div> </div> <!--BLURB--> <!--FOOTER--> <div style="overflow: hidden; height: 554px; float: right; position: relative; z-index: 200; right: 0px; margin-top: -503px;"><img src="***CHARACTER IMAGE***"></div> <div style="position: relative; z-index: 100; left: 320px; top: 10px; opacity: 0.7; background-color: #a0dffa; border-radius: 15px; width: 150px; padding: 5px; color: #132672; font-size: 8pt; font-weight: bold; text-align: center;">Coding by <a href="http://youraffection.dreamwidth.org/10634.html" style="color: #002ee1; text-decoration: none;">youraffection</a></div> <!--FOOTER--> </div> </div></raw-code>

SOME HANDY NOTES:

• Any fields that you should edit are marked with three asterisks "***". So just do a search for those if you're having trouble locating them.
  
• Each part of the code is marked with a < !--SECTION-- > to < !--SECTION-- > so you don't get lost.
  
• The blurb under the name is set to side any overflow text to hide, so I wouldn't make it much longer than the test blurb I threw in there.
  
• Six status is the default and I recommend keeping it to six to just make sure all the spacing stays in place! You can remove some if you want but I wouldn't suggest going over.
  
• You'll need to make your own character side image, but it's easy! It is 414x600 pixels. In the example picture there's some dead space up top, so you shouldn't go over 600 to keep the positioning right. You can go wider, though, it will just fall behind the light blue text box. The color of the drop shadow is #a0dffa.

Let me know if you have any questions!