Profile Card (Grey) 1.1

<div class="container mt-5">


    <!-- Profile Picture and Bio Section -->
    <div class="card-bg">
        <div class="row">

            <!-- Profile Picture -->
            <div class="col-md-4">
                <img src="https://i.imgur.com/3vGENUD.jpeg" alt="Profile Picture" style="border-radius: 50%;">
            </div>
            <div class="col-md-8 d-flex flex-column align-items-center">

                <!-- Name -->
                <div class="row mb-2 text-center">
                    <div class="col-md-6">
                        <span class="badge col-grey" style="font-size: 1.1rem;">Name</span>
                    </div>
                    <!-- Pronouns -->
                    <div class="col-md-6">
                        <span class="badge col-grey" style="font-size: 1.1rem;">Pronouns</span>
                    </div>
                </div>
                <!-- Bio Text -->
                <p class="text-center">Bawk bawk bawk! bawk? bawk... Bawk bawk?! Bawk bawk bawk!! Bawk? Ba-bawk? .... bawk.... bawk.... Bawk bawk cluck bawk. Cluck!</p>
            </div>
        </div>
    </div>


    <!-- Connections Section -->
    <div class="card-bg mt-4">
        <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Connections</span> <br>
        <!-- Partner Info -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem;">Partner</span>
            </div>
            <div class="col-md-8 col-12">
                <p><a href="PARTNER URL HERE">[Partner Name]</a></p>
            </div>
        </div>


        <!-- Friend 1 Info -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem;">Friend 1</span>
            </div>
            <div class="col-md-8 col-12">
                <p><a href="FRIEND 1 URL HERE">[Friend 1 Name]</a></p>
            </div>
        </div>


        <!-- Friend 2 Info -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem;">Friend 2</span>
            </div>
            <div class="col-md-8 col-12">
                <p><a href="FRIEND 2 URL HERE">[Friend 2 Name]</a></p>
            </div>
        </div>
    </div>


    <!-- Likes Section -->
    <div class="card-bg mt-4">
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Likes</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Likes]</p>
            </div>
        </div>


        <!-- Dislikes Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Dislikes</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Dislikes]</p>
            </div>
        </div>


        <!-- Personality Traits Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Personality Traits</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Personality Traits]</p>
            </div>
        </div>


        <!-- Favorite Color Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Favorite Color</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Favorite Color]</p>
            </div>
        </div>


        <!-- Favorite Food Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Favorite Food</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Favorite Food]</p>
            </div>
        </div>


        <!-- Hobbies Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Hobbies</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Hobbies]</p>
            </div>
        </div>


        <!-- Job Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Job</span>
            </div>
            <div class="col-md-8 col-12">
                <p>[Job]</p>
            </div>
        </div>

        <!-- Theme Song Section -->
        <div class="row mb-2">
            <div class="col-md-4 col-12">
                <span class="badge col-grey w-100" style="font-size: 1.1rem; background-color: chartreuse;">Theme Song</span>
            </div>
            <div class="col-md-8 col-12">
                <p><a href="THEME SONG URL HERE">[Theme Song Title]</a></p>
            </div>
        </div>
    </div>
        


    <!-- Gallery Section -->
    <div class="card-bg mt-4">
        <span class="badge col-grey" style="font-size: 1.1rem;">Gallery</span> <br>
        <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;">
            <!-- Container for images -->
            <!-- Image 1 -->
            <div>
                <img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
            </div>


            <!-- Image 2 -->
            <div>
                <img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
            </div>


            <!-- Image 3 -->
            <div>
                <img src="https://i.imgur.com/X5T5ryY.jpeg" style="border-radius: 10%; max-height: 180px; width: auto;">
            </div>
        </div>
    </div>
    <br>
</div>