HTMLMixed ColorsMiscellaneous
Line Count: 140
Difficulty:
Copy
<!-----------------------------------------------------------------
      UPDATE - Misc Layout
      Profile by HTMLobster (noll)
      
      Accents:
      #5d61f6
      #2e3bbe
      
      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Do not redistribute edits.
------------------------------------------------------------------>
<div style="width:300px; position:fixed; bottom:10px; right:10px; z-index:9;">
  <!-- heading background -->
  <div class="rounded-top text-white p-2" style="background:url(https://i.imgur.com/dxEUYWg.png) center; background-size:cover;">
    <!-- heading -->
    <h1 class="p-2 mb-0 rounded-top" style="background:rgba(0,0,0,.4);">
      <a class="display-4 text-white h-100 w-100 justify-content-between align-items-center" style="text-decoration:none;" data-toggle="collapse" data-target=".collapseUpdate">
        <!-- title -->
        Updates
        <!-- close/open buttons -->
        <span>
          <i class="fa-light fa-times fade collapse collapseUpdate show" style="transition:none;"></i>
          <i class="fa-light fa-arrow-up fade collapse collapseUpdate" style="transition:none;"></i>
        </span>
      </a>
    </h1>
  </div>
  <!-- heading end -->
  
  <!-- main content -->
  <div class="collapse show collapseUpdate" id="collapseUpdate">
    <div class="py-2 bg-faded">
      <!-- scrollbar colors -->
      <div class="overflow-auto pr-2" style="max-height:255px; scrollbar-color:#5d61f6 transparent; scrollbar-width:thin;">
        <!-- update -->
        <div>
          <!-- heading -->
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:#5d61f6;">
          Update 1
          </h2>
          <!-- content -->
          <p class="px-2 mt-1">
            <!-- symbol -->
            <i class="fa-duotone fa-light fa-heart text-muted" style="--fa-primary-color:#5d61f6; --fa-secondary-color:#5d61f6;"></i> 
            Update content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
        
        <!-- update -->
        <div class="mt-3">
          <!-- heading -->
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:#5d61f6;">
          Update 2
          </h2>
          <!-- heading -->
          <p class="px-2 mt-1">
            <!-- symbol -->
            <i class="fa-duotone fa-light fa-heart text-muted" style="--fa-primary-color:#5d61f6; --fa-secondary-color:#5d61f6;"></i> 
            Update content. Nullam quis ipsum sed arcu porta condimentum. Nullam ut volutpat odio, non consequat eros.
          </p>
        </div>
        
        <!-- update -->
        <div class="mt-3">
          <!-- heading -->
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:#5d61f6;">
            Commissions
          </h2>
          <!-- commissions status -->
          <p class="px-2 mt-1">
            <i class="fa-duotone fa-light fa-paintbrush text-muted" style="--fa-primary-color:#5d61f6; --fa-secondary-color:#5d61f6;"></i> 
            Commission status: OPEN/CLOSED
          </p>
          <!-- commission progress -->
          <div class="px-2">
            <!-- commission -->
            <div class="row no-gutters align-items-center">
              <!-- name -->
              <div class="col-auto mr-2">
                Name
              </div>
              <div class="col">
                <div class="progress">
                  <!-- progress - edit width -->
                  <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin ="0" aria-valuemax="100" style="width:25%; background:#2e3bbe;">
                    lining
                  </div>
                </div>
              </div>
            </div>
            <!-- commission end -->
            
            <!-- commission -->
            <div class="row no-gutters align-items-center">
              <!-- name -->
              <div class="col-auto mr-2">
                Name
              </div>
              <div class="col">
                <div class="progress">
                  <!-- progress - edit width -->
                  <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin ="0" aria-valuemax="100" style="width:40%; background:#2e3bbe;">
                    shading
                  </div>
                </div>
              </div>
            </div>
            <!-- commission end -->
            
            <!-- commission -->
            <div class="row no-gutters align-items-center">
              <!-- name -->
              <div class="col-auto mr-2">
                Name
              </div>
              <div class="col">
                <div class="progress">
                  <!-- progress - edit width -->
                  <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin ="0" aria-valuemax="100" style="width:80%; background:#2e3bbe;">
                    finishing
                  </div>
                </div>
              </div>
            </div>
            <!-- commission end -->
          </div>
        </div>
        
        <!-- credit -->
        <div class="mt-3">
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:#5d61f6;">
            Credit
          </h2>
          <!-- code credit -->
          <p class="px-2 mt-1 mb-0">
            <a class="text-body" href="https://toyhou.se/HTMLobster">
              <i class="fa-duotone fa-light fa-lobster text-muted" style="--fa-primary-color:#5d61f6; --fa-secondary-color:#5d61f6;"></i>
              Layout by HTMLobster
            </a> 
          </p>
          <!-- image credit -->
          <p class="px-2">
            <a class="text-body" href="https://www.youtube.com/watch?v=vCXsRoyFRQE" data-toggle="tooltip" title="bright colors warning">
              <i class="fa-duotone fa-light fa-image text-muted" style="--fa-primary-color:#5d61f6; --fa-secondary-color:#5d61f6;"></i>
              Header image by Caravan Palace
            </a> 
          </p>
        </div>
        <!-- credit end -->
      </div>
    </div>
  </div>
  <!-- main content end -->
  
  <!-- bottom border -->
  <div class="rounded-bottom py-1" style="background:#5d61f6;"></div>
