Scribd
Upload
18 views10 pages

Toyhouse HTML (Private)

The document outlines the terms of service for using specific coding resources, emphasizing the importance of credit, permission for edits, and the prohibition of profit from the codes. It provides notes and tips for editing, including how to change colors and images, and lists accent colors for design. Additionally, it contains a structured HTML template for displaying character information, preferences, and background details.

Uploaded by

thunderhurricanes025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views10 pages

Toyhouse HTML (Private)

The document outlines the terms of service for using specific coding resources, emphasizing the importance of credit, permission for edits, and the prohibition of profit from the codes. It provides notes and tips for editing, including how to change colors and images, and lists accent colors for design. Additionally, it contains a structured HTML template for displaying character information, preferences, and background details.

Uploaded by

thunderhurricanes025
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

------------------------------

[ TERMS OF SERVICE ]
> Please do not remove credit.
> You may edit and frankenstein with credits/permission from everyone involved.
> You may use my codes as reference but don't heavily reference or steal chunks
of it.
> Do not steal, claim, redistribute or make profit from my codes. This also
applies to edits.
> You are responsible for your own edits.

[ NOTES ]
> Always have WYSIWYG turned OFF and Code Editor turned ON when editing.
Otherwise the code will break.

[ TIPS ]
> To change the colours:
- Press ctrl + F
- Type in hex code you want to replace
- Click on + and replace "all" with a different hex code
> To change the images, replace the URL in the brackets -> background:
url( LINK_HERE )
> Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp
> Get more icons here: https://fontawesome.com/icons?d=gallery

[ ACCENT COLOURS ]
> Theme: #69749E
> Top Border/Text: #fff
> Boxes: rgba(0,0,0,0.8)
> Stat bar bg: rgba(74,74,74,0.5)
> Main text: text-white

-------------------------------->

<!--

TERMS OF SERVICE
✦ Please do not remove credit.
✦ You may edit and frankenstein them (if the other coder/s allow it too).
✦ You may use my codes as reference but don't heavily reference or steal chunks
of it.
✦ Do not steal, claim, redistribute or make profit from my codes. This also
applies to edits.
✦ You are responsible for your own edits.

NOTES
✦ Always have WYSIWYG turned OFF and Code Editor turned ON when editing.
Otherwise the code will break.
✦ Please do not PM me asking to edit / fix codes for you. I'm not available for
assistance but help is available in the forums at
https://toyhou.se/~forums/16.htmlcss-graphics/48845
✦ You don't have to but if you can please fave or leave a comment if you use any
of my codes https://toyhou.se/~forums/16.htmlcss-graphics/128216 I'd love to see
how others use them!
✦ If you enjoy my layouts please consider supporting me on Ko-fi at https://ko-
fi.com/sealkitty ♥

TIPS
✦ Remember to replace the # with a URL link!
✦ To change the images just replace the URL within the brackets
✦ To change the colours, press ctrl + F, type in hex code you want to replace,
click on + and replace "all" with a different hex code
✦ Get hex codes here: https://www.w3schools.com/colors/colors_picker.asp

ACCENT COLOURS
✦ Theme: #69749E
✦ Top Border/Text: #fff
✦ Boxes: rgba(0,0,0,0.8)
✦ Stat bar bg: rgba(74,74,74,0.5)
✦ Main text: text-white

-->

<div class="mx-auto text-justify text-white" style="max-width: 1110px; font-size:


13px; letter-spacing: .6px;">
<div class="row no-gutters">

<!-- TOP ------------------------------------------------------>


<div class="col-12 row no-gutters p-2">

<!-- IMAGE | Replace the URL in the brackets () -->


<div class="col-lg-6">
<div class="h-100" style="min-height: 200px;

background: url(https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQtzAGfkQPTZ-m1HAsro-Wl_HTT7flmMz8Fz79qNdqK-GRnv7WLqrnKrEQ&s=10);

background-position: center;
background-repeat: no-repeat;
background-size: cover;">
</div>
</div>

<!-- QUOTE OR NAME -->


<div class="col-lg-6" style="background: #69749E; color: #fff; padding: 20px;">
<div class="card rounded-0 h-100 p-2" style="background: none; border: 2px
solid #fff;">
<div class="text-center my-auto py-lg-0 py-4" style="font-size: 18px; letter-
spacing: 2px;">

<em>"There is nothing to be afraid of in this lowly life."</em>

</div>
</div>
</div>

</div>
<!-- ---------------------------------------------------------->

<!-- BASICS --------------------------------------------------->


<div class="col-lg-4 p-2">

<!-- IMAGE | Replace the URL in the brackets () -->


<div class="mb-3" style="height: 365px;

background:
url(https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/92649077_Kvg.png) center no-
repeat;
background-size: cover;">
</div>

