Sign Inlogin Registerperson_add

JavaScript is required for this site to function properly. Please enable it in your browser settings.

zoom_in

comment9
visibility1539

F2U Simple Box Code by family_staralternate_emailatari

posted 2 years ago, edited last month

I MADE A COOL CODE :33333 !!!
get it on:
kofi
filegarden

More From family_staralternate_emailatariSee Morearrow_outward

[V] JOYFULTHOUGHT | WATAMOTE FAN ANIMATION by @atari

[F] Kity by @atari

[V] (´ ∀ ` *) neet loser vlog 002 🧃💻 by @atari

moetron by @atari

The Idea by @atari

11 [completed YCH] by @atari

Similar ArtworksSee Morearrow_outward

Responsive stamp box snippets by @Harrie

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>

Egg Displays (F2U/P2U) by @MAJESTEA

F2U feminine base by @Roxoah

F2U HTML - Pokemon Party by @aetherjay

F2U HTML - Pokemon Party<img src="https://file.garden/ZSR8ukMsLUXXEcdK/pokemonpartyhtml.png ">  <font color="white">   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div>   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div>   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div>   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div>   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div>   <div style="display: inline-block; width: 47%; height:100%; padding: 3px; margin: 5px; align-items: center; border: solid; border-radius: 10px; border-color: #ffffff; background-color: rgba(255, 255, 255,0.1)"> <div style="display: inline-flex; width: 100%">  <img src="https://raw.githubusercontent.com/msikma/pokesprite/master/pokemon-gen8/regular/ditto.png" style="width: 25%"> <div style="width: 100%; margin: 3px">  <b> Name <p style="float: right"> <font color="white" size="4"> ♂○♀ </font> </p></b> <hr style="border: none"> <div> <hr style="height: 12px; border: none"> <div style="display: flex; background: #000000; width: 100%; padding: 5px; height: 20px; align-items: center"> HP &nbsp <div style="display: inline-flex; width: 83%">  <div style="height: 10px; float: right; width: 100%; background: #73a84a"> &nbsp </div> </div> </div> </div> </div> </div> &nbsp&nbsp&nbsp  Lv. # <p style="float: right"> # / # </p> </div> </font> </div>```

PIÑATA BLAST (my font :3) by @cube

(F2U) Character Sheet HTML by @Shrimpsources

(F2U) Character Sheet HTML<div class="container-fluid" style="font-size: 0.85em;max-width: 850px; margin: auto; position: relative;"><div style="height: 75px;width: 100%; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-bottom: 1em;"></div> <div style="float:right;width: 25%;min-height: 300px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-top: 0em;margin-bottom: 1em;margin-left: 1em;"></div> <p style="margin-bottom: 0em;"><div style="display: flex; align-items: center;justify-content: center;"><img src="https://file.garden/ZdmRSugxzVCR-8Le/Sheezy Graphics/star101.gif " style="margin-top: 0em;margin-bottom: 0em;padding-right: 0.375rem;"><strong> Name | Age | Pronouns | Species | Occupation</strong><img src="https://file.garden/ZdmRSugxzVCR-8Le/Sheezy Graphics/star101.gif " style="margin-top: 0em;margin-bottom: 0em;padding-left: 0.375rem;"><br /></div><div style=" display: flex; align-items: center;justify-content: center;"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/flag pastel.png " data-toggle="tooltip" title="text" style="margin-top: 0em;margin-bottom: 0em;"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/flag pastel.png " data-toggle="tooltip" title="text" style="margin-top: 0em;margin-bottom: 0em;"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/flag pastel.png " data-toggle="tooltip" title="text" style="margin-top: 0em;margin-bottom: 0em;"></div><div style="text-align: center;">hover over the flags for more info!</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lobortis feugiat vivamus at augue. Vitae et leo duis ut. Sociis natoque penatibus et magnis dis. In cursus turpis massa tincidunt. Duis ultricies lacus sed turpis tincidunt id aliquet. Placerat in egestas erat imperdiet sed euismod. Enim eu turpis egestas pretium aenean pharetra. Facilisis magna etiam tempor orci eu lobortis elementum. Massa enim nec dui nunc mattis enim. A cras semper auctor neque vitae tempus quam. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Dui accumsan sit amet nulla facilisi morbi tempus. Felis donec et odio pellentesque. Nisl nisi scelerisque eu ultrices vitae auctor. Odio morbi quis commodo odio aenean sed adipiscing diam. Semper eget duis at tellus at. Leo a diam sollicitudin tempor id eu.</p><div style="display: flex; align-items: center; justify-content: center;margin-bottom: 1em;">🩷 Content, content, content, content<br>❌ Content, content, content, content<br></div><div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;"><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a></div><hr style="clear: both;"> <div style="float:left;width: 25%;min-height: 300px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-top: 0em;margin-bottom: 1em;margin-right: 1em;"></div><p><strong>Trivia: </strong> <br>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>- Sagittis id consectetur purus ut faucibus pulvinar elementum.<br>- Dolor morbi non arcu risus quis varius quam. Lectus arcu bibendum at varius vel pharetra vel turpis nunc.<br>- At in tellus integer feugiat scelerisque varius morbi.<br>- Lobortis scelerisque fermentum dui faucibus in. Id eu nisl nunc mi ipsum faucibus vitae.<br>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>- Sagittis id consectetur purus ut faucibus pulvinar elementum.<br>- Dolor morbi non arcu risus quis varius quam. Lectus arcu bibendum at varius vel pharetra vel turpis nunc.<br>- At in tellus integer feugiat scelerisque varius morbi.<br>- Lobortis scelerisque fermentum dui faucibus in. Id eu nisl nunc mi ipsum faucibus vitae.<br></p><hr style="clear: both;"> <div style="float:right;width: 25%;min-height: 300px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-top: 0em;margin-bottom: 1em;margin-left: 1em;"></div><p> <strong>History: </strong> <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lobortis feugiat vivamus at augue. Vitae et leo duis ut. Sociis natoque penatibus et magnis dis. In cursus turpis massa tincidunt. Duis ultricies lacus sed turpis tincidunt id aliquet. Placerat in egestas erat imperdiet sed euismod. Enim eu turpis egestas pretium aenean pharetra. Facilisis magna etiam tempor orci eu lobortis elementum. Massa enim nec dui nunc mattis enim. A cras semper auctor neque vitae tempus quam. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Dui accumsan sit amet nulla facilisi morbi tempus. Felis donec et odio pellentesque. Nisl nisi scelerisque eu ultrices vitae auctor. Odio morbi quis commodo odio aenean sed adipiscing diam. Semper eget duis at tellus at. Leo a diam sollicitudin tempor id eu.</p><hr style="clear: both;"> <strong>Reference Sheet: </strong><div style="width: 100%;min-height: 300px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-bottom: 1em;"></div><p><strong>Design Notes: </strong> <br>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>- Sagittis id consectetur purus ut faucibus pulvinar elementum.<br>- Dolor morbi non arcu risus quis varius quam. Lectus arcu bibendum at varius vel pharetra vel turpis nunc.<br>- At in tellus integer feugiat scelerisque varius morbi.<br>- Lobortis scelerisque fermentum dui faucibus in. Id eu nisl nunc mi ipsum faucibus vitae.<br></p><div class="grid tablet:grid-cols-3 grid-cols-3" style="justify-items:center;gap:1rem;"><div style="width: 100%;min-height: 150px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-bottom: 1em;"></div><div style="width: 100%;min-height: 150px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-bottom: 1em;"></div><div style="width: 100%;min-height: 150px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-bottom: 1em;"></div></div><hr style="clear: both;"> <div class="visible tablet:invisible" style="float:left;width: 25%;min-height: 300px; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-top: 0em;margin-bottom: 1em;margin-right: 1em;"></div><p><strong>Boundaries: </strong> <br>- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>- Sagittis id consectetur purus ut faucibus pulvinar elementum.<br>- Dolor morbi non arcu risus quis varius quam. Lectus arcu bibendum at varius vel pharetra vel turpis nunc.<br>- At in tellus integer feugiat scelerisque varius morbi.<br>- Lobortis scelerisque fermentum dui faucibus in. Id eu nisl nunc mi ipsum faucibus vitae.<br></p><div style="display: flex; align-items: center; justify-content: center;">Giftart: 🩷 | Roleplays: ❌ | Relationships: ❓ | NSFW: ❓</div><hr style="clear: both;"> <div class="grid tablet:grid-cols-6 grid-cols-3" style="justify-items:center;gap:1rem;margin-bottom: 1em;"><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a><a href="#URL"><img src="https://file.garden/ZdmRSugxzVCR-8Le/F2U stuff/Stamps/Pastel Space Stamp.png " class="m-0"></a></div><div style=" display: flex; align-items: center; justify-content: center;margin-bottom: 0em;"><a href="https://sheezy.art/thedemonicartist/persona/shrimpsources "> Code</a> | <a href="https://toyhou.se/25498009.milkwhisks-pixel-pride-flags ">Pride Flags</a> | <a href="https://sheezy.art/harrie/gallery/responsive-stamp-box-snippets ">Stamp Snippet</a> | <a href="https://pixelsafari.neocities.org/favicon/ ">Text decoration</a> | <a href="https://sheezy.art/thedemonicartist ">Image #1</a> | <a href="LINK">image #2</a>| <a href="LINK">image #3</a></div><div style="height: 75px;width: 100%; background:url(https://file.garden/ZdmRSugxzVCR-8Le/Art Links/Pastel_Space.png );background-position:center;background-size:cover;margin-top: 1em;"></div></div></div>