luxury
created by:peachiibon
Mixed ColorsHTMLCharacter
Copy
<!--
[ 25 | LUXURY ]
turn OFF WYSIWYG
turn ON code editor
use chevrons on the side to stay organized
<- over here
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 : #555
~ BACKGROUND PATTERN ~
https://www.transparenttextures.com/patterns/fake-luxury.png
use ctrl+f to quickly change colors
-->
<div class="mx-auto" style="font-family: Georgia; max-width: 1000px;">
<div class="card border-0 rounded-0">
<div class="row no-gutters mb-lg-2 mb-0 order-1 order-lg-0">
<!-- IMAGE ============= -->
<div class="col-lg-3 pr-lg-2">
<div class="row no-gutters h-100">
<div class="col-1 mr-0 mr-lg-2 ml-2 ml-lg-0 order-1 order-lg-0">
<div class="flex-column h-100">
<!-- COLOR PALETTE -->
<div class="w-100 h-100 mb-2" style="background: #000;"></div>
<div class="w-100 h-50 mb-2" style="background: #111;"></div>
<div class="w-100 h-50 mb-2" style="background: #222;"></div>
<div class="w-100 h-50" style="background: #333;"></div>
</div>
</div>
<!-- IMAGE -->
<div class="col h-100 pl-2" style="background: url(IMG_URL_HERE) no-repeat center; background-size: cover; min-height: 550px;"></div>
</div>
</div>
<!-- END IMAGE ========= -->
<!-- CONTENT =========== -->
<div class="col-lg-8 my-lg-0 my-3">
<div class="flex-column h-100">
<!-- NAV ============= -->
<ul class="nav nav-pills flex-row mb-lg-2 order-1 order-lg-0">
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#one" data-toggle="tab" class="nav-link active h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
I
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#two" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
II
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#three" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
III
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#four" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
IV
</span>
</a>
</li>
</ul>
<!-- END NAV ========= -->
<!-- CONTENT ========= -->
<div class="row no-gutters h-100">
<!-- SIDE ========= -->
<div class="col-lg-5">
<div class="flex-column h-100">
<!-- BASIC INFO =========== -->
<div class="card h-100 ml-lg-n4 rounded-0 border-0 p-lg-2 order-1 order-lg-0 mt-2 mt-lg-0">
<div class="row no-gutters h-100">
<!-- SIDE BLOCK -->
<div class="col-1 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col h-100">
<div class="flex-column h-100" style="font-size: 0.8rem;">
<!-- HEADER -->
<div class="row no-gutters mb-2">
<div class="col-1 my-auto">
<hr class="m-0" />
</div>
<div class="col-auto mx-2 text-uppercase">
General
</div>
<div class="col my-auto">
<hr class="m-0" />
</div>
</div>
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Alias
</div>
<div>
Or nickname
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
D.O.B
</div>
<div>
MM/DD/YYYY (00 yrs)
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Gender
</div>
<div>
Content (pro/nouns)
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Orientation
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Status
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Occupation
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Residence
</div>
<div>
Content
</div>
</div>
<!-- END ITEM -->
</div>
</div>
</div>
</div>
<!-- END BASIC INFO ======= -->
<!-- MUSIC BOX ============ -->
<div class="card p-1 rounded-0 my-2 border-0" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; color: #fff;">
<div class="h-100 w-100 p-2" style="border: 2px solid #fff;">
<div class="h-100 w-100 p-2" style="background: rgba(255, 255, 255, 0.25);">
<div class="row no-gutters">
<div class="col-auto mr-3 my-auto">
<!-- ICON -->
<i class="fa-thin fa-gramophone fa-2x"></i>
</div>
<div class="col my-auto">
<div>
<!-- SONG TITLE -->
Song
</div>
<div class="text-uppercase small">
<!-- ARTIST -->
Artist
</div>
</div>
<!-- SONG =============
- replace 'ScSW9C3DF18' with the last line of numbers/letters of your youtube link
- KEEP the /embed/ or it won't work
- KEEP the ?controls=0
======================= -->
<iframe
src="
https://www.youtube.com/embed/ScSW9C3DF18?controls=0
"
class="w-100"
style="height: 150px; position: absolute; bottom: -30px; left: 0; opacity: 0;"
frameborder="0"
>
</iframe>
</div>
</div>
</div>
</div>
<!-- END MUSIC BOX ======== -->
<!-- QUOTE ================ -->
<div class="card rounded-0 border-0 bg-faded text-center p-3">
<p>
<!-- ICON -->
<i class="fa-light fa-quote-left fa-sm fa-fw" style="color: #555;"></i>
Quote here.
<!-- ICON -->
<i class="fa-light fa-quote-right fa-sm fa-fw" style="color: #555;"></i>
</p>
</div>
<!-- END QUOTE ============ -->
</div>
</div>
<!-- END SIDE ===== -->
<!-- PAGES ======== -->
<div class="col-lg ml-lg-2 my-2 my-lg-0">
<div class="card rounded-0">
<div class="tab-content text-justify">
<!-- PAGE 01 ========= -->
<div id="one" class="tab-pane fade py-3 active show">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Introduction
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- WRITTEN INTRODUCTION ======= -->
<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>
<!-- END WRITTEN INTRODUCTION === -->
<hr />
<!-- LIKES & DISLIKES =========== -->
<div class="row no-gutters">
<!-- LIKES -->
<div class="col">
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Likes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-check-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> One</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Two</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Three</p>
<!-- ADD MORE ABOVE HERE -->
</div>
<!-- END LIKES -->
<div class="col-auto card mx-3 rounded-0"></div>
<!-- DISLIKES -->
<div class="col">
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Dislikes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-times-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> One</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Two</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Three</p>
<!-- ADD MORE ABOVE HERE -->
</div>
<!-- END DISLIKES -->
</div>
<!-- END LIKES & DISLIKES ======= -->
<hr />
<!-- TRIVIA ===================== -->
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Trivia</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-question-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<!-- ITEMS -->
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis porta eros et velit blandit dapibus.</p>
<!-- ADD MORE ABOVE HERE -->
<!-- END TRIVIA ================= -->
</div>
</div>
<!-- END PAGE 01 ===== -->
<!-- PAGE 02 ========= -->
<div id="two" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
History
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- WRITTEN BACKGROUND ========= -->
<p>
<!-- DECORATION / USE FONT.MEME / I USED THIS FONT -> https://fontmeme.com/fonts/roycroft-initials-font/ -->
<img src="https://fontmeme.com/permalink/240716/d92d6e05759ca06e8c9899e6b6d44f22.png" class="float-left mr-2" style="height: 80px;" />
orem 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>
<!-- QUOTE -->
<div class="card rounded-0 border-0 bg-faded p-2 mb-3 text-center">
<p>
<i class="fa-light fa-quote-left fa-fw fa-xs" style="color: #555;"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-light fa-quote-right fa-fw fa-xs" style="color: #555;"></i>
</p>
</div>
<!-- END QUOTE -->
<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>
<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>
<!-- ADD MORE ABOVE HERE -->
</div>
</div>
<!-- END PAGE 02 ===== -->
<!-- PAGE 03 ========= -->
<div id="three" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Appearance
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<div class="row no-gutters">
<!-- SIDE IMAGE -->
<div class="col-lg-6">
<div class="flex-column card rounded-0 p-1" style="position: sticky; top: 0; height: 440px;">
<div style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; height: 40px;"></div>
<!-- IMAGE -->
<div
class="bg-faded h-100 my-2"
style="background-image: url(IMG_URL_HERE); background-size: cover; background-position: top; background-repeat: no-repeat; height: 300px;"
>
<!-- LINK TO REFERENCE -->
<a href="URL_HERE" class="btn p-2 rounded-0 border-0 m-2" style="box-shadow: none; background: #555; color: #fff;">
<i class="fa-regular fa-magnifying-glass fa-fw"></i>
</a>
</div>
<!-- END IMAGE -->
<div style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; height: 40px;"></div>
</div>
</div>
<!-- END SIDE IMAGE -->
<div class="col ml-lg-2 text-left">
<!-- BASIC INFO ============= -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Height
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Weight
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Body Type
</div>
<div>
Content
</div>
</div>
<!-- END ITEM -->
<!-- END BASIC INFO ========= -->
<hr />
<!-- COLOR PALETTE ========== -->
<!-- ROW 01 -->
<div class="row no-gutters">
<div class="col p-3" style="background: #000;"></div>
<div class="col p-3" style="background: #111;"></div>
<div class="col p-3" style="background: #222;"></div>
<div class="col p-3" style="background: #333;"></div>
</div>
<!-- END ROW 01 -->
<!-- ROW 02 -->
<div class="row no-gutters">
<div class="col p-3" style="background: #444;"></div>
<div class="col p-3" style="background: #666;"></div>
<div class="col p-3" style="background: #777;"></div>
<div class="col p-3" style="background: #888;"></div>
</div>
<!-- END ROW 02 -->
<!-- END COLOR PALETTE ====== -->
<hr />
<!-- DESIGN NOTES =========== -->
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Design Notes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-info-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<!-- ITEM -->
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis porta eros et velit blandit dapibus.</p>
<!-- ADD MORE ABOVE HERE -->
<!-- END DESIGN NOTES ======= -->
</div>
</div>
</div>
</div>
<!-- END PAGE 03 ===== -->
<!-- PAGE 04 ========= -->
<div id="four" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Relationships
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- CHARACTER 01 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 01 ==== -->
<hr />
<!-- CHARACTER 02 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 02 ==== -->
<hr />
<!-- CHARACTER 03 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 03 ==== -->
<!-- ADD MORE ABOVE HERE -->
</div>
</div>
<!-- END PAGE 04 ===== -->
</div>
</div>
</div>
<!-- END PAGES === -->
</div>
<!-- CONTENT ========= -->
</div>
</div>
<!-- END CONTENT ======= -->
<!-- DECOR ============= -->
<div class="col-lg-1 pl-lg-2">
<div class="h-100 flex-column justify-content-center align-items-center" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;">
<div class="flex-fill mb-2 hidden-lg-down" style="border-left: 5px double #fff;"></div>
<div class="flex-lg-column flex-row justify-content-center align-items-center p-lg-0 p-2" style="color: #fff;">
<!-- SPINNING ICONS -->
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 10s;"><i class="fa-solid fa-sharp fa-sparkle"></i></p>
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 7s;"><i class="fa-light fa-sharp fa-sparkle"></i></p>
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 15s;"><i class="fa-solid fa-sharp fa-sparkle"></i></p>
</div>
<div class="flex-fill mt-2 hidden-lg-down" style="border-left: 5px double #fff;"></div>
</div>
</div>
<!-- END DECOR ========= -->
</div>
<!-- FOOTER ======= -->
<div class="row no-gutters p-2 rounded-0 mb-3 mb-lg-0" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;">
<div class="col-auto mx-auto mb-3 mb-lg-0">
<div class="p-2 align-items-center justify-content-center" style="height: 100px; width: 100px; border-radius: 50%; border: 2px solid #fff;">
<div class="p-3 h-100 w-100 align-items-center justify-content-center" style="background: rgba(255, 255, 255, 0.25); border-radius: 50%;">
<!-- ICON -->
<i class="fa-thin fa-star fa-2x fa-spin" style="color: #fff; animation-duration: 5s;"></i>
</div>
</div>
</div>
<div class="col-auto hidden-sm-down mx-3">
<div class="h-100" style="border-right: 5px double #fff;"></div>
</div>
<div class="col-lg my-auto">
<!-- NAME / TITLE / WHATEVER
USE FONTMEME.COM TO GET THE IMAGE. I USED THIS FONT -> https://fontmeme.com/fonts/la-obrige-font/ -->
<img src="IMG_URL_HERE" />
</div>
</div>
<!-- END FOOTER === -->
</div>
<!-- CREDITS / DO NOT REMOVE -->
<div class="mt-1 small text-right">
<p>
<a href="/8byte" class="tooltipster" title="layout by 8byte" style="color: #555;"><i class="fa-light fa-egg-fried fa-fw"></i></a>
<a href="/sharkadelic" class="tooltipster mx-1" title="base by sharkadelic" style="color: #555;"><i class="fa-light fa-sparkles fa-fw"></i></a>
<a href="https://toyhou.se/20382114.25-coquette" class="tooltipster" title="styling by venus" style="color: #555;"><i class="fa-light fa-heart fa-fw"></i></a>
</p>
</div>
</div>Copy
<!--
[ 25 | LUXURY ]
turn OFF WYSIWYG
turn ON code editor
use chevrons on the side to stay organized
<- over here
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 : #555
~ BACKGROUND PATTERN ~
https://www.transparenttextures.com/patterns/fake-luxury.png
use ctrl+f to quickly change colors
-->
<div class="mx-auto" style="font-family: Georgia; max-width: 1000px;">
<div class="card border-0 rounded-0">
<div class="row no-gutters mb-lg-2 mb-0 order-1 order-lg-0">
<!-- IMAGE ============= -->
<div class="col-lg-3 pr-lg-2">
<div class="row no-gutters h-100">
<div class="col-1 mr-0 mr-lg-2 ml-2 ml-lg-0 order-1 order-lg-0">
<div class="flex-column h-100">
<!-- COLOR PALETTE -->
<div class="w-100 h-100 mb-2" style="background: #000;"></div>
<div class="w-100 h-50 mb-2" style="background: #111;"></div>
<div class="w-100 h-50 mb-2" style="background: #222;"></div>
<div class="w-100 h-50" style="background: #333;"></div>
</div>
</div>
<!-- IMAGE -->
<div class="col h-100 pl-2" style="background: url(IMG_URL_HERE) no-repeat center; background-size: cover; min-height: 550px;"></div>
</div>
</div>
<!-- END IMAGE ========= -->
<!-- CONTENT =========== -->
<div class="col-lg-8 my-lg-0 my-3">
<div class="flex-column h-100">
<!-- HEADER ======= -->
<div class="row no-gutters p-2 rounded-0 mb-3 mb-lg-0" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;">
<div class="col-auto mx-auto mb-3 mb-lg-0">
<div class="p-2 align-items-center justify-content-center" style="height: 100px; width: 100px; border-radius: 50%; border: 2px solid #fff;">
<div class="p-3 h-100 w-100 align-items-center justify-content-center" style="background: rgba(255, 255, 255, 0.25); border-radius: 50%;">
<!-- ICON -->
<i class="fa-thin fa-star fa-2x fa-spin" style="color: #fff; animation-duration: 5s;"></i>
</div>
</div>
</div>
<div class="col-auto hidden-sm-down mx-3">
<div class="h-100" style="border-right: 5px double #fff;"></div>
</div>
<div class="col-lg my-auto">
<!-- NAME / TITLE / WHATEVER
USE FONTMEME.COM TO GET THE IMAGE. I USED THIS FONT -> https://fontmeme.com/fonts/la-obrige-font/ -->
<img src="IMG_URL_HERE" />
</div>
</div>
<!-- END HEADER === -->
<!-- CONTENT ========= -->
<div class="row no-gutters h-100 my-lg-2">
<!-- SIDE ========= -->
<div class="col-lg-5">
<div class="flex-column h-100">
<!-- BASIC INFO =========== -->
<div class="card h-100 rounded-0 border-0 order-1 order-lg-0 mt-2 mt-lg-0">
<div class="row no-gutters h-100">
<!-- SIDE BLOCK -->
<div class="col-1 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col h-100">
<div class="flex-column h-100" style="font-size: 0.8rem;">
<!-- HEADER -->
<div class="row no-gutters mb-2">
<div class="col-1 my-auto">
<hr class="m-0" />
</div>
<div class="col-auto mx-2 text-uppercase">
General
</div>
<div class="col my-auto">
<hr class="m-0" />
</div>
</div>
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Alias
</div>
<div>
Or nickname
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
D.O.B
</div>
<div>
MM/DD/YYYY (00 yrs)
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Gender
</div>
<div>
Content (pro/nouns)
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Orientation
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Status
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Occupation
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div class="my-auto">
<div class="text-uppercase font-italic small" style="color: #555;">
Residence
</div>
<div>
Content
</div>
</div>
<!-- END ITEM -->
</div>
</div>
</div>
</div>
<!-- END BASIC INFO ======= -->
<!-- MUSIC BOX ============ -->
<div class="card p-1 rounded-0 my-2 border-0" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; color: #fff;">
<div class="h-100 w-100 p-2" style="border: 2px solid #fff;">
<div class="h-100 w-100 p-2" style="background: rgba(255, 255, 255, 0.25);">
<div class="row no-gutters">
<div class="col-auto mr-3 my-auto">
<!-- ICON -->
<i class="fa-thin fa-gramophone fa-2x"></i>
</div>
<div class="col my-auto">
<div>
<!-- SONG TITLE -->
Song
</div>
<div class="text-uppercase small">
<!-- ARTIST -->
Artist
</div>
</div>
<!-- SONG =============
- replace 'ScSW9C3DF18' with the last line of numbers/letters of your youtube link
- KEEP the /embed/ or it won't work
- KEEP the ?controls=0
======================= -->
<iframe
src="
https://www.youtube.com/embed/ScSW9C3DF18?controls=0
"
class="w-100"
style="height: 150px; position: absolute; bottom: -30px; left: 0; opacity: 0;"
frameborder="0"
>
</iframe>
</div>
</div>
</div>
</div>
<!-- END MUSIC BOX ======== -->
<!-- QUOTE ================ -->
<div class="card rounded-0 border-0 bg-faded text-center p-3">
<p>
<!-- ICON -->
<i class="fa-light fa-quote-left fa-sm fa-fw" style="color: #555;"></i>
Quote here.
<!-- ICON -->
<i class="fa-light fa-quote-right fa-sm fa-fw" style="color: #555;"></i>
</p>
</div>
<!-- END QUOTE ============ -->
</div>
</div>
<!-- END SIDE ===== -->
<!-- PAGES ======== -->
<div class="col-lg ml-lg-2 my-2 my-lg-0">
<div class="card rounded-0">
<div class="tab-content text-justify">
<!-- PAGE 01 ========= -->
<div id="one" class="tab-pane fade py-3 active show">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Introduction
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- WRITTEN INTRODUCTION ======= -->
<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>
<!-- END WRITTEN INTRODUCTION === -->
<hr />
<!-- LIKES & DISLIKES =========== -->
<div class="row no-gutters">
<!-- LIKES -->
<div class="col">
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Likes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-check-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> One</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Two</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Three</p>
<!-- ADD MORE ABOVE HERE -->
</div>
<!-- END LIKES -->
<div class="col-auto card mx-3 rounded-0"></div>
<!-- DISLIKES -->
<div class="col">
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Dislikes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-times-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> One</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Two</p>
<p class="m-0"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Three</p>
<!-- ADD MORE ABOVE HERE -->
</div>
<!-- END DISLIKES -->
</div>
<!-- END LIKES & DISLIKES ======= -->
<hr />
<!-- TRIVIA ===================== -->
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Trivia</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-question-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<!-- ITEMS -->
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis porta eros et velit blandit dapibus.</p>
<!-- ADD MORE ABOVE HERE -->
<!-- END TRIVIA ================= -->
</div>
</div>
<!-- END PAGE 01 ===== -->
<!-- PAGE 02 ========= -->
<div id="two" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
History
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- WRITTEN BACKGROUND ========= -->
<p>
<!-- DECORATION / USE FONT.MEME / I USED THIS FONT -> https://fontmeme.com/fonts/roycroft-initials-font/ -->
<img src="https://fontmeme.com/permalink/240716/d92d6e05759ca06e8c9899e6b6d44f22.png" class="float-left mr-2" style="height: 80px;" />
orem 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>
<!-- QUOTE -->
<div class="card rounded-0 border-0 bg-faded p-2 mb-3 text-center">
<p>
<i class="fa-light fa-quote-left fa-fw fa-xs" style="color: #555;"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-light fa-quote-right fa-fw fa-xs" style="color: #555;"></i>
</p>
</div>
<!-- END QUOTE -->
<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>
<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>
<!-- ADD MORE ABOVE HERE -->
</div>
</div>
<!-- END PAGE 02 ===== -->
<!-- PAGE 03 ========= -->
<div id="three" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Appearance
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<div class="row no-gutters">
<!-- SIDE IMAGE -->
<div class="col-lg-6">
<div class="flex-column card rounded-0 p-1" style="position: sticky; top: 0; height: 440px;">
<div style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; height: 40px;"></div>
<!-- IMAGE -->
<div
class="bg-faded h-100 my-2"
style="background-image: url(IMG_URL_HERE); background-size: cover; background-position: top; background-repeat: no-repeat; height: 300px;"
>
<!-- LINK TO REFERENCE -->
<a href="URL_HERE" class="btn p-2 rounded-0 border-0 m-2" style="box-shadow: none; background: #555; color: #fff;">
<i class="fa-regular fa-magnifying-glass fa-fw"></i>
</a>
</div>
<!-- END IMAGE -->
<div style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; height: 40px;"></div>
</div>
</div>
<!-- END SIDE IMAGE -->
<div class="col ml-lg-2 text-left">
<!-- BASIC INFO ============= -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Height
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Weight
</div>
<div>
Content
</div>
<hr class="my-1" />
</div>
<!-- END ITEM -->
<!-- ITEM -->
<div>
<div class="text-uppercase font-italic small" style="color: #555;">
Body Type
</div>
<div>
Content
</div>
</div>
<!-- END ITEM -->
<!-- END BASIC INFO ========= -->
<hr />
<!-- COLOR PALETTE ========== -->
<!-- ROW 01 -->
<div class="row no-gutters">
<div class="col p-3" style="background: #000;"></div>
<div class="col p-3" style="background: #111;"></div>
<div class="col p-3" style="background: #222;"></div>
<div class="col p-3" style="background: #333;"></div>
</div>
<!-- END ROW 01 -->
<!-- ROW 02 -->
<div class="row no-gutters">
<div class="col p-3" style="background: #444;"></div>
<div class="col p-3" style="background: #666;"></div>
<div class="col p-3" style="background: #777;"></div>
<div class="col p-3" style="background: #888;"></div>
</div>
<!-- END ROW 02 -->
<!-- END COLOR PALETTE ====== -->
<hr />
<!-- DESIGN NOTES =========== -->
<!-- HEADER -->
<div class="justify-content-between" style="color: #555;">
<span class="text-uppercase">Design Notes</span>
<!-- ICON -->
<span><i class="fa-light fa-sharp fa-info-circle fa-fw"></i></span>
</div>
<!-- END HEADER -->
<!-- ITEM -->
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p class="mb-2"><i class="fa-light fa-angle-right fa-fw" style="color: #555;"></i> Duis porta eros et velit blandit dapibus.</p>
<!-- ADD MORE ABOVE HERE -->
<!-- END DESIGN NOTES ======= -->
</div>
</div>
</div>
</div>
<!-- END PAGE 03 ===== -->
<!-- PAGE 04 ========= -->
<div id="four" class="tab-pane fade py-3">
<!-- HEADER -->
<div class="row no-gutters px-3">
<div class="col-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-auto text-uppercase px-2 card rounded-0 border-0">
Relationships
</div>
<div class="col" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;"></div>
<div class="col-12">
<hr class="my-2" />
</div>
</div>
<!-- END HEADER -->
<div class="px-3" style="height: 440px; overflow: auto; scrollbar-width: none;">
<!-- CHARACTER 01 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 01 ==== -->
<hr />
<!-- CHARACTER 02 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 02 ==== -->
<hr />
<!-- CHARACTER 03 ======== -->
<div class="row no-gutters">
<div class="col-auto mr-3 h-100" style="position: sticky; top: 5px;">
<div class="p-1" style="border: 1px solid #555;">
<!-- IMAGE -->
<div
style="
background: url(IMG_URL_HERE) no-repeat center;
background-size: cover;
width: 100px;
height: 100px;
"
class="card bg-faded rounded-0 border-0"
></div>
</div>
<div class="justify-content-between mt-1" style="color: #555; font-size: 0.8rem;">
<!-- HEARTS -->
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-solid fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
<span><i class="fa-regular fa-heart fa-fw"></i></span>
</div>
</div>
<div class="col">
<!-- CHARACTER LINK -->
<div class="text-center">
<a href="CHAR_URL" class="text-uppercase" style="color: #555; font-size: 20px;">
Name Surname
</a>
</div>
<!-- RELATIONSHIP -->
<p class="text-center font-italic faded text-lowercase p-0 small">
Relationship
</p>
<hr class="my-2" />
<!-- STATS -->
<div class="row no-gutters my-2 mx-n2">
<!-- ONE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Trust
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- TWO -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Respect
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- THREE -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Comfort
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
<!-- FOUR -->
<div class="col-6 px-2">
<p class="text-uppercase text-center" style="font-size: 0.6rem;">
Affection
</p>
<div class="progress bg-transparent rounded-0" style="border: 1px solid #555; padding: 3px;">
<div class="progress-bar" style="height: 5px; background: #555; width:
50%
;"></div>
</div>
</div>
</div>
<hr class="my-2" />
<div class="card bg-faded p-2 text-justify small border-0 rounded-0" style="line-height: 1rem;">
<!-- WRITTEN RELATIONSHIP -->
<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. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
<!-- END WRITTEN RELATIONSHIP -->
</div>
</div>
</div>
<!-- END CHARACTER 03 ==== -->
<!-- ADD MORE ABOVE HERE -->
</div>
</div>
<!-- END PAGE 04 ===== -->
</div>
</div>
</div>
<!-- END PAGES === -->
</div>
<!-- CONTENT ========= -->
<!-- NAV ============= -->
<ul class="nav nav-pills flex-row order-1 order-lg-0">
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#one" data-toggle="tab" class="nav-link active h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
I
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#two" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
II
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2 mr-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#three" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
III
</span>
</a>
</li>
<!-- ============= -->
<li class="nav-item w-100 p-2" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555; border-radius: 0; height: 100px;">
<a href="#four" data-toggle="tab" class="nav-link h-100 w-100 align-items-center justify-content-center bg-transparent p-2" style="box-shadow: none; border-radius: 0; border: 2px solid #fff; color: #fff;">
<span class="align-items-center justify-content-center w-100 h-100 font-weight-bold" style="background: rgba(255, 255, 255, 0.25); font-size: 1.8rem;">
IV
</span>
</a>
</li>
</ul>
<!-- END NAV ========= -->
</div>
</div>
<!-- END CONTENT ======= -->
<!-- DECOR ============= -->
<div class="col-lg-1 pl-lg-2">
<div class="h-100 flex-column justify-content-center align-items-center" style="background: url(https://www.transparenttextures.com/patterns/fake-luxury.png) fixed; background-color: #555;">
<div class="flex-fill mb-2 hidden-lg-down" style="border-left: 5px double #fff;"></div>
<div class="flex-lg-column flex-row justify-content-center align-items-center p-lg-0 p-2" style="color: #fff;">
<!-- SPINNING ICONS -->
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 10s;"><i class="fa-solid fa-sharp fa-sparkle"></i></p>
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 7s;"><i class="fa-light fa-sharp fa-sparkle"></i></p>
<p class="fa-fw fa-2x my-0 fa-flip" style="animation-duration: 15s;"><i class="fa-solid fa-sharp fa-sparkle"></i></p>
</div>
<div class="flex-fill mt-2 hidden-lg-down" style="border-left: 5px double #fff;"></div>
</div>
</div>
<!-- END DECOR ========= -->
</div>
</div>
<!-- CREDITS / DO NOT REMOVE -->
<div class="small text-right">
<p>
<a href="/8byte" class="tooltipster" title="layout by 8byte" style="color: #555;"><i class="fa-light fa-egg-fried fa-fw"></i></a>
<a href="/sharkadelic" class="tooltipster mx-1" title="base by sharkadelic" style="color: #555;"><i class="fa-light fa-sparkles fa-fw"></i></a>
<a href="https://toyhou.se/20382114.25-coquette" class="tooltipster" title="styling by venus" style="color: #555;"><i class="fa-light fa-heart fa-fw"></i></a>
</p>
</div>
</div>