Stor8

<div class="container px-4 pt-4" style="background:#f0c68a url(https://i.imgur.com/zSJ3zDR.jpg) bottom no-repeat; background-size:contain; border-radius:2rem; max-width:600px; padding-bottom:250px;">
    <div class="row">
        <div class="col-lg order-lg-1 order-2">
            <div class="card border-0 p-3" style="border-radius:2rem;">
                <h1 class="display-4 mb-0" style="font-family:'Times New Roman',Times,serif; font-variant:small-caps;">
                    <i class="fa-duotone fa-umbrella-beach text-primary"></i> {{!character name!}}
                </h1>
            </div>
            <div class="card border-0 p-3 mt-4" style="border-radius:2rem;">
                <p class="font-italic">
                    {{!quote!}}
                </p>
                <p class="text-right" style="font-family:'Times New Roman',Times,serif; font-variant:small-caps;">
                    - <span class="text-primary">{{!quote source!}}</span>
                </p>
            </div>
        </div>
        <div class="col-lg-4 mb-lg-0 mb-4 order-lg-2 order-1">
            <div class="card border-0 h-100" style="background:url({{u!side image 1!}}) center; background-size:cover; border-radius:2rem; min-height:200px;"></div>
        </div>
    </div>
    <div class="card border-0 p-3 mt-4" style="border-radius:2rem;">
        {{%%about%
        <p>
            <span class="float-left mr-2 text-primary" style="font-family:'Times New Roman',Times,serif; font-variant:small-caps; font-size:3em; line-height:1em;">
                {{%first letter%}}
            </span>
            {{l%paragraph 1%}}
        </p>
        {{%additional paragraphs%
        <p>
            {{l%paragraph%}}
        </p>
        %end%}}
        %end%}}
    </div>
    <div class="card border-0 p-3 mt-4" style="border-radius:2rem;">
        {{%relationships%
        <p>
            <a href="{{u%character link%}}" class="mr-2 text-primary" style="font-family:'Times New Roman',Times,serif; font-variant:small-caps;">
                {{%name%}}
            </a>
            {{%status%}}. {{l%description%}}
        </p>
        {{?show or hide divider?
        <hr class="mt-0 mx-auto" style="width:90%;">
        ?end?}}
        %end%}}
    </div>
    <div class="row">
        <div class="col-lg-4 mt-4">
            <div class="card border-0 p-3 font-italic" style="border-radius:2rem;">
                <i class="fa-duotone fa-quote-right fa-2x text-primary" style="position:absolute; bottom:.25rem; right:1rem; opacity:.5;"></i>
                {{!quote 2!}}
            </div>
        </div>
        <div class="col-lg">
            <div class="row h-100">
                {{%color palette%
                <div class="col-sm col-6 mt-4">
                    <div class="h-100" style="border-radius:2rem; background:{{c%color%}}; min-height:50px;"></div>
                </div>
                %end%}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-5 mt-4">
            <div class="card border-0 h-100" style="background:url({{u!side image 2!}}) center; background-size:cover; min-height:200px; border-radius:2rem;"></div>
        </div>
        <div class="col-lg">
            <div class="card border-0 p-3 mt-4" style="border-radius:2rem;">
                <h1 class="mb-0" style="font-family:'Times New Roman',Times,serif; font-variant:small-caps;">
                    <i class="fa-duotone fa-sailboat text-primary"></i> Trivia
                </h1>
                <ul class="mb-0">
                    {{%trivia%
                    <li>
                        {{%fact%}}
                    </li>
                    %end%}}
                </ul>
            </div>
            {{%%song%
            <div class="card border-0 p-3 mt-4" style="border-radius:2rem;">
                <div class="d-flex align-items-center justify-content-between">
                    <div style="font-family:'Times New Roman',Times,serif; font-variant:small-caps;">
                        {{%song title - artist%}}
                    </div>
                    <div>
                        <div class="justify-content-center">
                             <i class="fa-duotone fa-music text-primary" style="font-size:1.5em;"></i>
                            <div style="position:absolute; margin-top:-8px; height:34px; width:34px; overflow:hidden;">
                                <audio controls="" loop="" style="width:100px; height:50px; opacity:0; margin:-8px -9px;">
                                    <source src="{{u%song MP3 URL%}}">
                                </audio>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            %end%}}
        </div>
    </div>
</div>
<div class="text-center mt-4">
    <a href="https://toyhou.se/HTMLobster" title="html by noll" class="tooltipster">
        <i class="fa-solid fa-lobster"></i>
    </a>
    <a href="https://www.freepik.com/free-vector/beach-sea-top-view-summer-concept_29874911.htm#" title="background image by gstudioimage" class="tooltipster">
        <i class="fa-solid fa-image"></i>
    </a>
</div>