<!---
NIGHTBRINGER / by dogboy
NOTES
accent: #E955A6
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<!--- tagline box --->
<div style="background:#FFF;border-radius:0px;border:3px #000 solid;max-width:700px;margin:30px auto 0px;box-shadow: 6px 6px #000;">
<!--- quote, tagline, title, etc --->
<p class="text-uppercase font-italic" style="color:#000;font-size:18px;font-weight:700;padding:10px;"><i class="fas fa-sparkles" style="font-size:20px;color:#E955A6;"></i> | tagline</p>
</div>
<!--- main box --->
<div class="container-fluid" style="background:#FFF;border:3px #000 solid;border-radius:0px;max-width:700px;margin:auto;box-shadow:6px 6px #000;">
<div class="row no-gutters mt-3">
<!--- left side --->
<div class="col-sm-3 p-2">
<!--- icon --->
<div class="card" style="background-image:url(
https://cdn.discordapp.com/attachments/959578845701369907/1058681810164400229/image.png
);background-size:cover;background-position:center;height:150px;border:2px #000 solid;border-radius:0px;box-shadow: 6px 6px #000;"></div>
<!--- music player, replace the part thats after the embed/ and before the ? --->
<div class="card mt-3" style="overflow:hidden;height:100px;border:2px #000 solid;border-radius:0px;">
<div style="display:inline-block;position:relative;left:-80px;top:-100px">
<iframe width="300" height="300" src="https://www.youtube-nocookie.com/embed/HtbnfBFIJls?controls=0" frameborder="0"></iframe>
</div>
</div>
<p class="text-uppercase font-italic text-center" style="color:#000;font-size:13px;font-weight:300;">SONG TITLE</p>
</div>
<!--- right side --->
<div class="col-sm-9">
<!--- navigation pills --->
<ul class="nav nav-pills nav-justified flex-column flex-md-row p-2" style="background:#FFF;">
<li class="nav-item">
<a class="nav-link active rounded-0 text-uppercase" style="box-shadow:none;border-radius:0px;margin:2px;font-size:13px;mix-blend-mode:luminosity;color:#000;font-weight:700;border:2px #000 solid;" data-toggle="pill" href="#one">basics!</i></a>
</li>
<li class="nav-item">
<a class="nav-link rounded-0 text-uppercase" style="box-shadow:none;border-radius:0px;margin:2px;font-size:13px;mix-blend-mode:luminosity;color:#000;font-weight:700;border:2px #000 solid;" data-toggle="pill" href="#two">story!</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-0 text-uppercase" style="box-shadow:none;border-radius:0px;margin:2px;font-size:13px;mix-blend-mode:luminosity;color:#000;font-weight:700;border:2px #000 solid;" data-toggle="pill" href="#three">extra!</a>
</li>
</ul>
<div class="card mx-2 mb-3" style="background-color:#FFFFFF;border-radius:0px;border:2px #000 solid;height:240px;overflow:auto;">
<div class="tab-content">
<!--- first panel, basics --->
<div class="tab-pane active show card-block" id="one">
<div class="row no-gutters">
<div class="col-lg-6 pr-1">
<!--- column info --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">NAME</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">AGE</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">GENDER</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">BDAY</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">SPECIES</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
</div>
<div class="col-lg-6 pl-1">
<!--- column info --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">HEIGHT</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">AFFL</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">STATUS</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">JOB</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">content</span></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<div class="justify-content-between">
<div><span style="color:#000;font-size:12px;font-weight:700;">WORTH</span></div>
<div><span style="color:#000;font-size:12px;letter-spacing:1px;">$$$</span></div>
</div>
</div>
</div>
<!--- intro description --->
<p class="text-center pt-2" style="color:#000;font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- second tab, history --->
<div class="tab-pane card-block pb-3" id="two">
<!--- beginning --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:17px;font-weight:700;">THE BEGINNING . . .</span></div>
<div><i class="fas fa-sparkles" style="font-size:17px;color:#E955A6;"></i></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<p class="pt-2" style="color:#000;font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
<!--- middle --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:17px;font-weight:700;">THE MIDDLE . . .</span></div>
<div><i class="fas fa-sparkles" style="font-size:17px;color:#E955A6;"></i></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<p class="pt-2" style="color:#000;font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
<!--- present --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:17px;font-weight:700;">THE PRESENT . . .</span></div>
<div><i class="fas fa-sparkles" style="font-size:17px;color:#E955A6;"></i></div>
</div>
<hr style="width:100%;margin:2px;background-color:#000;">
<p class="pt-2" style="color:#000;font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.</p>
</div>
<!--- third tab, trivia + likes/dislikes --->
<div class="tab-pane card-block pb-0" id="three">
<div class="row no-gutters">
<!--- likes and dislikes --->
<div class="col-lg-6">
<span style="color:#000;font-size:17px;font-weight:700;">LIKES . . .</span>
<ul style="color:#000;font-size:12px;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-lg-6">
<span style="color:#000;font-size:17px;font-weight:700;">DISLIKES . . .</span>
<ul style="color:#000;font-size:12px;">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--- trivia and notes --->
<div class="justify-content-between">
<div><span style="color:#000;font-size:17px;font-weight:700;">TRIVIA . . .</span></div>
<div><i class="fas fa-sparkles" style="font-size:17px;color:#E955A6;"></i></div>
</div>
<ul style="color:#000;font-size:12px;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center mt-2" href="https://toyhou.se/19483131" style="font-size:0.6em;">code by dogboy <i class="fad fa-rainbow"></i></a>
