[MISC] Creator's notes

created by:FlowerlyRat
BootstrapHTMLMiscellaneous

Line Count: 36
Difficulty:
Copy
<!--

Accent color: #a2b85d

-->

<div class="card bg-faded border-0 rounded-0 px-3 py-2 mb-2">
  <div class="text" style="text-align: center;">
    <h1 class="display-3 text-uppercase mb-0" style="color: #a2b85d"><b>✦ Creator's note ✦</b></h1>
  </div>
</div>

<div class="mb-2"></div>

<div class="card bg-faded border-0 rounded-0 p-4 mb-2 text-justify">
    
    <!-- Small notice -->
    <div class="card bg-faded mt-2 mb-4 rounded-0" style="padding:1px;"></div>
    <p style="text-align: center; font-size:14pt"><b>
        
        References will be redrawn at some point for small color and design corrections
        
    </b></p>
    <div class="card bg-faded mt-2 mb-4 rounded-0" style="padding:1px;"></div>
    <p>
        
        Ribbons and flags used can be found <a span style="color:#a2b85d" target="_blank" href="https://toyhou.se/20187371.ribbon-masterlist">here</a>!
        
    </p>
    <div class="card bg-faded mt-2 mb-4 rounded-0" style="padding:1px;"></div>
    <!-- Small notice end -->
    
    <!-- External links -->
    <p>
        Character's <a span style="color:#a2b85d" target="_blank" href="#">Pinterest pin</a>, I try to update it from time to time [when I remember] / This character has no Pinterest pin as of currently
    </p>
    <p>
        Check out their <a span style="color:#a2b85d" target="_blank" href="#">spotify/youtube playlist</a> [although very bare bones woops]!
    </p>
    
    <div class="card bg-faded mt-2 mb-4 rounded-0" style="padding:1px;"></div>
    <!-- External links end -->
    
    <!-- Additional notes -->
    <p>
        Additionnal info about the character<br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </p>
    <!-- Additional notes end -->
    
</div>
Copy
<!--

Accent color: #f5335a

-->

<div class="card bg-faded rounded-0 p-4 mb-3" style="border-style: dotted solid; border-width: 3px 4px; border-color: #f5335a">
    <p class="text-center" style="font-variant: small-caps; font-size: 40px; color: #f5335a"><b>Creator's note</b></p>
</div>

<div class="card bg-faded rounded-0 p-4 text-justify" style="border-width: 3px">
    
    <!-- Small notice -->
    <p>
        Small notice about the character goes here, whether it be about their reference, source material, or what have you.<br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </p>
    <!-- Small notice -->
    
    <div class="mt-2 mb-4" style="border-width: 3px 0 0 0; border-style: solid; color: rgba(245,51,90,0.5);"></div>
    
    <!-- Additional notes -->
    <p>
       Additional information about the character here.<br>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
    </p>
    <!-- Additional notes -->
    
</div>
Copy
<!--

Accent color: #f5335a

-->

<div class="card bg-faded rounded-0 p-4 mb-3" style="border-style: dotted solid; border-width: 3px 4px; border-color: #f5335a">
    <div class="row no-gutters">
        <div class="col-lg align-items-center justify-content-center">
            <i class="fas fa-construction fa-fade" style="font-size: 40px; color: #f5335a"></i>
        </div>
        <div class="col-lg-auto">
          <p class="text-center mb-2" style="font-variant: small-caps; font-size: 40px; color: #f5335a"><b>Under construction</b></p>  
        </div>
        <div class="col-lg align-items-center justify-content-center">
            <i class="fas fa-construction fa-fade" style="font-size: 40px; color: #f5335a"></i>
        </div>
    </div>
</div>

<div class="progress my-2 rounded-0"><div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 20px; width: 100%; background-color: #f5335a"></div></div>

<div class="card bg-faded rounded-0 p-4 mt-3" style="border-width: 3px">
    <p class="text-justify"><i class="fas fa-exclamation-triangle"></i>
        
        Woopsies!!! Seems like this character/tab is currently under construction! Check back on it at a later date!
        
    </p>
</div>

Password (optional)

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