long long text
created by:sunxrice
HTMLBootstrapCharacter
Copy
<!--
long long text
by sunxrice
-->
<!-- hides the "profile" heading, feel free to delete if you want to keep it. this might break on code editors, but works fine on toyhouse. -->
<div style="background-color:var(--color-background); width:100%; height:64px; margin-top:-60px; margin-bottom:-60px; position:relative"></div>
<div class="container">
<span id="top"></span>
<!-- content -->
<div class="row">
<!-- navigation sidebar -->
<div class="col-sm-3">
<div class="card rounded-0 p-2" style="position:sticky; top:0">
<p class="text-center">Navigation</p>
<hr class="w-100 my-1">
<ul class="nav flex-sm-column justify-content-center">
<!-- nav item -->
<li class="nav-item">
<a class="nav=link" href="#sec1"> Profile</a>
</li>
<span class="d-sm-none mx-1">|</span>
<!-- nav item -->
<li class="nav-item">
<a class="nav=link" href="#sec2"> Backstory</a>
</li>
<span class="d-sm-none mx-1">|</span>
<!-- nav item -->
<li class="nav-item">
<a class="nav=link" href="#sec3"> Appearance</a>
</li>
<span class="d-sm-none mx-1">|</span>
<!-- nav item -->
<li class="nav-item">
<a class="nav=link" href="#sec4"> Relationships</a>
</li>
<span class="d-sm-none mx-1">|</span>
<!-- nav item -->
<li class="nav-item">
<a class="nav=link" href="#sec5"> Trivia</a>
</li>
<!-- if you add more sections, put new nav links above this line -->
<hr class="d-none d-sm-block w-100 my-1">
<!-- back to top -->
<li class="d-none d-sm-block nav-item text-center">
<a class="nav=link" href="#top"><i class="far fa-arrow-up"></i> Back to top</a>
</li>
</ul>
</div>
</div>
<!-- /navigation -->
<!-- content -->
<div class="col-12 col-sm-9">
<!-- basic info -->
<div>
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Full Name
</p></div>
<div class="col-lg-9 col-sm-8"><p>
content
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Nicknames / Aliases
</p></div>
<div class="col-lg-9 col-sm-8"><p>
content
<br>
use line breaks to separate
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Species
</p></div>
<div class="col-lg-9 col-sm-8"><p>
content
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Age
</p></div>
<div class="col-lg-9 col-sm-8"><p>
00 (birthdate)
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Gender
</p></div>
<div class="col-lg-9 col-sm-8"><p>
content (pronouns)
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Orientation
</p></div>
<div class="col-lg-9 col-sm-8"><p>
content
</p></div>
</div>
<!-- /info -->
<!-- info -->
<div class="row mb-1">
<div class="font-weight-bold col-lg-3 col-sm-4"><p>
Designer
</p></div>
<div class="col-lg-9 col-sm-8"><p>
@ user
</p></div>
</div>
<!-- /info -->
<!-- add more above this line if needed -->
</div>
<!-- /basic info -->
<!-- sec1 - profile -->
<div class="my-4">
<!-- heading -->
<h2 id="sec1">
<i class="far fa-user"></i> Profile
</h2>
<hr>
<!-- /heading -->
<!-- quote -->
<blockquote class="font-italic">
quote
</blockquote>
<!-- /quote -->
<!-- profile content -->
<div class="text-justify" style="text-indent:3em">
<p>insert profile here. nothing on this profile code scrolls. 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>
</div>
<!-- /profile content -->
</div>
<!-- /sec1 -->
<!-- sec2 - backstory -->
<div class="my-4">
<!-- heading -->
<h2 id="sec2">
<i class="far fa-books"></i> Backstory
</h2>
<hr>
<!-- /heading -->
<!-- warning -->
<div class="alert alert-danger">
<i class="far fa-warning"></i>
<b>content warnings here.</b> explain about them if you want or something.
</div>
<!-- /warning -->
<!-- backstory content -->
<div>
<!-- chapter -->
<h3 class="mt-3">1. Chapter title</h3>
<div class="text-justify" style="text-indent:3em">
<p>insert backstory here. still doesn't scroll. 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>another 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>
</div>
<!-- /chapter -->
<!-- chapter -->
<h3 class="mt-3">2. Chapter title</h3>
<div class="text-justify" style="text-indent:3em">
<p>insert backstory here. still doesn't scroll. 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>another 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>
</div>
<!-- /chapter -->
<!-- add more chapters above this line -->
</div>
<!-- /backstory content -->
</div>
<!-- /sec2 -->
<!-- sec3 - appearance -->
<div class="my-4">
<!-- heading -->
<h2 id="sec3">
<i class="far fa-clothes-hanger"></i> Appearance
</h2>
<hr>
<!-- /heading -->
<!-- ref -->
<div class="mb-3" style="height:300px;
background-image:url(reflink);
background-size:contain; background-position:center; background-repeat:no-repeat"></div>
<!-- /ref -->
<!-- appearance desc -->
<div class="text-justify" style="text-indent:3em">
<p>describe your character here. 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>
<!-- /appearance desc -->
<!-- design notes -->
<div class="my-3">
<ul>
<li>design notes</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /design notes -->
</div>
<!-- /sec3 -->
<!-- sec4 - relationships -->
<div class="my-4">
<!-- heading -->
<h2 id="sec4">
<i class="far fa-heart"></i> Relationships
</h2>
<hr>
<!-- /heading -->
<!-- profile content -->
<div class="text-justify" style="text-indent:3em">
<p>maybe write something here? idk. i'd typically put a paragraph or two before a character's relationship section to describe their general reputation, but if you don't do that, feel free to use this for something else or delete the whole div.</p>
</div>
<!-- /profile content -->
<!-- relationships -->
<div>
<!-- relationship -->
<h3 class="mt-3">
<a href="charlink">Character</a>
-
<i class="font-weight-normal">relationship</i>
</h3>
<div class="text-justify" style="text-indent:3em">
<p>insert explanation here. still doesn't scroll.</p>
</div>
<!-- /relationship -->
<!-- relationship -->
<h3 class="mt-3">
<a href="charlink">Character</a>
-
<i class="font-weight-normal">relationship</i>
</h3>
<div class="text-justify" style="text-indent:3em">
<p>insert explanation here. still doesn't scroll.</p>
</div>
<!-- /relationship -->
<!-- add more relationships above this line -->
</div>
<!-- /relationships -->
</div>
<!-- /sec4 -->
<!-- sec5 - trivia -->
<div class="my-4">
<!-- heading -->
<h2 id="sec5">
<i class="far fa-info-circle"></i> Trivia
</h2>
<hr>
<!-- /heading -->
<!-- trivia list -->
<ul>
<li>list trivia about your oc here (or whatever).</li>
<li>content</li>
<li>content</li>
</ul>
<!-- /trivia list -->
<!-- columns -->
<div class="row">
<!-- column left -->
<div class="col-12 col-sm-6">
<h3 class="mt-3">
Playlist
</h3>
<ul>
<li>
<a class="font-weight-bold" href="songlink">song title</a>
-
<i>artist</i>
</li>
<li>
<a class="font-weight-bold" href="songlink">song title</a>
-
<i>artist</i>
</li>
<li>or put whatever you want</li>
</ul>
</div>
<!-- /column left -->
<!-- column right -->
<div class="col-12 col-sm-6">
<h3 class="mt-3">
Links
</h3>
<ul>
<li>
<a href="worldlink">about worldname</a>
</li>
<li>
<a href="aflink">artfight page</a>
</li>
<li>
etc, add and remove as needed
</li>
</ul>
</div>
<!-- /column right -->
</div>
<!-- /columns -->
</div>
<!-- /sec5 -->
</div>
<!-- /content -->
</div>
<!-- /content -->
<p class="justify-content-between justify-content-sm-end align-items-center">
<a class="d-sm-none" href="#top"><i class="far fa-arrow-up"></i> Back to top</a>
<a class="far fa-sun-haze fa-width-auto btn btn-outline-secondary text-primary border-0 p-2 tooltipster" style="text-decoration:none" title="code by sunxrice" href="https://toyhou.se/36576227.long-long-text"></a>
</p>
</div>
<!-- end -->