01. liminal [revamp]

<!--

    [ LIMINAL ]

    turn OFF WYSIWYG
    turn ON code editor

    do NOT remove credit

    RESOURCES :
    - free live code editor : https://th.circlejourney.net/
    - coding help forum     : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
    - how to edit icons     : https://toyhou.se/3536712.
    - coding resources      : https://toyhou.se/Elithian/characters/folder:881832

    COLORS :
    - accent : #aa0012
    - text   : #c0c0c0
    - backgrounds : rgba(0,0,0,0.5)

    CORNERS :
    - the bigger the px, the rounder the corners
    - border-radius: 0px

    use ctrl+f to quickly change colors

-->

<div class="mx-auto" style="max-width: 800px; color: #c0c0c0;">
    <!-- background

    if you want a solid image:
    - replace repeat with no-repeat
    - add "background-size: cover;" to the style section
    - remove "fixed"
    -->
    <div class="p-4" style="border: 2px solid #aa0012; border-radius: 0px; background: url(

    https://cdn.discordapp.com/attachments/700436369570267229/853716954014547978/spiration_dark.png

    ) repeat center fixed;">
        <div class="row no-gutters">

            <!-- pagedoll -->
            <div class="col-lg-4 order-lg-1 p-2">

                <!-- replace url with your own -->
                <img src="

                https://cdn.discordapp.com/attachments/757216205219037265/853776149263941632/image0.png

                " class="h-100" style="object-fit: cover;">
            </div>
            <!-- end pagedoll -->

            <!-- left side -->
            <div class="col p-2">
                <div class="flex-column">

                    <!-- name -->
                    <div class="p-2 mb-3 text-center text-uppercase font-weight-bold" style="background: rgba(0,0,0,0.5); border: 2px solid #aa0012; border-radius: 0px; font-size: 2rem; color: #aa0012;">

                        Name Surname

                    </div>
                    <!-- end name -->

                    <!-- tags -->
                    <div class="mb-3">
                        <div class="row no-gutters justify-content-center">

                            <!-- tag -->
                            <div class="col-auto p-2 text-center text-uppercase font-weight-bold m-1" style="background: #aa0012; color: #c0c0c0; border-radius: 0px">
                                Tag
                            </div>
                            <!-- tag -->

                            <!-- tag -->
                            <div class="col-auto p-2 text-center text-uppercase font-weight-bold m-1" style="background: #aa0012; color: #c0c0c0; border-radius: 0px">
                                A longer tag
                            </div>
                            <!-- tag -->

                            <!-- tag -->
                            <div class="col-auto p-2 text-center text-uppercase font-weight-bold m-1" style="background: #aa0012; color: #c0c0c0; border-radius: 0px">
                                Tag
                            </div>
                            <!-- tag -->

                            <!-- tag -->
                            <div class="col-auto p-2 text-center text-uppercase font-weight-bold m-1" style="background: #aa0012; color: #c0c0c0; border-radius: 0px">
                                An even longer tag
                            </div>
                            <!-- tag -->

                        </div>
                    </div>
                    <!-- end tags -->

                    <!-- about -->
                    <div class="p-3 text-justify mb-3" style="background: rgba(0,0,0,0.5); border: 2px solid #aa0012; border-radius: 0px; max-height: 200px; overflow: auto;">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis eros sit amet lorem malesuada dictum ac et odio. Etiam sit amet sapien in felis posuere commodo nec eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere urna tortor, nec laoreet leo posuere congue. Pellentesque tristique, arcu ut tempor scelerisque, orci ex bibendum magna, in vehicula odio ex non augue. Aenean euismod metus et suscipit tempor.
                        </p>

                        <p>
                            Ut sit amet nunc vulputate, commodo nunc non, elementum massa. In aliquam faucibus neque, quis facilisis eros posuere nec. Ut nulla magna, vehicula sit amet nisl at, accumsan rutrum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ut libero et enim malesuada fringilla. Etiam vitae rutrum nulla. Nam nec elit in sem mollis fermentum. Aenean volutpat imperdiet tristique. Donec ultricies risus sem.
                        </p>

                        <!-- add more above here -->
                    </div>
                    <!-- end about -->

                    <!-- preferences -->
                    <div class="mb-3">
                        <div class="row no-gutters">

                            <!-- i reccommend keeping it to only four items per section -->

                            <!-- likes -->
                            <div class="col mr-2">
                                <div class="p-3 overflow-auto" style="background: rgba(0,0,0,0.5); border: 2px solid #aa0012; border-radius: 0px;">

                                    <!-- header -->
                                    <h2 class="text-uppercase font-weight-bold mb-2 text-center" style="font-size: 1.5rem; color: #aa0012;">
                                        Likes
                                    </h2>
                                    <!-- end header -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-heart fa-sm mr-2" style="color: #aa0012;"></i>
                                        One
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-heart fa-sm mr-2" style="color: #aa0012;"></i>
                                        Two
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-heart fa-sm mr-2" style="color: #aa0012;"></i>
                                        Three
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-heart fa-sm mr-2" style="color: #aa0012;"></i>
                                        Four
                                    </p>
                                    <!-- end item -->

                                    <!-- add more above here -->
                                </div>
                            </div>
                            <!-- end dislikes -->

                            <!-- dislikes -->
                            <div class="col ml-2">
                                <div class="p-3 overflow-auto" style="background: rgba(0,0,0,0.5); border: 2px solid #aa0012; border-radius: 0px;">

                                    <!-- header -->
                                    <h2 class="text-uppercase font-weight-bold mb-2 text-center" style="font-size: 1.5rem; color: #aa0012;">
                                        Dislikes
                                    </h2>
                                    <!-- end header -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-times fa-sm mr-2" style="color: #aa0012;"></i>
                                        One
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-times fa-sm mr-2" style="color: #aa0012;"></i>
                                        Two
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-times fa-sm mr-2" style="color: #aa0012;"></i>
                                        Three
                                    </p>
                                    <!-- end item -->

                                    <!-- item -->
                                    <p class="my-1">
                                        <i class="fa-solid fa-times fa-sm mr-2" style="color: #aa0012;"></i>
                                        Four
                                    </p>
                                    <!-- end item -->

                                    <!-- add more above here -->
                                </div>
                            </div>
                            <!-- end dislikes -->

                        </div>
                    </div>
                    <!-- end preferences -->

                    <!-- music box -->
                    <div class="p-3 justify-content-between text-uppercase font-weight-bold" style="background: rgba(0,0,0,0.5); border: 2px solid #aa0012; border-radius: 0px; color: #aa0012;">

                        <span>

                            <!-- song button // replace 'BUyrhLRzAwU' with the last numbers of your youtube link. KEEP the /embed/ or it won't work -->

                            <iframe class="flex-fill" style="height: 3rem; width:3rem;opacity: 0; position:  absolute; z-index: 1; margin-top: -10px; margin-left: -20px;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
                            src="

                            https://www.youtube.com/embed/BUyrhLRzAwU

                            "></iframe>

                            <i class="fa-solid fa-play"></i>
                        </span>

                        <span>
                            Song Name - Artist
                        </span>


                    </div>
                    <!-- end music box -->

                </div>
            </div>
            <!-- end left side -->

        </div>
    </div>

    <!-- credit // DO NOT REMOVE -->
    <a href="/11514615." style="color: #aa0012;" class="pull-right tooltipster" title="code by venus">
        <i class="fa-solid fa-heart fa-xs"></i>
    </a>

</div>