<!--------------------------------
NOXIOUS - Code by jiko
RULES
– Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
[ https://toyhou.se/~bulletins/127417.code-rules ]
TIPPY TIPS
– for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
– if your background image is also white/very pale, change the [ text-white ] to [ text-dark ] in both IMG HEADER and CREDITS (or whatever colour you'd want lol)
-------------------------------->
<div style="background: url(IMAGE URL);
background-size:cover; background-position: center; background-repeat: no-repeat;
font-weight:400; font-family:avenir; font-size:13px; max-width:900px; margin-top:40px;"
class="mx-auto p-3">
<!---------- [ HEADER ] ---------->
<div class="text-white">
<div class="display-4 text-uppercase" style="letter-spacing:2px;">Name</div>
<div class="ml-2 mb-2 text-uppercase" style="letter-spacing:2px; font-weight: 200">
<i class="far fa-heart ml-1"></i> Quote or Title
</div>
</div>
<div class="row no-gutters">
<!-------------------- [ RIGHT BOX ] -------------------->
<div class="col-lg-5 push-lg-7 p-1">
<div class="card bg-faded rounded-0 border-0 h-100">
<div style="background:url(IMAGE URL);
background-size: cover; background-position: center; min-height: 430px;">
</div>
</div>
</div>
<!-------------------- [ RIGHT BOX END ] -------------------->
<!-------------------- [ LEFT BOX ] -------------------->
<div class="col-lg-7 pull-lg-5 p-1">
<div class="card border-0 rounded-0 h-100">
<!---------- [ TABS ] ---------->
<ul class="nav row no-gutters text-center">
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block active bg-faded" data-toggle="tab" href="#one">
<i class="fas fa-id-card"></i>
<span class="mt-2" style="letter-spacing:0.5px">profile</span>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block bg-faded" data-toggle="tab" href="#two">
<i class="fas fa-heart"></i>
<span class="mt-2" style="letter-spacing:0.5px">traits</span>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block bg-faded" data-toggle="tab" href="#three">
<i class="fas fa-book"></i>
<span class="mt-2" style="letter-spacing:0.5px">trivia</span>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block bg-faded" data-toggle="tab" href="#four">
<i class="fas fa-music"></i>
<span class="mt-2" style="letter-spacing:0.5px">playlist</span>
</a>
</li>
</ul>
<!---------- [ TABS END ] ---------->
<!---------- [ TAB CONTENT ] ---------->
<div class="tab-content">
<!---------- [ PROFILE ] ---------->
<div class="tab-pane fade active show" id="one">
<div class="table-responsive px-3 pt-3" style="height:370px;">
<div class="text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>PROFILE;</span>
<span><i class="fas fa-box-heart"></i></span>
</div><hr class="my-1 mb-4">
<!---------- [ INFO ] ---------->
<div class="row no-gutters">
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Age</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Orientation</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Species</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Zodiac</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Alignment</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Demeanor</span>
<span class="w-50 p-1 text-right">content</span>
</div>
<div class="col-lg-6 p-1 justify-content-between">
<span class="w-50 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;">Mbti</span>
<span class="w-50 p-1 text-right">content</span>
</div>
</div>
<!---------- [ AESTHETICS ] ---------->
<div class="mt-4 text-lowercase" style="font-size:15px; letter-spacing:2px;">
<div class="text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>Aesthetics;</span>
<span><i class="fas fa-sparkles"></i></span>
</div><hr class="my-1 mb-4">
<!-- there's no easy way to format this, forgive me haha -->
<span class="badge badge-pill bg-primary m-1"
style="letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill bg-primary m-1"
style="letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill bg-primary m-1"
style="letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill bg-primary m-1"
style="letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
</div>
</div>
</div>
<!---------- [ PROFILE END ] ---------->
<!---------- [ TRAITS ] ---------->
<div class="tab-pane fade" id="two">
<div class="table-responsive px-3 pt-3" style="height:370px;">
<div class="text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>Traits;</span>
<span><i class="fas fa-heart"></i></span>
</div><hr class="my-1 mb-4">
<!---------- [ STATS ] ---------->
<div class="row no-gutters">
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Intelligence</span>
<div class="progress">
<div class="progress-bar" style=";width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Charisma</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Confidence</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Humour</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Empathy</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
<div class="col-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px">Patience</span>
<div class="progress">
<div class="progress-bar" style="width:50%; height:5px;"></div>
</div>
</div>
</div>
<!---------- [ LIKES AND DISLIKES ] ---------->
<div class="row no-gutters mt-4">
<div class="col-lg-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px;">Likes</span><hr class="my-1">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6 p-2">
<span class="text-uppercase text-muted" style="letter-spacing:1px;">Dislikes</span><hr class="my-1">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!---------- [ TRAITS END ] ---------->
<!---------- [ TRIVIA ] ---------->
<div class="tab-pane fade" id="three">
<div class="table-responsive px-3 pt-3" style="height:370px;">
<div class="text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>Design Notes;</span>
<span><i class="fas fa-palette"></i></span>
</div><hr class="my-1 mb-4">
<ul>
<li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>nulla nec euismod sapien, nec pellentesque nulla</li>
<li>nunc ultricies volutpat nibh non accumsan</li>
</ul>
<div class="mt-2 text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>Trivia;</span>
<span><i class="fas fa-book-open"></i></span>
</div><hr class="my-1 mb-4">
<ul>
<li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>nulla nec euismod sapien, nec pellentesque nulla</li>
<li>nunc ultricies volutpat nibh non accumsan</li>
</ul>
</div>
</div>
<!---------- [ TRIVIA END ] ---------->
<!---------- [ PLAYLIST ] ---------->
<div class="tab-pane fade" id="four">
<div class="table-responsive px-3 pt-3" style="height:370px;">
<div class="text-uppercase justify-content-between" style="font-size:15px; letter-spacing:2px;">
<span>Playlist;</span>
<span><i class="fas fa-list-music"></i></span>
</div><hr class="my-1 mb-4">
<!-- one -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span class="text-muted">Artist</span>
</span>
<span>
<a href="LINK HERE">
<i class="fas fa-play-circle"></i>
</a>
</span>
</div><hr class="my-1 mb-3">
<!-- two -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span class="text-muted">Artist</span>
</span>
<span>
<a href="LINK HERE">
<i class="fas fa-play-circle"></i>
</a>
</span>
</div><hr class="my-1 mb-3">
<!-- three -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span class="text-muted">Artist</span>
</span>
<span>
<a href="LINK HERE">
<i class="fas fa-play-circle"></i>
</a>
</span>
</div><hr class="my-1 mb-3">
<!-- four -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span class="text-muted">Artist</span>
</span>
<span>
<a href="LINK HERE">
<i class="fas fa-play-circle"></i>
</a>
</span>
</div><hr class="my-1 mb-3">
</div>
</div>
<!---------- [ PLAYLIST END ] ---------->
</div>
<!---------- [ TAB CONTENT END ] ---------->
</div>
</div>
<!-------------------- [ LEFT BOX END ] -------------------->
<!---------- [ CREDITS - don't touch!!!] ---------->
<div class="col-lg-12">
<div class="card rounded-0 border-0 m-1 p-2">
<p class="px-2" align="right">
<small>
code by <a href="https://toyhou.se/6565671.-f2u-noxious">jiko</a>
</small>
</p>
</div>
</div>
</div>
</div>