</div>
Copy
<!-----------------------------------------------------------------
      UPDATE - Misc Layout
      Profile by HTMLobster (noll)
      
      Accents:
      #5d61f6
      #2e3bbe
      
      TOS:
      Do not remove my credit. You may edit it, however.
      You may edit code/frankenstein with others as long as their TOS allows!
      Turn off WYSIWYG and turn on Code Editor.
      Do not redistribute edits.
------------------------------------------------------------------>
<div style="width:300px; position:fixed; bottom:10px; right:10px; z-index:9;">
  <!-- heading background -->
  <div class="rounded-top text-white p-2" style="background:url({{u!header image!}}) center; background-size:cover;">
    <!-- heading -->
    <h1 class="p-2 mb-0 rounded-top" style="background:rgba(0,0,0,.4);">
      <a class="display-4 text-white h-100 w-100 justify-content-between align-items-center" style="text-decoration:none;" data-toggle="collapse" data-target=".collapseUpdate">
        <!-- title -->
        Updates
        <!-- close/open buttons -->
        <span class="d-block">
          <i class="fa-light fa-times fade collapse collapseUpdate show" style="transition:none;"></i>
          <i class="fa-light fa-arrow-up fade collapse collapseUpdate" style="transition:none;"></i>
        </span>
      </a>
    </h1>
  </div>
  <!-- heading end -->
  
  <!-- main content -->
  <div class="collapse show collapseUpdate" id="collapseUpdate">
    <div class="py-2 bg-faded">
      <!-- scrollbar colors -->
      <div class="overflow-auto pr-2" style="max-height:255px; scrollbar-color:{{c!accent color 1!}} transparent; scrollbar-width:thin;">
        <!-- update -->
        {{%Update%
        <div class="mb-3">
          <!-- heading -->
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:{{c!accent color 1!}};">
          {{%title%}}
          </h2>
          <!-- content -->
          <p class="px-2 mt-1">
            <!-- symbol -->
            <i class="fa-duotone fa-light fa-heart text-muted" style="--fa-primary-color:{{c!accent color 1!}}; --fa-secondary-color:{{c!accent color 1!}};"></i> 
            {{%update%}}
          </p>
        </div>
        %end%}}
        
        <!-- update -->
        <div class="mb-3">
          {{%%Commissions%
          <!-- heading -->
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:{{c!accent color 1!}};">
            Commissions
          </h2>
          <!-- commissions status -->
          <p class="px-2 mt-1">
            <i class="fa-duotone fa-light fa-paintbrush text-muted" style="--fa-primary-color:{{c!accent color 1!}}; --fa-secondary-color:{{c!accent color 1!}};"></i> 
            Commission status: {[%comms status%}}
          </p>
          <!-- commission progress -->
          <div class="px-2">
            <!-- commission -->
            {{%Commission%
            <div class="row no-gutters align-items-center">
              <!-- name -->
              <div class="col-auto mr-2">
                {{%username%}}
              </div>
              <div class="col">
                <div class="progress">
                  <!-- progress - edit width -->
                  <div class="progress-bar" role="progressbar" aria-valuenow="{{n%progress%}}" aria-valuemin ="0" aria-valuemax="100" style="width:{{n%progress%}}%; background:{{c%progress color%}};">
                    {{%progress type%}}
                  </div>
                </div>
              </div>
            </div>
            <!-- commission end -->
            %end%}}
          </div>
          %end%}}
        </div>
        
        <!-- credit -->
        <div>
          <h2 class="font-weight-light mb-0 px-2 py-1 text-white rounded-right" style="background:{{c!accent color 1!}};">
            Credit
          </h2>
          <!-- code credit -->
          <p class="px-2 mt-1 mb-0">
            <a class="text-body" href="https://toyhou.se/HTMLobster">
              <i class="fa-duotone fa-light fa-lobster text-muted" style="--fa-primary-color:{{c!accent color 1!}}; --fa-secondary-color:{{c!accent color 1!}};"></i>
              Layout by HTMLobster
            </a> 
          </p>
          <!-- image credit -->
          {{%%header image credit%
          <p class="px-2">
            <a class="text-body" href="{{%credit link%}}" data-toggle="tooltip" title="bright colors warning">
              <i class="fa-duotone fa-light fa-image text-muted" style="--fa-primary-color:{{c!accent color 1!}}; --fa-secondary-color:{{c!accent color 1!}};"></i>
              {{%artist%}}
            </a> 
          </p>
          %end%}}
        </div>
        <!-- credit end -->
      </div>
    </div>
  </div>
  <!-- main content end -->
  
  <!-- bottom border -->
  <div class="rounded-bottom py-1" style="background:{{c!accent color 1!}};"></div>
</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.