seasons businesses inspired by monstarfactory

[chiming]

WHAT: A layout for character businesses in Seasons, based on code by monstarfactory.
WHY: For Seasons businesses that wanna feel a lil more Season-y. Also more mobile friendly. :D

LIVE PREVIEW:

HEADERTXT

Employees

Character Name
Job Title

Character Name
Job Title

Character Name
Job Title

Character Name
Job Title

Character Name
Job Title

Character Name
Job Title

Description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a consequat lacus. Donec gravida pretium mauris, at faucibus elit gravida vel. Aliquam id dolor interdum, pulvinar mi vitae, sodales turpis. Vivamus et ligula non ligula congue suscipit fringilla in nulla. Vivamus nec imperdiet ante. Phasellus lobortis dignissim odio. Phasellus sodales turpis metus, sed tempor tortor molestie at. Morbi vulputate, sapien et porta facilisis, felis odio vehicula risus, vitae ornare nibh mi eget velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce magna nulla, mollis interdum maximus ac, tincidunt sit amet risus. Nullam porttitor urna hendrerit lectus semper.

Hours: 9am-5pm, Monday - Friday
Maximum Occupancy: 20

Visuals

Menu/Services

Submenu

🌸 item one
🌸 item two
🌸 item one

Submenu

🌸 item four
🌸 item five
🌸 item six

Submenu

🌸 item seven
🌸 item eight
🌸 item nine

Contact

🌸 player: username / username
🌸 contact: USERNAME
🌸 ic contact: place an order

code by ✨ + 👾

Comments

INSTRUCTIONS

[chiming]

WINTER

[chiming]

SPRING

[chiming]

PREVIEWS

[chiming]

CODE

[chiming]

