[CHARA] Simple tricolor

Custom ColorsHTMLCharacter

Line Count: 185

Difficulty:

Linear version
Column version
Linear - Safehou-se
Columns - Safehou-se

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯

To the point [linear version]: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Any links added use the following format [target="_blank" is optional]:
    Change the hue, saturation, and brightness in the "filter" style to have the color you want
        <a target="_blank" class="text-warning" style="font-weight: bold; filter: hue-rotate(200deg) saturate(250%) brightness(105%)" href="LINK_HERE">text_here</a>

Text font:  MS Gothic

Primary color: #6dc3fd
Secondary color: #fd6d7b
Tertiary color: #ffd96e

-->

<div class="card border-0 rounded-0 align-items-center">
    
<!--=========///////// FontAwesome icon decorations above avatar /////////=========-->
    <!-- Stacked middle -->
    <span class="fa-stack fa-2x mb-1">
        <i class="fas fa-sharp fa-crown fa-stack-2x" style="color: #6dc3fd"></i>
        <i class="fas fa-sharp fa-sparkle fa-stack-1x fa-inverse mt-2" style="color: #ffd96e"></i>
    </span>
    <!-- Stacked middle end -->
    
    <!-- Left -->
    <p class="mb-n4" style="position: relative; top: -25px; left: -50px;">
        <i class="fas fa-sharp fa-sparkle" style="color: #ffd96e"></i>
        <i class="fas fa-sharp fa-sparkle" style="font-size: 1.5em;color: #fd6d7b"></i>
    </p>
    <!-- Left end -->
    
    <!-- Right -->
    <p class="mb-n4" style="position: relative; top: -25px; right: -50px;">
        <i class="fas fa-sharp fa-sparkle" style="font-size: 1.5em;color: #fd6d7b"></i>
        <i class="fas fa-sharp fa-sparkle" style="color: #ffd96e"></i>
    </p>
    <!-- Right end -->
    
    <!--===/// FontAwesome icon decorations above avatar end ///===-->
    
<!--=========///////// Avatar /////////=========-->
    <div class="card rounded-0 mb-2" style="border: 3px solid #6dc3fd">
        <img width="150" src="
        
        https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
        
        "><!-- Image link above -->
        <!--Recomend using an image hosting platform such as filegarden or ImgBB if you don't already have a cropped picture to put here -->
        
        <!-- FontAwesome icon decorations right bottom corner of avatar -->
        <i class="fas fa-sharp fa-eye" style="position: absolute; bottom: 14px; right: -10px; font-size: 15px; color: #fd6d7b"></i>
        <i class="fas fa-sharp fa-eye" style="position: absolute; bottom: -14px; right: -15px; font-size: 25px; color: #6dc3fd"></i>
    </div>
    <!--===/// Avatar end ///===-->
    
<!--=========///////// Music title and embed /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 align-items-center mb-1">
        
        <p class="mb-1" style="font-family: MS Gothic">
            
            <!-- Song title and artist -->
            <b>Song title</b> || artist</p>
        
        <span>
            <iframe class="flex-fill" style="position: absolute; margin-left: 2px; width: 20px; height: 20px; opacity: 0.000005; z-index: 1" frameborder="0" src="
            
            https://www.youtube.com/embed/VIDEOID
            
            "></iframe><!-- Replace "VIDEOID" above with the numbers/letter at the end of a YouTube link after "watch?v=" -->
            
            <i class="fas fa-sharp fa-circle-play fa-fw" style="font-size: 1.5em; color: #6dc3fd"></i>
        </span>
    </div>
    <!--===/// Music title and embed end ///===-->
    
<!--=========///////// Decorative progress bar /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 mt-n2">
        <div class="row no-gutters align-items-center">
            <div class="col-auto">
                <p style="font-family: MS Gothic">
                    
                    <!-- Starting timestamp -->
                    0:30
                
                </p>
            </div>
            
            <!-- Progress bar -->
            <div class="col mx-2">
                <div class="progress border-0 rounded-0 justify-content-center" style="height: 5px; width: 150px">
                    
                    <!-- Change the percentage, be sure both are equal to 100% -->
                    <div class="progress-bar" style="width: 30%; background-color:#fd6d7b;"></div>
                    <div class="progress-bar" style="width: 70%; background-color: #ffd96e;"></div>
                </div>
            </div>
            <!-- Progress barend -->
            
            <div class="col-auto">
                <p style="font-family: MS Gothic">
                    
                    <!-- Ending timestamp -->
                    2:46
                    
                </p>
            </div>
        </div>
    </div>
    <!--===/// Decorative progress bar end ///===-->
    
