<!-- dunno what to name this (CA) || by [email protected]
HANDY WEBSITES:
> Font Awesome: https://fontawesome.com/
> W3 Schools Bootstrap: https://www.w3schools.com/bootstrap/
> W3 Schools HTML: https://www.w3schools.com/html/default.asp
> Bootstrap Docs: https://getbootstrap.com/docs/5.1/getting-started/introduction/
> Toyhou.se Help Thread: https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
==============================
accent ------- #8bb98b
white text ------- text-white
dark text ------- text-dark
==============================
GUIDE TO FONTMEME:
> each image corresponds to a letter
> type the letter associated with the image you want in the [ Enter your preview text here... ] box
> adjust font size and color as needed
> click [ GENERATE ]
> click the pencil/pen icon to the right of the GENERATE button
> click [ Embed ]
> copy the link in the box under [ Direct image link ]
note: DO NOT COPY THE IMAGE ADDRESS DIRECTLY FROM THE GENERATED PHOTO (this is a temporary image)
fontmeme img in this code: https://fontmeme.com/fonts/kr-floral-color-me-font/ { letter h }
reminder to read my tos :3 -> https://toyhou.se/~bulletins/491483.global-tos
leave a comment!! <33 -> https://toyhou.se/~forums/16.htmlcss-graphics/245374.the-codes-of-a-person-acp-s-coding-thread
THANK YOU FOR USING <3
---------------------------->
<div class="mx-auto my-lg-5 py-5" style="max-width: 800px;">
<!--
==================
HEADER
==================
-->
<div class="text-center pb-4">
<i class="
fal fa-crown
" style="
color: #8bb98b;
"></i> <!-- << icon -->
<div class="row no-gutters">
<div class="col-12 order-2" style="z-index: -1;"><div class="card border-0 rounded-0 pb-4 mt-n4" style="background-color: #8bb98b;"></div></div>
<div class="col-12"><p class="m-0 text-uppercase" style="font-family: 'Times New Roman', Times, serif; font-size: 35px;">
NAME SURNAME
</p></div> <!-- << name -->
</div>
</div>
<!-- ========================= -->
<!--
==================
CONTENT
==================
-->
<div class="row no-gutters">
<!-------------------
MAIN CONTENT
-------------------->
<div class="col-lg-8 pl-lg-3 pt-lg-0 pt-3 order-2 d-flex flex-column">
<!-- BASIC LISTED INFORMATION
>> -------------------------------------->
<div class="row no-gutters mx-n2 my-n1">
<div class="col-auto flex-fill py-1 px-2">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-user fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-3 pb-2 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1; color: #8bb98b;">
NICKNAME
</div>
</div>
<div class="col-auto flex-fill py-1 px-2">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-calendar fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-3 pb-2 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1; color: #8bb98b;">
AGE
</div>
</div>
<div class="col-auto flex-fill py-1 px-2">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-venus-mars fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-3 pb-2 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1; color: #8bb98b;">
GENDER
</div>
</div>
<div class="col-auto flex-fill py-1 px-2">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-comments fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-3 pb-2 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1; color: #8bb98b;">
PRONOUNS
</div>
</div>
<div class="col-auto flex-fill py-1 px-2">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-heart-pulse fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-3 pb-2 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1; color: #8bb98b;">
ORIENTATION
</div>
</div>
<!---- ADD MORE ABOVE THIS LINE ---->
<!-- MUSIC --> <div class="col-12 flex-fill my-1 mx-2" style="overflow: hidden;">
<div class="text-center" style="margin-bottom: -14.5px;"><span class="badge p-2 text-white" style="border-radius: 100%; opacity: 1; background-color: #8bb98b;">
<i class="fal fa-gramophone fa-fw"></i>
</span></div>
<div class="text-center card bg-transparent rounded-0 px-5 pt-4 pb-3 font-weight-bold" style="border-width: 1.5px; font-variant: small-caps; z-index: -1;"><div>
<!-- TEXT --> <span class="mr-1" style="color: #8bb98b;">THEME</span> <span class="faded font-weight-lighter">by</span> <span class="ml-1" style="color: #8bb98b;">ARTIST</span>
</div></div>
<!-- SONG || change [ EMBED_HERE ] to the numbers after https://www.youtube.com/watch?v= --> <iframe
src="https://www.youtube.com/embed/EMBED_HERE?controls=0"
class="w-100" frameborder="0" style="position: absolute; top: 0; left: 0; height: 300px; opacity: 0.00001; z-index: 1;"></iframe>
</div>
</div>
<!-- << -------------------------------->
<!-- TITLE OR TAGLINE
>> -------------------------------------->
<div class="w-100 d-flex justify-content-between align-items-center mx-auto my-2">
<hr class="flex-fill ">
<p class="mb-0 text-uppercase mx-3" style="font-size: 15px; font-family: 'Times New Roman', Times, serif;">
title or tagline
</p>
<hr class="flex-fill">
</div>
<!-- << -------------------------------->
<div class="row no-gutters">
<!-- LIKES, DISLIKES, IMAGE
>> -------------------------------------->
<div class="col-lg-4 d-flex flex-column">
<div class="pb-2 flex-grow-1">
<div class="card p-2 h-100" style="border-radius: 50px 0 0 50px;">
<div class="row no-gutters align-items-center my-auto">
<div class="col-auto">
<div class="card border-0 text-white justify-content-center align-items-center" style="border-radius: 50%; height: 35px; width: 35px; background-color: #8bb98b;">
<i class="far fa-heart fa-fw fa-lg"></i>
</div>
</div>
<div class="col pl-3 pr-1 text-justify" style="font-size: 13px;">
likes, likes, likes, likes, likes.
</div>
</div>
</div>
</div>
<div class="py-2 flex-grow-1">
<div class="card p-2 h-100" style="border-radius: 50px 0 0 50px;">
<div class="row no-gutters align-items-center my-auto">
<div class="col-auto">
<div class="card border-0 text-white justify-content-center align-items-center" style="border-radius: 50%; height: 35px; width: 35px; background-color: #8bb98b;">
<i class="far fa-skull fa-fw fa-lg"></i>
</div>
</div>
<div class="col pl-3 pr-1 text-justify" style="font-size: 13px;">
dislikes, dislikes, dislikes.
</div>
</div>
</div>
</div>
<!-- CHANGE IMAGE SRC -->
<img src="https://fontmeme.com/permalink/230801/7119081f52be82ff6c6dfbea9d69aac5.png" class="flex-grow-1 hidden-md-down">
</div>
<!-- << -------------------------------->
<!-- BLOCK OF INFORMATION
>> -------------------------------------->
<div class="col pl-lg-3 pt-lg-0 pt-2">
<div class="d-flex flex-column h-100">
<div class="card rounded-0 p-3 text-justify mb-3" style="height: 420px; overflow-y: auto;">
<div class="tab-content">
<!-- BIOGRAPHY --------------------------->
<div class="tab-pane fade in active show" id="SUMMARY" style="font-size: 13.5px; letter-spacing: 0.5px;">
<!-- TITLE --> <p style="font-family: 'Times New Roman', Times, serif; font-size: 20px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-books mr-3"></i>BIOGRAPHY</p>
<div class="card bg-transparent rounded-0 border-0 d-block mt-2">
<!-- IMAGE --> <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/68771761_6AeEMYtBX0B6CEk.png?1690924181" class="float-right mx-auto d-block pt-2 pl-3 pb-1" style="max-height: 150px;">
<!-- SUMMARY --> <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt voluptatibus repellat quod temporibus. Fuga aperiam iste reprehenderit dolor quia pariatur sit nam accusantium repellendus. Illo ipsam ipsa expedita sit sapiente.
</p>
<!-- HEADER 1 -->
<p class="faded mb-2" style="font-size: 16px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-bookmark mr-3"></i>HEADER</p>
<p style="font-size: 13px;">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur temporibus ducimus magni quam veniam enim rem sint autem dolorum fugit, saepe vitae nihil maxime voluptas nemo omnis recusandae itaque ipsam?
</p>
<!-- / -->
<!-- HEADER 2 -->
<p class="faded mb-2" style="font-size: 16px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-bookmark mr-3"></i>HEADER</p>
<p style="font-size: 13px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quidem repellat autem quam commodi natus necessitatibus vero dolore, impedit assumenda ad nesciunt tenetur omnis odit neque. Nobis sapiente atque repellendus!
</p>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE -->
</div>
</div>
<!-- ----------- -->
<!-- DESIGN --------------------------->
<div class="tab-pane fade" id="DESIGN" style="font-size: 13.5px; letter-spacing: 0.5px;">
<!-- TITLE --> <p style="font-family: 'Times New Roman', Times, serif; font-size: 20px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-palette mr-3"></i>DESIGN</p>
<div class="text-center my-2">
<!-- REFERENCE IMAGE --> <img
src="https://images.unsplash.com/photo-1610640153527-8041e99132c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
class="flex-fill">
</div>
<!-- PALETTE --> <div class="row no-gutters mb-2">
<div class="col align-items-center justify-content-center p-2 text-white" style="background:
#8bb98b;
"> <!-- << change hex code -->
<!-- ICON / HEX CODE --> <i class="far fa-eye fa-fw"></i>
</div>
<div class="col align-items-center justify-content-center p-2 text-white" style="background:
#a7c5a7;
"> <!-- << change hex code -->
<!-- ICON / HEX CODE --> #a7c5a7
</div>
<div class="col align-items-center justify-content-center p-2 text-white" style="background:
#bbd0bb;
"> <!-- << change hex code -->
<!-- ICON / HEX CODE --> #bbd0bb
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
<!-- DESIGN NOTES --> <div class="ml-n3 mt-3">
<ul class="fa-ul mb-0">
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Design notes.
</li>
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Lorem ipsum.
</li>
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Dolor sit amet.
</li>
<!-- ADD MORE ABOVE THIS LINE -->
</ul>
</div>
</div>
<!-- ----------- -->
<!-- TRIVIA --------------------------->
<div class="tab-pane fade" id="STATS-TRIV" style="font-size: 13.5px; letter-spacing: 0.5px;">
<!-- TITLE --> <p style="font-family: 'Times New Roman', Times, serif; font-size: 20px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-thumbtack mr-3"></i>TRIVIA</p>
<!-- STATS --> <div class="row no-gutters">
<div class="col-12 mt-2">
<div class="row no-gutters">
<div class="col-6 pr-2"><span class="text-uppercase text-monospace font-weight-bold" style="letter-spacing: 1px; font-size: 14px;">
<span style="color: #8bb98b;">I</span>NTELLIGENCE
</span></div>
<!-- ICONS --> <div class="col-6 pl-2 mr-n1 text-lg-left text-right"><span class="text-monospace">
<!-- fas = full | far = hollow -->
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="far fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
</span></div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters">
<div class="col-6 pr-2"><span class="text-uppercase text-monospace font-weight-bold" style="letter-spacing: 1px; font-size: 14px;">
<span style="color: #8bb98b;">C</span>HARISMA
</span></div>
<!-- ICONS --> <div class="col-6 pl-2 mr-n1 text-lg-left text-right"><span class="text-monospace">
<!-- fas = full | far = hollow -->
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="far fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
</span></div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters">
<div class="col-6 pr-2"><span class="text-uppercase text-monospace font-weight-bold" style="letter-spacing: 1px; font-size: 14px;">
<span style="color: #8bb98b;">E</span>MPATHY
</span></div>
<!-- ICONS --> <div class="col-6 pl-2 mr-n1 text-lg-left text-right"><span class="text-monospace">
<!-- fas = full | far = hollow -->
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="far fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
</span></div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters">
<div class="col-6 pr-2"><span class="text-uppercase text-monospace font-weight-bold" style="letter-spacing: 1px; font-size: 14px;">
<span style="color: #8bb98b;">H</span>UMOR
</span></div>
<!-- ICONS --> <div class="col-6 pl-2 mr-n1 text-lg-left text-right"><span class="text-monospace">
<!-- fas = full | far = hollow -->
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="fas fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
<i class="far fa-diamond fa-fw mx-1" style="color: #8bb98b;"></i>
</span></div>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
</div>
<!-- TRIVIA BULLET POINTS --> <div class="ml-n3 mt-3">
<ul class="fa-ul mb-0">
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Trivia
</li>
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Lorem ipsum.
</li>
<li class="pb-1"><span class="fa-li"><i class="fas fa-angle-right fa-xs fa-fw mr-1" style="color: #8bb98b;"></i></span>
Dolor sit amet.
</li>
<!-- ADD MORE ABOVE THIS LINE -->
</ul>
</div>
</div>
<!-- ----------- -->
<!-- RELATIONSHIPS --------------------------->
<div class="tab-pane fade" id="RELATIONS" style="font-size: 13.5px; letter-spacing: 0.5px;">
<!-- TITLE --> <p style="font-family: 'Times New Roman', Times, serif; font-size: 20px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-link mr-3"></i>RELATIONS</p>
<!-- RELATION 1 -->
<div class="row no-gutters flex-column mt-3">
<div class="col-5 d-flex pb-2">
<div class="card rounded-0 bg-transparent" style="padding: 7px;"><img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/68771761_6AeEMYtBX0B6CEk.png?1690924181"
class="flex-fill img-thumbnail rounded-0 border-0" style="background-color: #8bb98b;"></div>
<div class="flex-column pl-2 my-auto">
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="far fa-heart my-1 fa-fw"></i>
</div>
</div>
<div class="col-12">
<a class="font-weight-bold"
href="LINK_TO_CHARACTER_HERE"
style="font-size: 15px; color: #8bb98b;">
CHARACTER NAME
</a>
<p class="text-muted my-1">
relationship type
</p>
<div class="card border-top-0 border-bottom-0 border-right-0 pl-3 py-1">
<p style="font-size: 12px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi necessitatibus consequuntur excepturi cupiditate accusamus, modi animi voluptas.
</p>
</div>
</div>
</div>
<!-- / -->
<!-- RELATION 2 -->
<div class="row no-gutters flex-column mt-3">
<div class="col-5 d-flex pb-2">
<div class="card rounded-0 bg-transparent" style="padding: 7px;"><img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/68771761_6AeEMYtBX0B6CEk.png?1690924181"
class="flex-fill img-thumbnail rounded-0 border-0" style="background-color: #8bb98b;"></div>
<div class="flex-column pl-2 my-auto">
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="far fa-heart my-1 fa-fw"></i>
</div>
</div>
<div class="col-12">
<a class="font-weight-bold"
href="LINK_HERE"
style="font-size: 15px; color: #8bb98b;">
CHARACTER NAME
</a>
<p class="text-muted my-1">
relationship type
</p>
<div class="card border-top-0 border-bottom-0 border-right-0 pl-3 py-1">
<p style="font-size: 12px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi necessitatibus consequuntur excepturi cupiditate accusamus, modi animi voluptas.
</p>
</div>
</div>
</div>
<!-- / -->
<!-- RELATION 3 -->
<div class="row no-gutters flex-column mt-3">
<div class="col-5 d-flex pb-2">
<div class="card rounded-0 bg-transparent" style="padding: 7px;"><img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/68771761_6AeEMYtBX0B6CEk.png?1690924181"
class="flex-fill img-thumbnail rounded-0 border-0" style="background-color: #8bb98b;"></div>
<div class="flex-column pl-2 my-auto">
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="fas fa-heart my-1 fa-fw"></i>
<i class="far fa-heart my-1 fa-fw"></i>
</div>
</div>
<div class="col-12">
<a class="font-weight-bold"
href="LINK_HERE"
style="font-size: 15px; color: #8bb98b;">
CHARACTER NAME
</a>
<p class="text-muted my-1">
relationship type
</p>
<div class="card border-top-0 border-bottom-0 border-right-0 pl-3 py-1">
<p style="font-size: 12px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi necessitatibus consequuntur excepturi cupiditate accusamus, modi animi voluptas.
</p>
</div>
</div>
</div>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE -->
</div>
<!-- ----------- -->
<!-- CREDITS + WORTH --------------------------->
<div class="tab-pane fade" id="CRED" style="font-size: 13.5px; letter-spacing: 0.5px;">
<p style="font-family: 'Times New Roman', Times, serif; font-size: 20px; letter-spacing: normal!important; color: #8bb98b;"><i class="fal fa-list-timeline mr-3"></i>CREDITS</p>
<div class="mt-2 row no-gutters">
<div class="col-4 pr-2 font-weight-bold text-monospace text-uppercase">
<span style="color: #8bb98b;">D</span>esigner
</div>
<div class="col-8 pl-2">
<a
href="LINK_HERE"
style="text-decoration: none; color: #8bb98b;" >
artist
</a>
</div>
</div>
<div class="mt-2 row no-gutters">
<div class="col-4 pr-2 font-weight-bold text-monospace text-uppercase">
<span style="color: #8bb98b;">O</span>btained
</div>
<div class="col-8 pl-2">
via method
</div>
</div>
<div class="mt-2 row no-gutters">
<div class="col-4 pr-2 font-weight-bold text-monospace text-uppercase">
<span style="color: #8bb98b;">H</span>TML
</div>
<div class="col-8 pl-2">
<a
href="https://toyhou.se/22745633.14-dunno-what-to-name-this"
style="text-decoration: none; color: #8bb98b;">
acodingperson
</a>
</div>
</div>
<!-- ADD MORE ABOVE THIS LINE -->
<!-- WORTH TRACKER --> <div class="mt-2 row no-gutters">
<div class="col-4 pr-2 font-weight-bold text-monospace text-uppercase">
<span style="color: #8bb98b;">W</span>ORTH
</div>
<div class="col-8 pl-2">
<!-- total --> $___
<!-- list --> <ul class="fa-ul small pt-1 pl-0 ml-3 mb-0">
<!-- 1 --> <li class="m-0"><span class="fa-li"><i class="fas fa-minus fa-xs fa-fw mx-1"></i></span>
<span class="text-muted">
MM/YY
</span>
<a class="font-weight-bold"
href="LINK_TO_IMG_HERE"
style="text-decoration: none; color: #8bb98b;">
type
</a>
from
<a
href="LINK_TO_ARTIST_HERE"
style="text-decoration: none; color: #8bb98b;">
artist
</a>
<span class="text-muted text-monospace">
[$000]
</span>
</li> <!-- / -->
<!-- 2 --> <li class="m-0"><span class="fa-li"><i class="fas fa-minus fa-xs fa-fw mx-1"></i></span>
<span class="text-muted">
MM/YY
</span>
<a class="font-weight-bold"
href="LINK_TO_IMG_HERE"
style="text-decoration: none; color: #8bb98b;">
type
</a>
from
<a
href="LINK_TO_ARTIST_HERE"
style="text-decoration: none; color: #8bb98b;">
artist
</a>
<span class="text-muted text-monospace">
[$000]
</span>
</li> <!-- / -->
<!-- 3 --> <li class="m-0"><span class="fa-li"><i class="fas fa-minus fa-xs fa-fw mx-1"></i></span>
<span class="text-muted">
MM/YY
</span>
<a class="font-weight-bold"
href="LINK_TO_IMG_HERE"
style="text-decoration: none; color: #8bb98b;">
type
</a>
from
<a
href="LINK_TO_ARTIST_HERE"
style="text-decoration: none; color: #8bb98b;">
artist
</a>
<span class="text-muted text-monospace">
[$000]
</span>
</li> <!-- / -->
<!-- ADD MORE ABOVE THIS LINE -->
</ul>
</div>
</div>
</div>
<!-- ----------- -->
</div>
</div>
<!-- NAVIGATION --> <ul class="nav nav-pills nav-fill flex-grow-1 mx-n2">
<li class="nav-item active">
<a class="flex-fill nav-link active text-white align-items-center justify-content-center h-100 px-3 py-2 mx-2" style="font-family: 'Times New Roman', Times, serif; border-radius: 0; background-color: #8bb98b;" data-toggle="tab" href="#SUMMARY">I</a>
</li>
<li class="nav-item">
<a class="flex-fill nav-link text-white align-items-center justify-content-center h-100 px-3 py-2 mx-2" style="font-family: 'Times New Roman', Times, serif; border-radius: 0; background-color: #8bb98b;" data-toggle="tab" href="#DESIGN">II</a>
</li>
<li class="nav-item">
<a class="flex-fill nav-link text-white align-items-center justify-content-center h-100 px-3 py-2 mx-2" style="font-family: 'Times New Roman', Times, serif; border-radius: 0; background-color: #8bb98b;" data-toggle="tab" href="#STATS-TRIV">III</a>
</li>
<li class="nav-item">
<a class="flex-fill nav-link text-white align-items-center justify-content-center h-100 px-3 py-2 mx-2" style="font-family: 'Times New Roman', Times, serif; border-radius: 0; background-color: #8bb98b;" data-toggle="tab" href="#RELATIONS">IV</a>
</li>
<li class="nav-item">
<a class="flex-fill nav-link text-white align-items-center justify-content-center h-100 px-3 py-2 mx-2" style="font-family: 'Times New Roman', Times, serif; border-radius: 0; background-color: #8bb98b;" data-toggle="tab" href="#CRED">V</a>
</li>
</ul>
</div>
</div>
<!-- << -------------------------------->
</div>
</div>
<!------------------------------>
<!------------------------------>
<!-------------------
IMAGE + QUOTE
-------------------->
<div class="col-lg-4 flex-fill">
<div class="row no-gutters h-100">
<div class="col-12 h-100">
<div class="h-100 p-2" style="min-height: 450px; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1596705775825-194570c1f0cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80
);">
<div class="mt-3 ml-lg-n5 ml-3 card rounded-0 border-0 text-white font-italic px-4 py-2" style="position: absolute; top: 0; left: 0; font-family: Georgia, 'Times New Roman', Times, serif; background-color: #8bb98b;">
<!-- first half of quote --> lorem ipsum dolor...
</div>
<div class="mb-3 mr-lg-n5 mr-3 card rounded-0 border-0 text-white font-italic px-4 py-2" style="position: absolute; bottom: 0; right: 0; font-family: Georgia, 'Times New Roman', Times, serif; background-color: #8bb98b">
<!-- second half of quote --> ...sit amet consectetur.
</div>
</div>
</div>
</div>
</div>
<!------------------------------>
<!------------------------------>
</div>
<!-- ========================= -->
</div>
<!-- -- end code -- -->