<raw-code> <div style="background-color:#efefef; width:100%; max-width:700px; padding:10px; box-sizing:border-box; margin:auto;"> <!--HEADER--> <div style="height:260px; display:grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 5.5% 1fr 5.5%;"> <!--HEADER IMG 1--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%); background:#aaa url(YOUR_IMG_URL_HERE1)top center;background-size:cover; margin-right: 15px;"></div> <!--HEADER IMG 2--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); background:#aaa url(YOUR_IMG_URL_HERE2)top center;background-size:cover; margin-left: 15px;"></div> <!--HEADER BG--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px;line-height:48px; transform: rotate(0deg); background-color: rgba(0, 0, 0, 0.25); mix-blend-mode: multiply;"></div> <!--HEADER TEXT--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px; color:#ff8eaf; line-height:48px; text-shadow:2px 2px 1px #333; transform: rotate(0deg); text-transform:lowercase; font-style:italic; text-align:center; letter-spacing:2px;">HEADERTXT</div> </div> <!--HEADER END--> <!--EMPLOYEES & DESCRIPTION--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--EMPLOYEES--> <fieldset style="flex:1 1 235px; max-height:280px; overflow:auto; box-sizing:border-box; margin:0; padding:0; border:1px solid #ff8eaf;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:3px; padding:3px; text-transform:lowercase; color:#ff8eaf; font-weight: bold; font-style: italic;">Employees</legend> <div style="display:grid;grid-template-rows:auto;grid-template-columns:35px 1fr;gap:10px;padding:0 10px;font-family:helvetica,arial,sans-serif;font-size:11px;color:#333;"> <!-- CHARACTER LIST --> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #ff8eaf; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <!-- CHARACTER LIST: END --> </div> </fieldset> <!--DESCRIPTION--> <fieldset style="flex:1 1 435px; max-height:280px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #ff8eaf; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#ff8eaf; font-weight:bold; font-style:italic;">Description</legend> <div style="margin-top:-10px; padding:10px;"></raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a consequat lacus. Donec gravida pretium mauris, at faucibus elit gravida vel. Aliquam id dolor interdum, pulvinar mi vitae, sodales turpis. Vivamus et ligula non ligula congue suscipit fringilla in nulla. Vivamus nec imperdiet ante. Phasellus lobortis dignissim odio. Phasellus sodales turpis metus, sed tempor tortor molestie at. Morbi vulputate, sapien et porta facilisis, felis odio vehicula risus, vitae ornare nibh mi eget velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce magna nulla, mollis interdum maximus ac, tincidunt sit amet risus. Nullam porttitor urna hendrerit lectus semper. <b>Hours:</b> 9am-5pm, Monday - Friday <b>Maximum Occupancy:</b> 20 <raw-code></div> </fieldset> </div> <!--VISUALS--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--VISUALS TEXT--> <fieldset style="flex:1 1 680px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #ff8eaf; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#ff8eaf; font-weight:bold; font-style:italic;">Visuals</legend> <div style="display:grid; grid-template-columns:repeat(auto-fit, 120px); grid-auto-rows:200px; justify-content:center; gap:10px; padding:0 10px 15px 10px; box-sizing:border-box;"> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> </div> </fieldset> </div> <!--MENU/SERVICES & CONTACT--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--MENU/SERVICES--> <fieldset style="flex:1 1 400px; border:1px solid #ff8eaf; margin:0; padding:0px; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; text-transform:lowercase; color:#ff8eaf; font-weight: bold; font-style: italic;">Menu/Services</legend> <div style="display:grid; gap:10px; grid-template-columns:1fr; grid-template-rows:auto; margin-top:-10px; padding:10px;"> <details open> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#ff8eaf;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌸 item one <br> 🌸 item two <br> 🌸 item one </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#ff8eaf;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌸 item four <br> 🌸 item five <br> 🌸 item six </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#ff8eaf;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌸 item seven <br> 🌸 item eight <br> 🌸 item nine </details> </div> </fieldset> <!--CONTACT--> <fieldset style="flex:1 1 265px; border:1px solid #ff8eaf; margin:0; padding:0; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:8px; padding:3px; text-transform:lowercase; color:#ff8eaf; font-weight:bold; font-style:italic;">Contact</legend> <div style="margin-top:-10px; padding:10px;"> 🌸 <b>player:</b> <user name="USERNAME"> / <user name="USERNAME"> <br> 🌸 <b>contact:</b> <user name="USERNAME" site="plurk.com"> <br> 🌸 <b>ic contact:</b> <a href="#">place an order</a> </div></fieldset> </div> <!--CREDIT / DO NOT REMOVE--> <div style="width:100%;margin-top:10px;text-align:right;font-family:garamond;font-size:10px;text-transform:uppercase;">code by <a href="https://chiming.dreamwidth.org/53465.html" style="text-decoration: none; font-size:12px; text-shadow:1px 1px 1px #999;">✨</a> + <a href="https://monstarfactory.dreamwidth.org/303.html" style="text-decoration:none; font-size:12px; text-shadow:1px 1px 1px #999;">👾</a></div> </div>

DESKTOP

[chiming]

MOBILE

[chiming]

PREVIEWS

[chiming]

CODE

[chiming]

