sick puppy

<!--

good morning! thanks for using my code.
this is bootstrap but i GUESS theres an accent in the "text-primary" i used for the play button
so if you want that changed here are your other options
text-danger , text-info , text-warning , text-success , text-secondary , text-muted , and i guess text-light & text-dark too but i wouldn't recommend those due to readability on other devices.

-->

<div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
    <div class="col-12 p-2 bg-faded">
        <div class="row no-gutters">

            <div class="col-md-5 col-sm-12 py-5">

                <!-- name card -->
                <div class="card border-0 rounded-0 p-2 mb-2 col-12">
                    <div class="justify-content-between">
                    <i class="fal fa-user text-primary mt-1"></i>
                    name surname
                    </div>
                </div>

                <!-- quote card but you can really make it anything like pronouns age species lol -->
                <div class="card border-0 rounded-0 p-2 mb-2 col-12">
                    <div class="justify-content-between">
                    <i class="fal fa-quote-left text-primary"></i>
                    quote mcquoterson
                    </div>
                </div>

                <!-- theme song card -->
                <div class="card border-0 rounded-0 p-2 col-12 mb-2">
                    <div class="row no-gutters">
                        <iframe class="flex-fill" style="height:1em;width:1em;opacity:.00001;position:absolute;margin-top:4px;z-index:1; margin-left: -1px" src="https://www.youtube.com/embed/Lnvch58MD_M" frameborder="0"></iframe>
                    <p class="justify-content-between w-100">
                    <span class="text-left"><i class="fa-regular fa-play text-primary" ></i></span>
                    <span class="text-right">sick puppy</span>
                    </p>
                    </div>
                </div>

                <!-- you can add more above this line, just know that the images will expand with each one you add -->

            </div>

            <!-- image row 2 -->

            <div class="col-md-5 col-sm-12 pl-md-2 pl-sm-0 mb-2">

                <!-- change IMGURLHERE to yr img -->
                <div class="col-12 h-50 mb-2 py-5" style="background-image:url(IMGURLHERE); background-size: cover; background-position: center"></div>
                <div class="col-12 h-50 py-5" style="background-image:url(IMGURLHERE); background-size: cover; background-position: center"></div>
            </div>

            <!-- image 3 -->

            <div class="col-md-2 col-sm-12 pl-md-2 pl-sm-0">

                <!-- change IMGURLHERE to yr img -->
                <div class="col-12 h-100 py-5" style="background-image:url(IMGURLHERE); background-size: cover; background-position: center"></div>
            </div>

        </div>

        <!-- code end dont touch the credit -->
    </div>
    <div class="col-12 p-0">
        <a href="/micro-wave" data-toggle="tooltip" title="code by micro-wave">
            <i class="fal fa-microwave"></i>
        </a>
    </div>
</div>