killthecake | [66] Business Card Muselist

Code:

<div style="width: 290px;">
      <div style="width: 150px; height: 80px; background: #222; float: right; margin: 0 -1px 1px 0;"></div>
      <div style="width: 150px; height: 80px; background: #222; float: left; margin: -57px 0 0 -3px;"></div>
      <div style="background: #eee; width: 290px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border: 1px solid #eee; margin-top: -103px; float: right; box-shadow: 0 0 4px #aaa;">
  
        <div style="width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px;">
          <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 1 / 3 / 2;"></div>
          <div style="background: center/cover url('IMAGE_URL'); grid-area: 1 / 2 / 2 / 3;"></div>
          <div style="background: center/cover url('IMAGE_URL'); grid-area: 2 / 2 / 3 / 3;"></div>
        </div>
  
  
        <div style="width: 190px; text-align: center;">
          <div style="font-style: italic; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 18px; color: #222;">
            Character
          </div>
          <div style="text-transform: lowercase; font-variant: small-caps; font-weight: bold; font-size: 10px; color: #222;">
            Canon
          </div>
          <a href="URL" style="text-decoration: none; color: #222; font-size: 20px;">
            ✧
          </a>
        </div>
      </div>
    </div>

</div>
  <div style="width: 600px; margin: auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px; text-align: left; color: #333; text-transform: uppercase;">
    <a href="https://www.patreon.com/killthecake" style="color: #333; text-decoration: none;">
      CODE
    </a>
  </div></center>

❖ These codes were released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content.

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

❖ If you want to change the little star icon, you can find more HTML friendly symbols at SYMBL!

❖ If you add more links, it'll try to create a column of them. To make them inline, simply replace the current code for the link with this:

Ctrl+F & Replace:
❖ IMAGE_URL - For each of the image placeholders.
❖ Character/Canon - The header and subheader placeholder of each block.
❖ URL - For the link URL.

#eee Background and borders of the blocks.
#aaa Shadows.
#333 Credit link.
#222 Outline along the right top/left bottom edges, text color.