<raw-code> <div style="background-color:#efefef; width:100%; max-width:700px; padding:10px; box-sizing:border-box; margin:auto;"> <!--HEADER--> <div style="height:260px; display:grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 5.5% 1fr 5.5%;"> <!--HEADER IMG 1--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%); background:#aaa url(YOUR_IMG_URL_HERE1)top center;background-size:cover; margin-right: 15px;"></div> <!--HEADER IMG 2--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); background:#aaa url(YOUR_IMG_URL_HERE2)top center;background-size:cover; margin-left: 15px;"></div> <!--HEADER BG--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px;line-height:48px; transform: rotate(0deg); background-color: rgba(0, 0, 0, 0.25); mix-blend-mode: multiply;"></div> <!--HEADER TEXT--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px; color:#75c0f6; line-height:48px; text-shadow:2px 2px 1px #333; transform: rotate(0deg); text-transform:lowercase; font-style:italic; text-align:center; letter-spacing:2px;">HEADERTXT</div> </div> <!--HEADER END--> <!--EMPLOYEES & DESCRIPTION--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--EMPLOYEES--> <fieldset style="flex:1 1 235px; max-height:280px; overflow:auto; box-sizing:border-box; margin:0; padding:0; border:1px solid #75c0f6;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:3px; padding:3px; text-transform:lowercase; color:#75c0f6; font-weight: bold; font-style: italic;">Employees</legend> <div style="display:grid;grid-template-rows:auto;grid-template-columns:35px 1fr;gap:10px;padding:0 10px;font-family:helvetica,arial,sans-serif;font-size:11px;color:#333;"> <!-- CHARACTER LIST --> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #75c0f6; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <!-- CHARACTER LIST: END --> </div> </fieldset> <!--DESCRIPTION--> <fieldset style="flex:1 1 435px; max-height:280px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #75c0f6; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#75c0f6; font-weight:bold; font-style:italic;">Description</legend> <div style="margin-top:-10px; padding:10px;"></raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a consequat lacus. Donec gravida pretium mauris, at faucibus elit gravida vel. Aliquam id dolor interdum, pulvinar mi vitae, sodales turpis. Vivamus et ligula non ligula congue suscipit fringilla in nulla. Vivamus nec imperdiet ante. Phasellus lobortis dignissim odio. Phasellus sodales turpis metus, sed tempor tortor molestie at. Morbi vulputate, sapien et porta facilisis, felis odio vehicula risus, vitae ornare nibh mi eget velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce magna nulla, mollis interdum maximus ac, tincidunt sit amet risus. Nullam porttitor urna hendrerit lectus semper. <b>Hours:</b> 9am-5pm, Monday - Friday <b>Maximum Occupancy:</b> 20 <raw-code></div> </fieldset> </div> <!--VISUALS--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--VISUALS TEXT--> <fieldset style="flex:1 1 680px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #75c0f6; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#75c0f6; font-weight:bold; font-style:italic;">Visuals</legend> <div style="display:grid; grid-template-columns:repeat(auto-fit, 120px); grid-auto-rows:200px; justify-content:center; gap:10px; padding:0 10px 15px 10px; box-sizing:border-box;"> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> </div> </fieldset> </div> <!--MENU/SERVICES & CONTACT--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--MENU/SERVICES--> <fieldset style="flex:1 1 400px; border:1px solid #75c0f6; margin:0; padding:0px; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; text-transform:lowercase; color:#75c0f6; font-weight: bold; font-style: italic;">Menu/Services</legend> <div style="display:grid; gap:10px; grid-template-columns:1fr; grid-template-rows:auto; margin-top:-10px; padding:10px;"> <details open> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#75c0f6;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> ❄️ item one <br> ❄️ item two <br> ❄️ item one </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#75c0f6;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> ❄️ item four <br> ❄️ item five <br> ❄️ item six </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#75c0f6;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> ❄️ item seven <br> ❄️ item eight <br> ❄️ item nine </details> </div> </fieldset> <!--CONTACT--> <fieldset style="flex:1 1 265px; border:1px solid #75c0f6; margin:0; padding:0; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:8px; padding:3px; text-transform:lowercase; color:#75c0f6; font-weight:bold; font-style:italic;">Contact</legend> <div style="margin-top:-10px; padding:10px;"> ❄️ <b>player:</b> <user name="USERNAME"> / <user name="USERNAME"> <br> ❄️ <b>contact:</b> <user name="USERNAME" site="plurk.com"> <br> ❄️ <b>ic contact:</b> <a href="#">place an order</a> </div></fieldset> </div> <!--CREDIT / DO NOT REMOVE--> <div style="width:100%;margin-top:10px;text-align:right;font-family:garamond;font-size:10px;text-transform:uppercase;">code by <a href="" style="text-decoration: none; font-size:12px; text-shadow:1px 1px 1px #999;">✨</a> + <a href="https://monstarfactory.dreamwidth.org/303.html" style="text-decoration:none; font-size:12px; text-shadow:1px 1px 1px #999;">👾</a></div> </div></raw-code>

DESKTOP

[chiming]

MOBILE

[chiming]

SUMMER

[chiming]

AUTUMN

[chiming]

PREVIEWS

[chiming]

CODE

[chiming]

