Another Life - Example

<!--

    ANOTHER LIFE
    by meromercury

    accent color: primary
    ctrl + f to replace

    created and released 5/5/24

-->

<div class="align-items-center" style="font-family:tahoma; font-size:12px;">
    <div class="container col-sm-6 p-0"><div class="card" style="border-width:4px; box-shadow: 2px 2px 4px rgba(0,0,0,0.5)">

        <div class="card-header font-weight-bold text-primary justify-content-between p-0" style="font-size:15px;">
            <div class="p-1"><i class="fa-solid fa-user fa-sm mx-1"></i>

            <!----- USERNAME ----->
            USER
            </div>
            <div><a href="https://toyhou.se/meromercury" class="text-primary" target=_blank><div class="btn pull-right p-1" style="width:30px" data-toggle="tooltip" title="made by mero">
            <i class="fa-solid fa-code fa-sm"></i>
            </div></a></div>
        </div>

    <!--

    ABOUT THE IMAGE

    In the event you wanted to make the image wider too, i'll explain that first:

    Currently the inside of the main box is formatted into a row containing two columns, A and B.
    B, the right column with the text inside, is size 9 (col-9) meanwhile A, the left column with an image inside, is a plain column ("col") and will adjust to match the size on the right. Bootstrap columns are sized from 1 to 12, so 12 - 9 = 3, meaning the left column is currently size 3.
    If you, say, wanted to make them equal, you'd need to change column B from "col-9" to "col-6" and column A would grow to match. Or maybe you want the image a big bigger but not much, so you could change "col-9" to "col-8".
    You can find these two columns marked below.

    Another thing (i think you know this already): if your image is smaller than the box, it will be stretched to match. if you'd like to keep it at its original size, you can remove the entire "style" tag below the image source, which is this:
            style="height:100%; width:100%"

    To center a smaller image, this is a two-step process (I have done these already in the code below to demonstrate):
    - add "align-items-center" to the left column line, like this:
            <div class="col p-1 align-items-center">

    - add " class="mx-auto" " to the image tag between the brackets, like this:
            <img src="SOURCE" class="mx-auto">

    I know that's a lot. I wanted to be thorough so you can adjust it to your liking. i hope that helps you somehow? and again you can ask if you have more questions or if i misinterpreted what you meant :D

    -->
        <div class="row no-gutters">
            <!--- LEFT COLUMN A --->
            <div class="col p-1">

                <!-------
                IMAGE
                ------->
                <img src="
                https://i.imgur.com/WjvSC0q.jpeg
                " class="mx-auto" style="height:100%; width: 100%">

                <!---- end image ---->
            </div>

            <!--- RIGHT COLUMN B --->
            <div class="col-9 text-muted">
                <div class="p-1 text-center" style="line-height:20px; font-size:11px; letter-spacing:0.04rem; height:30px; overflow:hidden;">

                <!-------
                TEXT BOX 1:
                Use this for pronouns, age, pride flags, or whatever you want!

                You can technically make this box bigger too by adjusting the "height" above.
                ------->

                    pro/nouns
                    <span class="mx-2">•</span>
                    age
                    <span class="mx-2">•</span>
                    timezone

                <!----- END TEXT BOX 1 ----->
                </div>

                <hr class="mt-0 mb-1">

                <!-----------

                Below you can change the height to whatever you want, with (obviously) "height:_px". Default is 90.

                If you don't care about making the text box scroll, you can remove the "height:_px" line altogether, and then the container will grow to match the amount of text inside of the text box. (That also means the image will stretch to match, but you can change that too as i've mentioned above.)

                -------->

                <div class="p-1 font-italic text-center table-responsive" style="height:180px; letter-spacing:0.04rem">

                   <p>Electric Dreams is a 1984 science fiction romantic comedy film directed by Steve Barron (in his feature film directorial debut) and written by Rusty Lemorande. The film is set in San Francisco and depicts a love triangle among a man, a woman, and a personal computer. It stars Lenny Von Dohlen, Virginia Madsen, Maxwell Caulfield, and the voice of Bud Cort. </p>

                   <p>The film was released in the United States in New York and Los Angeles on July 20, 1984, and in the United Kingdom in London on August 17, 1984. It received mixed reviews from critics.</p>

                   <p>The soundtrack features music from prominent popular musicians of the time, being among the movies of this generation that actively explored the commercial link between a movie and its soundtrack. The soundtrack album Electric Dreams was re-issued on CD in 1998. The movie features music from Giorgio Moroder, Culture Club, Jeff Lynne (Electric Light Orchestra), and Heaven 17. During filming, Barron said, "The fact that there's so much music has to do with the success of Flashdance. This film isn't Flashdance 2. Flashdance worked because of the dancing. It didn't have a story. Electric Dreams does."</p>


                <!----- END TEXT BOX 2 ----->
                </div>
            </div>
        </div>
        <div class="card-footer p-0 text-muted align-items-center justify-content-between" style="display:flex">
        <div class="align-items-center">
            <div class="melody-embed btn text-primary p-1">
                    <iframe frameborder="0" style="z-index:999;height:20px;width:35px;opacity:0.0001;position:absolute;"

                      src="https://www.youtube.com/embed/_F9IO9Plldc">
                      <!-------
                      MUSIC PLAYER TUTORIAL

                      1. in the link to your youtube video, copy everything after watch?v=
                      2. replace the jumble of letters after /embed/ with what you just copied

                      remember to keep the "QUOTATION MARKS" around the entire link or else it could break.
                      ------->
                     </iframe>
                <i class="fa-solid fa-play-pause mx-2"></i>
              </div>
            <span class="text-primary">Now Playing:</span></div>

            <div class="fa-fade font-italic pull-right p-1 mr-1" style="letter-spacing:0.04rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5)">
            <!----- SONG TITLE ----->
            BROWSER HISTORY . . . Graham Kartna
            </div>
        </div>
    </div>
</div></div>