<!-- INFO -->


<div class="rounded-0 p-3" style="height: 501px; overflow: auto; background:
rgba(0,0,0,0.8);">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-user fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Name</span>
</div>
<div class="col-7 text-right pt-1">Alan Xavier</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-venus-mars fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Gender</span>
</div>
<div class="col-7 text-right pt-1">Male</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-calendar fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Age</span>
</div>
<div class="col-7 text-right pt-1">Young Adult</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-birthday-cake fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Birthday</span>
</div>
<div class="col-7 text-right pt-1">March 5th</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-dna fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Species</span>
</div>
<div class="col-7 text-right pt-1">Great White Shark × Cat</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-ruler fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Height</span>
</div>
<div class="col-7 text-right pt-1">5'11</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-heart fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Role</span>
</div>
<div class="col-7 text-right pt-1">Ranger - Predator</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-balance-scale fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">MBTI</span>
</div>
<div class="col-7 text-right pt-1">ISFJ</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-briefcase fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Occupation</span>
</div>
<div class="col-7 text-right pt-1">Underground Boxer</div>
</div><hr style="margin: 10px 0px;">

<div class="row no-gutters">


<div class="col-5 text-truncate">
<div class="btn rounded-0 p-1 mr-2" style="background: #69749E; color:
#fff;">
<i class="fas fa-pencil fa-fw"></i></div><span class="text-muted"
style="letter-spacing: 1.4px;">Designer</span>
</div>
<!-- Tag a TH user or yourself with " @ username " (without the space) OR
link a non-TH user with " <a href="URL HERE">Username</a> " -->
<div class="col-7 text-right pt-1">@Furin</div>
</div>

</div>
<!-- INFO END -->

</div>
<!-- ---------------------------------------------------------->

<!-- INFORMATION ---------------------------------------------->


<div class="col-lg-8 p-2">
<!-- BACKGROUND --------->
<div class="p-3 mb-3" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-book fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-
spacing: 4px;">Background</div>

<div style="height: 282px; overflow: auto; padding-right: 10px;">


<!-- Writing Area -->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra


tincidunt leo nec consectetur. Vivamus ornare faucibus malesuada. Fusce consectetur
lectus ut congue semper. Nam vitae est eu enim viverra posuere at sit amet est.
Cras leo augue, vestibulum at molestie id, elementum nec erat. Sed mi sapien,
tempor vel aliquet at, auctor vitae mi. Sed eu lorem a nulla viverra porttitor. In
id ipsum leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Mauris quis pharetra dolor. Fusce vitae nulla laoreet
lectus faucibus placerat at quis ligula. Nulla tempor vehicula varius. Curabitur in
eros efficitur mi eleifend facilisis.</p>
<p>Morbi aliquam aliquam mauris, eu fringilla libero convallis vitae.
Integer eget facilisis tellus. Etiam eu maximus velit. Aliquam faucibus metus
mollis, euismod odio vitae, suscipit purus. Praesent faucibus, velit finibus tempor
vehicula, lectus ipsum maximus turpis, vel interdum urna turpis at diam. Praesent
commodo nec eros eu iaculis. Donec sodales dolor non eleifend tincidunt. Morbi
pulvinar molestie venenatis. Nam mollis nisl quis suscipit facilisis. Sed laoreet
quam ut tortor mollis tincidunt.</p>

<!-- Writing Area END -->


</div>

</div>
</div>
</div>
<!-- /BACKGROUND -------->

<div class="row no-gutters">

<!-- PREFERENCES -------->


<div class="col-lg-6 pr-lg-2">

<!-- LIKES -->


<div class="p-3 mb-3" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-check fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-
spacing: 4px;">Likes</div>

<div style="height: 158px; overflow: auto; padding-right: 10px;">


<ul class="m-0 pl-4" style="list-style-type: square;">

<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>

<!-- Add more above this line -->


</ul>
</div>
</div>
</div>
</div>

<!-- DISLIKES -->


<div class="p-3 mb-3 mb-lg-0" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-times fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-
spacing: 4px;">Dislikes</div>

<div style="height: 158px; overflow: auto; padding-right: 10px;">


<ul class="m-0 pl-4" style="list-style-type: square;">

<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>
<li class="mb-2">Content</li>

<!-- Add more above this line -->


</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /PREFERENCES ------->

<!-- PERSONALITY -------->


<div class="col-lg-6 pl-lg-2">
<div class="p-3" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-heartbeat fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-
spacing: 4px;">Personality</div>

<div style="height: 416px; overflow: auto; padding-right: 10px;">

<!-- Tips:
- Change the % number to adjust the progress bars
- Alternatively, you can just delete the bars and replace this
section with text
-->