<raw-code> <div style="background-color:#efefef; width:100%; max-width:700px; padding:10px; box-sizing:border-box; margin:auto;"> <!--HEADER--> <div style="height:260px; display:grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 5.5% 1fr 5.5%;"> <!--HEADER IMG 1--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%); background:#aaa url(YOUR_IMG_URL_HERE1)top center;background-size:cover; margin-right: 15px;"></div> <!--HEADER IMG 2--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); background:#aaa url(YOUR_IMG_URL_HERE2)top center;background-size:cover; margin-left: 15px;"></div> <!--HEADER BG--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px;line-height:48px; transform: rotate(0deg); background-color: rgba(0, 0, 0, 0.25); mix-blend-mode: multiply;"></div> <!--HEADER TEXT--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px; color:#4acb70; line-height:48px; text-shadow:2px 2px 1px #333; transform: rotate(0deg); text-transform:lowercase; font-style:italic; text-align:center; letter-spacing:2px;">HEADERTXT</div> </div> <!--HEADER END--> <!--EMPLOYEES & DESCRIPTION--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--EMPLOYEES--> <fieldset style="flex:1 1 235px; max-height:280px; overflow:auto; box-sizing:border-box; margin:0; padding:0; border:1px solid #4acb70;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:3px; padding:3px; text-transform:lowercase; color:#4acb70; font-weight: bold; font-style: italic;">Employees</legend> <div style="display:grid;grid-template-rows:auto;grid-template-columns:35px 1fr;gap:10px;padding:0 10px;font-family:helvetica,arial,sans-serif;font-size:11px;color:#333;"> <!-- CHARACTER LIST --> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #4acb70; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <!-- CHARACTER LIST: END --> </div> </fieldset> <!--DESCRIPTION--> <fieldset style="flex:1 1 435px; max-height:280px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #4acb70; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#4acb70; font-weight:bold; font-style:italic;">Description</legend> <div style="margin-top:-10px; padding:10px;"></raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a consequat lacus. Donec gravida pretium mauris, at faucibus elit gravida vel. Aliquam id dolor interdum, pulvinar mi vitae, sodales turpis. Vivamus et ligula non ligula congue suscipit fringilla in nulla. Vivamus nec imperdiet ante. Phasellus lobortis dignissim odio. Phasellus sodales turpis metus, sed tempor tortor molestie at. Morbi vulputate, sapien et porta facilisis, felis odio vehicula risus, vitae ornare nibh mi eget velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce magna nulla, mollis interdum maximus ac, tincidunt sit amet risus. Nullam porttitor urna hendrerit lectus semper. <b>Hours:</b> 9am-5pm, Monday - Friday <b>Maximum Occupancy:</b> 20 <raw-code></div> </fieldset> </div> <!--VISUALS--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--VISUALS TEXT--> <fieldset style="flex:1 1 680px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #4acb70; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#4acb70; font-weight:bold; font-style:italic;">Visuals</legend> <div style="display:grid; grid-template-columns:repeat(auto-fit, 120px); grid-auto-rows:200px; justify-content:center; gap:10px; padding:0 10px 15px 10px; box-sizing:border-box;"> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> </div> </fieldset> </div> <!--MENU/SERVICES & CONTACT--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--MENU/SERVICES--> <fieldset style="flex:1 1 400px; border:1px solid #4acb70; margin:0; padding:0px; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; text-transform:lowercase; color:#4acb70; font-weight: bold; font-style: italic;">Menu/Services</legend> <div style="display:grid; gap:10px; grid-template-columns:1fr; grid-template-rows:auto; margin-top:-10px; padding:10px;"> <details open> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#4acb70;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌿 item one <br> 🌿 item two <br> 🌿 item one </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#4acb70;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌿 item four <br> 🌿 item five <br> 🌿 item six </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#4acb70;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🌿 item seven <br> 🌿 item eight <br> 🌿 item nine </details> </div> </fieldset> <!--CONTACT--> <fieldset style="flex:1 1 265px; border:1px solid #4acb70; margin:0; padding:0; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:8px; padding:3px; text-transform:lowercase; color:#4acb70; font-weight:bold; font-style:italic;">Contact</legend> <div style="margin-top:-10px; padding:10px;"> 🌿 <b>player:</b> <user name="USERNAME"> / <user name="USERNAME"> <br> 🌿 <b>contact:</b> <user name="USERNAME" site="plurk.com"> <br> 🌿 <b>ic contact:</b> <a href="#">place an order</a> </div></fieldset> </div> <!--CREDIT / DO NOT REMOVE--> <div style="width:100%;margin-top:10px;text-align:right;font-family:garamond;font-size:10px;text-transform:uppercase;">code by <a href="" style="text-decoration: none; font-size:12px; text-shadow:1px 1px 1px #999;">✨</a> + <a href="https://monstarfactory.dreamwidth.org/303.html" style="text-decoration:none; font-size:12px; text-shadow:1px 1px 1px #999;">👾</a></div> </div></raw-code>

