<!------------
To change color:
- background: #1E1E1E
- boxes: #232323
- box border & hr: #3F3F3F
- accent: #5E8DCF
- text: #F3F3F3
- highlighted text: #000
- muted text: #6C6C6C
To change item:
- image / thumbnail: https://via.placeholder.com/100
TERMS OF SERVICE:
- Please do not remove the credit. You can move them as long as they remain visible.
- Feel free to take parts and frankenstein any of my codes with another, as long as the other coder allows for it.
- Turn off WYSIWYG in your display settings. My codes aren't WYSIWYG-friendly and will break when used with it.
- This is optional, but please favorite this code or comment on my Coding Thread (https://toyhou.se/~forums/16.htmlcss-graphics/268113.-eskaep-codes-html) if you plan to or have used this code!
------------>
<div class="card-block border-0 rounded-0" style="background:#1E1E1E;position:relative;margin-top:-15px;margin-left:-15px;margin-right:-15px;margin-bottom:-31px;z-index:1000;">
<div class="card d-block border-0 rounded-0 pb-5" style="background:#1E1E1E;z-index:100;">
<div class="container px-1" style="max-width:800px;">
<div class="row justify-content-between p-3">
<!------ MUSIC PLAYER ------>
<div class="col-lg-12 mb-2 px-0">
<div class="card p-2 rounded-0 text-justify" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F">
<div class="row no-gutters">
<div class="col-auto p-1">
<i class="fas fa-play fa-fw"></i>
<iframe src="https://www.youtube.com/embed/INSERTLINK" class="w-100" frameborder="0" style="height:30px;position:absolute;bottom:10px;left:0;opacity:0"></iframe>
</div>
<div class="col p-1 text-right">
<p style="font-size:12px;"><strong><em>ARTIST - SONG TITLE</em></strong></p>
</div>
</div>
</div>
</div>
<!------ END MUSIC PLAYER ------>
<!------ LEFT BOX ------>
<div class="col-lg-4 mb-2 px-0">
<!------ IMAGE & USERNAME ------>
<div class="card p-2 rounded-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-bottom:0px;">
<div class="row no-gutters">
<div class="col-5 p-1 text-center">
<img src="https://via.placeholder.com/100" class="img-thumbnail p-1 rounded-0" style="background:transparent;height:90px;border:1px solid #3F3F3F;">
</div>
<div class="col-7 p-1">
<div style="font-size:15px;line-height:15px;">
<strong>NAME <em>!!</em></strong>
<br><small style="color:#6C6C6C;">@username</small>
<p style="font-size:11px;line-height:15px;margin-bottom:0px;">age || time || etc</p>
<hr class="my-1" style="background:#3F3F3F;">
<p style="font-size:12px;"><em>Short quotes. Lorem ipsum dolor sit amet.</em>
</p>
</div>
</div>
</div>
</div>
<!------ END IMAGE & USERNAME ------>
<!------ OTHER SOCIALS ------>
<div class="card p-2 rounded-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;">
<div class="px-2 py-1">
<ul class="nav row mx-auto justify-content-center" style="font-size:15px;">
<li><a href="LINK" class="tooltipster mr-2" style="color:#5E8DCF;" title="Carrd"><i class="fas fa-id-card fa-fw"></i></a></li>
<li><a href="LINK" class="tooltipster mr-2" style="color:#5E8DCF;" title="Deviantart"><i class="fab fa-deviantart fa-fw"></i></a></li>
<li><a href="LINK" class="tooltipster mr-2" style="color:#5E8DCF;" title="Instagram"><i class="fab fa-instagram fa-fw"></i></a></li>
<!------ ADD MORE LINKS HERE ------>
<!----- CREDIT DO NOT DELETE ----->
<li><a href="toyhou.se/eskaep-codes" class="tooltipster mr-0" style="color:#5E8DCF;" title="Code by eskaep"><i class="fas fa-bookmark fa-fw"></i></a></li>
<!----- CREDIT DO NOT DELETE ----->
</ul>
</div>
</div>
<!------ END OTHER SOCIALS ------>
</div>
<!------ END LEFT BOX ------>
<!------ RIGHT BOX ------>
<div class="col-lg-8 mb-2 px-0 pl-md-2">
<!------------ WARNINGS ------------>
<a data-toggle="collapse" href="#warnings" style="color:#F3F3F3;">
<div class="card p-2 rounded-0 mb-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;">
<div class="row no-gutters px-1">
<p style="font-size:15px;"><span><i class="fas fa-triangle-exclamation fa-fade mr-1"></i></span><strong>WARNINGS</strong>
<small> (click to toggle)</small></p>
</div>
</div>
</a>
<div id="warnings" class="collapse">
<div class="card px-3 py-2 rounded-0 mb-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-top:0px;">
<blockquote class="mb-0" style="padding:0px 0px 0px 10px;font-size:inherit;border-left:4px solid #3F3F3F;">
<p class="mb-0 text-justify" style="font-size:13px;">Some of my contents may contain the following topics:</p>
<ul class="fa-ul mb-0 ml-3 pr-2 text-justify" style="font-size:13px;">
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Insert warning here. Lorem ipsum
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum
</li>
<!------ CAN ADD MORE ABOVE THIS LINE ------->
</ul>
<hr class="my-1" style="background:#3F3F3F;">
<p class="mb-0 text-justify" style="font-size:13px;">Elaborate on the warnings. My characters do not represent my mindset or moral beliefs, etc.</p>
</blockquote>
</div>
</div>
<!------------ END WARNINGS ------------>
<!------------ 1ST POST ------------>
<!------ HEADER ------>
<div class="card p-2 rounded-0 mt-2" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-bottom:0px;">
<div class="row no-gutters">
<div class="col-auto p-1">
<img src="https://via.placeholder.com/100" style="max-width:40px;">
</div>
<div class="col-auto px-1" style="font-size:15px;">
<strong>NAME</strong>
<br><small style="color:#6C6C6C;"><strong>last updated</strong> january 1st 2024</small>
</div>
</div>
</div>
<!------ END HEADER ------>
<!------ CONTENT ------>
<div class="card px-3 py-2 rounded-0 mb-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;">
<p style="margin-bottom:4px;font-size:15px;"><strong>ABOUT</strong></p>
<blockquote class="mb-2" style="padding:0px 0px 0px 10px;font-size:inherit;border-left:4px solid #3F3F3F;">
<p class="mb-0 text-justify" style="font-size:13px;">
Write whatever you want here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ultrices justo vel scelerisque. Cras viverra viverra ante quis suscipit. Integer ornare congue posuere. Etiam orci leo, ultricies sit amet commodo maximus, ultrices facilisis lectus. Fusce maximus lobortis massa, vitae vehicula ante dictum quis. Ut venenatis elementum dolor, vitae molestie orci consequat nec. Curabitur dui metus, congue a faucibus a, luctus in nisi. Sed non volutpat augue. Praesent nec felis erat. Etiam laoreet nunc dolor, dapibus rutrum felis commodo in. Ut interdum rutrum tellus, eget venenatis odio sodales vitae.
</p>
</blockquote>
<!------ ART STATUS ------>
<p style="margin-bottom:4px;font-size:15px;"><strong>STATUS</strong></p>
<blockquote class="mb-2" style="padding:0px 0px 0px 10px;font-size:inherit;border-left:4px solid #3F3F3F;">
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span class="px-1 mr-1" style="background:#5E8DCF;color:#000;">COMMISSION</span><span class="text-right">closed</span>
</div>
<div class="d-flex justify-content-between mb-1" style="font-size:13px;">
<span class="px-1 mr-1" style="background:#5E8DCF;color:#000;">ART TRADE</span><span class="text-right">closed</span>
</div>
<div class="d-flex justify-content-between" style="font-size:13px;">
<span class="px-1 mr-1" style="background:#5E8DCF;color:#000;">REQUEST</span><span class="text-right">closed</span>
</div>
</blockquote>
<!------ END ART STATUS ------>
</div>
<!------ END CONTENT ------>
<!------ FOOTER ------>
<div class="card p-2 rounded-0 mb-2" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-top:0px;">
<div class="px-2">
<ul class="nav row no-gutters" style="font-size:12px;color:#6C6C6C;">
<li><i class="fas fa-heart fa-fw mr-1"></i></a></li>
<li><i class="fas fa-comment-alt fa-fw mr-1"></i></a></li>
<li><i class="fas fa-retweet fa-lg mr-1"></i></a></li>
</ul>
</div>
</div>
<!------ END FOOTER ------>
<!------------ END 1ST POST ------------>
<!------------ 2ND POST ------------>
<!------ HEADER ------>
<div class="card p-2 rounded-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-bottom:0px;">
<div class="row no-gutters">
<div class="col-auto p-1">
<img src="https://via.placeholder.com/100" style="max-width:40px;">
</div>
<div class="col-auto px-1" style="font-size:15px;">
<strong>NAME</strong>
<br><small style="color:#6C6C6C;"><strong>last updated</strong> january 1st 2024</small>
</div>
</div>
</div>
<!------ CONTENT ------>
<div class="card px-3 py-2 rounded-0 mb-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;">
<p style="margin-bottom:4px;font-size:15px;"><strong>NOTES</strong></p>
<blockquote class="mb-0" style="padding:0px 0px 0px 10px;font-size:inherit;border-left: 4px solid #3F3F3F;">
<ul class="fa-ul mb-0 ml-3 text-justify" style="font-size:13px;">
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>
Insert whatever you want here. Maybe a BYI or DNI, or something you want people to remember.
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ultrices justo vel scelerisque. Cras viverra viverra ante quis suscipit. Integer ornare congue posuere.
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. What if the world is going to end tomorrow? What have I contributed to this life? Cras viverra viverra ante quis suscipit.
</li>
<li><span><i class="fas fa-li fa-sm fa-arrow-right mr-1 mt-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ultrices justo vel scelerisque. Cras viverra viverra ante quis suscipit. Integer ornare congue posuere.
</li>
<!----- CAN ADD MORE ABOVE THIS LINE ----->
</ul>
</blockquote>
</div>
<!------ FOOTER ------>
<div class="card p-2 rounded-0 mb-2" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-top:0px;">
<div class="px-2">
<ul class="nav row no-gutters" style="font-size:12px;color:#6C6C6C;">
<li><i class="fas fa-heart fa-fw mr-1"></i></a></li>
<li><i class="fas fa-comment-alt fa-fw mr-1"></i></a></li>
<li><i class="fas fa-retweet fa-lg mr-1"></i></a></li>
</ul>
</div>
</div>
<!------------ END 2ND POST ------------>
<!------------ 3RD POST ------------>
<!------ HEADER ------>
<div class="card p-2 rounded-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-bottom:0px;">
<div class="row no-gutters">
<div class="col-auto p-1">
<img src="https://via.placeholder.com/100" style="max-width:40px;">
</div>
<div class="col-auto px-1" style="font-size:15px;">
<strong>NAME</strong>
<br><small style="color:#6C6C6C;"><strong>last updated</strong> january 1st 2024</small>
</div>
</div>
</div>
<!------ CONTENT ------>
<div class="card px-3 py-2 rounded-0 mb-0" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;">
<p style="margin-bottom:4px;font-size:15px;"><strong>INTERESTS</strong></p>
<blockquote class="mb-0" style="padding:0px 0px 0px 10px;font-size:inherit;border-left: 4px solid #3F3F3F;">
<p class="mb-1 text-justify" style="font-size:13px;">Input your interests below. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ultrices justo vel scelerisque. Cras viverra viverra ante quis suscipit. Integer ornare congue posuere.
<br><a data-toggle="collapse" href="#expand" style="color:inherit;">Show interests <span><i class="fas fa-caret-down ml-1"></i></span></a>
</p>
<div id="expand" class="collapse show">
<p class="mb-1 text-justify" style="font-size:13px;">
<span class="px-1 mr-1" style="font-size:12px;background:#5E8DCF;color:#000;">SERIES</span>
item, item, item, list as much as you want, really.
</p>
<p class="mb-1 text-justify" style="font-size:13px;">
<span class="px-1 mr-1" style="font-size:12px;background:#5E8DCF;color:#000;">FAV CHARACTERS</span>
more item, more item, etc etc
</p>
<p class="mb-1 text-justify" style="font-size:13px;">
<span class="px-1 mr-1" style="font-size:12px;background:#5E8DCF;color:#000;">MUSIC</span>
you know the drill
</p>
<!------ CAN ADD MORE CATEGORY ABOVE THIS LINE ------>
</div>
</blockquote>
</div>
<!------ FOOTER ------>
<div class="card p-2 rounded-0 mb-2" style="background:#232323;color:#F3F3F3;border:1px solid #3F3F3F;border-top:0px;">
<div class="px-2">
<ul class="nav row no-gutters" style="font-size:12px;color:#6C6C6C;">
<li><i class="fas fa-heart fa-fw mr-1"></i></a></li>
<li><i class="fas fa-comment-alt fa-fw mr-1"></i></a></li>
<li><i class="fas fa-retweet fa-lg mr-1"></i></a></li>
</ul>
</div>
</div>
<!------------ END 3RD POST ------------>
</div>
<!------ END RIGHT BOX ------>
</div>
</div>
</div>
</div>