<!--------------------------------
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)
COLOURS
– background: #fff
– text : #000
– icons : #f0f7da
– tabs : #234d20
– hr : 0, 0, 0, .1
(the hr use rgba, NOT hex codes!)
ACCENTS (you can delete two and three if it makes stuff easier but don't forget to manually them out)
– one : #36802d
– two : #77ab59
– three : #c9df8a
-------------------------------->
<div style="background: url(IMG 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(IMG 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" style="background-color: #fff">
<!---------- [ 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" style="background-color:#234d20; color:#f0f7da" 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" style="background-color:#234d20; color:#f0f7da" 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" style="background-color:#234d20; color:#f0f7da" 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" style="background-color:#234d20; color:#f0f7da" 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; color:#000">
<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" style="border-color: rgba(0, 0, 0, .1)">
<!---------- [ 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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="letter-spacing:1px; filter:opacity(60%)">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" style="border-color: rgba(0, 0, 0, .1)">
<!-- there's no easy way to format this, forgive me haha -->
<span class="badge badge-pill m-1" style="background:#36802d; letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill m-1" style="background:#77ab59; letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill m-1" style="background:#77ab59; letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<span class="badge badge-pill m-1" style="background:#c9df8a; letter-spacing:1px; font-size:12px; line-height:18px; font-weight:500;">
content
</span>
<!-- add more above THIS line! -->
</div>
</div>
</div>
<!---------- [ PROFILE END ] ---------->
<!---------- [ TRAITS ] ---------->
<div class="tab-pane fade" id="two">
<div class="table-responsive px-3 pt-3" style="height:370px; color:#000">
<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" style="border-color: rgba(0, 0, 0, .1)">
<!---------- [ 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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#36802d; background-color: #;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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#36802d; 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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#77ab59; 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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#77ab59; 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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#c9df8a; 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" style="background-color: rgba(0, 0, 0, .1)">
<div class="progress-bar" style="background-color:#c9df8a; 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" style="letter-spacing:1px; filter:opacity(60%)">
Likes</span><hr class="my-1" style="border-color: rgba(0, 0, 0, .1)">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6 p-2">
<span class="text-uppercase" style="letter-spacing:1px; filter:opacity(60%)">
Dislikes</span><hr class="my-1" style="border-color: rgba(0, 0, 0, .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; color:#000">
<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" style="border-color: rgba(0, 0, 0, .1)">
<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" style="border-color: rgba(0, 0, 0, .1)">
<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; color:#000">
<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" style="border-color: rgba(0, 0, 0, .1)">
<!-- one -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span style="filter:opacity(60%)">Artist</span>
</span>
<span>
<a href="URL LINK">
<i class="fas fa-play-circle" style="color:#36802d"></i>
</a>
</span>
</div><hr class="my-1 mb-3" style="border-color: rgba(0, 0, 0, .1)">
<!-- two -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span style="filter:opacity(60%)">Artist</span>
</span>
<span>
<a href="URL LINK">
<i class="fas fa-play-circle" style="color:#77ab59"></i>
</a>
</span>
</div><hr class="my-1 mb-3" style="border-color: rgba(0, 0, 0, .1)">
<!-- three -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span style="filter:opacity(60%)">Artist</span>
</span>
<span>
<a href="URL LINK">
<i class="fas fa-play-circle" style="color:#c9df8a"></i>
</a>
</span>
</div><hr class="my-1 mb-3" style="border-color: rgba(0, 0, 0, .1)">
<!-- four -->
<div class="justify-content-between px-3">
<span>
<i>Song Title</i><br>
<span style="filter:opacity(60%)">Artist</span>
</span>
<span>
<a href="URL LINK">
<i class="fas fa-play-circle" style="color:#36802d"></i>
</a>
</span>
</div><hr class="my-1 mb-3" style="border-color: rgba(0, 0, 0, .1)">
<!-- add more above THIS line! -->
</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" style="background-color: #fff">
<p class="px-2" align="right" style="color:#000">
<small>
code by <a href="https://toyhou.se/6565671.-f2u-noxious" style="color:#36802d">jiko</a>
</small>
</p>
</div>
</div>
</div>
</div>