[F2U HTML] Ribbon Box (HTML [Original])

StormyStarlight

Profile


<!--------------------------------
  
  
  "RIBBON BOX [ORIGINAL]" - F2U HTML by @StormyStarlight
  VERSION - 6 Feb 2022
  
  https://toyhou.se/13285135.-f2u-html-ribbon-box
  
  • Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout. If ribbons other than those made by @MisterMuse (aka @Slate) are added to the box, please be sure to modify the credit for the ribbons used appropriately!
  • Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
  • Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
  • Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
  
  
--------------------------------->
<div style="height:296px;overflow:auto;">
  
  <div class="row no-gutters mb-3">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> Description text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <div class="row no-gutters mb-3">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> Longer descriptions work too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet.</p>
  </div>
  
  <div class="row no-gutters mb-3">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium.</p>
  </div>
  
  <div class="row no-gutters mb-3">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <div class="row no-gutters mb-3">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> If you want more or less ribbons to show at once, add or subtract 78 pixels per ribbon from the default 296 in the first line. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  
  <!-- ADD MORE ABOVE ^^ ------>
  
  <div class="row no-gutters">
  <p class="my-auto col-2 text-center"><img src="IMAGELINK"></p>
  <p class="my-auto col-10"><b>RIBBONNAME:</b> This last ribbon's code MUST NOT INCLUDE "mb-3" as all the others do in order for it to fit the box properly. When adding more ribbons, copy and paste the code ABOVE this one.</p>
  </div>
  
</div>
<!------ CREDIT - DON'T DELETE -->
<p class="text-muted"><small><a href="https://toyhou.se/13285135.-f2u-html-ribbon-box">F2U HTML</a> by @StormyStarlight • <a href="https://toyhou.se/4739396.-ribbons">Ribbons</a> by @MisterMuse</small></p>