DESKTOP

[chiming]

MOBILE

[chiming]

PREVIEWS

[chiming]

DESKTOP

[chiming]

MOBILE

[chiming]

CODE

[chiming]

<raw-code> <div style="background-color:#efefef; width:100%; max-width:700px; padding:10px; box-sizing:border-box; margin:auto;"> <!--HEADER--> <div style="height:260px; display:grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: 5.5% 1fr 5.5%;"> <!--HEADER IMG 1--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4;clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%); background:#aaa url(YOUR_IMG_URL_HERE1)top center;background-size:cover; margin-right: 15px;"></div> <!--HEADER IMG 2--> <div style="grid-column-start:1; grid-column-end:4; grid-row-start:1; grid-row-end:4; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); background:#aaa url(YOUR_IMG_URL_HERE2)top center;background-size:cover; margin-left: 15px;"></div> <!--HEADER BG--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px;line-height:48px; transform: rotate(0deg); background-color: rgba(0, 0, 0, 0.25); mix-blend-mode: multiply;"></div> <!--HEADER TEXT--> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3; font-family:garamond,serif; font-size:48px; color:#f6a975; line-height:48px; text-shadow:2px 2px 1px #333; transform: rotate(0deg); text-transform:lowercase; font-style:italic; text-align:center; letter-spacing:2px;">HEADERTXT</div> </div> <!--HEADER END--> <!--EMPLOYEES & DESCRIPTION--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--EMPLOYEES--> <fieldset style="flex:1 1 235px; max-height:280px; overflow:auto; box-sizing:border-box; margin:0; padding:0; border:1px solid #f6a975;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:3px; padding:3px; text-transform:lowercase; color:#f6a975; font-weight: bold; font-style: italic;">Employees</legend> <div style="display:grid;grid-template-rows:auto;grid-template-columns:35px 1fr;gap:10px;padding:0 10px;font-family:helvetica,arial,sans-serif;font-size:11px;color:#333;"> <!-- CHARACTER LIST --> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <div style="text-align:left;"><img src="ICO1" style="border-radius:50%; border:2px solid #f6a975; width:100%;"></div> <div style="align-self:center;"> <b>Character Name</b> <br> Job Title </div> <!-- CHARACTER LIST: END --> </div> </fieldset> <!--DESCRIPTION--> <fieldset style="flex:1 1 435px; max-height:280px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #f6a975; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#f6a975; font-weight:bold; font-style:italic;">Description</legend> <div style="margin-top:-10px; padding:10px;"></raw-code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a consequat lacus. Donec gravida pretium mauris, at faucibus elit gravida vel. Aliquam id dolor interdum, pulvinar mi vitae, sodales turpis. Vivamus et ligula non ligula congue suscipit fringilla in nulla. Vivamus nec imperdiet ante. Phasellus lobortis dignissim odio. Phasellus sodales turpis metus, sed tempor tortor molestie at. Morbi vulputate, sapien et porta facilisis, felis odio vehicula risus, vitae ornare nibh mi eget velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce magna nulla, mollis interdum maximus ac, tincidunt sit amet risus. Nullam porttitor urna hendrerit lectus semper. <b>Hours:</b> 9am-5pm, Monday - Friday <b>Maximum Occupancy:</b> 20 <raw-code></div> </fieldset> </div> <!--VISUALS--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--VISUALS TEXT--> <fieldset style="flex:1 1 680px; box-sizing:border-box; overflow:auto; margin:0; padding:0; border:1px solid #f6a975; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; margin-left:7px; text-transform:lowercase; color:#f6a975; font-weight:bold; font-style:italic;">Visuals</legend> <div style="display:grid; grid-template-columns:repeat(auto-fit, 120px); grid-auto-rows:200px; justify-content:center; gap:10px; padding:0 10px 15px 10px; box-sizing:border-box;"> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> <a href="#" style="display:block; border:0; box-shadow:2px 2px 2px #aaa; box-sizing:border-box; background:#ccc url(YOUR_VISUAL_HERE1) no-repeat center; background-size:cover;" title="Click for full-size!"></a> </div> </fieldset> </div> <!--MENU/SERVICES & CONTACT--> <div style="margin-top:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:start;width:100%;gap:10px;"> <!--MENU/SERVICES--> <fieldset style="flex:1 1 400px; border:1px solid #f6a975; margin:0; padding:0px; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; padding:3px; text-transform:lowercase; color:#f6a975; font-weight: bold; font-style: italic;">Menu/Services</legend> <div style="display:grid; gap:10px; grid-template-columns:1fr; grid-template-rows:auto; margin-top:-10px; padding:10px;"> <details open> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#f6a975;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🍂 item one <br> 🍂 item two <br> 🍂 item one </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#f6a975;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🍂 item four <br> 🍂 item five <br> 🍂 item six </details> <details> <summary style="cursor:pointer;font-family:garamond,serif;font-size:14px;color:#f6a975;font-weight:bold;font-style:italic;text-transform:lowercase;">Submenu</summary> 🍂 item seven <br> 🍂 item eight <br> 🍂 item nine </details> </div> </fieldset> <!--CONTACT--> <fieldset style="flex:1 1 265px; border:1px solid #f6a975; margin:0; padding:0; text-align:justify; font-family:helvetica,arial,sans-serif; font-size:12px; color:#333;"> <legend style="text-align: right; font-family:garamond,serif; font-size:20px; letter-spacing:2px; margin-left:8px; padding:3px; text-transform:lowercase; color:#f6a975; font-weight:bold; font-style:italic;">Contact</legend> <div style="margin-top:-10px; padding:10px;"> 🍂 <b>player:</b> <user name="USERNAME"> / <user name="USERNAME"> <br> 🍂 <b>contact:</b> <user name="USERNAME" site="plurk.com"> <br> 🍂 <b>ic contact:</b> <a href="#">place an order</a> </div></fieldset> </div> <!--CREDIT / DO NOT REMOVE--> <div style="width:100%;margin-top:10px;text-align:right;font-family:garamond;font-size:10px;text-transform:uppercase;">code by <a href="" style="text-decoration: none; font-size:12px; text-shadow:1px 1px 1px #999;">✨</a> + <a href="https://monstarfactory.dreamwidth.org/303.html" style="text-decoration:none; font-size:12px; text-shadow:1px 1px 1px #999;">👾</a></div> </div></raw-code>

