Cards Nova

<!--
    Cards Nova by Circlejourney. See my codes here:
    https://toyhou.se/orchestrator/characters/folder:524040

    A redesign of my first Toyhouse theme, Cards:
    https://toyhou.se/2626884.-profile-cards

    For Coders Quarters' November 2023 challenge:
    https://toyhou.se/~world/82691.coders-quarters/page/104542.november-challenge

    Placeholder theme colors (use Ctrl + F to replace):
        Background: #ddd
        Light grey: #888
        Medium grey: #666
        Dark grey: #444
        Links: skyblue
-->

<div class="row no-gutters p-2" style="background-color: #ddd;">

    <!-- Left column -->
    <div class="col col-md-4">
        <div class="flex-column card border-0 h-100">

            <div id="TITLE-ROW" class="card-header d-flex p-0 border-0" style="overflow: hidden;">

                <!-- Character avatar, change src to update -->
                <img src="https://i.imgur.com/YyO6Iwa.png" style="width: 120px; object-fit: cover;">

                <!-- Character name banner, change background-image url to update -->
                <div class="flex-grow-1 d-flex align-items-center justify-content-center text-center"
                    style="background-image:url(https://i.postimg.cc/65Sp0CQn/fabric.jpg); font-family: Georgia, serif; background-color:#333;font-size:24pt;color:#FFFFFF; word-break: break-word;">
                    Character's Name
                </div>
            </div>

            <div id="SIDEBAR-CONTENT">
                <div id="INFO-LIST" class="p-2 text-white" style="font-size: 9.5pt;">
                    <div class="row no-gutters m-1">
                        <div class="col-4 text-right p-1 flex-column justify-content-center text-uppercase" style="background-color:#888;"> Also known as </div>
                        <div class="col-8 p-1" style="background-color:#666;"> Character's aliases, Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
                    </div>
                    <div class="row no-gutters m-1">
                        <div class="col-4 text-right p-1 flex-column justify-content-center text-uppercase" style="background-color:#888; "> Age </div>
                        <div class="col-8 p-1" style="background-color:#666;"> Character's age here </div>
                    </div>
                    <div class="row no-gutters m-1">
                        <div class="col-4 text-right p-1 flex-column justify-content-center text-uppercase" style="background-color:#888; "> Pronouns </div>
                        <div class="col-8 p-1" style="background-color:#666;"> Character's pronouns here </div>
                    </div>
                    <div class="row no-gutters m-1">
                        <div class="col-4 text-right p-1 flex-column justify-content-center text-uppercase" style="background-color:#888; "> Detail </div>
                        <div class="col-8 p-1" style="background-color:#666;"> Insert additional detail </div>
                    </div>
                </div>
            </div>

            <div class="p-2 text-uppercase text-white text-center" style="background-color: #444; letter-spacing: 1px;">
                Adjective &bull; Adjective &bull; Adjective
            </div>

            <!-- Big image, change src and href below to update. you can use this for a character sheet, a nice art piece or something else. -->
            <a href="https://i.postimg.cc/nLN64sq2/image.png" target="_blank" class="flex-grow-1">
                <img class="h-100 w-100" style="object-fit: cover;" src="https://i.postimg.cc/nLN64sq2/image.png">
            </a>


            <div class="text-center text-uppercase card-footer p-2 text-white" style="letter-spacing: 1px; background-color: #444;"> Cards Nova by <a style="color: skyblue;" href="/orchestrator">Circlejourney</a>
            </div>

        </div>
    </div>

    <!-- Main column -->
    <div class="col col-md-8 flex-column pl-md-2 pl-0 mt-md-0 mt-2">

        <!-- Alert -->
        <div class="alert text-center" style="background-color: #eee; color: black;"> Put additional notes/warnings about the character here if you like. You can also delete this div if you have nothing to include.
        </div>


        <!-- Tab navigation -->
        <div>
            <ul class="nav nav-tabs text-center border-0">
                <li class="nav-item flex-grow-1">
                    <a class="nav-link active" data-toggle="tab" href="#personality" style="border:none;">Personality</a>
                </li>
                <li class="nav-item flex-grow-1">
                    <a class="nav-link" data-toggle="tab" href="#story" style="border:none;">Story</a>
                </li>
                <li class="nav-item flex-grow-1">
                    <a class="nav-link" data-toggle="tab" href="#relationships" style="border:none;">Relationships</a>
                </li>
                <li class="nav-item flex-grow-1">
                    <a class="nav-link" data-toggle="tab" href="#facts" style="border:none;">Facts</a>
                </li>
            </ul>
        </div>


        <!-- Tab content -->
        <div class="tab-content card border-0 p-2" style="height: 500px; overflow-y: auto; border-top-left-radius: 0; border-top-right-radius: 0;">

            <!-- Personality tab -->
            <div id="personality" class="tab-pane show active">

                <div class="text-uppercase text-white p-1" style="font-size:14pt;background-color:#444;">
                    Personality
                </div>

                <div class="p-2">

                    <!-- Floating image, change src to update -->
                    <img class="ml-2" src="https://i.postimg.cc/fLgMngNW/image.png" style="float: right; width: 180px;">

                    <p class="font-weight-bold"> Describe the character's personality here. I tend to think of it as a place to describe first impressions, but feel free to change the header to something like "summary" if you prefer. </p>

                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices. </p>

                    <p> Curabitur interdum diam justo. Nulla lacinia elementum enim, at molestie nisi accumsan eget. Fusce at sem viverra, volutpat mauris sit amet, imperdiet diam. Aenean metus ante, consequat eu enim ut, tristique placerat magna. Vestibulum nec tempus nibh. </p>


                    <div class="rounded row mx-0 my-2 bg-faded">
                        <div class="col-6 p-2">
                            <div class="text-center text-uppercase font-weight-bold">Likes</div>
                            <i class="fa fa-check"></i> Like <br>
                            <i class="fa fa-check"></i> Lorem ipsum dolor sit amet <br>
                            <i class="fa fa-check"></i> Like
                        </div>
                        <div class="col-6 p-2">
                            <div class="text-center text-uppercase font-weight-bold">Dislikes</div>
                            <i class="fa fa-times"></i> Lorem ipsum dolor sit amet<br>
                            <i class="fa fa-times"></i> Dislike <br>
                            <i class="fa fa-times"></i> Dislike
                        </div>
                    </div>

                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices. </p>

                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices. </p>
                </div>
            </div>

            <!-- Story tab -->
            <div id="story" class="tab-pane h-100">

                <div class="text-uppercase text-white p-1" style="font-size:14pt;background-color:#444;">
                    Story
                </div>

                <div class="p-2">
                    <p> A tab for a more detailed description of the character and their past. As always, feel free to change the header. </p>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie eros nec iaculis tristique. Integer malesuada scelerisque elit, nec viverra leo ultricies sed. Morbi eget vehicula dui, volutpat consectetur metus. Mauris non tincidunt sapien. Vestibulum metus nisl, facilisis eget sollicitudin elementum, accumsan nec sapien. Suspendisse porttitor nisi sit amet nibh vehicula ultrices. </p>
                    <p> Curabitur interdum diam justo. Nulla lacinia elementum enim, at molestie nisi accumsan eget. Fusce at sem viverra, volutpat mauris sit amet, imperdiet diam. Aenean metus ante, consequat eu enim ut, tristique placerat magna. Vestibulum nec tempus nibh. </p>
                    <hr class="w-50 my-3">
                    <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>

            <!-- Relationships tab -->
            <div id="relationships" class="tab-pane h-100">

                <div class="text-uppercase text-white p-1" style="font-size:14pt;background-color:#444;">
                    Relationships
                </div>

                <div id="RELATIONSHIP-TABLE" class="text-white">
                    <div class="row no-gutters my-1">
                        <div class="p-2 col-6 col-md-3 text-center" style="background-color:#888;">

                            <!-- Relationship link, change href to update -->
                            <a href="#LINK" style="color: skyblue;">

                                <!-- Relationship avatar image, change src to update -->
                                <img src="https://i.imgur.com/YyO6Iwa.png"> Person 1
                            </a>

                        </div>
                        <div class="p-2 col-6 col-md-9 flex-column justify-content-center" style="background-color:#666;">
                            Description of the relationship. 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.
                        </div>
                    </div>
                    <div class="row no-gutters my-1">
                        <div class="p-2 col-6 col-md-3 text-center" style="background-color:#888;">

                            <!-- Relationship link, change href to update -->
                            <a href="#LINK" style="color: skyblue;">

                                <!-- Relationship avatar image, change src to update -->
                                <img src="https://i.imgur.com/YyO6Iwa.png"> Person 2
                            </a>

                        </div>
                        <div class="p-2 col-6 col-md-9 flex-column justify-content-center" style="background-color:#666;">
                            Description of the relationship.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Facts tab -->
            <div id="facts" class="tab-pane h-100">

                <div class="text-uppercase text-white p-1" style="font-size:14pt;background-color:#444;">
                    Facts
                </div>

                <div class="p-2">
                    <ul style="margin:5px 0;">
                        <li>Trivia 1. 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.</li>
                        <li>Trivia 2. </li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- Padding bar, change background-image url to update -->
        <div class="alert flex-grow-1 mt-2 mb-0" style="background-color: #444; background-image: url(https://i.postimg.cc/65Sp0CQn/fabric.jpg);"></div>
    </div>
</div>