<!--=========///////// Info box /////////=========-->
    <div class="card bg-faded rounded-0 pb-2 px-3 text-center" style="max-width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd">
        
        <!-- FontAwesome icon decorations left top corner -->
        <i class="fas fa-sharp fa-eye" style="position: absolute; top: -14px; left: -15px; font-size: 25px; color: #6dc3fd"></i>
        <i class="fas fa-sharp fa-eye" style="position: absolute; top: 14px; left: -10px; font-size: 15px; color: #fd6d7b"></i>
        
        <h1 style="margin-top: 11px; font-weight: bold; color: #6dc3fd">
            
            <!-- Decorative icon -->
            <i class="fas fa-sharp fa-music"></i>
            
            <!-- Name -->
            Name Surname
            
            <!-- Decorative icon -->
            <i class="fas fa-sharp fa-music-note"></i>
        </h1>
        
        <!-- Basic info -->
        <p>pro/nouns <i class="fas fa-sharp fa-diamond fa-fw" style="font-size: 10px"></i> age <i class="fas fa-sharp fa-diamond fa-fw" style="font-size: 10px"></i> height</p>
        
        <hr class="mt-n2" style="width: 100%; border: 1px solid #6dc3fd">
        
        <!-- Line of text -->
        <p>Quote or short description of what the character is to you</p>
    </div>
    <!--===/// Info box end ///===-->

<!--=========///////// Description box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify my-2" style="height: 200px; width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd; overflow: auto; scrollbar-width: thin; scrollbar-color: #fd6d7b rgba(0, 0, 0, 0)">
        
        <p>
           <b>Description</b><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>
        
        <p>
            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>
    </div>
    <!--===/// Description box end ///===-->

<!--=========///////// Trivia box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify" style="height: 100px; width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd; overflow: auto; scrollbar-width: thin; scrollbar-color: #fd6d7b rgba(0, 0, 0, 0)">
        <p>
           <b>Trivia</b>
        </p>
        
        <ul>
            <li>Beep beep</li>
        </ul>
    </div>
    <!--===/// Trivia box end ///===-->
    
<!--=========///////// Code credit /////////=========-->
    <a class="tooltipster" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-eye mt-2" style="color: #6dc3fd"></i></a>
    <!--===/// Code credit end ///===-->
    
</div>

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯

To the point [column version]: code by FlowerlyRat

        > It is recommended to use circlejourney's ToyHouse live editor -> https://th.circlejourney.net/

Any links added use the following format [target="_blank" is optional]:
    Change the hue, saturation, and brightness in the "filter" style to have the color you want
        <a target="_blank" class="text-warning" style="font-weight: bold; filter: hue-rotate(200deg) saturate(250%) brightness(105%)" href="LINK_HERE">text_here</a>

Text font:  MS Gothic

Primary color: #6dc3fd
Secondary color: #fd6d7b
Tertiary color: #ffd96e

-->

<div class="card border-0 rounded-0 align-items-center">
    
<!--=========///////// FontAwesome icon decorations above avatar /////////=========-->
    <!-- Stacked middle -->
    <span class="fa-stack fa-2x mb-1">
        <i class="fas fa-sharp fa-crown fa-stack-2x" style="color: #6dc3fd"></i>
        <i class="fas fa-sharp fa-sparkle fa-stack-1x fa-inverse mt-2" style="color: #ffd96e"></i>
    </span>
    <!-- Stacked middle end -->
    
    <!-- Left -->
    <p class="mb-n4" style="position: relative; top: -25px; left: -50px;">
        <i class="fas fa-sharp fa-sparkle" style="color: #ffd96e"></i>
        <i class="fas fa-sharp fa-sparkle" style="font-size: 1.5em;color: #fd6d7b"></i>
    </p>
    <!-- Left end -->
    
    <!-- Right -->
    <p class="mb-n4" style="position: relative; top: -25px; right: -50px;">
        <i class="fas fa-sharp fa-sparkle" style="font-size: 1.5em;color: #fd6d7b"></i>
        <i class="fas fa-sharp fa-sparkle" style="color: #ffd96e"></i>
    </p>
    <!-- Right end -->
    
    <!--===/// FontAwesome icon decorations above avatar end ///===-->
    
