zoom_in
- comment1
- visibility809
posted 2 years ago, edited 2 years ago
Nooowww, since I'm going to England this Christmas, I literally can't wait until the big day arrives when I go there. So, to celebrate, here's a holiday-themed profile code that I pulled out, lol. ^^
You're free to frankenstein the code if you like. :D
More From family_staralternate_email90sdiabloSee Morearrow_outward
Similar ArtworksSee Morearrow_outward
Stamp Shelf HTML<p style="font-weight: bold; font-size: 35px; text-align: center;"> STAMP SHELF HTML</p> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/stampshelfassets/shelfscreenshot.png"> <hr> Have you ever wanted a fancy place to show off your stamps? Well this code has you covered! Flex boxes! Shelves! Make it look like you have a nice little piece of furniture on your profile to show off those coveted stamps rather than just dumping them in a Custom Content block and calling it a day! Code: <div style="border: 7px solid #4e2f18;"> <div style="border: 25px inset #855329; background: #53331a;"> <div style="margin: auto; margin-top: 15px; margin-bottom: 0; background: #dadada; border: 3px solid white; color: black; max-width: 250px; padding: 7px; text-align: center; font-size: 25px;"> <p><b> My Stamp Collection! </b></p> </div> <div style="border: 10px outset #3b2412; margin-bottom: 7px;"></div> <div style="display: flex; flex-flow: row wrap; justify-content: center; align-items: center;"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> </div> <div style="border: 10px outset #3b2412; margin-bottom: 7px;"></div> <div style="display: flex; flex-flow: row wrap; justify-content: center; align-items: center;"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> <img src="https://file.garden/ZRYaM_KULjLI5_I-/stamps/invis.png"> </div> </div> </div>Responsive stamp box snippetsI'm not personally a stamps guy but I'm seeing a lot of inefficient finagling going on with the css display property and float and all sorts of things, so here's some very simple snippets for your stamp boxes: Grid Pros: consistent column layout—3 side-by-side on mobile, 6 side-by-side on larger screens.Cons: capped at 6 side-by-side due to there not being a lot of tailwindCSS available.<div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;"><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a></div> <div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;"> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> [.. repeat for as many images as desired] </div> Flexbox Pros: Any number of stamps side-by-side, meaning more efficient use of space.Cons: inconsistent column layout, if your stamps vary in size they won't line up as neatly, and it's less predictable how they'll be spaced out on different screens. What might be 12 columns for one person might be 7 for another.<div class="container"><div class="flex flex-wrap" style="gap:1rem;"><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a><a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp " class="m-0"></a></div></div> <div class="flex flex-wrap" style="gap:1rem;"> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> <a href="#URL"><img src="https://fakeimg.pl/99x56?text=stamp" class="m-0"></a> [.. repeat for as many images as desired] </div>