Stor8

body {
  background-image: url('IMGURL');
  background-size: contain;
  background-repeat: repeat;
}

<!---
==== riverdancer Character
==== HTML by 8byte
----
==== Colors
---- For easier changes, use Ctrl F and then
---- click the plus icon at the bottom to 
---- replace all.
====
#f2f3f5 - box backgrounds
#ffa19f - accent color
--->
<div class="mx-auto" style="max-width: 1000px;">
  <div class="p-3" style="background-image: url('IMGURL'); background-size: contain; background-repeat: repeat; box-shadow: 0 0 3px rgba(0,0,0,0.3);">
    <!--- ribbon box --->
    <div class="p-3" style="background: #f2f3f5; box-shadow: 0 0 3px rgba(0,0,0,0.3);">
      <div class="ml-n3 d-flex">
        <div class="py-1 pl-2 pr-4" style="background: #ffa19f; border-radius: 0 30px 30px 0;">
          <h1 class="text-uppercase mb-0" style="font-weight: 900; font-size: 1.8rem; letter-spacing: 2px; color: #f2f3f5;">ribbons</h1>
        </div>
      </div>
      <div class="d-flex justify-content-around align-items-center flex-wrap m-n1">
        <!--- ribbons --->
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
        <img src="IMGURL" class="m-2" style="width: 75px;" />
      </div>
    </div>
    <!--- divider ---><div class="p-2"></div>
    <div style="background-color: #f2f3f5; box-shadow: 0 0 3px rgba(0,0,0,0.3); position: relative;">
      <!--- reference image --->
      <img src="IMGURL" class="w-100" />
      <!--- link to full image --->
      <div class="py-1 pr-2 pl-4" style="position: absolute; bottom: 1rem; right: 0; background: #ffa19f; border-radius: 30px 0 0 30px;">
        <a href="LINK" class="text-uppercase" style="color: #f2f3f5; font-weight: 900; letter-spacing: 1px;">full image link</a>
      </div>
    </div>
    <!--- divider ---><div class="p-2"></div>
    <div class="row no-gutters m-n2">
      <div class="col-md-6 p-2">
        <div class="p-3 h-100" style="background: #f2f3f5; box-shadow: 0 0 3px rgba(0,0,0,0.3);">
          <div class="ml-n3 d-flex">
            <div class="py-1 pl-2 pr-4" style="background: #ffa19f; border-radius: 0 30px 30px 0;">
              <h1 class="text-uppercase mb-0" style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: #f2f3f5;">stamps</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            <!--- stamps --->
            <img src="IMGURL" class="m-1" style="width: 100px;" />
            <img src="IMGURL" class="m-1" style="width: 100px;" />
            <img src="IMGURL" class="m-1" style="width: 100px;" />
            <img src="IMGURL" class="m-1" style="width: 100px;" />
            <img src="IMGURL" class="m-1" style="width: 100px;" />
          </div>
        </div>
      </div>
      <div class="col-md-6 p-2">
        <div class="p-3 h-100" style="background: #f2f3f5; box-shadow: 0 0 3px rgba(0,0,0,0.3);">
          <div class="ml-n3 d-flex">
            <div class="py-1 pl-2 pr-4" style="background: #ffa19f; border-radius: 0 30px 30px 0;">
              <h1 class="text-uppercase mb-0" style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: #f2f3f5;">blinkies</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            <!--- blinkies --->
            <img src="IMGURL" style="max-width: 200px" />
            <img src="IMGURL" style="max-width: 200px" />
            <img src="IMGURL" style="max-width: 200px" />
            <img src="IMGURL" style="max-width: 200px" />
            <img src="IMGURL" style="max-width: 200px" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center"><small>code by @8byte</small></div>
</div>