<!--=========///////// Avatar /////////=========-->
    <div class="card rounded-0 mb-2" style="border: 3px solid #6dc3fd">
        <img width="150" src="
        
        https://f2.toyhou.se/file/f2-toyhou-se/images/70704855_HyNZgIECVke9qBG.png
        
        "><!-- Image link above -->
        <!--Recomend using an image hosting platform such as filegarden or ImgBB if you don't already have a cropped picture to put here -->
        
        <!-- FontAwesome icon decorations right bottom corner of avatar -->
        <i class="fas fa-sharp fa-eye" style="position: absolute; bottom: 14px; right: -10px; font-size: 15px; color: #fd6d7b"></i>
        <i class="fas fa-sharp fa-eye" style="position: absolute; bottom: -14px; right: -15px; font-size: 25px; color: #6dc3fd"></i>
    </div>
    <!--===/// Avatar end ///===-->
    
<!--=========///////// Music title and embed /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 align-items-center mb-1">
        
        <p class="mb-1" style="font-family: MS Gothic">
            
            <!-- Song title and artist -->
            <b>Song title</b> || artist</p>
        
        <span>
            <iframe class="flex-fill" style="position: absolute; margin-left: 2px; width: 20px; height: 20px; opacity: 0.000005; z-index: 1" frameborder="0" src="
            
            https://www.youtube.com/embed/VIDEOID
            
            "></iframe><!-- Replace "VIDEOID" above with the numbers/letter at the end of a YouTube link after "watch?v=" -->
            
            <i class="fas fa-sharp fa-circle-play fa-fw" style="font-size: 1.5em; color: #6dc3fd"></i>
        </span>
    </div>
    <!--===/// Music title and embed end ///===-->
    
<!--=========///////// Decorative progress bar /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 mt-n2">
        <div class="row no-gutters align-items-center">
            <div class="col-auto">
                <p style="font-family: MS Gothic">
                    
                    <!-- Starting timestamp -->
                    0:30
                
                </p>
            </div>
            
            <!-- Progress bar -->
            <div class="col mx-2">
                <div class="progress border-0 rounded-0 justify-content-center" style="height: 5px; width: 150px">
                    
                    <!-- Change the percentage, be sure both are equal to 100% -->
                    <div class="progress-bar" style="width: 30%; background-color:#fd6d7b;"></div>
                    <div class="progress-bar" style="width: 70%; background-color: #ffd96e;"></div>
                </div>
            </div>
            <!-- Progress barend -->
            
            <div class="col-auto">
                <p style="font-family: MS Gothic">
                    
                    <!-- Ending timestamp -->
                    2:46
                    
                </p>
            </div>
        </div>
    </div>
    <!--===/// Decorative progress bar end ///===-->
    
<!--=========///////// Info box /////////=========-->
    <div class="card bg-faded rounded-0 pb-2 px-3 text-center" style="max-width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd">
        
        <!-- FontAwesome icon decorations left top corner -->
        <i class="fas fa-sharp fa-eye" style="position: absolute; top: -14px; left: -15px; font-size: 25px; color: #6dc3fd"></i>
        <i class="fas fa-sharp fa-eye" style="position: absolute; top: 14px; left: -10px; font-size: 15px; color: #fd6d7b"></i>
        
        <h1 style="margin-top: 11px; font-weight: bold; color: #6dc3fd">
            
            <!-- Decorative icon -->
            <i class="fas fa-sharp fa-music"></i>
            
            <!-- Name -->
            Name Surname
            
            <!-- Decorative icon -->
            <i class="fas fa-sharp fa-music-note"></i>
        </h1>
        
        <!-- Basic info -->
        <p>pro/nouns <i class="fas fa-sharp fa-diamond fa-fw" style="font-size: 10px"></i> age <i class="fas fa-sharp fa-diamond fa-fw" style="font-size: 10px"></i> height</p>
        
        <hr class="mt-n2" style="width: 100%; border: 1px solid #6dc3fd">
        
        <!-- Line of text -->
        <p>Quote or short description of what the character is to you</p>
    </div>
    <!--===/// Info box end ///===-->
    
    
