Profile
NAME
PROFILE
Name
Content
Former Names
Content
Gender
Content [pro/nouns]
Orientation
Content
Affinity
Content
Rank
Content
CS Page
Stars ####
Charisma
Wisdom
Intelligence
Kindness
Empathy
Summary
adj • adj • adj • adj
Summary
Appearance
- DESCRIPTION: Coat Desc
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Design Notes
- EDITS
- [nr] edit
- [c] edit
- [uc] edit
- [r] edit
- note
Trivia
- NOMENCLATURE
- Prefix — explanation
- Suffix — explanation
- content
- content
code by jiko
<!-- ------------------------------
REMIND — Partial Custom Colours version.
(code by jiko)
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
→ need more help with HTML? don't be afraid to PM me <3
ACCENTS : #000000
→ use ctrl + f in the editor to easily replace all!
------------------------------- -->
<div class="mx-auto text-justify p-2" style="font-size:90%; max-width:700px; margin-top:40px">
<!-- ------------------------------
IMG HEADER
------------------------------- -->
<div style="
background: url(https://i.imgur.com/r2DCRxh.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: top;">
<div class="pt-3">
<!-- ------------------------------------
HEADER + ICON
------------------------------------- -->
<!--
this is for spacing on mobile view!
don't mind it~!
-->
<div class="hidden-md-up">
<div class="pt-3"><!-- WOOP --></div>
</div>
<!--
→ general warning that if their name is long, it'll go behind the avatar!
if it does, maybe keep it to their prefix?
→ if img bg is dark, change [text-white] to [text-dark]!
-->
<div class="hidden-sm-down">
<div class="display-4 text-white justify-content-between p-3 pt-4" style="letter-spacing:4px">
<span class="text-uppercase">NAME</span>
<i class="fas fa-moon"></i>
</div>
</div>
<!-- ------------------------------
CONTENT START
------------------------------- -->
<div class="bg-faded p-3 h-100">
<!-- ------------------------------------
CHARACTER AVATAR
------------------------------------- -->
<!--
→ best if 200x200 or squared
→ delete [fr-rounded] if you want a squared icon!
-->
<div class="text-center">
<img src="https://i.imgur.com/Bw3I4d6.png"
class="fr-rounded bg-faded p-2" style="height:150px; width:150px; margin-top: -90px;">
</div>
<div class="row no-gutters">
<!-- ------------------------------------
LEFT SIDE
------------------------------------- -->
<div class="col-lg-4 p-2">
<div style="font-size:17px; letter-spacing:1px; color:#000000">
<i>PROFILE</i>
</div>
<hr class="mt-1 mb-2">
<!-- ------ BASIC INFO ------------------------------ -->
<div class="row no-gutters">
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Name</span>
<span class="text-muted">Content</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Former Names</span>
<span class="text-muted text-right">Content</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Gender</span>
<span class="text-muted text-right">Content [pro/nouns]</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Orientation</span>
<span class="text-muted">Content</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Affinity</span>
<span class="text-muted">Content</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">Rank</span>
<span class="text-muted">Content</span>
</div>
<div class="col-lg-12 mb-2 justify-content-between">
<span class="text-uppercase text-muted" style="letter-spacing:1px">CS Page</span>
<span class="text-muted"><a href="LINK" style="color:#000000">Stars ####</a></span>
</div>
</div>
<hr class="mt-3 mb-2">
<!-- ------ STATS ------------------------------ -->
<div class="mb-0">
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Charisma</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
<div class="progress-bar" style="width:50%; background:#000000"></div>
</div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Wisdom</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
<div class="progress-bar" style="width:50%; background:#000000"></div>
</div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Intelligence</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
<div class="progress-bar" style="width:50%; background:#000000"></div>
</div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Kindness</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
<div class="progress-bar" style="width:50%; background:#000000"></div>
</div>
</div>
<div class="d-flex">
<span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px">Empathy</span>
<div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px">
<div class="progress-bar" style="width:50%; background:#000000"></div>
</div>
</div>
</div>
</div>
<!-- ------------------------------------
RIGHT SID
------------------------------------- -->
<!--
→ don't want the scrolling feature?
delete [style="height:340px; overflow:auto"]
-->
<div class="col-lg-8 p-2" style="height:400px; overflow:auto">
<!-- ------ SUMMARY ------------------------------ -->
<div class="summary mb-4">
<div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px; color:#000000">
<i class="far fa-stars fa-fw" style="color:#000000"></i>
<i>Summary</i>
</div>
<hr class="mt-1 mb-2">
<p class="text-center text-uppercase text-muted mb-0" style="letter-spacing:1px;">
adj • adj • adj • adj</p><br>
<div class="text-muted">
<p>Summary</p>
</div>
</div>
<!-- ------ APPEARANCE ------------------------------ -->
<div class="appearance mb-4">
<div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px; color:#000000">
<i class="far fa-eye fa-fw" style="color:#000000"></i>
<i>Appearance</i>
</div>
<hr class="mt-1 mb-2">
<!-- ------ CONTENT ------------------------------ -->
<div class="ml-lg-4 text-muted">
<ul><li><b>DESCRIPTION:</b> Coat Desc</li></ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<!-- ------ DESIGN NOTES ------------------------------ -->
<div class="design notes mb-4">
<div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px; color:#000000">
<i class="far fa-thumbtack fa-fw" style="color:#000000"></i>
<i>Design Notes</i>
</div>
<hr class="mt-1 mb-2">
<ul class="text-muted pt-1">
<li><b>EDITS</b></li>
<li class="ml-3"><i>[nr]</i> edit</li>
<li class="ml-3"><i>[c]</i> edit</li>
<li class="ml-3"><i>[uc]</i> edit</li>
<li class="ml-3"><i>[r]</i> edit</li>
<br>
<li>note</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
<!-- ------ TRIVIA ------------------------------ -->
<div class="trivia">
<div class="text-uppercase text-right" style="font-size:17px; letter-spacing:1px; color:#000000">
<i class="far fa-book-open fa-fw" style="color:#000000"></i>
<i>Trivia</i>
</div>
<hr class="mt-1 mb-2">
<ul class="text-muted pt-1">
<li><b>NOMENCLATURE</b></li>
<li class="ml-3"><i>Prefix</i> — explanation</li>
<li class="ml-3 mb-1"><i>Suffix</i> — explanation</li>
<li>content</li>
<li>content</li>
<!-- add / delete more above THIS line! -->
</ul>
</div>
<!-- add / delete scetions above THIS line! -->
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
→ please keep credits on the profile
if you decide to move it!
→ if img bg is dark, change [text-white] to [text-dark]!
------------------------------- -->
<div class="p-2 text-white text-right" style="letter-spacing:0.8px; font-size:85%">
code by <a class="text-white" href="https://toyhou.se/5704608.-f2u-remind-warrior-cats-">jiko</a>
</div>
</div></div></div>