<!-- CONFIDENCE -->


<div class="mb-3"><span style="letter-spacing:
1.4px;">Confidence</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- INTELLECT -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Intellect</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- EMPATHY -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Empathy</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- CHARISMA -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Charisma</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- PATIENCE -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Patience</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- TEMPER -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Temper</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- HUMOR -->


<div class="mb-3"><span style="letter-spacing: 1.4px;">Humor</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>
<!-- CREATIVITY -->
<div class="mb-3"><span style="letter-spacing:
1.4px;">Creativity</span>
<div class="progress rounded-0 my-2" style="height: 8px; background:
rgba(74,74,74,0.5);">
<div class="progress-bar" style="background: #69749E;
width: 50%;"></div>
</div>
</div>

<!-- Add more above this line -->


</div>
</div>
</div>
</div>
</div>
<!-- /PERSONALITY ------->

</div>
</div>

<!-- TRIVIA --------------------------------------------------->


<div class="col-lg-6 p-2">
<div class="p-3" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-chess fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing:
4px;">Trivia</div>

<div style="height: 224px; overflow: auto; padding-right: 10px;">


<ul class="m-0 pl-4" style="list-style-type: square;">

<li class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing


elit.</li>
<li class="mb-2">Aliquam tincidunt mauris eu risus.</li>
<li class="mb-2">Vestibulum auctor dapibus neque.</li>
<li class="mb-2">Nunc tortor laoreet leo cras, fermentum accumsan eget
ligula fusce, velit massa morbi.</li>
<li class="mb-2">Consectetur hendrerit blandit amet conubia bibendum
vehicula, at ligula commodo feugiat ante nisl consequat, elementum rutrum platea
integer vitae.</li>

<!-- Add more above this line -->


</ul>
</div>

</div>
</div>
</div>

</div>
<!-- ---------------------------------------------------------->

<!-- RELATIONSHIPS -------------------------------------------->


<div class="col-lg-6 p-2">
<div class="p-3" style="background: rgba(0,0,0,0.8);">
<div class="row no-gutters p-1">
<div class="p-1 mr-2" style="background: #69749E; color: #fff; font-size:
30px;"><i class="fas fa-users fa-fw"></i></div>
<div class="col pl-2">
<div class="display-3 text-muted mb-3" style="font-size: 26px; letter-spacing:
4px;">Relationships</div>

<div style="height: 224px; overflow: auto; padding-right: 10px;">

<!-- CHARACTER -->


<div class="row no-gutters mb-2">

<!-- IMAGE | Replace the URL in the brackets () -->


<div class="col-auto mx-auto mb-2 mb-lg-0">
<div class="mx-auto" style="height: 100px; width: 100px;

background: url(https://images.unsplash.com/photo-1487174244970-
cd18784bb4a4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1352&q=80) center no-repeat;

background-size: cover;"></div>
</div>

<div class="col-auto col-md pl-md-2">

<!-- NAME + LINK | Replace # with URL to character -->


<a style="color: #69749E"

href="#">
Name</a>

<i class="fas fa-angle-right fa-fw"></i>


<span class="text-muted">Relationship</span>

<hr class="my-1">
<div style="font-size: 12px;">
<!-- Writing Area -->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do


eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit
amet nisl suscipit.</p>

<!-- --------------->
</div>

</div>
</div>
<!-- ------------>

<!-- CHARACTER -->


<div class="row no-gutters mb-2">

<!-- IMAGE | Replace the URL in the brackets () -->


<div class="col-auto mx-auto mb-2 mb-lg-0">
<div class="mx-auto" style="height: 100px; width: 100px;

background: url(https://images.unsplash.com/photo-1487174244970-
cd18784bb4a4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1352&q=80) center no-repeat;
background-size: cover;"></div>
</div>

<div class="col-auto col-md pl-md-2">

<!-- NAME + LINK | Replace # with URL to character -->


<a style="color: #69749E"

href="#">
Name</a>

<i class="fas fa-angle-right fa-fw"></i>


<span class="text-muted">Relationship</span>

<hr class="my-1">
<div style="font-size: 12px;">
<!-- Writing Area -->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do


eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla pharetra diam sit
amet nisl suscipit.</p>

<!-- --------------->
</div>

</div>
</div>
<!-- ------------>

<!-- Add more above this line -->


</div>

</div>
</div>
</div>

</div>
<!-- ---------------------------------------------------------->

</div>
<!-- CREDIT | Please do not remove! ------->
<div class="text-right px-2" style="font-size: 10px;">
<a href="https://toyhou.se/10616384.-f2u-redrum" style="color: #69749E;"><i
class="far fa-code tooltipster" title="Code by Sealkitty"></i></a>
</div>
</div>
</pre>

You might also like