<!--/////////////////////////// Boxes ///////////////////////////-->
<div class="row no-gutters">
    
    <!--=========///////// Description box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify mt-2 col-md mr-md-1" style="height: 200px; width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd; overflow: auto; scrollbar-width: thin; scrollbar-color: #fd6d7b rgba(0, 0, 0, 0)">
        
        <p>
           <b>Description</b><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>
        
        <p>
            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>
    </div>
    <!--===/// Description box end ///===-->
    
    <!--=========///////// Trivia box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify mt-2 col-md ml-md-1" style="height: 200px; width: 390px; font-family: MS Gothic; border: 3px solid #6dc3fd; overflow: auto; scrollbar-width: thin; scrollbar-color: #fd6d7b rgba(0, 0, 0, 0)">
        <p>
           <b>Trivia</b>
        </p>
        
        <ul>
            <li>Beep beep</li>
        </ul>
    </div>
    <!--===/// Trivia box end ///===-->
    
</div>
<!--/////////////////////////// Boxes end ///////////////////////////-->

<!--=========///////// Code credit /////////=========-->
    <a class="tooltipster" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-eye mt-2" style="color: #6dc3fd"></i></a>
    <!--===/// Code credit end ///===-->
    
</div>

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯

To the point [linear version]: code by FlowerlyRat

Primary color: {{c!Primary color!}}
Secondary color: {{c!Secondary color!}}
Tertiary color: {{c!Tertiary color!}}

-->

<div class="card border-0 rounded-0 align-items-center">
    
<!--=========///////// FontAwesome icon decorations above avatar /////////=========-->
    <!-- Stacked middle -->
    <span class="fa-stack fa-2x mb-1">
        <i class="{{i!Stacked icon - Layer 1!}} fa-stack-2x" style="color: {{c!Primary color!}}"></i>
        <i class="{{i!Stacked icon - layer 2!}} fa-stack-1x fa-inverse mt-2" style="color: {{c!Tertiary color!}}"></i>
    </span>
    <!-- Stacked middle end -->
    
    <!-- Left -->
    <p class="mb-n4" style="position: relative; top: -25px; left: -50px;">
        <i class="{{i!Icon left left!}}" style="color: {{c!Tertiary color!}}"></i>
        <i class="{{i!Icon left right!}}" style="font-size: 1.5em; color: {{c!Secondary color!}}"></i>
    </p>
    <!-- Left end -->
    
    <!-- Right -->
    <p class="mb-n4" style="position: relative; top: -25px; right: -50px;">
        <i class="{{i!Icon right left!}}" style="font-size: 1.5em; color: {{c!Secondary color!}}"></i>
        <i class="{{i!Icon right right!}}" style="color: {{c!Tertiary color!}}"></i>
    </p>
    <!-- Right end -->
    
    <!--===/// FontAwesome icon decorations above avatar end ///===-->
    
<!--=========///////// Avatar /////////=========-->
    <div class="card rounded-0 mb-2" style="border: 3px solid {{c!Primary color!}}">
        <img width="150" src="
        
        {{u!Avatar link!}}
        
        "><!-- Image link above -->
        <!--Recomend using an image hosting platform such as filegarden or ImgBB if you don't already have a cropped picture to put here -->
        
        <!-- FontAwesome icon decorations right bottom corner of avatar -->
        <i class="{{i!Icon bottom right of the avatar 1!}}" style="position: absolute; bottom: 14px; right: -10px; font-size: 15px; color: {{c!Secondary color!}}"></i>
        <i class="{{i!Icon bottom right of the avatar 2!}}" style="position: absolute; bottom: -14px; right: -15px; font-size: 25px; color: {{c!Primary color!}}"></i>
    </div>
    <!--===/// Avatar end ///===-->
    
