[F2U] ✦ Pretty in Pink
created by:Beelzebunn
Custom ColorsHTMLCharacter
Copy
<!------
[F2U code by Diadem]
ᘡ Do NOT remove my credits please
ᘡ Waw, baby's first html. Kinda ironic ~
ᘡ If something breaks, just comment !
ᘡ Code TOS: https://toyhou.se/32638528.
K bye, happy coding ~ !
------>
<!------------------------------------------------------------
୨୧ TOP BANNER
------------------------------------------------------------->
<div class="card p-3 pt-2 mb-0" style="
border: 2px solid #fff;
border-top-right-radius:25px;
border-top-left-radius:25px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
background-image:
url(
IMG_URL
);
background-size: cover;
background-attachment:fixed;
background-color:#c15252;
">
<h1 class="text-center" style="color:#fff; font-size:40px; font-family:serif;">
<span style="text-shadow: 0 0 1rem #fff"><b>N</b></span>ame <span style="text-shadow: 0 0 1rem #fff"><b>H</b></span>ere
</h1>
</div>
<!------------------------------------------------------------
୨୧ INFO AREA
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ CHARACTER INFO (basic)
------------------------------------------------------------->
<div class="row no-gutters">
<div class="col-md-5 col-12 p-4 mb-3 pt-1 mb-0" style="
border: 2px solid #fff;
border-top-right-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:25px;
background-color:#f9d5d5;">
<!------------------------------------------------------------
୨୧ CHAARACTER ICON START
------------------------------------------------------------->
<center>
<div class="col-sm-5 col-md-4 col-lg-4 col-xl-5 p-0 ml-sm-3 mb-3 mb-sm-2 card p-1" style="background-color:#f2c3c3; border: 2px solid #fff; box-shadow:0 0 1rem #fff">
<img class="wh-200;"
src=IMG_URL
></a>
</div>
</center>
<!------------------------------------------------------------
୨୧ CHARACTER ICON END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ CHARACTER BASICS START
------------------------------------------------------------->
<div class="col card p-2 pt-0" style="
box-shadow: 0 3px 0 3px #d28b8b;
background-color:#fff;">
<div style="height: 250px">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Name</span>
<span style="color:#d28b8b; font-size:12px">content</span>
</div>
<hr class="my-0 pt-2">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Age</span>
<span style="color:#d28b8b; font-size:12px">content</span>
</div>
<hr class="my-0 pt-2">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Species</span>
<span style="color:#d28b8b; font-size:12px">or race</span>
</div>
<hr class="my-0 pt-2">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Gender</span>
<span style="color:#d28b8b; font-size:12px">content</span>
</div>
<hr class="my-0 pt-2">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Orientation</span>
<span style="color:#d28b8b; font-size:12px">content</span>
</div>
<hr class="my-1">
<!------------------------------------------------------------
୨୧ CHARACTER BASICS END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ CHARACTER METADATA START
worth : designer : owner
------------------------------------------------------------->
<div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class=" p-1 mb-2 pt-2" role="tab" id="metadata">
<a data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="true" aria-controls="accordion1">
<div class="mb-0 p-2 text-center" style="color: #d29898; border: 1px solid #f2c3c3"> <span style="color:#d29898"> Meta <i class="fal fa-plus fa-spin"></i> Data</span> </div>
</a>
</div>
<div id="accordion1" class="collapse show " role="tabpanel" aria-labelledby="metadata" data-parent="#accordion">
<div class="card-body p-0 mx-2 mb-2" style="color:#f2c3c3">
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Worth</span>
<span style="color:#d28b8b; font-size:12px">$</span>
</div>
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Designer</span>
<span style="color:#d28b8b; font-size:12px">content</span>
</div>
<div class="justify-content-between">
<span style="color:#d29898; font-style:italic; font-size:12px;">Code by</span>
<span style="color:#d28b8b; font-size:12px">Diadem</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ CHARACTER METADATA END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ SECOND COLUMN
about : story : links
feel free to edit accordingly
background image is a transparent texture
------------------------------------------------------------->
<div class="col-md-7 col-12 p-3 mb-3 pt-2" style="
border: 2px solid #fff;
border-top-right-radius:0px;
border-top-left-radius:0px;
border-bottom-right-radius:25px;
border-bottom-left-radius:0px;
background-color:#fdefef;
background-image:url(https://svrcmplx.netlify.app/code/crissxcross.png);
background-repeat:repeat;
background-size:contain;
background-attachment:fixed;">
<!------------------------------------------------------------
୨୧ NAV LINK AREA
you can edit how they look
but do not add anymore
------------------------------------------------------------->
<div class="col-lg-12 col-md-3">
<ul class="nav row no-gutters justify-content-center text-center text-uppercase" style="letter-spacing: 1px;">
<li class="nav-item col-md col-auto mr-1 mb-2 rounded" style="background: #d28b8b"><a class="btn btn-outline-secondary border-0 text-white nav-link active" data-toggle="tab" href="#about"> About</a></li>
<li class="nav-item col-md col-auto mx-1 mb-2 rounded" style="background: #d28b8b"><a class="btn btn-outline-secondary border-0 text-white nav-link" data-toggle="tab" href="#story"> Story</a></li>
<li class="nav-item col-md col-auto mx-md-1 ml-1 mb-2 rounded" style="background: #d28b8b"><a class="btn btn-outline-secondary border-0 text-white nav-link" data-toggle="tab" href="#links"> Links</a></li>
</ul>
</div>
<!------------------------------------------------------------
୨୧ TAB CONTAINER SETUP
feel free to edit accordingly
------------------------------------------------------------->
<div class="col-lg-12 col-md-9 p23">
<div class="tab-content" style="
font-size: 10pt; letter-spacing: .4px;
box-shadow: 0 3px 0 3px #d28b8b;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
background-color: #fff;
color: #d28b8b;
height: 426px;">
<!------------------------------------------------------------
୨୧ ABOUT SECTION
------------------------------------------------------------->
<div class="tab-pane fade active show " data-toggle="tab" id="about">
<div class="mr-n2" style="overflow:hidden;">
<div class="mr-n4" style="overflow:auto; height: 424px; padding: 0 20px 0 6px;">
<div class="row no-gutters mt-4">
<div class="col-12 pr-2">
<div class="text-uppercase font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px; font-size: 12px;">
<h2 style="color: #d28b8b;">About
<i class="far fa-heart fa-fw pull-right fa-beat" style="animation-duration: 5s; color:#d28b8b opacity: 1;"></i></h2>
</div>
<hr class="my-2" style="background-color:#d28b8b">
<p style="color:#cc858e; font-size:12px; font-family:serif;">
<span style="color:#43a1a9; letter-spacing:2px">
Quote or something</span> This entire container scrolls! So feel free to do anything you want here if you know what you're doing! Gotta love overflow properties, hm? 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 style="color:#cc858e; font-size:12px; font-family:serif;">
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>
<br>
<!------------------------------------------------------------
୨୧ STATS SECTION
------------------------------------------------------------->
<div class="text-uppercase font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px; font-size: 12px;">
<h2 class="pull-right" style="color: #eea9a9;">Stats</h2>
<i class="far fa-star fa-fw pull-left fa-spin" style="font-size:23px; animation-duration: 5s; color:#eea9a9 opacity: 1;"></i>
<hr class="my-2 " style="background-color:#eea9a9">
</div>
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Charisma</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Integrity</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Friendliness</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Temperment</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Confidence</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Patience</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div></div>
<div class="card pt-2 bg-transparent">
<p class="text-center" style="color:#e19595; font-family:serif; letter-spacing:2px; font-size:14px">Intelligence</p>
<div class="w-100 progress my-1 rounded-0" style="height:5px;">
<!------ Change the 50% to change coloured size ------------->
<div class="progress-bar" style="width: 50%; background: #e19595;"></div></div>
<br>
<!------------------------------------------------------------
୨୧ TRAITS SECTION
------------------------------------------------------------->
<div class="text-center" style="font-family:serif">
<h2><i class="fa-solid fa-sparkle"></i>
Positive Trait</h2>
<p style="color:#e19595">
Write about your character's positive dominant trait. 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>
<h2><i class="fa-solid fa-heart-broken"></i>
Negative Trait</h2>
<p style="color:#e19595">
Write about your character's negative dominant trait. 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>
<br>
<!------------------------------------------------------------
୨୧ DESIGN NOTES SECTION
------------------------------------------------------------->
<div class="text-uppercase font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px; font-size: 12px;">
<h2 style="color: #d28b8b;">Design
<i class="far fa-paintbrush fa-fw pull-right fa-beat" style="animation-duration: 5s; color:#d28b8b opacity: 1;"></i></h2>
<hr class="my-2" style="background-color:#eea9a9">
</div>
<p style="font-family:serif; font-size:12px;">
Describe physical attributes or just add notes~ 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 class="card pt-0 mb-1 my-3" style="background-color:#d28b8b"></div></div>
<ul style="font-size:12px; font-family:serif;">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
<!-----------------------------------------------------------
୨୧ ABOUT SECTION END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ STORY SECTION START
------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="story">
<div class="mr-n1" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 424px; padding: 0 20px 0 6px;">
<div class="row no-gutters mt-4">
<div class="col-12 pr-2">
<!------------------------------------------------------------
୨୧ EARLY LIFE SECTION
------------------------------------------------------------->
<div class="font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px;">
<p class="pull-right" style="color: #e57a7a; font-size:14px;">I.early life</h2>
</div>
<hr class="my-2" style="background-color:#e57a7a">
<p class="text-right" style="color:#cc858e; font-size:12px; font-family:serif;">
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>
<p class="text-right" style="color:#cc858e; font-size:12px; font-family:serif;">
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>
<br>
<!------------------------------------------------------------
୨୧ ADOLESCENE SECTION
------------------------------------------------------------->
<div class="font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px;">
<p class="pull-left" style="color: #e57a7a; font-size:14px;">II.adolescence</h2>
</div>
<hr class="my-2" style="background-color:#e57a7a">
<p class="text-left" style="color:#cc858e; font-size:12px; font-family:serif;">
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="text-left" style="color:#cc858e; font-size:12px; font-family:serif;">
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>
<br>
<!------------------------------------------------------------
୨୧ PRESENT TIMES SECTION
------------------------------------------------------------->
<div class="font-weight-bold pl-3 border-0" style="font-family:serif; letter-spacing:3px;">
<p class="pull-right" style="color: #e57a7a; font-size:14px;">III.present</h2>
</div>
<hr class="my-2" style="background-color:#e57a7a">
<p class="text-right" style="color:#cc858e; font-size:12px; font-family:serif;">
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>
<p class="text-right" style="color:#cc858e; font-size:12px; font-family:serif;">
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>
</div>
<!------------------------------------------------------------
୨୧ STORY SECTION END
------------------------------------------------------------->
<!------------------------------------------------------------
୨୧ LINKS SECTION START
------------------------------------------------------------->
<div class="tab-pane fade" data-toggle="tab" id="links">
<div class="mr-n1" style="overflow:hidden;">
<div class="mr-n3" style="overflow:auto; height: 424px; padding: 0 20px 0 6px;">
<div class="row no-gutters mt-4">
<div class="col-12 pr-2">
<div class="px-4 pt-1" style="height: 400px; overflow: auto;">
<div class="row">
<!------------------ 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: #dd1f65; font-family:serif; text-transform: default; font-size: 11pt; ">
Character</a>
<span class="small">
<i class="fa-solid fa-rings-wedding fa-beat"></i>
</span>
</div>
<p class="text-justify" style="color:#cc858e; font-size:12px; font-family:serif;">
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 01 END ---------------------->
<!------------------ CHARACTER 02 -------------------------->
<div class="col-12 mb-2">
<div class="justify-content-between align-items-center py-2" style="line-height: 1; letter-spacing: 1px;">
<!--------------- CHARACTER 02 LINK ----------------------->
<a href="#" style="color: #dd1f65; font-family:serif; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-heart fa-beat"></i>
</span>
</div>
<p class="text-justify" style="color:#cc858e; font-size:12px; font-family:serif;">
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 03 -------------------------->
<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: #dd1f65; font-family:serif; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-knife-kitchen fa-beat"></i>
</span>
</div>
<p class="text-justify" style="color:#cc858e; font-size:12px; font-family:serif;">
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 03 END ---------------------->
<!------------------ CHARACTER 04 -------------------------->
<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: #dd1f65; font-family:serif; text-transform: default; font-size: 11pt; ">
Character
</a>
<span class="small">
<i class="fa-solid fa-question fa-beat"></i>
</span>
</div>
<p class="text-justify" style="color:#cc858e; font-size:12px; font-family:serif;">
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 04 END --------------------->
<!-- This container also scrolls on it's own! Add as many linkups as you want! Have fun ~ When making more, be sure to delete THIS message! -->
<!------------- Add more above this line ♡ ----------------->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------------------
୨୧ CODE OVER YIPPEE
------------------------------------------------------------->