[F2U] ♱ ROUGE
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/border: #c91d36
୨୧ Link Colour: #21090d
୨୧ Secondary Accent Decor: #a3192d / #821222
୨୧ Highlighting Text: #36040b
୨୧ Main Text:#fff
୨୧ Shadows: #000
------>
<!------------------------------------------------------------
୨୧ Background~
------------------------------------------------------------->
<div class="tab-content">
<div class="container p-5" style="
border: 4px solid #c91d36;
background-image:url(https://i.pinimg.com/736x/97/60/74/976074b0b8cb9a9b34196b55e93842b7.jpg);
background-size:cover;
background-repeat:repeat;
background-attachment:fixed;">
<div class="row mb-0 justify-content-center">
<!------------------------------------------------------------
୨୧ Left Container
your oc's picture !
------------------------------------------------------------->
<div class="col-md-2 wh-100 pt-4" style="
border: 4px solid #c91d36;
height: 380px;
background-image:url(https://i.pinimg.com/736x/ba/1c/17/ba1c17b969b62dc0b87c2ebd70e51792.jpg);
background-size:cover;
background-position:top;
background-color:#c91d36;
box-shadow: 0px 3px 0px #000;
border-top-right-radius:0px;
border-top-left-radius:25px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;">
<!-------------------------- Lil bio ----------------------
This little bio is hidden on mobile!
<!----------------------------------------------------------->
<div class="hidden-sm-down" style="transform:rotate(-90deg); font-family:monospace; font-size:.7rem; margin-left:-150px; margin-top:180px; text-shadow: 2px 7px 0px #000; color:#fff">age ・ pron/noun ・ occupation</div>
</div>
<!------------------------------------------------------------
୨୧ Right Container
------------------------------------------------------------->
<div class=" col-md-6 pt-3" style="
height: 380px;
background:#c91d36;
box-shadow: 0px 3px 0px #000;">
<div class=" tab-content">
<div class="tab-pane fade in active show" id="about">
<div style="height:310px">
<div class="row no-gutters mb-2">
<!------------------------------------------------------------
୨୧ 2ND CONTAINER / ABOUT
------------------------------------------------------------->
<!-------------------------- Decor ------------------------->
<div class="col-8 px-3 pt-0" style="
height:5px;
background-color:#a3192d;">
</div>
<div class="col-1" style="
height:5px;
margin:auto;
background-color:#821222;">
</div>
<div class="col-1 ml-2" style="
height:5px;
margin:auto;
background-color:#821222;">
</div>
<div class="col-1 ml-2" style="
height:5px;
margin:auto;
background-color:#821222;">
</div>
</div>
<!------------------------------------------------------------
୨୧ Character Name
https://fontmeme.com/cali-life-style-font/
be sure to add the shadow under effect!
------------------------------------------------------------->
<img
class="pull-right mb-0"
src="https://fontmeme.com/permalink/250314/21f3d13f2943d5a5dd511ec5ef1ac3c5.png">
<div class="bg-transparent" style="height:120px"></div>
<!------------------- Flavour Text Decor ~ ----------------->
<p class="justify-content-between text-uppercase mb-1" style="font-family:monospace; font-size:7px; color:#fff">
Isn't it nice to never have to worry? I remember the days when I sat at my vanity and applied rouge onto my cheeks...my nose in the dead of night to no one but myself. (change flavour text to whatever you want !)
</p>
<div class="col-12 mb-2 " style="height:2px; background:#821222;"></div>
<!-------------------------- End of Decor ----------------->
<!------------------- About Paragraph ~ ------------------->
<p class="text-left" style="font-family:monospace; font-size:8px; letter-spacing:3px; color:#fff">scroll if applicable.</p>
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 120px; padding: 0px 0px 0px 0px;">
<p class="text-justify-content-between" style="font-family:monospace; font-size:10px; color:#fff">
<span style="color:#36040b"> Lorem ipsum dolor sit amet,</span> 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.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>
</div>
<!------------------------------------------------------------
୨୧ ABOUT END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ Stats + Trivia
------------------------------------------------------------->
<div class="tab-pane fade" id="trivia">
<div style="height:310px">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 310px; padding: 0px 20px 0px 20px;">
<!------------------------------------------------------------
୨୧ Stats / STATS AREA
------------------------------------------------------------->
<div class="row" style="font-family:monospace; font-size:10px; text-shadow: 0px 1px 1px #000">
<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 #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></div></div>
</div>
<div class="col-6">
<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 #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></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 #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></div></div>
</div>
<div class="col-6">
<p class="text-right" style="color:#fff">Integrity</p>
<div class="w-100 progress mb-2 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></div></div>
</div>
<div class="col-6">
<p class="text-left" style="color:#fff">Temperment</p>
<div class="w-100 progress mb-1 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></div></div>
</div>
<div class="col-6">
<p class="text-right" style="color:#fff">Courage</p>
<div class="w-100 progress mb-1 rounded-0 bg-transparent pb-1" style="height:5px; border: 1px solid #36040b">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #36040b;"></div></div>
</div>
<div class="bg-transparent p-1"></div>
</div>
<!------------------------------------------------------------
୨୧ Stats / TRIVIA
------------------------------------------------------------->
<div class="row no-gutters" style="margin:auto; color:#fff">
<div class="col-8 my-2 " style="height:4px; background:#821222; border-radius:2px">
</div>
<div class="col-3 text-center" style="font-family:monospace; font-size:16px; text-shadow: 0px 1px 1px #000">Trivia</div>
<ul style="list-style-type: none; padding:0px; font-size:10px; font-family:monospace">
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit.</li>
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit.</li>
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit.</li>
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit.</li>
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit.</li>
<li><i class="far fa-sparkle"></i> Lorem ipsum odor amet, consectetuer adipiscing elit. Molestie potenti magnis suscipit habitant id sed. Magnis malesuada habitant mauris, cubilia ut at parturient felis eleifend? Ad vestibulum semper integer aliquet odio.</li>
<!-------------- Add more above this line ------------------->
</ul>
</div>
<!------------------------------------------------------------
୨୧ Stats / SKILLS
------------------------------------------------------------->
<div class="row no-gutters mb-2" style="margin:auto; color:#fff">
<div class="col-3 text-center" style="font-family:monospace; font-size:16px;text-shadow: 0px 1px 1px #000">Skills</div>
<div class="col-8 my-2 " style="height:4px; background:#821222; border-radius:2px; margin:auto;">
</div>
</div>
<div class="row" style="font-family:monospace; color:#fff; font-size:8px">
<!------------------- SKILL ONE ~ ------------------->
<div class="col-6 mb-3">
<h3 class="text-left" style="color:#fff; text-shadow: 0px 1px 1px #000">Skill name 1</h3>
<p class="text-left">
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>
<!------------------- SKILL TWO ~ ------------------->
<div class="col-6 mb-3">
<h3 class="text-right" style="color:#fff; text-shadow: 0px 1px 1px #000">Skill name 2</h3>
<p class="text-right">
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>
<!------------------- SKILL THREE ~ ------------------->
<div class="col-6 mb-3">
<h3 class="text-left" style="color:#fff; text-shadow: 0px 1px 1px #000">Skill name 3</h3>
<p class="text-left">
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>
<!------------------- SKILL FOUR ~ ------------------->
<div class="col-6 mb-3">
<h3 class="text-right" style="color:#fff; text-shadow: 0px 1px 1px #000">Skill name 4</h3>
<p class="text-right">
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>
<!------------------------------------------------------------
୨୧ SKILLS END
------------------------------------------------------------->
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ Stats + Trivia END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ Story / STORY START
------------------------------------------------------------->
<div class="tab-pane fade" id="story">
<div style="height:310px">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 310px; padding: 0px 20px 0px 20px;">
<h3 class="text-left" style="font-family:monospace; color:#fff; text-shadow: 0px 1px 1px #000"><i class="fas fa-bookmark"></i> Backstory</h3>
<!------------------- content warnings ~ ------------------->
<div class="col-12 mb-0" style="height:4px; background:#821222"></div>
<p class="text-right mb-3" style="font-family:monospace; font-size:8px; color:#fff">cw: content content content</p>
<!------------------- Story below ! ~ ------------------->
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 210px; padding: 0px 20px 0px 20px;">
<p class="text-justify mb-2" style="font-family:monospace; font-size:9px; 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.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.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.
</div>
</div>
</p>
<p class="text-left mb-2" style="font-family:monospace; font-size:8px; color:#fff">Scroll to read</p>
<!------------------------------------------------------------
୨୧ story / STORY END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ story / LINKS
------------------------------------------------------------->
<h3 class="text-right" style="font-family:monospace; color:#fff; text-shadow: 0px 1px 1px #000"><i class="fas fa-sparkle"></i> Links</h3>
<div class="col-12 mb-0" style="height:4px; background:#821222"></div>
<!------------------ CHARACTER 01 -------------------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
<!--------------- CHARACTER 01 LINK ----------------------->
<a href="#" style="color: #21090d; font-family:monospace; text-transform: default; font-size: 11pt; ">
Character</a>
<span class="small">
<i class="fa-solid fa-rings-wedding fa-beat" style="color:#fff"></i>
</span>
</div>
<p class="text-justify" style="color:#fff; font-size:8px; font-family:monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</p>
</div>
<!------------------ CHARACTER 1 END ---------------------->
<!------------------ CHARACTER 2 -------------------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
<!--------------- CHARACTER 2 LINK ----------------------->
<a href="#" style="color: #21090d; font-family:monospace; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-heart fa-beat" style="color:#fff"></i>
</span>
</div>
<p class="text-justify" style="color:#fff; font-size:8px; font-family:monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</p>
</div>
<!------------------ CHARACTER 02 END ---------------------->
<!------------------ CHARACTER 3 -------------------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
<!--------------- CHARACTER 03 LINK ----------------------->
<a href="#" style="color: #21090d; font-family:monospace; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-knife-kitchen fa-beat" style="color:#fff"></i>
</span>
</div>
<p class="text-justify" style="color:#fff; font-size:8px; font-family:monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</p>
</div>
<!------------------ CHARACTER 3 END ---------------------->
<!------------------ CHARACTER 4 -------------------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
<!--------------- CHARACTER 04 LINK ----------------------->
<a href="#" style="color: #21090d; font-family:monospace; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-question fa-beat" style="color:#fff"></i>
</span>
</div>
<p class="text-justify" style="color:#fff; font-size:8px; font-family:monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.
</p>
</div>
<!------------------ CHARACTER 4 END --------------------->
<!------------ Add more above this line-------------------->
<!------------------------------------------------------------
୨୧ story / LINKS END
------------------------------------------------------------->
<!------------------------ no touchy ! --------------------->
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ Nav Tags!
------------------------------------------------------------->
<div class="bg-transparent" style="height:10px"></div>
<ul class="nav nav-tabs card-header-tabs row mb-1">
<li class="col-4 mb-1"><a class="btn btn-block btn active" data-toggle="tab" href="#about" style="border:1px solid #c91d36; background:#c91d36; color:#36040b; border-radius:0px;"><i class="fa-solid fa-sparkle"></i></a></li>
<li class="col-4 mb-1"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#trivia" style="border:1px solid #c91d36; background:#c91d36; color:#36040b; 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-secondary" data-toggle="tab" href="#story" style="border:1px solid #c91d36; background:#c91d36; color:#36040b; border-radius:0px;"><i class="fa-solid fa-books"></i></a></li>
</ul>
<!------------------------------------------------------------
୨୧ End of main code
------------------------------------------------------------->
<p class="text-right" style="font-family:monospace; font-size:9px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" style="color:#fff; text-decoration:none;">✦✦✦</a> </p>