<!--=========///////// Music title and embed /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 align-items-center mb-1">
        
        <p class="mb-1" style="font-family: {{!Text font!}}">
            
            <!-- Song title and artist -->
            <b>{{!Song title!}}</b> || {{!Artist!}}</p>
        
        <span>
            <iframe class="flex-fill" style="position: absolute; margin-left: 2px; width: 20px; height: 20px; opacity: 0.000005; z-index: 1" frameborder="0" src="
            
            https://www.youtube.com/embed/{{!Video ID [the numbers/letters found after 'watch?v=' in YT links!}}
            
            "></iframe><!-- Replace "VIDEOID" above with the numbers/letter at the end of a YouTube link after "watch?v=" -->
            
            <i class="fas fa-sharp fa-circle-play fa-fw" style="font-size: 1.5em; color: {{c!Primary color!}}"></i>
        </span>
    </div>
    <!--===/// Music title and embed end ///===-->
    
<!--=========///////// Decorative progress bar /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 mt-n2">
        <div class="row no-gutters align-items-center">
            <div class="col-auto">
                <p style="font-family: {{!Text font!}}">
                    
                    <!-- Starting timestamp -->
                    {{!Starting timestamp!}}
                
                </p>
            </div>
            
            <!-- Progress bar -->
            <div class="col mx-2">
                <div class="progress border-0 rounded-0 justify-content-center" style="height: 5px; width: 150px">
                    
                    <!-- Change the percentage, be sure both are equal to 100% -->
                    <div class="progress-bar" style="width: {{!Progress bar percent 1!}}%; background-color:{{c!Secondary color!}};"></div>
                    <div class="progress-bar" style="width: {{!Progress bar percent 2!}}%; background-color: {{c!Tertiary color!}};"></div>
                </div>
            </div>
            <!-- Progress barend -->
            
            <div class="col-auto">
                <p style="font-family: {{!Text font!}}">
                    
                    <!-- Ending timestamp -->
                    {{!Ending timestamp!}}
                    
                </p>
            </div>
        </div>
    </div>
    <!--===/// Decorative progress bar end ///===-->
    
<!--=========///////// Info box /////////=========-->
    <div class="card bg-faded rounded-0 pb-2 px-3 text-center" style="max-width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}">
        
        <!-- FontAwesome icon decorations left top corner -->
        <i class="{{i!Icon top left of the info box 1!}}" style="position: absolute; top: -14px; left: -15px; font-size: 25px; color: {{c!Primary color!}}"></i>
        <i class="{{i!Icon top left of the info box 2!}}" style="position: absolute; top: 14px; left: -10px; font-size: 15px; color: {{c!Secondary color!}}"></i>
        
        <h1 style="margin-top: 11px; font-weight: bold; color: {{c!Primary color!}}">
            
            <!-- Decorative icon -->
            <i class="{{i!Icon left of the name!}}"></i>
            
            <!-- Name -->
            {{!Name!}}
            
            <!-- Decorative icon -->
            <i class="{{i!Icon right of the name!}}"></i>
        </h1>
        
        <!-- Basic info -->
        
        <p>{{!pro/nouns!}} <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{!Age!}} <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{!Height!}}
        {{%Additonal basic info%
        <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{%Info%}} 
        %end%}}
        </p>
        
        <hr class="mt-n2" style="width: 100%; border: 1px solid {{c!Primary color!}}">
        
        <!-- Line of text -->
        <p>{{!Quote or descriptive line!}}</p>
    </div>
    <!--===/// Info box end ///===-->

<!--=========///////// Description box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify my-2" style="height: 200px; width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}; overflow: auto; scrollbar-width: thin; scrollbar-color: {{c!Secondary color!}} rgba(0, 0, 0, 0)">
        
        <p>
           <b>Description</b><br>
           
           {{l!Description!}}
        </p>
        
        {{%D. Paragraphs%
        <p>
            {{l%New paragraph%}}
        </p>
        %end%}}
    </div>
    <!--===/// Description box ///===-->

