Theme for Bluumei (header version)

<!--
    BLUUMEI CUSTOM FOR CIRCLEJOURNEY
    Header version
-->

<!-- Change the url in the url() brackets to change the page background -->
<div class="container p-2 p-lg-4" style="width: auto; margin: -15px;">
    <!-- Change the url in the url() brackets to change the header background -->
    <div class="card justify-content-center m-2 m-lg-4 mb-2" style="background-image: url(https://i.imgur.com/ZgILXME.png); height: 150px;">
        <!-- Name header. Change the color property and the text shadow property below to adjust the look of the name header. -->
        <div class="display-1 text-center p-3 w-auto m-auto" style="line-height: 1em; color: black; text-shadow: 0 0 5px #888;">
            Name
        </div>
    </div>

    <div class="card p-3 m-2 m-lg-4" style="background-color: #E8D8EE">
        <div class="row no-gutters">
            <div class="col-12 col-lg-3 text-dark pr-2 pb-4 h-100" style="font-size: 9pt;">

                <div class="w-100 text-center px-4 p-3">
                    <!-- Change the URL in the src property to change the icon -->
                    <img class="rounded-circle img-thumbnail" src="https://i.imgur.com/XPmUthR.png">
                </div>

                <div style="line-height: 1.6em;">
                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Name</div>
                        <div class="col">My name</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Age</div>
                        <div class="col">My age</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Pronouns</div>
                        <div class="col">My pronouns</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Orientation</div>
                        <div class="col">My orientation</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Race/species</div>
                        <div class="col">My race/species</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Birth date</div>
                        <div class="col">My date of birth</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Height</div>
                        <div class="col">My height</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Build</div>
                        <div class="col">My build</div>
                    </div>

                    <div class="row">
                        <div class="col text-right text-uppercase font-weight-bold">Alignment</div>
                        <div class="col">My alignment</div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-9 d-flex flex-column">
                <ul class="nav nav-tabs align-items-end flex-wrap flex-lg-nowrap" id="tabs" style="font-size: 20pt;">
                    <li class="nav-item order-1 order-lg-0"><a class="nav-link active" href="#basics" data-toggle="tab"><i class="fa fa-user"></i></a></li>
                    <li class="nav-item order-2 order-lg-1"><a class="nav-link" href="#playlist" data-toggle="tab"><i class="fa fa-music"></i></a></li>
                    <li class="nav-item order-3 order-lg-2"><a class="nav-link" href="#design" data-toggle="tab"><i class="fa fa-palette"></i></a></li>
                    <li class="card mx-3 mb-3 flex-grow-1 w-100 w-lg-auto justify-content-center order-0 order-lg-3">
                        <div class="text-center p-1" style="font-size: 12pt;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, bla bla bla"</div>
                    </li>
                </ul>
                <div class="tab-content flex-grow-1" style="height: 400px;">
                    <div class="tab-pane fade show active bg-faded h-100 table-responsive p-4" id="basics">
                        <div class="display-4 text-center text-muted">adjective &bull; adjective &bull; adjective</div>

                        <br>

                        <h2 class="text-muted pr-3 py-2 m-0" style="float: left;">About</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada erat nisi, fermentum auctor risus tempus vel. Praesent mattis tellus risus, et dictum urna bibendum porttitor. In eget tortor turpis. Curabitur ante elit, laoreet ut magna vel, iaculis ornare tortor. Sed pulvinar tortor a laoreet mattis. Aenean pretium leo et auctor tincidunt. Nam facilisis tellus odio, sit amet sollicitudin mi bibendum eu. Aliquam eu risus ultrices ante volutpat cursus vitae a ante. Curabitur suscipit lectus orci, nec condimentum erat eleifend nec. Aenean blandit elementum est, in aliquam purus consequat vel. Nulla luctus sollicitudin enim.
                        </p>

                        <hr>

                        <div class="row justify-content-center">
                            <div class="col-12 col-md-6 col-lg-4 mb-4 order-1 order-lg-0">
                                <h2 class="text-muted pl-2">Likes</h2>
                                <hr>
                                <p><i class="fa fa-heart"></i> Like 1</p>
                                <p><i class="fa fa-heart"></i> Like 2</p>
                                <p><i class="fa fa-heart"></i> Like 3</p>
                            </div>
                            <div class="col-12 col-md-6 col-lg-4 mb-4 order-2 order-lg-1">
                                <h2 class="text-muted pl-2">Dislikes</h2>
                                <hr>
                                <p><i class="fa fa-times"></i> Dislike 1</p>
                                <p><i class="fa fa-times"></i> Dislike 2</p>
                                <p><i class="fa fa-times"></i> Dislike 3</p>
                            </div>
                            <div class="col-12 col-lg-3 text-center order-0 order-lg-2 mb-4">
                                <img src="https://via.placeholder.com/200x400">
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade bg-faded h-100 table-responsive p-4" id="playlist">
                        <h2 class="display-4 text-muted mb-4">Playlist</h2>
                        <div class="text-muted" id="playlist-items" style="font-size: 18pt;">
                            <div class="row">
                                <div class="col-2"><i class="fa fa-play"></i></div>
                                <div class="col-10 text-right">
                                    <a href="LINK" target="_blank">Artist - Title</a>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-2"><i class="fa fa-play"></i></div>
                                <div class="col-10 text-right">
                                    <a href="LINK" target="_blank">Artist - Lorem Ipsum Dolor Sit Amet</a>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="row">
                            <div class="col-4">
                                <img src="https://via.placeholder.com/300">
                            </div>

                            <div class="col-4">
                                <img  src="https://via.placeholder.com/300">
                            </div>

                            <div class="col-4">
                                <img  src="https://via.placeholder.com/300">
                            </div>
                        </div>

                    </div>

                    <div class="tab-pane fade bg-faded h-100 table-responsive p-4" id="design">
                        <h2 class="display-4 text-muted mb-4">Design notes</h2>
                        <div class="ml-2">
                            <p>
                                <i class="fa fa-feather"></i> Note 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                            <p>
                                <i class="fa fa-feather"></i> Note 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                            <p>
                                <i class="fa fa-feather"></i> Note 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                        </div>
                        <hr>

                        <h2 class="display-4 text-muted mb-4">Trivia</h2>

                        <div class="ml-2">
                            <p>
                                <i class="fa fa-feather"></i> Trivia 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                            <p>
                                <i class="fa fa-feather"></i> Trivia 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                            <p>
                                <i class="fa fa-feather"></i> Trivia 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a style="position: absolute; bottom: 5px; right: 5px; font-size: 9pt; opacity: 0.8" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580" target="_blank">
        theme by circlejourney <i class="fa fa-code"></i>
    </a>
</div>