tag:dreamwidth.org,2024-04-03:4170147 veryroundbird codes! veryroundbird codes! 2024-04-03T03:55:23Z tag:dreamwidth.org,2024-04-03:4170147:368 Carly 2024-04-03T03:18:42Z 2024-04-03T03:55:23Z public 1 Posted by: <span lj:user='veryroundbird' style='white-space: nowrap;' class='ljuser'><a href='https://veryroundbird.dreamwidth.org/profile'><img src='https://www.dreamwidth.org/img/silk/identity/user.png' alt='[personal profile] ' width='17' height='17' style='vertical-align: text-bottom; border: 0; padding-right: 1px;' /></a><a href='https://veryroundbird.dreamwidth.org/'><b>veryroundbird</b></a></span><br /><br />you ever have a lot of fashion you've collected for your character and want to show off your cool outfit coordinations, either for everyday stuff or to show off what they're wearing to the next big RP event?<br /><br />i made this a couple years ago for friends in a game i was in but realized probably more people could use something like it. it also comes with a handy-dandy <a href="https://birdwrongs.neocities.org/tools/wardrobe" target="_blank">code generator</a> because listen, i was not hand-coding every single page<br /><br />if you want to change the font, just look for <code>font-family: monospace</code> and replace "monospace" with your fonts of choice!<br /><br />here's an example with a number of different page layouts:<br /> <div style="max-width: 600px; width: 100%; display: flex; margin: 0 auto; background-color: #333; line-height: 1;"> <div style="min-width: 200px; width: 200px; background-color: #FF9E99; color: #333; font-family: monospace; padding: 20px; box-sizing: border-box; flex-grow: 1;"> <div style="font-size: 2em; margin-bottom: .5em;">Hope</div> <div style="width: 20px; height: 20px; background-color: #2c3539; display: inline-block;" title="Swatch 1"></div> <div style="width: 20px; height: 20px; background-color: #000; display: inline-block;" title="Swatch 2"></div> <div style="width: 20px; height: 20px; background-color: #FFF; display: inline-block;" title="Swatch 3"></div> <div style="font-weight: bold"> <a href="#outfit-1" style="color: #333; margin: 0;">Outfit 1</a><br /> <a href="#outfit-2" style="color: #333; margin: 0;">Outfit 2</a><br /> <a href="#outfit-3" style="color: #333; margin: 0;">Outfit 3</a><br /> <a href="#outfit-4" style="color: #333; margin: 0;">Outfit 4</a><br /> <a href="#swimwear" style="color: #333; margin: 0;">Swimwear</a><br /> </div> </div> <div style="flex-grow: 1; flex-shrink: 1; height: 400px; overflow: hidden;"> <div style="position: relative; height: 100%; overflow: hidden;"> <a name="outfit-1" style="display: block;height: 0;width: 0"></a> <img src="https://i.pinimg.com/564x/f6/42/97/f64297de24bb534cc5ff4732148f6111.jpg" style="max-width: calc(100% - 12px); max-height: calc(100% - 12px); object-fit: contain; width: calc(100% - 12px); height: calc(100% - 12px);" /> </div> <div style="position: relative; height: 100%; overflow: hidden;"> <a name="outfit-2" style="display: block;height: 0;width: 0"></a> <img src="https://i.pinimg.com/474x/f3/b7/21/f3b721bcbad3fb7891433a50226ee304.jpg" style="max-width: calc(100% - 12px); max-height: calc(100% - 12px); object-fit: contain; width: calc(100% - 12px); height: calc(100% - 12px);" /> </div> <div style="position: relative; height: 100%; overflow: hidden;"> <a name="outfit-3" style="display: block;height: 0;width: 0"></a> <img src="https://i.pinimg.com/474x/71/a0/55/71a055b080269889cdc616eba6bbe076.jpg" style="max-width: calc(100% - 12px); max-height: calc(100% - 12px); object-fit: contain; width: calc(100% - 12px); height: calc(100% - 12px);" /> </div> <div style="position: relative; height: 100%; overflow: hidden;"> <a name="outfit-4" style="display: inline-block;top: 0; height: 0;width: 0"></a> <div style="display: grid; grid-template-columns: repeat(2, calc(50% - 3px)); grid-template-rows: repeat(2, 166px); column-gap: 6px; row-gap: 6px; margin: 6px;"> <div style="grid-column: 1; grid-row: 1; position: relative;"><img src="https://i.pinimg.com/564x/42/42/fe/4242fe8825213f992294a489aa0ab41b.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div> <div style="grid-column: 1; grid-row: 2; position: relative;"><img src="https://i.pinimg.com/564x/db/d4/58/dbd458d2305f3db2e7118af59860f5b2.jpg" style="width: 100%; height: 100%; object-fit: cover;" /></div> <div style="grid-column: 2; grid-row: 1/3; position: relative;"><img src="https://i.pinimg.com/564x/29/d7/b1/29d7b1cafe823a67d63822d5c852ee06.jpg" style="width: 100%; height: 100%; object-fit: cover;" /></div> </div> <div style="background-color: rgba(51, 51, 51, .5); color: #FFF; z-index: 999; padding: 0 6px 6px; font-family: monospace;"> notes go here, such as things like "also she's always wearing a big hat outdoors" and "not those shoes, though" </div> </div> <div style="position: relative; height: 100%; overflow: hidden;"> <a name="swimwear" style="display: inline-block;top: 0; height: 0;width: 0"></a> <div style="display: grid; grid-template-columns: repeat(2, calc(50% - 3px)); grid-template-rows: repeat(2, 191px); column-gap: 6px; row-gap: 6px; margin: 6px;"> <div style="grid-column: 1; grid-row: 1 / 3; position: relative;"><img src="https://i.pinimg.com/564x/dd/52/6b/dd526bc17adbc3ea0495f5208d0ed905.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div> <div style="grid-column: 2; grid-row: 1; position: relative;"><img src="https://i.pinimg.com/564x/2f/b4/6c/2fb46c3a37135719eb3de02e2f251112.jpg" style="width: 100%; height: 100%; object-fit: cover;" /></div> <div style="grid-column: 2; grid-row: 2; position: relative;"><img src="https://i.pinimg.com/564x/a2/51/02/a25102bc12d79da607f3c0ffdf79b9f3.jpg" style="width: 100%; height: 100%; object-fit: cover;" /></div> </div> </div> </div> </div><br /><center><small>was this helpful to you? tip me at <span style='white-space: nowrap;'><a href='http://www.ko-fi.com/veryroundbird'><img src='https://ko-fi.com/favicon.png' alt='[ko-fi.com profile] ' style='vertical-align: text-bottom; border: 0; padding-right: 1px;' width='16' height='16'/></a><a href='http://www.ko-fi.com/veryroundbird'><b>veryroundbird</b></a></span>!</small></center><br /><br /><img src="https://www.dreamwidth.org/tools/commentcount?user=birdcodes&ditemid=368" width="30" height="12" alt="comment count unavailable" style="vertical-align: middle;"/> comments