<!--=========///////// Trivia box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify" style="height: 100px; width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}; overflow: auto; scrollbar-width: thin; scrollbar-color: {{c!Secondary color!}} rgba(0, 0, 0, 0)">
        <p>
           <b>Trivia</b>
        </p>
        
        <ul>
            {{%Trivia%
            <li>{{%Trivia point%}}</li>
            %end%}}
        </ul>
    </div>
    <!--===/// Trivia box ///===-->

<!--=========///////// Code credit /////////=========-->
    <a class="tooltipster" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-eye mt-2" style="color: {{c!Primary color!}}"></i></a>
    <!--===/// Code credit end ///===-->
    
</div>

Copy

<!--

╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯

To the point [linear version]: code by FlowerlyRat

Text font:  {{!Text font!}}

Primary color: {{c!Primary color!}}
Secondary color: {{c!Secondary color!}}
Tertiary color: {{c!Tertiary color!}}

-->

<div class="card border-0 rounded-0 align-items-center">
    
<!--=========///////// FontAwesome icon decorations above avatar /////////=========-->
    <!-- Stacked middle -->
    <span class="fa-stack fa-2x mb-1">
        <i class="{{i!Stacked icon - Layer 1!}} fa-stack-2x" style="color: {{c!Primary color!}}"></i>
        <i class="{{i!Stacked icon - layer 2!}} fa-stack-1x fa-inverse mt-2" style="color: {{c!Tertiary color!}}"></i>
    </span>
    <!-- Stacked middle end -->
    
    <!-- Left -->
    <p class="mb-n4" style="position: relative; top: -25px; left: -50px;">
        <i class="{{i!Icon left left!}}" style="color: {{c!Tertiary color!}}"></i>
        <i class="{{i!Icon left right!}}" style="font-size: 1.5em; color: {{c!Secondary color!}}"></i>
    </p>
    <!-- Left end -->
    
    <!-- Right -->
    <p class="mb-n4" style="position: relative; top: -25px; right: -50px;">
        <i class="{{i!Icon right left!}}" style="font-size: 1.5em; color: {{c!Secondary color!}}"></i>
        <i class="{{i!Icon right right!}}" style="color: {{c!Tertiary color!}}"></i>
    </p>
    <!-- Right end -->
    
    <!--===/// FontAwesome icon decorations above avatar end ///===-->
    
<!--=========///////// Avatar /////////=========-->
    <div class="card rounded-0 mb-2" style="border: 3px solid {{c!Primary color!}}">
        <img width="150" src="
        
        {{u!Avatar link!}}
        
        "><!-- Image link above -->
        <!--Recomend using an image hosting platform such as filegarden or ImgBB if you don't already have a cropped picture to put here -->
        
        <!-- FontAwesome icon decorations right bottom corner of avatar -->
        <i class="{{i!Icon bottom right of the avatar 1!}}" style="position: absolute; bottom: 14px; right: -10px; font-size: 15px; color: {{c!Secondary color!}}"></i>
        <i class="{{i!Icon bottom right of the avatar 2!}}" style="position: absolute; bottom: -14px; right: -15px; font-size: 25px; color: {{c!Primary color!}}"></i>
    </div>
    <!--===/// Avatar end ///===-->
    
<!--=========///////// Music title and embed /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 align-items-center mb-1">
        
        <p class="mb-1" style="font-family: {{!Text font!}}">
            
            <!-- Song title and artist -->
            <b>{{!Song title!}}</b> || {{!Artist!}}</p>
        
        <span>
            <iframe class="flex-fill" style="position: absolute; margin-left: 2px; width: 20px; height: 20px; opacity: 0.000005; z-index: 1" frameborder="0" src="
            
            https://www.youtube.com/embed/{{!Video ID [the numbers/letters found after 'watch?v=' in YT links!}}
            
            "></iframe><!-- Replace "VIDEOID" above with the numbers/letter at the end of a YouTube link after "watch?v=" -->
            
            <i class="fas fa-sharp fa-circle-play fa-fw" style="font-size: 1.5em; color: {{c!Primary color!}}"></i>
        </span>
    </div>
    <!--===/// Music title and embed end ///===-->
    
