[76] Functional Info Code

[lina_trinch]

Code:
<div style="display: flex; max-width: 800px; justify-content: space-evenly; align-items: flex-start; margin: auto; font-family: Arial, Helvetica, sans-serif; flex-wrap: wrap;"> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--START BLOCK--> <details style="border: 3px solid #333; width: 250px; border-radius: 5px; text-align: justify; font-size: 12px; margin: 5px 2px;"> <summary style="background: #333; color: #fff; cursor: pointer; font-size: 16px; list-style-type: none; text-align: center; text-transform: uppercase; font-weight: bold; padding: 4px;">Header</summary> <div style="background: #fff; padding: 5px;"> <!--TEXT START--> <span style="font-weight: bold; font-variant: small-caps;">Header -</span> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--PARAGRAPH SPACING--> <br /><br /> Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi assumenda laudantium atque suscipit minima repellendus fuga reprehenderit debitis sapiente? Blanditiis dolore natus fugiat similique doloremque eaque non rerum vel incidunt. <!--DIVIDER--> <div style="background: #000; margin: 10px auto; width: 95%; height: 1px;"></div> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque similique repellat placeat harum dolor magni expedita quod esse aliquid at vero cupiditate porro nulla distinctio fuga, ex dolore a in? <!--ADD MORE TEXT ABOVE THIS LINE--> </div> </details> <!--END BLOCK--> <!--ADD MORE BLOCKS ABOVE THIS LINE--> </div> <div style="width: 500px; text-align: center; margin: 10px auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px;"> <a href="https://killthecake.dreamwidth.org/" style="color: #000; text-decoration: none;"> CODE </a> </div>

❖ This code was done as a commission and then 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. ❖ While this feels very bare on first glance, there's a lot of room for you to customize the design anyway you want. You can go crazy with colors and shapes and everything! Ctrl+F & Replace: ❖ Header - Header placeholders for the main blocks and text. ❖ Lorem Ipsum - Placeholder for text. #000 Dividers. #333 Block backgrounds and borders. #fff Header text and text backgrounds.