<div style="max-width: 1000px;" class="mx-auto">
  <div class="p-3">
    <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3">
      <div class="ml-n3 d-flex">
        <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
          <h1 style="font-weight: 900; font-size: 1.8rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">ribbons</h1>
        </div>
      </div>
      <div class="d-flex justify-content-around align-items-center flex-wrap m-n1">
        {{%Ribbons%
        <img style="width: 75px;" class="m-2" src="{{u%Ribbon%}}">
        %end%}}
      </div>
    </div>
    <div class="p-2"></div>
    <div style="background-color: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3); position: relative;">
      <img class="w-100" src="{{u!Main Reference Image!}}">
      <div style="position: absolute; bottom: 1rem; right: 0; background: {{c!Color Accent!}}; border-radius: 30px 0 0 30px;" class="py-1 pr-2 pl-4">
        <a style="color: {{c!Box Backgrounds!}}; font-weight: 900; letter-spacing: 1px;" class="text-uppercase" href="{{u!Link to Image!}}">full image link</a>
      </div>
    </div>
    <div class="p-2"></div>
    <div class="row no-gutters m-n2">
      <div class="col-md-6 p-2">
        <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3 h-100">
          <div class="ml-n3 d-flex">
            <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
              <h1 style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">stamps</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            {{%Stamps%
            <img style="width: 100px;" class="m-1" src="{{u%Stamp Image Link%}}">
            %end%}}
          </div>
        </div>
      </div>
      <div class="col-md-6 p-2">
        <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3 h-100">
          <div class="ml-n3 d-flex">
            <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
              <h1 style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">blinkies</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            {{%Blinkies%
            <img src="{{u%Blinkie Image Link%}}" style="max-width: 200px" />
            %end%}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center"><a style="background: {{c!Color Accent!}}; color: {{c!Box Backgrounds!}}; font-weight: 900; letter-spacing: 1px; border-radius: 30px;" class="py-1 px-4 text-uppercase" href="/8byte">code credits</a></div>
</div>

<div style="max-width: 1000px;" class="mx-auto">
  <div class="p-3" style="background-image: url('{{u!Pattern Background Image!}}'); background-size: contain; background-repeat: repeat; box-shadow: 0 0 3px rgba(0,0,0,0.3);">
    <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3">
      <div class="ml-n3 d-flex">
        <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
          <h1 style="font-weight: 900; font-size: 1.8rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">ribbons</h1>
        </div>
      </div>
      <div class="d-flex justify-content-around align-items-center flex-wrap m-n1">
        {{%Ribbons%
        <img style="width: 75px;" class="m-2" src="{{u%Ribbon%}}">
        %end%}}
      </div>
    </div>
    <div class="p-2"></div>
    <div style="background-color: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3); position: relative;">
      <img class="w-100" src="{{u!Main Reference Image!}}">
      <div style="position: absolute; bottom: 1rem; right: 0; background: {{c!Color Accent!}}; border-radius: 30px 0 0 30px;" class="py-1 pr-2 pl-4">
        <a style="color: {{c!Box Backgrounds!}}; font-weight: 900; letter-spacing: 1px;" class="text-uppercase" href="{{u!Link to Image!}}">full image link</a>
      </div>
    </div>
    <div class="p-2"></div>
    <div class="row no-gutters m-n2">
      <div class="col-md-6 p-2">
        <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3 h-100">
          <div class="ml-n3 d-flex">
            <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
              <h1 style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">stamps</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            {{%Stamps%
            <img style="width: 100px;" class="m-1" src="{{u%Stamp Image Link%}}">
            %end%}}
          </div>
        </div>
      </div>
      <div class="col-md-6 p-2">
        <div style="background: {{c!Box Backgrounds!}}; box-shadow: 0 0 3px rgba(0,0,0,0.3);" class="p-3 h-100">
          <div class="ml-n3 d-flex">
            <div style="background: {{c!Color Accent!}}; border-radius: 0 30px 30px 0;" class="py-1 pl-2 pr-4">
              <h1 style="font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: {{c!Box Backgrounds!}};" class="text-uppercase mb-0">blinkies</h1>
            </div>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-wrap mt-2">
            {{%Blinkies%
            <img src="{{u%Blinkie Image Link%}}" style="max-width: 200px" />
            %end%}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="text-center"><a style="background: {{c!Color Accent!}}; color: {{c!Box Backgrounds!}}; font-weight: 900; letter-spacing: 1px; border-radius: 30px;" class="py-1 px-4 text-uppercase" href="/8byte">code credits</a></div>
</div>