promise me
created by:sunxrice
HTMLMixed ColorsCharacter
Copy
<!--
promise me
by sunxrice
-->
<!-- non-variables - use find and replace [ ctrl + h ]!
accents -
icon : fa-solid fa-asterisk
links -
characters : charlink
image : imglink
-->
<!-- variables - replace values here -->
<div class="container" style="
/* main accents */
--accent-color: #c8946a;
--accent-font: 'Georgia', serif;
/* headings */
--heading-line: 2px dashed var(--accent-color);
--heading-size: 2rem;
--subheading-size: 1.2rem;
/* other text */
--p-align: justify;
--p-indent: 3em;
--link-line: underline dotted;
">
<!-- info card -->
<div class="card rounded-0 float-none float-sm-right mx-auto ml-sm-3 mb-3" style="width: 240px; border:var(--heading-line)">
<img src="imglink" alt="profile image">
<!-- contents -->
<div class="p-3">
<!-- full name -->
<h3 class="text-center text-uppercase font-italic" style="color: var(--accent-color); font-size: 1.5rem; font-family: var(--accent-font); border-bottom: var(--heading-line);">
full name
</h3>
<!-- nicknames -->
<div class="mb-2">
<span class="font-weight-bold mr-2" style="color: var(--accent-color); font-family: var(--accent-font); text-indent: 0;">
nicknames
</span>
content, put as many and as long as you want here
</div>
<!-- info -->
<div class="mb-2">
<span class="font-weight-bold mr-2" style="color: var(--accent-color); font-family: var(--accent-font); text-indent: 0;">
gender
</span>
content
</div>
<!-- info -->
<div class="mb-2">
<span class="font-weight-bold mr-2" style="color: var(--accent-color); font-family: var(--accent-font); text-indent: 0;">
pronouns
</span>
content
</div>
<!-- info -->
<div class="mb-2">
<span class="font-weight-bold mr-2" style="color: var(--accent-color); font-family: var(--accent-font); text-indent: 0;">
age
</span>
content
</div>
<!-- info -->
<div class="mb-2">
<span class="font-weight-bold mr-2" style="color: var(--accent-color); font-family: var(--accent-font); text-indent: 0;">
birthday
</span>
1 jan 2000
</div>
</div>
<!-- /contents -->
</div>
<!-- /info -->
<!-- section - profile -->
<div class="mb-3">
<h3 class="justify-content-between" style="color: var(--accent-color); font-size: var(--heading-size); font-family: var(--accent-font); border-bottom: var(--heading-line);">
<span class="text-uppercase font-italic">Profile</span>
<span class="font-weight-bold">1</span>
</h3>
<!-- content -->
<div class="mb-3" style="text-align: var(--p-align); text-indent: var(--p-indent);">
<p>
<span class="text-uppercase font-weight-bold" style="color: var(--accent-color); font-family: var(--accent-font)">character name</span>
is... describe your oc's basic info here. nothing in this code scrolls, all areas expand. 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>second paragraph. 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>note this code works best if the profile and personality sections are long. 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>
<!-- /content -->
</div>
<!-- /section -->
<!-- section - personality -->
<div class="mb-3 clearfix">
<h3 class="justify-content-between" style="color: var(--accent-color); font-size: var(--heading-size); font-family: var(--accent-font); border-bottom: var(--heading-line);">
<span class="text-uppercase font-italic">Personality</span>
<span class="font-weight-bold">2</span>
</h3>
<!-- adjectives -->
<p class="text-center my-3">
adj1
<i class="fa-solid fa-asterisk fa-xs mx-1" style="color: var(--accent-color);"></i>
adj2
<i class="fa-solid fa-asterisk fa-xs mx-1" style="color: var(--accent-color);"></i>
adj3
</p>
<!-- /adjectives -->
<!-- content -->
<div class="mb-3" style="text-align: var(--p-align); text-indent: var(--p-indent);">
<p>describe personality and stuff. </p>
<p>second paragraph. 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>
<!-- /content -->
</div>
<!-- /section -->
<!-- section - story -->
<div class="mb-3">
<h3 class="justify-content-between" style="color: var(--accent-color); font-size: var(--heading-size); font-family: var(--accent-font); border-bottom: var(--heading-line);">
<span class="text-uppercase font-italic">Story</span>
<span class="font-weight-bold">3</span>
</h3>
<!-- subsection -->
<div class="mb-3" style="text-align: var(--p-align); text-indent: var(--p-indent);">
<h4 class="font-weight-bold" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
Subheading
</h4>
<p>insert story here. idk. 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>
<!-- /subsection -->
<!-- subsection -->
<div class="mb-3" style="text-align: var(--p-align); text-indent: var(--p-indent);">
<h4 class="font-weight-bold" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
Subheading
</h4>
<p>insert story here. idk. 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>second paragraph. 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. Cupcake ipsum dolor sit amet cake croissant fruitcake muffin. Sweet bonbon candy powder cheesecake muffin sesame snaps jujubes. Muffin macaroon cheesecake cookie soufflé cookie cheesecake lollipop candy canes. Halvah cotton candy sesame snaps chocolate bar. Sugar plum dessert dragée macaroon chupa chups. Cake cheesecake wafer cotton candy. Danish jelly halvah jelly beans tootsie roll donut. Halvah cheesecake halvah jujubes sweet roll biscuit croissant wafer. Cake halvah chocolate bar sugar plum apple pie. 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>
<!-- /subsection -->
</div>
<!-- /section -->
<!-- section - relationships -->
<div class="mb-3">
<h3 class="justify-content-between" style="color: var(--accent-color); font-size: var(--heading-size); font-family: var(--accent-font); border-bottom: var(--heading-line);">
<span class="text-uppercase font-italic">Relationships</span>
<span class="font-weight-bold">4</span>
</h3>
<!-- content -->
<div class="row no-gutters justify-content-center">
<!-- character -->
<div class="col-12 col-md-4 px-2 mb-3"><div class="h-100 p-3" style="border: var(--heading-line);">
<!-- name -->
<h4 class="justify-content-between" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
<a class="font-weight-bold" style="color: var(--accent-color); text-decoration: var(--link-line)" href="charlink">
Character
</a>
<span class="font-italic">
relationship
</span>
</h4>
<!-- /name -->
<p>describe their relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div></div>
<!-- /character -->
<!-- character -->
<div class="col-12 col-md-4 px-2 mb-3"><div class="h-100 p-3" style="border: var(--heading-line);">
<!-- name -->
<h4 class="justify-content-between" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
<a class="font-weight-bold" style="color: var(--accent-color); text-decoration: var(--link-line)" href="charlink">
Character
</a>
<span class="font-italic">
relationship
</span>
</h4>
<!-- /name -->
<p>make it as long or as short as you want, every box in the line expands according to length. i recommend keeping it short though.</p>
</div></div>
<!-- /character -->
<!-- character -->
<div class="col-12 col-md-4 px-2 mb-3"><div class="h-100 p-3" style="border: var(--heading-line);">
<!-- name -->
<h4 class="justify-content-between" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
<a class="font-weight-bold" style="color: var(--accent-color); text-decoration: var(--link-line)" href="charlink">
Character
</a>
<span class="font-italic">
relationship
</span>
</h4>
<!-- /name -->
<p>put as many characters as you want</p>
</div></div>
<!-- /character -->
<!-- character -->
<div class="col-12 col-md-4 px-2 mb-3"><div class="h-100 p-3" style="border: var(--heading-line);">
<!-- name -->
<h4 class="justify-content-between" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
<a class="font-weight-bold" style="color: var(--accent-color); text-decoration: var(--link-line)" href="charlink">
Character
</a>
<span class="font-italic">
relationship
</span>
</h4>
<!-- /name -->
<p>the boxes auto center if there are less than three in a line.</p>
</div></div>
<!-- /character -->
<!-- character -->
<div class="col-12 col-md-4 px-2 mb-3"><div class="h-100 p-3" style="border: var(--heading-line);">
<!-- name -->
<h4 class="justify-content-between" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
<a class="font-weight-bold" style="color: var(--accent-color); text-decoration: var(--link-line)" href="charlink">
Character
</a>
<span class="font-italic">
relationship
</span>
</h4>
<!-- /name -->
<p>describe their relationship here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div></div>
<!-- /character -->
<!-- add more above this line -->
</div>
<!-- /content -->
</div>
<!-- /section -->
<!-- section - extras -->
<div class="mb-3">
<h3 class="justify-content-between" style="color: var(--accent-color); font-size: var(--heading-size); font-family: var(--accent-font); border-bottom: var(--heading-line);">
<span class="text-uppercase font-italic">Extras</span>
<span class="font-weight-bold">5</span>
</h3>
<!-- content -->
<div class="row">
<!-- subsection - trivia -->
<div class="col-sm">
<h4 class="font-weight-bold" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
Trivia
</h4>
<ul class="fa-ul">
<li><span class="fa-li fa-solid fa-asterisk" style="color: var(--accent-color)"></span>
content
</li>
<li><span class="fa-li fa-solid fa-asterisk" style="color: var(--accent-color)"></span>
content
</li>
</ul>
</div>
<!-- /subsection -->
<!-- subsection - links -->
<div class="col-sm">
<h4 class="font-weight-bold" style="color: var(--accent-color); font-size: var(--subheading-size); font-family: var(--accent-font); text-indent: 0;">
Links
</h4>
<ul class="fa-ul">
<li><span class="fa-li fa-solid fa-asterisk" style="color: var(--accent-color)"></span>
<a style="color: var(--accent-color); text-decoration: var(--link-line)" href="">
link to whatever
</a>
</li>
<li><span class="fa-li fa-solid fa-asterisk" style="color: var(--accent-color)"></span>
<a style="color: var(--accent-color); text-decoration: var(--link-line)" href="">
link to whatever
</a>
</li>
</ul>
</div>
<!-- /subsection -->
</div>
<!-- /content -->
</div>
<!-- /section -->
<!-- credit -->
<div class="justify-content-end">
<a class="far fa-sun-haze fa-width-auto btn btn-outline-secondary border-0 p-2 tooltipster" style="color:var(--accent-color)" title="code by sunxrice" href="https://toyhou.se/40077100.promise-me"></a>
</div>
</div>
<!-- end -->