<!--=========///////// Decorative progress bar /////////=========-->
    <div class="card bg-transparent border-0 rounded-0 mt-n2">
        <div class="row no-gutters align-items-center">
            <div class="col-auto">
                <p style="font-family: {{!Text font!}}">
                    
                    <!-- Starting timestamp -->
                    {{!Starting timestamp!}}
                
                </p>
            </div>
            
            <!-- Progress bar -->
            <div class="col mx-2">
                <div class="progress border-0 rounded-0 justify-content-center" style="height: 5px; width: 150px">
                    
                    <!-- Change the percentage, be sure both are equal to 100% -->
                    <div class="progress-bar" style="width: {{!Progress bar percent 1!}}%; background-color:{{c!Secondary color!}};"></div>
                    <div class="progress-bar" style="width: {{!Progress bar percent 2!}}%; background-color: {{c!Tertiary color!}};"></div>
                </div>
            </div>
            <!-- Progress barend -->
            
            <div class="col-auto">
                <p style="font-family: {{!Text font!}}">
                    
                    <!-- Ending timestamp -->
                    {{!Ending timestamp!}}
                    
                </p>
            </div>
        </div>
    </div>
    <!--===/// Decorative progress bar end ///===-->

<!--=========///////// Info box /////////=========-->
    <div class="card bg-faded rounded-0 pb-2 px-3 text-center" style="max-width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}">
        
        <!-- FontAwesome icon decorations left top corner -->
        <i class="{{i!Icon top left of the info box 1!}}" style="position: absolute; top: -14px; left: -15px; font-size: 25px; color: {{c!Primary color!}}"></i>
        <i class="{{i!Icon top left of the info box 2!}}" style="position: absolute; top: 14px; left: -10px; font-size: 15px; color: {{c!Secondary color!}}"></i>
        
        <h1 style="margin-top: 11px; font-weight: bold; color: {{c!Primary color!}}">
            
            <!-- Decorative icon -->
            <i class="{{i!Icon left of the name!}}"></i>
            
            <!-- Name -->
            {{!Name!}}
            
            <!-- Decorative icon -->
            <i class="{{i!Icon right of the name!}}"></i>
        </h1>
        
        <!-- Basic info -->
        
        <p>{{!pro/nouns!}} <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{!Age!}} <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{!Height!}}
        {{%Additonal basic info%
        <i class="{{i!Icon!}} fa-fw" style="font-size: 10px"></i> {{%Info%}} 
        %end%}}
        </p>
        
        <hr class="mt-n2" style="width: 100%; border: 1px solid {{c!Primary color!}}">
        
        <!-- Line of text -->
        <p>{{!Quote or descriptive line!}}</p>
    </div>
    <!--===/// Info box end ///===-->
    
    <div class="row no-gutters">
        
        <!--=========///////// Description box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 text-justify mt-2 col-md mr-md-1" style="height: 200px; width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}; overflow: auto; scrollbar-width: thin; scrollbar-color: {{c!Secondary color!}} rgba(0, 0, 0, 0)">
        
        <p>
           <b>Description</b><br>
           
           {{l!Description!}}
        </p>
        
        {{%D. Paragraphs%
        <p>
            {{l%New paragraph%}}
        </p>
        %end%}}
    </div>
    <!--===/// Description box ///===-->
    
    <!--=========///////// Trivia box /////////=========-->
    <div class="card bg-faded rounded-0 p-2 mt-2 text-justify col-md ml-md-1" style="height: 200px; width: 390px; font-family: {{!Text font!}}; border: 3px solid {{c!Primary color!}}; overflow: auto; scrollbar-width: thin; scrollbar-color: {{c!Secondary color!}} rgba(0, 0, 0, 0)">
        <p>
           <b>Trivia</b>
        </p>
        
        <ul>
            {{%Trivia%
            <li>{{%Trivia point%}}</li>
            %end%}}
        </ul>
    </div>
    <!--===/// Trivia box ///===-->
        
    </div>
    
    <!--=========///////// Code credit /////////=========-->
    <a class="tooltipster" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560"><i class="fas fa-eye mt-2" style="color: {{c!Primary color!}}"></i></a>
    <!--===/// Code credit end ///===-->
    
</div>

Stor8

[CHARA] Simple tricolor

Password (optional)