Social Battery

    <!--

    Social Battery - Code snippet by Circlejourney.
    Inspired by https://www.ebay.com.au/itm/314612604090

-->

<div class="d-flex align-items-center">

    <!--
        To force minimum size, remove the `flex-grow-1` property below.
    -->
    <div id="BATTERY-MAIN-SEGMENT" class="bg-dark flex-row justify-content-center align-items-center px-4 pt-4 pb-5" style="border-radius: 20px; border: 5px outset #ecda93; z-index: 2; position: relative;">

        <div id="INSIDE-WRAPPER">
            <h1 class="text-uppercase text-center m-0" style="color: #ecda93; font-size: 30pt; font-weight: 300">My social battery</h1>

            <!--
                Battery minimum width is based on font size of the smileys, so change the `font-size` property below to make it fit in smaller screens.
            -->
            <div id="COLOUR-ROW" class="card-group text-white no-gutters flex-nowrap" style="border: 5px outset #e5d184; border-radius: 20px; overflow: hidden; text-shadow: 0 0 5px black; font-size: calc(1.2vw + 7pt);">

                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93; background-color: #dc3545">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-frown-open"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93; background-color: #fd5814">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-frown"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93;  background-color: #fd7e14">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-frown"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93;  background-color: #e6b00e;">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-meh"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93; background-color: #84cd2a;">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-smile"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; border-right: 5px outset #ecda93; background-color: #34bc1f;">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-smile"></i>
                    </div>
                </div>
                <div class="card" style="border-radius: 0; background-color: #198754;">
                    <div class="card-block" style="padding-bottom: 50px; color: #ecda93;">
                        <i class="far fa-smile-beam"></i>
                    </div>
                </div>
            </div>


            <div class="card" style="border-radius: 20px; border: 5px outset #ecda93; margin-top: -40px; z-index: 3; position: relative; width: 90%; margin-left: 5%; height: 20px;">

                <!-- Adjust `left:` value to change battery level
                                  0%; # Level 1 (red)
                                  18%; # Level 2
                                  34%; # Level 3
                                  50%; # Level 4
                                  66%; # Level 5
                                  82%; # Level 6
                                  100%; # Level 7 (green) -->
                <div style="left: 34%;
                           position: absolute;
                           top: -150%;
                           font-size: 20pt;
                           color: #ecda93;
                           text-shadow: 0 0 5px black;">
                    <i style="margin-left: -50%;" class="fas fa-zap"></i>
                </div>
            </div>


        </div>
    </div>

    <div id="BATTERY-CONTACT" class="bg-dark" style="border-top-right-radius: 20px; border-bottom-right-radius: 20px; border: 5px outset #ecda93; height: 120px; margin-left:-5px; padding-right: 40px;"></div>
</div>