Flower Palace

<!--
    Flower Palace Toyhouse theme created by Circlejourney. Editing is allowed. Just remember to credit me!
-->

<!--
    CONTAINER: Change background image and font for the whole profile below.
    To make the cards a different colour: Ctrl + F " #f7ddea" and replace with your preferred colour.
-->
<div style="margin: -15px; padding: 60px 80px 80px 80px; background-image: url(https://i.imgur.com/U7YMfQo.png); background-attachment: fixed; background-size: 300px; font-family: 'Courier New'; position: relative; font-size: 9.5pt; overflow: hidden;">


    <div class="text-white" style="position: absolute; width: 100%; top: -14px; left: -20px; font-size: 40px; line-height: 1;text-align: center;">🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨</div>
    <div class="text-white" style="position: absolute; width: 100%; bottom: -14px; left: -20px; font-size: 40px; line-height: 1; text-align: center;">🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨🙨</div>


    <!-- BACKGROUND PANEL: Change the URL below to change the background panel's image. -->
    <div
        class="rounded"
        style="border: 2px solid white; position: absolute; top: 160px; left: 140px; width: calc(100% - 280px); height: calc(100% - 280px); opacity: 0.5; background-color: #dd88cc; background-image: url(https://i.imgur.com/h2BLoo5.jpg); background-size: cover;"
        ></div>



    <!-- HEADER -->
    <div id='header' class="text-uppercase d-flex align-items-center mb-lg-0 mb-3">

        <!-- PORTRAIT -->
        <div
            class="mt-lg-0 mt-4"
            style="background-image: url(https://i.imgur.com/tVLL6Ir.png); background-size: contain; padding: 30px; z-index: 2; background-repeat: no-repeat;"
        >

            <div class="rounded-circle" style="overflow: hidden; max-width: 300px;">
                <!-- Change the src below to to change the icon image. -->
                <img src="https://i.imgur.com/Df5Osbt.png">
            </div>
        </div>


        <!-- HEADER CARDS SECTION -->
        <div class="d-flex flex-column h-100"
            style="margin-left: -80px; z-index: 3;" >


            <!-- NAME HEADER: Change the hex to change the name header's background colour. -->
            <div
                class="text-center text-white rounded ml-lg-3 mt-lg-4"
                style="background-color: #914372; padding: 7px 15px 5px; font-size: 14pt; border: 1px solid white;"
            >
                <i class="fal fa-gem"></i>
                Character Name
                <i class="fal fa-gem"></i>
            </div>


            <div class="row no-gutters justify-content-end">

                <!-- QUOTE CARD -->
                <div
                    class="col-9 col-lg text-center text-dark rounded mt-3 d-flex flex-column justify-content-center mr-lg-3"
                    style="background-color:  #f7ddea; padding: 10px; max-width: 500px; border: 1px solid white; background-image: url(https://i.imgur.com/98wH6Fz.png); background-size: 150px; background-repeat: no-repeat; background-position: -40px -50px; font-size: 11pt;"
                >
                    <div>
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
                    </div>

                </div>


                <!-- VITAL INFO CARD -->
                <div
                    class="text-center text-dark rounded col-9 col-lg-6 ml-0 mr-lg-3 mr-0 mt-3 d-flex flex-column justify-content-center"
                    style="background-color:  #f7ddea; border: 1px solid white; padding: 10px;"
                >
                        <div>Age: My age</div>
                        <div>Pronouns: My pronouns</div>
                        <div>From: Where I'm from</div>
                        <div>Info: Info</div>
                </div>
            </div>
        </div>

    </div>



    <!-- MAIN AREA -->
    <div class="row">
        <div class="col mb-lg-0 mb-3 d-flex flex-column">

            <!-- BASICS CARD -->
            <div
                class="card text-dark flex-grow-1"
                style="background-color:  #f7ddea; border: 1px solid white; background-image: url(https://i.imgur.com/98wH6Fz.png); background-size: 150px; background-repeat: no-repeat; background-position: -40px -50px;"
            >
                <div class="card-block">
                    <h3 class="mb-3 text-"><i class="fal fa-gem"></i> basics.</h3>
                    <p>
                        Basics go here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
                    </p>
                </div>
            </div>
            <!-- END BASICS CARD -->

            <!-- DESIGN NOTES CARD -->
            <div class="card text-dark flex-grow-1 mt-3"
                style="background-color:  #f7ddea; border: 1px solid white;">
                <div class="card-block">

                    <h3 class="mb-3"><i class="fal fa-gem"></i> design notes.</h3>

                    <ul class="m-0">
                        <li>Design notes here.</li>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Lorem ipsum dolor sit amet</li>
                    </ul>

                </div>
            </div>
            <!-- END DESIGN NOTES CARD -->


            <!-- CARD TEMPLATE: Copy this part to add more cards to the left column of the main area. -->
            <div class="card text-dark flex-grow-1 mt-3"
                style="background-color:  #f7ddea; border: 1px solid white;">
                <div class="card-block">

                    <h3 class="mb-3"><i class="fal fa-gem"></i> header.</h3>

                    <p>Content goes here.</p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
                    </p>

                </div>
            </div>
            <!-- END CARD TEMPLATE -->

        </div>


        <!-- SIDEBAR -->
        <div class="col-12 col-lg-3">
            <div class="card h-100" style="background-color:  #f7ddea; border: 1px solid white;">

                <!-- PAGEDOLL: Delete this section to remove the pagedoll. -->
                <div class="text-center">
                    <img src="https://i.imgur.com/2kQI4xm.png" style="height: 180px; margin-top: -20px;">
                </div>
                <!-- END PAGEDOLL -->

                <div class="card-block text-dark text-center d-flex flex-column justify-content-center">

                    <!-- STATS -->
                    <div>Stability</div>
                    <div class="progress mb-1 bg-white">
                        <div class="progress-bar" style="width: 40%; background-color: #ff748c;">
                        </div>
                    </div>

                    <div>Empathy</div>
                    <div class="progress mb-1 bg-white">
                        <div class="progress-bar" style="width: 30%; background-color: #ff748c;">
                        </div>
                    </div>

                    <div>Initiative</div>
                    <div class="progress mb-1 bg-white">
                        <div class="progress-bar" style="width: 90%; background-color: #ff748c;">
                        </div>
                    </div>

                    <div>Sincerity</div>
                    <div class="progress mb-1 bg-white">
                        <div class="progress-bar" style="width: 50%; background-color: #ff748c;">
                        </div>
                    </div>

                    <div>Charisma</div>
                    <div class="progress mb-1 bg-white">
                        <div class="progress-bar" style="width: 80%; background-color: #ff748c;">
                        </div>
                    </div>
                    <!-- END STATS -->


                    <!-- ADDITIONAL NOTES -->
                    <div>
                        <div class="my-4">― 🙛❀🙙 ―</div>

                        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.</div>

                        <div class="my-4">― 🙛❀🙙 ―</div>
                    </div>
                    <!-- END ADDITIONAL NOTES -->

                    <div style="font-size: 7pt; position: absolute; top: 100%; right: 5px; margin-top: 5px; text-shadow: 0 0 5px black;"><a class="text-white" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a></div>

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