network profile - light

<div class="d-flex justify-content-center m-5" style="max-height: 500px; min-height: 500px; color: black;">
    <div style="border-radius: 20px; width: 250px; border: 5px solid black; background: #EAE9D7;"> <!-- to edit "phone case" colour, change 'background: #' // "background: #" to edit phone background-->
        <div class="flex-row">
            <small class="w-25 ml-2">6:66am</small>
            <div class="w-50 rounded-bottom text-center" style="height: 1.2em; background: black; "> <!-- to edit "phone case" colour, change 'background: #'-->
            </div>
            <small class="w-25 mr-2 text-right" style="color: black; font-size: 0.9em"> <i class="fas fa-wifi"></i> <i class="fas fa-battery-three-quarters"></i> <i class="fas fa-bell"></i> </small>
        </div>

        <div style="background: url(###); background-size: cover;">
             <div class="flex-row" style="background:rgba(225,225,225,0.5);"><i class="fas fa-chevron-left m-1"></i>
                <div class="flex-fill text-center text-uppercase">
                    <b>username</b>
                </div><i class="fas fa-ellipsis-h m-1"></i>
             </div>
             <div class="flex-row">
                <div class="p-2 w-100 justify-content-center" style="line-height: 15px;">
                    <img src="###"  class="rounded-circle" style="object-fit: cover; width: 150px; height: 150px;" >
                </div>
             </div>
            <p class="text-center font-italic font-weight-bold" style="background:rgba(225,225,225,0.5);">name . gender . age</p>
        </div>

        <div style="overflow-y: auto; max-height: 260px;">
            <div class="justify-content-around">
                                            <!-- the colour below is default theme, but can be edited by changing the background: # -->
                <a class="btn btn-sm btn-primary flex-fill m-1 font-weight-bold" href="#" role="button" style="background: #;">follow</a> <!-- this can be used as a link to another tab or profile -->
            </div>

            <div class="text-center text-break p-1" style="line-height: 1.2">
                <small>some information about your character here. will expand to your heart's desire</small>
            </div>

            <div class="flex-row m-1" style="overflow-x: auto; max-height: 100px;"> <!-- more images can be added for a horizontal scroll. USE SQUARE IMAGES FOR BEST EFFECT-->
                <img src="###" class="m-1 rounded-circle" style="max-width: 70px; object-fit: cover;">
                <img src="###" class="m-1 rounded-circle" style="max-width: 70px; object-fit: cover;">
                <img src="###" class="m-1 rounded-circle" style="max-width: 70px; object-fit: cover;">
                <!-- add more images by copying code below -->
                <!-- <img src="###" class="m-1 rounded-circle" style="width: 70px; object-fit: cover;"> -->
            </div>

            <div class="w-100" style="max-height: 370px;">
                <div class="flex-row">
                    <div class="flex-column text-break w-50">
                        <!-- if you want to edit the below fields, visit fontawesome.com to replace the icons. -->
                        <div style="background: #D1D0CA"><i class="fas fa-heart ml-1"></i> orientation </div>
                        <div><i class="fas fa-dove ml-1"></i> race / species</div>
                        <div style="background: #D1D0CA"><i class="fas fa-star ml-1"></i> role</div>
                        <!-- add another field by copying the below code above this line - remember to add a fontawesome icon! -->
                        <!-- <div> content </div> -->
                    </div>
                    <div class="flex-column w-50">
                        <!-- if you want to edit the below fields, visit fontawesome.com to replace the icons. -->
                        <div style="background: #D1D0CA"><i class="fas fa-moon"></i> MBTI / zodiac </div>
                        <div><i class="fas fa-tags"></i> value</div>
                        <div style="background: #D1D0CA"><b><a href="#" style="color: #"><i class="fas fa-music"></i> theme</a></b></div> <!-- to edit link colour, change "color: #" on this line-->
                        <!-- add another field by copying the below code above this line - remember to add a fontawesome icon ! -->
                        <!-- <div> content </div> -->
                    </div>
                </div>
            </div>

            <!-- extra info start -->
            <div class="text-center text-break p-1" style="line-height: 1.2">
                <small>optional extra content</small>
            </div>
            <!-- extra info end -->
            <!-- if you don't want the extra info, delete between extra start & end -->

        </div>
    </div>
</div>

<div class="flex-row justify-content-center"><a href="https://toyhou.se/stainedjam/characters/folder:1685088" class="mt-2"><i class="fas fa-lemon p-3 m-1 rounded-circle" style="color: #ffff00; background-color: rgba(0,0,0,0.7);"></i></a>  </div>