Take Note
created by:SparklyCodes
HTMLCustom ColorsCharacter
Copy
<!--
F2U - CHARACTER CODE: TAKE NOTE
by SparklyCodes @ Toyhou.se
Make sure to read all the rules and instructions!
-- TOS --
1. Turn WYSIWYG off when coding. Even after you're done.
1.5 I'm serious on this one. IF THE CODE BREAKS/ICONS DISAPPEAR THIS IS LIKELY THE CULPRIT!
3. Use on TH only.
4. Do not redistribute.
5. Do not remove credit.
6. Frankensteining is okay, as long as the other creator allows it. Credit both creators.
7. Free to use as reference, credit in this case isn't required but appreciated!
-- RESOURCES --
fa-star >> custom icon
#6cabca >> custom color
#091c26 >> text
#ffffff >> backgrounds
#e0eef5 >> backgrounds 2
-->
<div class="mx-auto p-2 row no-gutters" style="max-width: 900px; color: #091c26;">
<!-- ............................. TITLE -->
<div class="p-1 col-12">
<div class="p-2 text-white w-md-75" style="background: #6cabca; clip-path: polygon(100% 0, calc(100% - 10px) 50%, 100% 100%, 0% 100%, 0% 0%);">
<h3 class="m-0 text-uppercase font-weight-light font-italic">
A TITLE GOES HERE
</h3>
</div>
</div>
<!-- ............................. AVATAR -->
<div class="mx-auto col-md-6 col-lg-3"> <div class="p-2 card rounded-0 border-0" style="z-index: 9999; background: #ffffff; transform: rotate(-2deg)">
<!-- name -->
<div class="px-2 py-1" style="background: #e0eef5;">
<p class="m-0 text-uppercase text-center" style="letter-spacing: 5px;">
NAME
</p>
</div>
<!-- image -->
<div style="background:url('IMG_LINK');
background-position: center; background-size: cover; height: 200px; width: 100%;">
<a class="m-1 text-white" href="IMAGE_SOURCE">
<i class="fa-solid fa-camera"></i>
</a>
</div>
</div> </div>
<!-- ............................. ABOUT -->
<div class="p-1 col-lg-9"> <div class="p-2 overflow-auto" style="background: #ffffff; height: 200px;">
<h1 class="font-weight-normal justify-content-between" style="color: #6cabca;">
ABOUT <i class="fa-regular fa-megaphone"></i>
</h1>
<p style="text-indent: 2em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</p>
<p style="text-indent: 2em">Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
</div> </div>
<!-- ............................. RIGHT -->
<div class="p-1 col-lg-9" style="z-index: 8">
<!-- spacer -->
<div class="hidden-sm-down" style="margin-top: -2.5em;"></div>
<!-- PERSONALITY -->
<div class="ml-md-5 p-2 pb-3 overflow-auto" style="background: #e0eef5; height: 220px;">
<h1 class="font-weight-normal justify-content-between hidden-md-down" style="color: #6cabca; margin-left: 7.5em">
PERSONALITY <i class="fa-regular fa-head-side-brain"></i>
</h1>
<h1 class="font-weight-normal justify-content-between hidden-lg-up" style="color: #6cabca;">
PERSONALITY <i class="fa-regular fa-head-side-brain"></i>
</h1>
<p style="text-indent: 2em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et euismod enim, vel lobortis sapien. Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem. Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</p>
<p style="text-indent: 2em">Donec et sem at sapien venenatis laoreet. Donec ut odio nisl. Vestibulum viverra nulla sed semper pharetra. Etiam ut vulputate nisi, ut vestibulum elit. Praesent metus leo, bibendum id porta ac, imperdiet vitae enim. Donec lectus ligula, aliquet eget feugiat quis, feugiat vitae mi. Pellentesque et nibh eleifend, cursus mauris eget, hendrerit turpis.</p>
</div>
<!-- BASICS -->
<div class="my-md-n3 mr-md-4 mt-2 card rounded-0 border-0" style="background: #ffffff; z-index: 9999"> <div class="row no-gutters">
<!-- LEFT - title -->
<div class="p-1 col-2 col-md-1 font-weight-normal text-center align-items-center justify-content-center" style="border-right: 3px solid #e0eef5; font-size: 27px; color: #6cabca">
B<br>A<br>S<br>I<br>C<br>S
</div>
<!-- RIGHT -->
<div class="p-1 col-10 col-md-11">
<div class="card border-0 rounded-0 w-100 d-block d-lg-flex" style="min-height: 100%; background: none"> <div class="p-1 row no-gutters overflow-auto" style="flex:1 1 0;">
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">NAME</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">ALIAS(SES)</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">AGE</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">BIRTHDAY</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">GENDER</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">PRONOUNS</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">SPECIES</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">ETHNICITY</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">ORIENTATION</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">RELATIONSHIP</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">EDUCATION</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">OCCUPATION</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">ORIGIN</b>
<span>information</span>
</div> </div>
<div class="p-1 col-sm-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">RESIDENCE</b>
<span>information</span>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
<!-- ............................. SIDE IMAGE -->
<div class="mt-5 mt-lg-0 p-1 col-lg-3">
<!-- spacer -->
<div class="hidden-sm-down" style="margin-top: -2.5em;"></div>
<!-- MUSIC PLAYER -->
<div class="m-0 p-2 flex-column justify-content-center align-items-center" style="background: #6cabca; color: #ffffff; transform: rotate(2deg)">
<h6 class="m-0 text-uppercase font-weight-light font-italic">
SONGNAME <i class="ml-2 fa-regular fa-play" style="transform: rotate(5deg)"></i>
</h6>
<div style="margin-top: -1.3em; height: 1.5em; width: 100%; opacity: .01; overflow: hidden;" class="justify-content-center align-items-center">
<!-- CHANGE SONG LINK HERE - put in the video ID where 'dQw4w9WgXcQ' is -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=Gxea8L7fooHtBey_&controls=0" frameborder="0"></iframe>
</div>
</div>
<!-- image -->
<div style="background:url('IMG_LINK');
background-position: center; background-size: cover; min-height: 200px; height: 100%; width: 100%; border: .4em solid #ffffff;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
</div>
<!-- ............................. STORY -->
<div class="p-1 pl-2 col-lg-7">
<!-- QUOTE -->
<div class="p-2 pt-lg-3 text-white" style="background: #6cabca; transform: rotate(-1deg)">
<h3 class="m-0 text-uppercase text-center font-weight-light font-italic">
“Short quote.”
</h3>
</div>
<!-- BACKSTORY -->
<div class="p-2 overflow-auto" style="background: #ffffff; height: 500px;">
<h1 class="font-weight-normal justify-content-between" style="color: #6cabca;">
BACKSTORY <i class="fa-regular fa-hourglass"></i>
</h1>
<div class="mx-1 row no-gutters">
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
<div class="mx-2 col-auto font-weight-bold" style="color: #6cabca;">TITLE</div>
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
</div>
<p style="text-indent: 2em">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<p style="text-indent: 2em">Curabitur mattis pretium sodales. Nam pulvinar feugiat risus eget commodo. Sed id risus iaculis, venenatis metus dictum, feugiat leo. Aenean tempor rhoncus arcu, in ultricies sapien tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam sollicitudin odio nec sem ultrices sagittis. Vestibulum accumsan augue hendrerit feugiat lacinia. Vivamus porttitor libero eu nulla rhoncus dapibus.</p>
<div class="mx-1 row no-gutters">
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
<div class="mx-2 col-auto font-weight-bold" style="color: #6cabca;">TITLE</div>
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
</div>
<p style="text-indent: 2em">Proin nec mollis tellus. Morbi et urna in sem pulvinar sagittis. Donec quis nibh et augue rutrum imperdiet ac sed ipsum. Fusce ut vestibulum nisi, a accumsan ex. Suspendisse dignissim fringilla leo, sit amet condimentum leo accumsan non. Sed felis dui, semper quis libero ac, eleifend imperdiet nulla. Vivamus sit amet quam in est dictum ultricies. Etiam finibus ipsum ligula, at iaculis sem lobortis malesuada.</p>
<p style="text-indent: 2em">Curabitur mattis pretium sodales. Nam pulvinar feugiat risus eget commodo. Sed id risus iaculis, venenatis metus dictum, feugiat leo. Aenean tempor rhoncus arcu, in ultricies sapien tempor et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam sollicitudin odio nec sem ultrices sagittis. Vestibulum accumsan augue hendrerit feugiat lacinia. Vivamus porttitor libero eu nulla rhoncus dapibus.</p>
</div>
</div>
<!-- ............................. TRIVIA -->
<div class="p-1 col-lg-5">
<!-- TRIVIA -->
<div class="p-2 overflow-auto" style="background: #e0eef5; height: 356px;">
<h1 class="font-weight-normal justify-content-between" style="color: #6cabca;">
TRIVIA <i class="fa-regular fa-magnifying-glass"></i>
</h1>
<ul class="m-0 pl-4" style="list-style-type: square">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Praesent et euismod enim, vel lobortis sapien.</li>
<li>Nullam rhoncus justo sagittis, pulvinar urna quis, imperdiet lorem.</li>
<li>Pellentesque elit elit, ornare volutpat neque eget, dignissim rhoncus purus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Praesent et euismod enim, vel lobortis sapien.</li>
</ul>
</div>
<!-- TRIVIA BITS -->
<div class="mr-md-3 p-2 text-white flex-row align-items-center" style="background: #6cabca; transform: rotate(-1deg)">
<i class="mr-2 fa-2x fa-fw fa-regular fa-brain-circuit" style="color: #e0eef5"></i>
<div class="flex-column">
<b>MBTI</b>
<span>information</span>
</div>
</div>
<div class="mr-md-4 mt-n1 p-2 flex-row align-items-center" style="background: #e0eef5; transform: rotate(1deg)">
<i class="mr-2 fa-2x fa-fw fa-regular fa-scale-balanced" style="color: #6cabca"></i>
<div class="flex-column">
<b>ALIGNMENT</b>
<span>information</span>
</div>
</div>
<div class="mr-md-5 mt-n1 p-2 text-white flex-row align-items-center" style="background: #6cabca; transform: rotate(-1deg)">
<i class="mr-2 fa-2x fa-fw fa-regular fa-swords" style="color: #e0eef5"></i>
<div class="flex-column">
<b>CLASS</b>
<span>Information</span>
</div>
</div>
<!-- ribbon -->
<div style="background: linear-gradient(to left, #6cabca, #e0eef5);
clip-path: polygon(100% 0, calc(100% - 10px) 50%, 100% 100%, 0% 100%, 0% 0%); height: 20px;"></div>
</div>
<!-- ............................. SIDE IMAGE -->
<div class="p-1 pl-2 col-sm-6 col-md-12 col-lg-5">
<!-- PICTURE -->
<div class="p-2 bg-white">
<!-- IMAGE -->
<div style="background:url('IMG_LINK');
background-position: center; background-size: cover; height: 300px; width: 100%;">
<a href="IMAGE_SOURCE" class="m-1 text-white">
<i class="fa-solid fa-camera"></i>
</a>
</div>
<div class="row no-gutters">
<div class="p-1 col-md-6 flex-column">
<b style="color: #6cabca">DESIGNER</b>
<span>@Information</span>
</div>
<div class="p-1 col-md-6 flex-column">
<b style="color: #6cabca">OWNER</b>
<span>@Information</span>
</div>
</div>
</div>
<!-- CREDITS - DO NOT REMOVE -->
<div class="mt-2 px-2 py-1" style="background: #e0eef5; clip-path: polygon(100% 0, calc(100% - 10px) 50%, 100% 100%, 0% 100%, 0% 0%);">
<a href="/SparklyCodes" title="Code by SparklyCodes" data-toggle="tooltip" style="color: #6cabca;">
<i class="fa-solid fa-code"></i>
</a>
</div>
</div>
<!-- ............................. DESIGN -->
<div class="mt-2 mt-lg-0 p-1 pl-2 col-sm-6 col-md-12 col-lg-7">
<div class="my-md-n2 mr-md-4 mt-2 card rounded-0 border-0" style="background: #ffffff; z-index: 9999"> <div class="row no-gutters">
<!-- LEFT - title -->
<div class="p-1 col-2 col-md-1 font-weight-normal text-center align-items-center justify-content-center" style="border-right: 3px solid #e0eef5; font-size: 27px; color: #6cabca">
D<br>E<br>S<br>I<br>G<br>N
</div>
<!-- RIGHT -->
<div class="p-1 col-10 col-md-11"> <div class="overflow-auto" style="height: 400px;">
<!-- basics -->
<div class="row no-gutters">
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">HEIGHT</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">WEIGHT</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">BUILD</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">BODY SHAPE</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">SKINTONE</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">EYES</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">HAIR</b>
<span>information</span>
</div> </div>
<div class="p-1 col-md-6"> <div class="justify-content-between" style="border-bottom: 2px dotted #e0eef5">
<b style="color: #6cabca">AESTHETIC</b>
<span>information</span>
</div> </div>
</div>
<div class="m-1 row no-gutters">
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
<div class="mx-2 col-auto font-weight-bold" style="color: #6cabca;">APPEARANCE</div>
<div class="my-auto col" style="border-bottom: 2px dotted #e0eef5"></div>
</div>
<p style="text-indent: 2em;">Ut efficitur dapibus convallis. Donec rhoncus libero vitae ligula imperdiet, et commodo orci posuere. Cras varius, eros non rutrum viverra, sem velit finibus ligula, ut vestibulum nibh massa id justo. Pellentesque eget aliquet sem. Aenean eget condimentum sapien. Mauris sit amet erat at metus dictum vestibulum vel et ipsum. Phasellus libero orci, euismod vitae nisi vel, blandit convallis ante.</p>
<p style="text-indent: 2em;">Curabitur aliquam libero et purus laoreet vestibulum. Nam tempus lacinia auctor. Mauris suscipit, nisi at placerat eleifend, justo arcu iaculis enim, at venenatis nunc nunc in justo. Ut vel velit eget neque aliquet semper vitae ac lacus. Phasellus tortor augue, varius at eros vitae, consequat egestas tortor. Curabitur scelerisque convallis nisl, at molestie metus hendrerit eu. In ac metus eu nunc tincidunt mollis in sit amet arcu. Vivamus nec metus blandit, mollis massa quis, consequat tellus.</p>
</div> </div>
</div> </div>
</div>
</div>