[F2U] ♱ NOIR
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!------
[F2U code by Diadem]
ᘡ Do NOT remove my credits please
ᘡ Code TOS: https://toyhou.se/32638528.
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~
୨୧ Background, Link + Shadow: #000
୨୧ Border, Icons + Main Text: #fff (also glow)
୨୧ Accent Text/Glow:#c7c7c7
------>
<center>
<!------------------------------------------------------------
୨୧ Base Container setup
AND your oc image/any image here ~
------------------------------------------------------------->
<div class="container col-md-7 " style="
box-shadow: 6px 6px 0px #000;
border:1px solid #fff;
wh:100; height:480px; background:#000;
background-image:url(https://i.pinimg.com/736x/bf/6b/cd/bf6bcd1aa4617619f40e44de4b655075.jpg);
background-attachment:center;
background-size:cover;">
<!------------------------------------------------------------
୨୧ Main Text Area
Container setup : Main Text
------------------------------------------------------------->
<div class="card p-3 pull-left" style="
height:479px;
width:230px;
background:#000;
border-radius:0px;
border: 1px solid #fff">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 424px; padding:0px 0px 0px 0px; overflow-x:hidden;">
<div class=" tab-content">
<div class="tab-pane fade in active show" id="basic">
<div class="row no-gutters">
<div class="col-9 mb-2" style=" height:2px; background:#fff; margin:auto;"></div>
<!------------------------------------------------------------
୨୧ MAIN / Font Awesome Icons
using FA, the main 3 motifs of your oc
------------------------------------------------------------->
<div class="col-3" style="font-size:9px; margin:auto; color:#fff"><i class="fal fa-bat"></i> <i class="fal fa-umbrella fa-flip" style="text-shadow:0px 0px 3px #fff; animation-duration:5s"></i> <i class="fal fa-droplet"></i> </div>
</div>
<!------------------------------------------------------------
୨୧ MAIN / OC name
https://fontmeme.com/dancing-with-the-devil-font/
------------------------------------------------------------->
<img class="mb-2" src="https://fontmeme.com/permalink/250320/aa1313d3e6eee3c2094b063e9616f70e.png">
<!------------------- DIVIDER DECOR-------------------------->
<div class="mb-1" style="height:2px; background:#fff;"></div>
<!------------------- DIVIDER DECOR END---------------------->
<!------------------------------------------------------------
୨୧ MAIN /FLAVOUR TXT DECOR
change to whatever ya want!
------------------------------------------------------------->
<p class="text-uppercase; text-justify-content-between mb-3" style="font-family:monospace; font-size:7px; color:#c7c7c7">
In the darkest depths lay the most beautiful of women. Of nocturne they were born and of beauty they were given.
</p>
<!------------------------------------------------------------
୨୧ MAIN /BASIC INFORMATION
------------------------------------------------------------->
<div class="row no-gutters mb-0" style="font-family:monospace; font-size:9px; color:#fff">
<div class="col-9" style="margin:auto;"><span style="color:#c7c7c7">name:</span> Firstname Lastname</div>
<div class="col-5"style="margin:auto;"><span style="color:#c7c7c7">age:</span> content</div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">gender:</span> gender</div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">title:</span> content</div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">prns:</span> content</div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">worth:</span> $$$</div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">design:</span> <a href="#" target="_BLANK" style="text-decoration:none; color:#fff"><u>content</u></a></div>
<div class="col-5" style="margin:auto;"><span style="color:#c7c7c7">code:</span><a href="/diadem" target="_BLANK" data-toggle="tooltip" title="code by beel" style="text-decoration:none; color:#fff">✦✦✦</a></div>
</div>
<!------------------------------------------------------------
୨୧ Decor Bit ~
------------------------------------------------------------->
<div class="mb-3" style="background:#fff; height:2px; width:160px; transform:rotate(-90deg); margin-top:80px; font-family:monospace; font-size:8px; color:#c7c7c7"><br>
adj <i class="fal fa-diamond"></i> adj <i class="fal fa-diamond"></i> adj
</div>
<!------------------------------------------------------------
୨୧ MAIN / ABOUT
------------------------------------------------------------->
<div class="bg-transparent" style="height:70px"></div>
<p class="text-justify" style="font-family:monospace; font-size:8px; color:#fff">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
<!------------------------------------------------------------
୨୧ TRIVIA / Stat Report
------------------------------------------------------------->
<div class="tab-pane fade" id="trivia">
<i class="fas fa-coffin-cross" style="font-size:30px; color:#fff; text-shadow:0 0 5px #fff, 0 0 7px #c7c7c7"></i>
<p class="tetx-uppercase mb-0" style="font-family:monospace; font-size:20px; letter-spacing:6px; color:#fff">Stat Report</p>
<div class="mb-2" style="background:#fff; height:1px;"></div>
<div class="row" style="font-family:monospace; font-size:9px">
<div class="col-6">
<p class="text-left" style="color:#fff">Charisma</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #fff">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #fff;"></div></div>
</div>
<div class="col-5">
<p class="text-right" style="color:#fff">Intellect</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #fff">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #fff;"></div></div>
</div>
<div class="col-6">
<p class="text-left" style="color:#fff">Confidence</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #fff">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #fff;"></div></div>
</div>
<div class="col-5">
<p class="text-right" style="color:#fff">Temperment</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #fff">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #fff;"></div></div>
</div>
</div>
<div class="mb-2" style="background:#fff; height:1px;"></div>
<!------------------------------------------------------------
୨୧ TRIVIA / Best + Worst Trait
------------------------------------------------------------->
<p class="mb-0"style="color:#fff; font-family:monospace; font-size:20px; text-shadow:0px 0px 4px #fff"><i class="fas fa-sparkle fa-spin" style="animation-duration:5s"></i> Best Trait</p>
<p class="text-justify" style="color:#fff; font-family:monospace; font-size:8px;">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p class="mb-0"style="color:#fff; font-family:monospace; font-size:20px; text-shadow:0px 0px 4px #fff"><i class="fas fa-knife-kitchen fa-spin" style="animation-duration:5s"></i> Worst Trait</p>
<p class="text-justify mb-3" style="color:#fff; font-family:monospace; font-size:8px;">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!------------------------------------------------------------
୨୧ TRIVIA / LIKES , DISLIKES + TRIVIA
------------------------------------------------------------->
<div class="row no-gutters">
<div class="col-5">
<ul style="List-style-type: none; font-family:monospace; font-size:9px; padding-left:0; color:#fff;">
<li><i class="fal fa-heart"></i> like</li>
<li><i class="fal fa-heart"></i> like</li>
<li><i class="fal fa-heart"></i> like</li>
<li><i class="fal fa-heart"></i> like</li>
<!------------------Add more above this line ---------------->
</ul>
</div>
<div class="col-5">
<ul style="List-style-type: none; font-family:monospace; font-size:9px; color:#fff;">
<li><i class="fal fa-heart-crack"></i> hate</li>
<li><i class="fal fa-heart-crack"></i> hate</li>
<li><i class="fal fa-heart-crack"></i> hate</li>
<li><i class="fal fa-heart-crack"></i> hate</li>
<!------------------Add more above this line ---------------->
</ul>
</div>
<!------------------------------------------------------------
୨୧ TRIVIA / FUN FACTS
------------------------------------------------------------->
<ul style="List-style-type: none; font-family:monospace; font-size:9px; padding-left:0; color:#fff">
<li><i class="fas fa-moon"></i> Cheesecake shortbread cheesecake marzipan jelly beans. </li>
<li><i class="fas fa-moon"></i> Cheesecake shortbread cheesecake marzipan jelly beans. </li>
<li><i class="fas fa-moon"></i> Cheesecake shortbread cheesecake marzipan jelly beans. </li>
<li><i class="fas fa-moon"></i> Cheesecake shortbread cheesecake marzipan jelly beans. </li>
<li><i class="fas fa-moon"></i> Cheesecake shortbread cheesecake marzipan jelly beans. </li>
<!------------------Add more above this line ---------------->
</ul>
</div>
</div>
<!------------------------------------------------------------
୨୧ TRIVIA END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ STORY BEGIN
------------------------------------------------------------->
<div class="tab-pane fade" id="story">
<i class="fas fa-book-open-cover mb-1" style="font-size:30px; text-shadow:0 0 5px #fff, 0 0 7px #c7c7c7; color:#fff"></i>
<p class="mb-1" style="color:#c7c7c7; font-family:monospace; font-size:7px">cw: content content content</p>
<div class="mb-2" style="background:#fff; height:1px;"></div>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n4" style="overflow:auto; height: 270px; padding: 0px 20px 0px 0px;">
<p class="text-justify" style="color:#fff; font-family:monospace; font-size:8px;">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
<br><br>
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
<div class="bg-transparent" style="height:8px"></div>
<p class="mb-3" style="font-family:monospace; font-size:9px; color:#fff; letter-spacing:7px; margin:auto"><i class="fal fa-chevron-down"></i> Scroll to read</p>
<!------------------------------------------------------------
୨୧ STORY / LINKS
------------------------------------------------------------->
<!----------------------- CHARA 01 ------------------------>
<div class="row no-gutters">
<div class="col-3 mb-1 pull-left" style="height:12px; background:transparent; margin-top:-6px">
<i class="fas fa-rings-wedding" style="font-size:10px; color:#fff;"></i>
</div>
<div class="col-8 mb-1 pull-right" style="height:12px; background-color:#fff; margin:auto">
<p class="text-right" style="font-family:monospace; font-size:9px"><a href="#" target="_BLANK" style="color:#000; text-decoration:none">Character</a></p>
</div>
</div>
<p class="text-justify mb-3" style="font-family:monospace; font-size:8px; color:#fff">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!----------------------- CHARA 02 ------------------------>
<div class="row no-gutters">
<div class="col-3 mb-1 pull-left" style="height:12px; background:transparent; margin-top:-6px">
<i class="fas fa-heart" style="font-size:10px; color:#fff;"></i>
</div>
<div class="col-8 mb-1 pull-right" style="height:12px; background-color:#fff; margin:auto">
<p class="text-right" style="font-family:monospace; font-size:9px"><a href="#" target="_BLANK" style="color:#000; text-decoration:none">Character</a></p>
</div>
</div>
<p class="text-justify mb-3" style="font-family:monospace; font-size:8px; color:#fff">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!----------------------- CHARA 03 ------------------------>
<div class="row no-gutters">
<div class="col-3 mb-1 pull-left" style="height:12px; background:transparent; margin-top:-6px">
<i class="fas fa-knife-kitchen" style="font-size:10px; color:#fff;"></i>
</div>
<div class="col-8 mb-1 pull-right" style="height:12px; background-color:#fff; margin:auto">
<p class="text-right" style="font-family:monospace; font-size:9px"><a href="#" target="_BLANK" style="color:#000; text-decoration:none">Character</a></p>
</div>
</div>
<p class="text-justify mb-3" style="font-family:monospace; font-size:8px; color:#fff">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!----------------------- CHARA 04 ------------------------>
<div class="row no-gutters">
<div class="col-3 mb-1 pull-left" style="height:12px; background:transparent; margin-top:-6px">
<i class="fas fa-question" style="font-size:10px; color:#fff;"></i>
</div>
<div class="col-8 mb-1 pull-right" style="height:12px; background-color:#fff; margin:auto">
<p class="text-right" style="font-family:monospace; font-size:9px"><a href="#" target="_BLANK" style="color:#000; text-decoration:none">Character</a></p>
</div>
</div>
<p class="text-justify mb-3" style="font-family:monospace; font-size:8px; color:#fff">
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. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-------------------- Add more above this line ------------->
<!------------------------------------------------------------
୨୧ No touchyyyy
------------------------------------------------------------->
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ TABS
------------------------------------------------------------->
<ul class="nav nav-tabs card-header-tabs row" style="height:34px">
<li class="col-4 mb-1"><a class="btn btn-block btn active" data-toggle="tab" href="#basic" style="background:transparent; color:#fff; border-radius:0px; margin:auto;"><i class="fa-solid fa-bat"></i></a></li>
<li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-dark" data-toggle="tab" href="#trivia" style="background:transparent; color:#fff; border-radius:0px;"><i class="fa-solid fa-sliders"></i></a></li>
<li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-dark" data-toggle="tab" href="#story" style="background:transparent; color:#fff; border-radius:0px;"><i class="fa-solid fa-book-open"></i></a></li>
</ul>
</center>