killthecake | [56] Chipped Info Sheet (Reply)

北方拓芙

Toph Beifong

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste modi sunt dolore. Id dolore odio aperiam voluptate facilis, iure minus veritatis explicabo laboriosam necessitatibus optio delectus quidem natus distinctio! Sequi.

    
      CODE

Code:

<div style="width: 250px; display: block; position: sticky; top: 10px; text-align: center; font-weight: bold;">

<div style="width: 100%; height: 300px; background: center/cover url('MAIN_IMAGE'); clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 0 85%);"></div>

<div style="width: 100%; padding: 10px 3px; font-variant: small-caps; letter-spacing: 2px; cursor: default; display: flex; flex-direction: column; text-shadow: 0 0 6px #ddd, 0 0 4px #ddd, 0 0 2px #ddd;">
      <div style="width: 100%; font-size: 20px;">
        Header
      </div>
      <div style="width: 100%; font-size: 12px;">
        Subheader
      </div>
      </div>

<a href="URL" style="display: block; background: #ddd; color: #333; text-decoration: none; padding: 5px 0; margin: 10px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 55%);">
        Link
      </a>

</div>

<div style="width: 100%; height: 200px; background: #ddd; overflow-y: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 85%); margin-bottom: 15px; padding: 4px 10px 10px 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

<p style="color: #333;">Lorem ipsum</p>

</div>

<div style="width: 100%; height: 100px; display: flex; flex-direction: row; justify-content: space-between;margin-bottom: 15px;">

</div>

<p style="color: #333;">Lorem ipsum</p>

</div>

</div>

</div>
  <div style="width: 850px; margin: 0 auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px; text-align: right;">
    <a href="https://killthecake.dreamwidth.org/" style="color: #000; text-decoration: none;">
      CODE
    </a>
  </div>

❖ This is a code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content.

❖ This biosheet has some features made with clip-paths. Some browsers don't support clip-paths very well, but this biosheet will work perfectly well without them.

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

Ctrl+F & Replace:
❖ Header/Subheader - Titles on the sidebar.
❖ Lorem ipsum - Text placeholder. Each new paragraph looks better when you wrap it with the 'p' tags provided in the code.
❖ MAIN_IMAGE - The image/GIF on the sidebar.
❖ BREAK_IMAGE - The images/GIFs on the divider or break in the code.
❖ URL - Link URLs in the sidebar.
❖ Link - Placeholder link text.

#333 Text color.
#ddd Boxes' background and text shadow for headers.
#000 Credit link.

[56] Chipped Info Sheet

Post a comment in response: