killthecake | [48] Lots of Modules Biosheet!

Code:

<div style="width: 100%; height: 200px; padding: 5px; border: 1px solid #ccc; border-top: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto;">

<div style="font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-size: 22px; padding: 1px 0 0 5px; background: #888; text-shadow: 2px 2px 0 #aaa; font-family: 'Courier New', Courier, monospace;">
        Header
      </div>
      <p>Lorem ipsum</p>
    </div>

<div style="display: flex; flex-direction: row;">
      <div style="width: 50%; height: 200px; padding: 5px; border: 1px solid #ccc; border-top: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto;">

<div style="font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-size: 18px; padding: 1px 0 0 5px; background: #888; text-shadow: 2px 2px 0 #aaa; font-family: 'Courier New', Courier, monospace;">
          Header
        </div>
        <p>Lorem ipsum</p>
      </div>

<div style="display: flex; flex-direction: row;">
      <div style="width: 34%; height: 200px; padding: 5px; border: 1px solid #ccc; border-top: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto;">

<div style="font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-size: 14px; padding: 1px 0 0 5px; background: #888; text-shadow: 2px 2px 0 #aaa; font-family: 'Courier New', Courier, monospace;">
          Header
        </div>
        <p>Lorem ipsum</p>
      </div>

<div style="width: 100%; padding: 5px; border: 1px solid #ccc; border-top: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"><div style="width: 100%; height: 100%; background: center/cover url('IMAGE_URL'); text-align: center; color: #ccc; padding: 5px 0; font-weight: bold; letter-spacing: 1px; text-shadow: -1px -1px 0 #555, 1px -1px 0 #555, -1px 1px 0 #555, 1px 1px 0 #555;">
      ALIAS •
      UTC •
      <a href="URL" style="color: #ccc; text-decoration: none;">
        PLURK
      </a> •
      <a href="https://killthecake.dreamwidth.org/" style="color: #ccc; text-decoration: none;">
        CREDIT
      </a>
    </div></div>

</div>

❖ This is another code released early on the Patreon to my subscribers! Coming out SUPER late this month (AGAIN), but it's here!

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ This is less of a biosheet and more whatever you want it to be. It's easy to rearrange the modules/boxes, put images in them instead, add/remove rows, etc!

❖ In the example, each row has the same size boxes, but this isn't a rule. You could also make a small box take up 1/3 of the space and a long box take up 2/3's. All you have to do is play with the width percentages of each box until you get it where you want. If you have problems with it, just let me know! I'll make it work.

❖ Each row is labelled in the code (ONE BOX, TWO BOXES, etc) to help make it clearer where things are and what they do.

❖ If you want the image used in the example, here you go!

Ctrl+F & Replace:
❖ IMAGE_URL - this is your background images. Feel free to use gifs!
❖ URL - link urls at the bottom
❖ Alias/UTC/Plurk - placeholder text for the bottom
❖ header - placeholder for all headers. Feel free to remove them entirely if you want.
❖ Lorem Ipsum - placeholder text for the main info. Remember to include paragraph or p tags around your separate paragraphs.

#fff background, border along outer edge, header text
#ccc module/box borders, bottom text
#aaa header shadow
#888 text, header background
#555 bottom text shadows

[48] Lots of Modules Biosheet!

no subject

no subject