<!--------------------------------------------------------------------------------
SECRET WORLD profile by JUNI
Please edit the code with WYSIWYG turned off and Code Editor turned on.
I personally recommend editing the code in a code editor like Visual Studio Code
OR using the very handy live-preview website:
https://th.circlejourney.net/
You may alter/relocate/restyle coding credit, but please do not remove it.
THEME CUSTOMIZATION
There are several placeholder color codes in the code which can be CTRL+F and replaced.
BACKGROUND COLOR: #767676
FONT HEADER COLOR: #8E8E8E
FONT COLOR: #FFFFFF
BOX COLOR: rgba(0,0,0,.5)
Here are those colors for all the secret world factions...
COUNCIL OF VENICE: #58728A / #9FBBD2 / #FFFFFF / rgba(14,43,69,.5)
ILLUMINATI: #1D4773 / #3473c4 / #FFFFFF / rgba(0,0,0,.5)
DRAGON: #2D4020 / #547d37 / #FFFFFF / rgba(0,0,0,.5)
TEMPLAR: #600D0F / #A12C2D / #FFFFFF / rgba(0,0,0,.5)
OROCHI: #1F1F1F / #27d2d8 / #FFFFFF / rgba(0,0,0,.5)
MORNINGLIGHT: #FFFFFF / #F4E5C8 / #FFFFFF / rgba(126,89,56,.5)
PHOENICIANS: #2F1B4C / #985def / #FFFFFF / rgba(0,0,0,.4)
MISC: #767676 / #8E8E8E / #FFFFFF / rgba(0,0,0,.5)
-------------------------------------------------------------------------------->
<div class="container p-0">
<div class="py-3" style="background: #000; border: 0px solid #000; color: #000;">
<div style="background-color: #767676;">
<!---------------------------------
logo
you can adjust the opacity and the background image URL to change the logo.
COUNCIL OF VENICE: <div style="opacity: .2; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38632470_ZcE8z1zpFPRSqu5.png');
ILLUMINATI: <div style="opacity: .3; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38637009_OhiO8ztTNBazwZR.png');
DRAGON: <div style="opacity: .3; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38636994_t0V2HIhbNjBLG3t.png');
TEMPLAR: <div style="opacity: .2; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38637007_M44K6EDFGLTYYCD.png');
OROCHI: <div style="opacity: .1; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38636997_xA9UWAhAmBA8dBo.png');
MORNINGLIGHT: <div style="opacity: .3; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38636990_vbhjKkpsVI2HrYz.png');
PHOENICIANS: <div style="opacity: .2; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38637001_MpB4OlXSIkKm1bB.png');
MISC: <div style="opacity: .2; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38637004_4KCmDBrkvPF0mJI.png');
---------------------------------->
<div style="opacity: .2; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38637004_4KCmDBrkvPF0mJI.png');
background-repeat: no-repeat; background-size: auto; width: 100%; height: 94%; background-position: -100px 10px; position: absolute;"></div>
<!-- texture -->
<div class="px-2 py-3 container-fluid" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/images/38632317_4Z55UuoHv0C4N49.png?1629093358'); background-repeat: no-repeat; background-size: cover; background-position: bottom right;">
<div class="row no-gutters">
<!---------------------------------
navigation header
---------------------------------->
<div class="col-12 order-lg-0 order-1">
<div class="px-3 py-2 m-2" style="background:rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5);">
<ul class="nav nav-pills row justify-content-center text-monospace text-uppercase" style="letter-spacing: -.3px;">
<li class="nav-item m-1 d-lg-flex d-none"><a class="nav-link py-1 px-2 show disabled" style="color: white; opacity: .5;">
<!-- 'The Secret World' is the world/AU, change this title if not TSW related -->
<i class="fa fa-folder"></i> TSW >
</a></li>
<li class="nav-item m-1 d-lg-flex d-none"><a class="nav-link py-1 px-2 show disabled" style="color: white; opacity: .5;">
<!-- This is meant to be the faction -->
<i class="fas fa-folder"></i> Faction >
</a></li>
<li class="nav-item m-1"><a class="nav-link btn py-1 px-2 show active" data-toggle="tab" href="#ONE" style="color: white; background-color: transparent;">
<!-- This is meant to be the character's name or code name -->
<i class="fa fa-id-card"></i> Agent CodeName >
</a></li>
<li class="nav-item m-1"><a class="nav-link btn py-1 px-2 show" data-toggle="tab" href="#TWO" style="color: white; background-color: transparent;">
<i class="fas fa-history"></i> Recorded Behavior ></a></li>
<li class="nav-item m-1"><a class="nav-link btn py-1 px-2 show" data-toggle="tab" href="#THREE" style="color: white; background-color: transparent;">
<i class="fa fa-info-circle"></i> Last Seen ></a></li>
<li class="nav-item m-1"><a class="nav-link btn py-1 px-2 show" data-toggle="tab" href="#FOUR" style="color: white; background-color: transparent;">
<i class="fa fa-bookmark"></i> Tactical Record ></a></li>
<li class="nav-item m-1"><a class="nav-link btn py-1 px-2 show" data-toggle="tab" href="#FIVE" style="color: white; background-color: transparent;">
<i class="fa fa-heart"></i> Contacts ></a></li>
</ul>
</div>
</div>
<!---------------------------------
basic info
---------------------------------->
<div class="col-lg-5 col-12 mb-0 order-lg-1 order-0">
<div class="px-0 py-2 m-2" style="background:rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5);">
<p class="pull-center text-center text-uppercase" style="font-size: 16px;letter-spacing: 1px; color: white; text-shadow: white 0px 0px 3px; text-shadow: white 0px 0px 3px;">Agent Details</p>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Full Name</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Name "Alias" Surname</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Gender</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Gender</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Profession</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Profession</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Species</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Human, Bee, Etc</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Age</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">00 years old</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Height</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">0"0" // 0.0 cm</span>
</div>
</div>
<!---------------------------------
faction info
---------------------------------->
<div class="px-0 py-2 mx-2 my-3" style="background:rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5);">
<p class="text-center text-uppercase" style="font-size: 16px; letter-spacing: 1px; color: white; text-shadow: white 0px 0px 3px; text-shadow: white 0px 0px 3px;">Affiliation</p>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Faction</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Faction</span>
</div>
<div class="col-sm-12">
<span class="text-uppercase" style="letter-spacing: 1px; color: #8E8E8E;">Rank</span>
<span class="pull-right text-monospace" style="color: #FFFFFF;">Field Agent</span>
</div>
</div>
<!---------------------------------
statistics
the meaning of each is in tooltips.
adjust the 'width' to adjust how much of the bar is taken up.
---------------------------------->
<div class="px-0 py-2 mx-2 my-3" style="background:rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5);">
<p class="text-center mb-0 text-uppercase" style="font-size: 16px;letter-spacing: 1px; color: white; text-shadow: white 0px 0px 3px; text-shadow: white 0px 0px 3px;">Statistics</p>
<p class="text-center text-uppercase mb-0" style="letter-spacing: 1px; color: #8E8E8E;">
<span data-toggle="tooltip" title="Skill and capability, especially for combat">Prowess</span> |
<span data-toggle="tooltip" title="Flexibility in different circumstances under pressure">Adaptability</span> |
<span data-toggle="tooltip" title="Creativity and intelligence in applying skill">Ingenuity</span>
</p>
<div class="progress mx-3 my-2 p-1 bg-white">
<div class="progress-bar text-white" role="progressbar" style="background-color: #a11616; width: 34%">33%</div>
<div class="progress-bar text-white" role="progressbar" style="background-color: #23629c; width: 33%">33%</div>
<div class="progress-bar text-white" role="progressbar" style="background-color: #2daf33; width: 33%">33%</div>
</div>
<p class="text-center text-uppercase mb-0" style="letter-spacing: 1px; color: #8E8E8E;">
<span data-toggle="tooltip" title="Sheer power">Damage</span> |
<span data-toggle="tooltip" title="Durability or dodging">Survivability</span> |
<span data-toggle="tooltip" title="Ability to heal or regenerate">Healing</span>
</p>
<div class="progress mx-3 my-2 p-1 bg-white" style="background-color: #FFFFFF;">
<div class="progress-bar text-white" role="progressbar" style="background-color: #a11616; width: 34%">33%</div>
<div class="progress-bar text-white" role="progressbar" style="background-color: #23629c; width: 33%">33%</div>
<div class="progress-bar text-white" role="progressbar" style="background-color: #2daf33; width: 33%">33%</div>
</div>
</div>
<!---------------------------------
LORE
---------------------------------->
<div class="px-0 py-2 mx-2 my-2" style="background:rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5); height: 220px; overflow: auto;">
<p class="text-center text-uppercase" style="font-size: 16px;letter-spacing: 1px; color: white; text-shadow: white 0px 0px 3px; text-shadow: white 0px 0px 3px;">About</p>
<div class="col-sm-12 text-justify text-monospace" style="color: #FFFFFF; font-size: 12px;">
<p>TRANSMIT - initiate anima signal - RECEIVE - initiate the all-in-one-one-in-all frequency - THIS WAY TO THE EGRESS - initiate transportation prerogative - MIND THE GAP - initiate geomantic protocols - WITNESS - Agartha.</p>
<p>Enlightenment hurts, sweetling. Does your forehead tickle? A tickle becomes a pain, becomes a suture-crack, becomes a cesarean gasp, and the third eye opens like a bullet hole obscenity. Breathe.</p>
<p>This too shall pass.</p>
</div>
</div>
</div>
<div class="col p-3 m-2 order-2 tab-content" style="background: white; box-shadow: 0px 0px 5px rgba(0,0,0,.5) inset;">
<!----------------------------------------
TAB ONE
character image
you must imput the same image twice so it resizes correctly from destop to mobile
------------------------------------------->
<div class="tab-pane fade h-100 active show" data-toggle="tab" id="ONE">
<div class="bg-white p-2 m-2 h-100" style="background:url(https://via.placeholder.com/590); background-repeat: no-repeat; background-position: center; background-size:contain;"><img src="https://via.placeholder.com/590" class="d-lg-none" style="opacity: 0;"></div>
</div>
<!----------------------------------------
TAB TWO
personality
------------------------------------------->
<div class="tab-pane fade h-100" data-toggle="tab" id="TWO" style="overflow: auto; max-height: 645px;">
<h4>Personality</h4>
<p>A description of their personality.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Mannerisms</h4>
<p>Patterns in behavior, such as ticks, habits, addictions, or quirks.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Speech</h4>
<p>Recorded patterns in communication.</p>
</div>
<!----------------------------------------
TAB THREE
history
------------------------------------------->
<div class="tab-pane fade h-100" data-toggle="tab" id="THREE" style="overflow: auto; max-height: 645px;">
<h4>Present</h4>
<p>Where is this character currently found?</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Origin</h4>
<p>Where is this character from?</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Discovering the Secret World</h4>
<p>Opening their eyes.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Joining the [Faction]</h4>
<p>How they joined their faction.</p>
</div>
<!----------------------------------------
TAB FOUR
fighting style
------------------------------------------->
<div class="tab-pane fade h-100" data-toggle="tab" id="FOUR" style="overflow: auto; max-height: 645px;">
<p>A summary of their fighting style.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Primary - Weapon</h4>
<p>How they use their primary weapon.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Secondary - Weapon</h4>
<p>How they use their secondary weapon.</p>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<h4>Abilities</h4>
<p>Additional abilities, or weaponless fighting.</p>
</div>
<!----------------------------------------
TAB FIVE
relationships
------------------------------------------->
<div class="tab-pane fade h-100" data-toggle="tab" id="FIVE" style="overflow: auto; max-height: 645px;">
<div class="row no-gutters">
<!--------------------------- CHARACTER -------------------------------------->
<div class="col-12 mb-2"><img src="https://via.placeholder.com/120" class="rounded float-left mr-2" height="120" width="120">
<a class="btn btn-default border-0 character-name-badge py-1 px-2 mb-0" href="#">Character Name</a>
<span class="btn btn-default disabled border-0 character-name-badge py-1 px-2 mb-0">Relationship</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. </p>
</div>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<!--------------------------- CHARACTER -------------------------------------->
<div class="col-12 mb-2"><img src="https://via.placeholder.com/120" class="rounded float-left mr-2" height="120" width="120">
<a class="btn btn-default border-0 character-name-badge py-1 px-2 mb-0" href="#">Character Name</a>
<span class="btn btn-default disabled border-0 character-name-badge py-1 px-2 mb-0">Relationship</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
</div>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<!--------------------------- CHARACTER -------------------------------------->
<div class="col-12 mb-2"><img src="https://via.placeholder.com/120" class="rounded float-left mr-2" height="120" width="120">
<a class="btn btn-default border-0 character-name-badge py-1 px-2 mb-0" href="#">Character Name</a>
<span class="btn btn-default disabled border-0 character-name-badge py-1 px-2 mb-0">Relationship</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
</div>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<!--------------------------- CHARACTER -------------------------------------->
<div class="col-12 mb-2"><img src="https://via.placeholder.com/120" class="rounded float-left mr-2" height="120" width="120">
<a class="btn btn-default border-0 character-name-badge py-1 px-2 mb-0" href="#">Character Name</a>
<span class="btn btn-default disabled border-0 character-name-badge py-1 px-2 mb-0">Relationship</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
</div>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
<!--------------------------- CHARACTER -------------------------------------->
<div class="col-12 mb-2"><img src="https://via.placeholder.com/120" class="rounded float-left mr-2" height="120" width="120">
<a class="btn btn-default border-0 character-name-badge py-1 px-2 mb-0" href="#">Character Name</a>
<span class="btn btn-default disabled border-0 character-name-badge py-1 px-2 mb-0">Relationship</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
</div>
<hr class="w-100 mt-1 mb-3" style="border-top: 1px solid rgba(0,0,0,.1);">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-right"><a href="https://toyhou.se/6684143.swl-profile"><span data-toggle="tooltip" title="code by junijwi"><i class="fas fa-code fa-sm"></i></span></a></div>
</div>
