Nosebleed Boy
created by:raccodes
Custom ColorsHTMLCharacterUser
Copy
<!-------------------------------------------------------------------------------------------
NOSEBLEED BOY BY RACCODES
DO NOT
› Use WYSIWYG with my codes.
› Completely remove the credit.
› Claim my work in it's entirety as your own.
› Use or upload my content anywhere other than ToyHouse.
› Re-upload or redistribute or otherwise profit directly from my work.
FEEL FREE TO
› Move the credit elsewhere.
› Use my work anywhere on your TH.
› Frankenstein my codes with others, as long as they allow it.
NOTE
› If you wish to see what you're editing, please use https://th.circlejourney.net/ or https://cheeriko.github.io/playhouse/editor/index.html
› If you use WYSIWYG with my code, and it breaks, I won't be fixing it.
DISCORD
› Feel free to join and interact, as well as enter into giveaways!
› https://discord.gg/rc9sZk9Gcz
-------------------------------------------------------------------------------------------
colors
› #fff /* white */
› #000 /* black */
› #ddd /* borders */
› #f4f4f4 /* off-white*/
follow this guide to change the music
https://toyhou.se/8682081.all-music-players/8682087
------------------------------------------------------------------------------------------->
<div class="container p-0" style="max-width:800px;color:#000;">
<div class="card rounded-0" style="background:#ffffff;">
<div class="row no-gutters p-1">
<!--- top content --->
<div class="col-lg-10 p-1">
<div class="card bg-transparent d-flex rounded-0 p-2 text-uppercase h-100" style="font-family:Times;font-size:2em;border-color:#ddd;">
<!----image---->
<div class="card rounded-0 h-100" style="background:url('https://i.pinimg.com/1200x/10/53/c2/1053c222541d465ab3c40847e111d2b5.jpg') center right;background-size:cover;opacity:0.9;border-color:#ddd;min-height:140px;">
</div>
<div class="d-flex flex-wrap" style="position:absolute;margin-top:13%;">
<!--- decor boxes --->
<div class="card rounded-0 p-1 align-self-stretch border-0 hidden-sm-down" style="background:#000;z-index:9;"></div>
<div class="card rounded-0 p-2 align-self-stretch border-0 mx-1 hidden-sm-down" style="background:#000;z-index:9;"></div>
<!--- username --->
<div class="card rounded-0 px-2 text-white border-0 align-items-end pl-lg-5" style="background:#000;font-family: MS Gothic;">Username </div>
</div>
</div>
</div>
<!---- social media buttons ---->
<div class="col-lg-2">
<!--- menu icons --->
<div class="row d-flex flex-row flex-sm-column justify-content-between no-gutters">
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- twitter --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">twitter</span> <i class="fa-brands fa-twitter fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- tumblr --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">tumblr</span> <i class="fa-brands fa-tumblr fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- deviantart --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">deviantart</span> <i class="fa-brands fa-deviantart fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- instagram --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">instagram</span> <i class="fa-brands fa-instagram fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- furaffinity --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white tooltipster" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">furaffinity</span> <i class="fa-solid fa-paw fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
<!---->
<div class="col-md col-auto p-1">
<div class="card-0 rounded-0 p-0 text-uppercase" style="background:#000;overflow:hidden;">
<!--- discord --->
<a title="DISCORD USERNAME HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 py-2 px-lg-0 px-2 text-white tooltipster" style="font-size:70%; box-shadow:none; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell"><span class="hidden-lg-down">discord</span> <i class="fa-brands fa-discord fa-fw hidden-lg-up" style="font-size:12pt;"></i></a>
</div>
</div>
</div>
</div>
</div>
<!------------- smoke box ------------------>
<div class="card rounded-0 border-0" style="background:#000;">
<div class="card rounded-0 border-0 py-5 align-items-center justify-content-center" style="background:url('https://64.media.tumblr.com/7d192f396d124174337af3ee979af715/tumblr_pmd6e6Ol7y1runoqyo3_r1_540.gif') center;background-size:cover;background-blend-mode:screen;opacity:0.3;">
</div>
</div>
<!---- rows --->
<div class="row no-gutters d-flex p-1">
<!--- left --->
<div class="col-lg-4 order-md-1 order-2">
<div class="row no-gutters">
<!----- folder ------>
<div class="col-lg-12 col-6 p-1">
<div class="card rounded-0 p-1" style="border-color:#ddd;background:#000;">
<!--- folder image --->
<div class="card-0 rounded-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/1200x/a8/b9/01/a8b901b2d8de254bde6c90f02e016b77.jpg') center;background-size:cover;height:100px;opacity:0.8;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 h-100 align-items-end justify-content-end" style="box-shadow:none; color:#000; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell">FOLDER</a>
</div>
</div>
</div>
<!----- folder ------>
<div class="col-lg-12 col-6 p-1">
<div class="card rounded-0 p-1" style="border-color:#ddd;background:#000;">
<!--- folder image --->
<div class="card-0 rounded-0 p-0 text-uppercase align-items-end" style="background-image:url('https://i.pinimg.com/1200x/a8/b9/01/a8b901b2d8de254bde6c90f02e016b77.jpg');background-color:#fff;background-position:center;background-size:cover;height:100px;opacity:0.8;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 h-100 align-items-end justify-content-end" style="box-shadow:none; color:#000; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell">FOLDER</a>
</div>
</div>
</div>
<!----- folder ------>
<div class="col-lg-12 col-6 p-1">
<div class="card rounded-0 p-1" style="border-color:#ddd;background:#000;">
<!--- folder image --->
<div class="card-0 rounded-0 p-0 text-uppercase align-items-end" style="background-image:url('https://i.pinimg.com/1200x/a8/b9/01/a8b901b2d8de254bde6c90f02e016b77.jpg');background-color:#fff;background-position:center;background-size:cover;height:100px;opacity:0.8;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 h-100 align-items-end justify-content-end" style="box-shadow:none; color:#000; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell">FOLDER</a>
</div>
</div>
</div>
<!----- folder ------>
<div class="col-lg-12 col-6 p-1">
<div class="card rounded-0 p-1" style="border-color:#ddd;background:#000;">
<!--- folder image --->
<div class="card-0 rounded-0 p-0 text-uppercase align-items-end" style="background:url('https://i.pinimg.com/1200x/a8/b9/01/a8b901b2d8de254bde6c90f02e016b77.jpg') center;background-size:cover;height:100px;opacity:0.8;">
<!--- link + folder name --->
<a href="LINK_HERE" class="btn btn-outline-warning rounded-0 w-100 border-0 h-100 align-items-end justify-content-end" style="box-shadow:none; color:#000; mix-blend-mode: luminosity; letter-spacing:1px; cursor: cell">FOLDER</a>
</div>
</div>
</div>
</div>
</div>
<!---- small stats ---->
<div class="col-lg-8 order-md-2 order-1 mt-n5">
<!---- main content ---->
<div class="card rounded-0 p-2 mb-2 mx-1" style="border-color:#ddd;background:transparent;height:420px;">
<!--- main box --->
<div class="card rounded-0 p-1 h-100" style="border-color:#ddd;background:#fff;overflow:auto;">
<!---- content ---->
<div class="row no-gutters">
<!---- icon + basics ---->
<div class="col-lg-5">
<div class="row no-gutters">
<div class="col-lg-12 col-5 p-1">
<!--- icon --->
<div class="card rounded-0 border-0 p-1 h-100" style="background:#000;min-height:170px;">
<!--- change the url here to change the icon --->
<div class="card rounded-0 border-0 h-100" style="background:url('https://i.pinimg.com/736x/27/a8/e4/27a8e4e133cd66145ccd8c3b63171068.jpg') center;background-size:cover;">
</div>
</div>
</div>
<!---- stats ---->
<div class="col-lg-12 col-7 p-1">
<!------ name -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">Name</b>
<span>content</span>
</div>
<!------ age -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">age</b>
<span>content</span>
</div>
<!------ pronouns -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">pronouns</b>
<span>content</span>
</div>
<!------ languages -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">languages</b>
<span>content</span>
</div>
<!------ birthday -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">Birthday</b>
<span>content</span>
</div>
<!------ timezone -------->
<div class="d-flex justify-content-between mb-2" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">timezone</b>
<span>content</span>
</div>
<!------ mbti -------->
<div class="d-flex justify-content-between" style="border-bottom:1px solid #000;">
<b class="text-uppercase px-1" style="background:#000;color:#fff;">mbti</b>
<span>content</span>
</div>
</div>
</div>
</div>
<!---- likes + fandoms + DNI ---->
<div class="col-lg-7 p-1">
<!---- likes ----->
<div class="card rounded-0 text-uppercase px-1" style="background:#f4f4f4;border-width:1px 1px 0 1px;border-color:#ddd;letter-spacing:1px;">
<div class="d-flex justify-content-between">
<!--- icon --->
<i class="fa-solid fa-heart fa-fw my-1" style="font-size:10px;"></i>
<!--- title --->
<span class="small">likes</span>
</div>
</div>
<div class="card rounded-0 mb-2 p-1 small" style="background:#fff;border-color:#ddd;height:103px;overflow:auto">
<!---- content-----> 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.
</div>
<!---- fandoms----->
<div class="card rounded-0 text-uppercase px-1" style="background:#f4f4f4;border-width:1px 1px 0 1px;border-color:#ddd;letter-spacing:1px;">
<div class="d-flex justify-content-between">
<!--- icon --->
<i class="fa-solid fa-star fa-fw my-1" style="font-size:10px;"></i>
<!--- title --->
<span class="small">fandoms</span>
</div>
</div>
<div class="card rounded-0 mb-2 p-1 small" style="background:#fff;border-color:#ddd;height:104px;overflow:auto">
<!---- content-----> 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.
</div>
<!---- fandoms----->
<div class="card rounded-0 text-uppercase px-1" style="background:#f4f4f4;border-width:1px 1px 0 1px;border-color:#ddd;letter-spacing:1px;">
<div class="d-flex justify-content-between">
<!--- icon --->
<i class="fa-solid fa-bomb fa-fw my-1" style="font-size:10px;"></i>
<!--- title --->
<span class="small">dni</span>
</div>
</div>
<div class="card rounded-0 p-1 small" style="background:#fff;border-color:#ddd;height:104px;overflow:auto">
<!---- content-----> 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.
</div>
</div>
</div>
</div>
</div>
<!------ music player ----->
<div class="row no-gutters">
<!----- play button ----->
<div class="col-auto p-1">
<div class="card rounded-0 border-0" style="background:#000;color:#fff;width:83px;height:83px;overflow:hidden;">
<!------ youtube // follow this guide: https://toyhou.se/8682081.all-music-players/8682087 ------------->
<iframe src="https://www.youtube-nocookie.com/embed/-WVNR1Xm-FQ?si=FlVRONyPFroLkdcO&controls=0" width="560" height="415" style="margin-top:-120px;opacity:0.000001;position:absolute;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<i class="fa-light fa-play fa-3x mx-auto my-3"></i>
</div>
</div>
<!---song info --->
<div class="col pl-1 py-1">
<!---- main content ---->
<div class="card rounded-0 p-2 mb-2 mx-1 h-100" style="border-color:#ddd;background:#fff;">
<!--- play icon --->
<div class="card rounded-0 py-1 px-2 h-100 justify-content-center text-uppercase" style="border-color:#ddd;background:#fff;"> Song Title <span class="text-lowercase"> Artist </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>