USAGE

[chiming]

USAGE:
🌸 Pick a color! These are specifically in Seasons colors, but could be repurposed for any game.
🌸 Copy-paste the code into a new journal entry. NOTE: The code won't look right in a comment, as it's using margins and set heights, which comments don't allow.
🌸 Fill out the fields, adding or deleting additional sections as needed.

COLORS (for replacing):
🌸 Background color: #efefef
🌸 Text: #333
🌸 Image background (header): #aaa
🌸 Accents: #75c0f6 (winter) / #ff8eaf (spring) / #4acb70 (summer) / #f6a975 (autumn)

HEIGHTS (for adjusting):
🌸 The height of the EMPLOYEES/DETAILS section is 280px, and you can adjust that up or down for more height, or remove it (and overflow:auto;) to just show the full content of the sections at all times.
🌸 The height/width of the icons in the EMPLOYEE section is 35px. It also looks good at 45px and 50px, depending on how much text you want to have beside them!
🌸 The images in the completely optional VISUALS section is 120px by 200px, and you can change the size of the images by updating those values in grid-template-columns (repeat(auto-fit, 120px) will place as many columns as can fit at 120px each) and grid-auto-rows (which will lay as many rows as there are content, sized at 200px high), respectively.

IMAGES (for replacing):
🌸 YOUR_IMG_URL_HERE1: The top half of the header image.
🌸 YOUR_IMG_URL_HERE2: The bottom half of the header image. Can be the same image as above, for a split-in-half look.
🌸 ICO1: The icons in the "Employees" section.
🌸 YOUR_VISUAL_HERE1: The images in the "Visuals" section.

EMOJI (for replacing):
🌸 / ❄️ / 🌿/ 🍂