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

WINTER

[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:#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>