Test page (ssss)

<!-------------------------------------------------

        Sleek — Custom Coloured version.

        (code by jiko)

        ------------------------------

        RULES

        → Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3

        thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]

        → turn OFF WYSIWYG (in display settings)

        → turn ON Code Editor

        ------------------------------

        TIPPY TIPS

        → insert your img links INSIDE or quotation marks!!

        → looking for a good online code editor?  try [ https://th.circlejourney.net/# ] !

        ------------------------------

        ACCENTS

        → bg-1 ----------- rgba(0, 0, 0, 0.5)

        → hr ------------- #ffffff

        → text ----------- #ffffff

        NOTE

        → work with RGBA when doing the background

        use control/command + f to quickly change the colours!

 ------------------------------------------------->

 <div class="mx-auto" style="max-width:95%; font-size:95%; letter-spacing:0.5px;">

 <!-------------------------------------------------

                 IMAGE BACKGROUND

 ------------------------------------------------->

 <div class="row no-gutters" style="color:#ffffff;

  /* IMAGE HERE

    ---------------------------------------- */;

    background-image:url(IMG_PNG_HERE);

  /* IMAGE SETTINGS

    ---------------------------------------- */;

    background-size:cover;

    background-position:bottom;

    background-repeat:no-repeat;

    background-attachment:scroll;

    box-shadow: 0 0 15px rgba(0,0,0, 0.5);">

 <!-------------------------------------------------

                 LEFT SIDE

 ------------------------------------------------->

 <!--

 → this rgba below controls the colour and opacity on the background!

 → the LAST VALUE (0.5) controls the opacity – adjust if needed

 -->

 <div class="col-lg-7 p-2">

 <div class="d-block p-4" style="height:500px; background: rgba(0, 0, 0, 0.5);">

    <!--------------------------------------------

                 BASIC INFO

    --------------------------------------------->

    <!--

    → view [fontawesome.com] for more icons!

    -->

    <div class="mx-auto text-center col-12 pb-2">

        <i class="fas fa-seedling fa-xs"></i>

        <i class="fas fa-leaf fa-2x mx-4"></i>

        <i class="fas fa-seedling fa-xs fa-flip-horizontal"></i>

    </div>

    <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">

    <hr class="w-50 my-2" style="border-color:#ffffff; opacity:0.15">

    <!--------------------------------------------

                 NAME HEADER

    --------------------------------------------->

    <!--

    → best if super short but you can change [p-4] to [p-3] OR adjust [font-size:27px] and [letter-spacing:8px]

    -->

    <div class="d-flex" style="min-height:140px;">

    <h1 class="m-auto text-uppercase text-center p-4" style="font-size:27px; font-weight:200; letter-spacing:8px; border:2px solid; background-color:rgba(0, 0, 0, 0.5);">

            Name

    </h1></div>

    <div class="display-4 text-center text-uppercase pb-1" style="font-size:15px; letter-spacing:3px">

        "Fancy quote here."

    </div>

    <hr class="w-100 mt-3 mb-2" style="border-color:#ffffff; opacity:0.15">

    <!--------------------------------------------

                 QUICK SUMMARY

    --------------------------------------------->

    <div style="height:180px; overflow:auto; letter-spacing:.5px">

        <p>One paragraph is ideal but you could do more because this box scrolls!</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa. Curabitur ligula orci, aliquet nec luctus cursus, pellentesque aliquam nunc.</p>

    </div>

    <hr class="w-50 my-2" style="border-color:#ffffff; opacity:0.15">

    <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">

 </div>

 </div>

 <!-------------------------------------------------

                 RIGHT SIDE

 ------------------------------------------------->

 <div class="col-lg-5" style="min-height:500px; background: rgba(0, 0, 0, 0.8);">

    <!--------------------------------------------

                 TAB BUTTONS

    --------------------------------------------->

    <div class="px-4 p-3 card-block sticky-top" style="background: rgba(0, 0, 0, 0.6);">

    <div class="mx-auto" style="max-width:180px">

    <ul class="nav row no-gutters text-center">

        <li class="nav-item col">

            <a class="text-white" data-toggle="tab" href="#sleekone">

                <i class="far fa-user fa-fw"></i>

            </a>

        </li>

        <li class="nav-item col">

            <a class="text-white" data-toggle="tab" href="#sleektwo">

                <i class="far fa-heart"></i>

            </a>

        </li>

        <li class="nav-item col">

            <a class="text-white" data-toggle="tab" href="#sleekthree">

                <i class="far fa-book"></i>

            </a>

        </li>

        <li class="nav-item col">

            <a class="text-white" data-toggle="tab" href="#sleekfour">

                <i class="far fa-id-card"></i>

            </a>

        </li>

    </ul>

    </div>

    </div>

    <div class="tab-content">

    <!--------------------------------------------

                 PROFILE

    --------------------------------------------->

    <div class="tab-pane fade active show" id="sleekone">

    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:0.5px">

        <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px; letter-spacing:3px;">

            Profile

        </h1>

        <!--------  BASIC INFO  --------------------->

        <div class="px-2">

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Name</span>

                <span>{{!Name!}}</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Age</span>

                <span>{{!Age!}}</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Gender</span>

                <span>content (prn/prns)</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Birthdate</span>

                <span>mm.dd.yyyy</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Height</span>

                <span>content</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Weight</span>

                <span>content</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Orientation</span>

                <span>content</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Alignment</span>

                <span>content</span>

            </div>

        </div>

    <hr style="border-color: rgba(255, 255, 255, 0.15);">

    <div class="row no-gutters">

        <!--------  LIKES  --------------------->

        <div class="col-6">

            <h1 class="text-center" style="font-size:16px; letter-spacing:1px;">

                <i class="fas fa-check fa-fw"></i>

            </h1><ul class="mt-3 mb-0">

                <li>content</li>

                <li>content</li>

                <li>content</li>

            </ul>

        </div>

        <!--------  DISLIKES  --------------------->

        <div class="col-6">

            <h1 class="text-center" style="font-size:16px; letter-spacing:1px;">

                <i class="fas fa-times fa-fw"></i>

            </h1><ul class="mt-3 mb-0">

                <li>content</li>

                <li>content</li>

                <li>content</li>

            </ul>

        </div>

    </div>

    </div>

    </div>

    <!--------------------------------------------

                 TRIVIA AND DESIGN NOTES

    --------------------------------------------->

    <div class="tab-pane fade" id="sleektwo">

    <div class="px-3 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

           About

        </h1>

<!-- Overall Personality -->    

    <div class="mt-3 p-1" style="text-indent:20px;">

        <p>You can get rid of this section completely (by getting rid of the tab near the top) or change it to something else, like a moodboard or a pagedoll!  Up to you of course, this is merely a misc. page.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</p>

        <p>Orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.</p>

    <!-- add/delete more paragraphs ABOVE this line! -->

    </div>

    <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">

        <!-------- OCCUPATION  --------------------->

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            Occupation

        </h1>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Job</span>

                <span>[ full time ]</span>

            </div>

        <div class="mx-3 p-1" style="text-indent:20px;">

            <p>Description of job.</p>

        </div>

        <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">

        <!--------  HOBBIES  --------------------->

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            Hobbies

        </h1>

            <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Hobby Name</span>

                <span><i class="far fa-spa"/></span>

            </div>

        <div class="mb-3 p-1" style="text-indent:20px;">

            <p>Description of origin maybe.</p>

        </div>

    <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            Trivia

        </h1><ul class="mt-3">

            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

            <li>Donec sagittis erat vel quam porta faucibu.</li>

            <li>Ut lobortis ornare fermentum</li>

            <li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa</li>

        </ul>

    </div>

    </div>

    <!--------------------------------------------

                 BACKGROUND

    --------------------------------------------->

    <div class="tab-pane fade" id="sleekthree">

    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">

        <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Birthplace</span>

                <span><a href="https://media.discordapp.net/attachments/780319645344989236/876334530984816670/image0.png?width=600&height=600" style="color:#aec6cf">Earth</a></span>

            </div>

          </ul>

        <div class="mx-3 p-1" style="text-indent:20px;">

            <p>Description of origin maybe.</p>

        </div>

        <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            Background

        </h1>

    <div class="mt-3 p-1" style="text-indent:20px;">

        <p>You can get rid of this section completely (by getting rid of the tab near the top) or change it to something else, like a moodboard or a pagedoll!  Up to you of course, this is merely a misc. page.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</p>

        <p>Orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.</p>

    <!-- add/delete more paragraphs ABOVE this line! -->

    </div>

    <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">

    <!-- beginning of family information -->

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            Family Information

        </h1>

    <div class="mt-3 p-1" style="text-indent:20px;">

        <p>You can get rid of this section completely (by getting rid of the tab near the top) or change it to something else, like a moodboard or a pagedoll!  Up to you of course, this is merely a misc. page.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</p>

        <p>Orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.</p>

    <!-- add/delete more paragraphs ABOVE this line! -->

    </div>

    <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">

    <!-- family member descriptions & relationships -->

        <div class="d-flex justify-content-between p-1">

                <span class="text-uppercase">Name</span>

                <span>[ Relation ]</span>

            </div>

        <div class="mx-3 p-1" style="text-indent:20px;">

            <p>Description of relationship.</p>

        </div>

        <!-- trivia section -->

        <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">

    <ul class="fa-ul" style="margin-top: 5px">

                      <li><span class="fa-li"><i class="far fa-star"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

                      <li><span class="fa-li"><i class="far fa-lightbulb"></i></span>Nulla blandit odio urna, sit amet pulvinar lacus finibus vitae.</li>

                      <li><span class="fa-li"><i class="far fa-lightbulb"></i></span>Nulla hendrerit, dolor eu mattis mollis, libero enim aliquet ex, vel varius massa felis at orci.</li>

                      <li><span class="fa-li"><i class="far fa-lightbulb"></i></span>Suspendisse imperdiet tellus dictum lacus dignissim bibendum.</li>

                    </ul>

    </div>

    </div>

    <!--------------------------------------------

                 MUSIC

    --------------------------------------------->

    <!--

    → NOTE: YouTube video url must be PUBLIC and must NOT be from any playlist.

    → to change the music, get the video id of of the video after

    [https://www.youtube.com/watch?v=]

    (for example: https://www.youtube.com/watch?v=    → qIzxqytVr1o ←)

    → then below, copy and paste that into where it says "qIzxqytVr1o" below!

    -->

    <div class="tab-pane fade" id="sleekfour">

    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">

    <!-- da wish -->

        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">

            MISC.

        </h1>

    <div class="mt-3 p-1" style="text-indent:20px;">

        <p>You can get rid of this section completely (by getting rid of the tab near the top) or change it to something else, like a moodboard or a pagedoll!  Up to you of course, this is merely a misc. page.</p>

       <div class="my-2">

            <div class="d-flex justify-content-between p-1">

                <span style="letter-spacing:2px">

                        <i class="far fa-arrow-right"></i>

                        <a href="LINKYLINK" style="color:#aec6cf">Pinterest</a>

                </span>

                <span style="letter-spacing:1px"></span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span style="letter-spacing:2px">

                        <i class="far fa-arrow-right"></i>

                        <a href="LINKYLINK" style="color:#aec6cf">Playlist</a>

                </span>

                <span style="letter-spacing:1px"></span>

            </div>

        </div>

    </div>

            <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">  

        <div class="p-1">

  <div class="row no-gutters">

      <!--  STAMP 1  ------------------------------------- -->

      <div class="col-3 p-1"><a href="https://www.deviantart.com/iceofwaterflock/art/rabies-pride-flag-stamp-757364724"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0f8e3e08-20c2-40d6-8d53-60d9b4f174ca/dciwyd0-28e0fb77-37ca-489d-a235-08bfeb9a4fa1.png/v1/fill/w_99,h_56/rabies_pride_flag_stamp_by_iceofwaterflock_dciwyd0-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTYiLCJwYXRoIjoiXC9mXC8wZjhlM2UwOC0yMGMyLTQwZDYtOGQ1My02MGQ5YjRmMTc0Y2FcL2RjaXd5ZDAtMjhlMGZiNzctMzdjYS00ODlkLWEyMzUtMDhiZmViOWE0ZmExLnBuZyIsIndpZHRoIjoiPD05OSJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.fkw9nS2fG_MkGOwvg0QqPbvYGFy6PiKjVea1lleu00g" class="fr-fic fr-dii" width="89" height="50.35"></a></div>

      <!--  STAMP 2  ------------------------------------- -->

      <div class="col-3 p-1"><a href="https://www.deviantart.com/chuchucolate/art/Cats-Louis-Wayne-8-Stamp-386054284"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e398c5aa-4adc-465f-b426-7d6b870ecd0c/d6duhe4-837e2b78-fd71-4774-95b0-10ede99e4652.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2UzOThjNWFhLTRhZGMtNDY1Zi1iNDI2LTdkNmI4NzBlY2QwY1wvZDZkdWhlNC04MzdlMmI3OC1mZDcxLTQ3NzQtOTViMC0xMGVkZTk5ZTQ2NTIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.BlL04gn35BQxzx1JQxQfXnZ2DNf9CjxGyTkcQ5vOSIo" class="fr-fic fr-dii" width="89" height="50.35"></a></div>

      <!--  STAMP 3  ------------------------------------- -->

      <div class="col-3 p-1"><a href="https://www.deviantart.com/teethys/art/you-have-no-fucking-idea-what-youre-up-against-713518591"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/e42e2798-04ad-4df0-a17d-11e99b0e4269/dbst6gv-4d070872-9460-4467-b370-fdf55d89afde.png/v1/fill/w_99,h_56/you_have_no_fucking_idea_what_youre_up_against_by_teethys_dbst6gv-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTYiLCJwYXRoIjoiXC9mXC9lNDJlMjc5OC0wNGFkLTRkZjAtYTE3ZC0xMWU5OWIwZTQyNjlcL2Ric3Q2Z3YtNGQwNzA4NzItOTQ2MC00NDY3LWIzNzAtZmRmNTVkODlhZmRlLnBuZyIsIndpZHRoIjoiPD05OSJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.Vn9Qk6ZOq2Y8OA7yf6bKCexYhOhSuvHjoc1pfkllDHU" class="fr-fic fr-dii" width="89" height="50.35"></a></div>

      <!--  STAMP 4  ------------------------------------- -->

      <div class="col-3 p-1"><a href="https://www.deviantart.com/peachybats/art/cannibalism-pride-771460024"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5269d1bd-6cbe-4e61-8632-1ce911189f33/dcrb2d4-5ca5ab80-42aa-44cd-aea3-c55a2cf3de41.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzUyNjlkMWJkLTZjYmUtNGU2MS04NjMyLTFjZTkxMTE4OWYzM1wvZGNyYjJkNC01Y2E1YWI4MC00MmFhLTQ0Y2QtYWVhMy1jNTVhMmNmM2RlNDEuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ELmobuu2wRz2CauVmLq9ZfGU0ElMf7cd9muWqS_OC0w" class="fr-fic fr-dii" width="89" height="50.35"></a></div>

      </div>

         <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">

        <div class="my-2">

            <div class="d-flex justify-content-between p-1">

                <span style="letter-spacing:2px">

                    <a href="https://open.spotify.com/track/6P0sU0QiLgfx5VjroEJ2pD" style="color:#aec6cf">

                        <i class="far fa-play-circle"></i>

                        A Dog's Adventure

                      </a>

                </span>

                <span style="letter-spacing:1px">Atta Boy</span>

            </div>

            <div class="d-flex justify-content-between p-1">

                <span style="letter-spacing:2px">

                    <a href="https://open.spotify.com/track/6P0sU0QiLgfx5VjroEJ2pD" style="color:#aec6cf">

                        <i class="far fa-play-circle"></i>

                        A Dog's Adventure

                      </a>

                </span>

                <span style="letter-spacing:1px">Atta Boy</span>

            </div>

        </div>

    </div>

    </div>

<!-- DON'T TOUCH THE BELOW THABKS YOUU!!! -->

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

 <!-------------------------------------------------

                 CREDITS

 ------------------------------------------------->

 </div>

 <div class="pt-2 text-right small faded">

    <a href="https://toyhou.se/7275692.-f2u-sleek" class="text-muted">code by jiko</a> |

    <a href="LINK TO BACKGROUND ARTIST" class="text-muted">background by ARTIST</a> |

    <a href="https://pastebin.com/5azpBmii" class="text-muted">edited by were</a>

 </div>

 </div>