https://birdcodes.dreamwidth.org/ veryroundbird codes! - Dreamwidth Studios Wed, 03 Apr 2024 03:18:42 GMT LiveJournal / Dreamwidth Studios birdcodes community https://birdcodes.dreamwidth.org/368.html Wed, 03 Apr 2024 03:18:42 GMT https://birdcodes.dreamwidth.org/368.html 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 https://birdcodes.dreamwidth.org/368.html wardrobe drop-in codes public veryroundbird 1