➜ shagoli's profile

Free profile codes

Page by shagoli

These are mostly for me so I can easily copy/paste them on mobile, but please consider all of them free to use should you find them useful.

Intersex pride flag

For as much as I love making inline CSS pride flags, this is the only one I’ve tried making on this site due to its simplicity (a single, simple Unicode symbol on a plain background). Versions with and without the identifying tooltip are provided.

<b class="tooltipped badge col-yellow" title="Intersex pride flag (2013 Carpenter design)" style="color:#8018b8">○</b>
<b class="badge col-yellow" style="color:#8018b8">○</b>

Sale/trade/offer & internest profile badges

<span class="badge col-viridian">Sale and trade offers OK :yes:</span>
<span class="badge col-viridian">Internest requests OK :yes:</span>
<span class="badge col-gold">Ask before sending sale and trade offers :think:</span>
<span class="badge col-gold">Ask before sending Internest requests :think:</span>
<span class="badge col-crimson">Not for sale, trade, or offer :no:</span>
<span class="badge col-crimson">No internest requests :no:</span>

User profile interaction permission badges

<span class="badge col-viridian">Friend requests OK :yes:</span>
<span class="badge col-viridian">Offers on chickens OK :yes:</span>
<span class="badge col-viridian">Trade offers OK :yes:</span>
<span class="badge col-gold">Ask before sending friend requests :think:</span>
<span class="badge col-gold">Ask before offering on chickens :think:</span>
<span class="badge col-gold">Ask before sending trade offers :think:</span>
<span class="badge col-crimson">No friend requests :no:</span>
<span class="badge col-crimson">No offers on chickens:no:</span>
<span class="badge col-crimson">No trade offers :no:</span>

Quote block

<figure class="text-start bg-faded">
<blockquote>Quote goes here.</blockquote>
<figcaption class="blockquote-footer"><cite><a href="/">Wikipedia, the free encyclopedia</a></cite>
</figcaption>
</figure>

Breeding pair info card with right-floating chicken widget

Original CodePen snippet “Media object pattern with floating image, center-aligned short text” by Tyler Sticka, though I tend to copy from my fork here (includes inline CSS/Bootstrap class styling) instead to preserve indentation. Live preview ➜

<article class="bc-pair-container text-start media" style="margin: 2rem auto;">
<section class="float-left bc-nametag-container" style="display: contents; position: relative; height: auto;">
<div class="bc-pair-nametag bg-secondary text-secondary-emphasis d-table" style="display: inline-table; margin-left: 1rem; padding: 0.5em; top: 50%; transform: translateY(50%);">Nametag</div>
</section>
<section class="bc-pair-bg bg-faded" style="padding: 1.5em; border-radius: 0.5em;">
<div class="d-table">
<div class="media-object align-self-center d-table-row">
<aside class="bc-aside" style="float: right; margin: 0 0 0.5rem 1rem; max-width: 50%; height: auto;">[chicken=0]</aside>
<div class="media-body">
<ul class="list-inline pair-colors-list">
<li class="list-inline-item">Base color</li>
<li class="list-inline-item">Over color</li>
<li class="list-inline-item">Flair color</li>
<li class="list-inline-item">Peep color</li>
</ul>
<ul class="list-inline pair-features-list">
<li class="list-inline-item">Potential body types</li>
<li class="list-inline-item">Potential patterns</li>
<li class="list-inline-item">Potential tails</li>
<li class="list-inline-item">Potential wattles</li>
<li class="list-inline-item">Potential combs</li>
<li class="list-inline-item">Potential eye-spots</li>
</ul>
</div>
</div>
</div>
</section>
</article>
<hr><small>Original CodePen snippet <a href="https://codepen.io/tylersticka/details/mdQWeQm">“Media object pattern with floating image, center-aligned short text”</a> by Tyler Sticka, <a href="/page/132#pair-cards">formatted in-line for ChickenPet here</a></small>

Background photo credit

<small>Background photo from <a href="/">Somebody</a> on <a href="/">Unsplash</a></small>