Profile
<!-- THIS CODE USES CUSTOM COLORS
4. || Food Soul || F2U
This code is meant to be used for
Food Soul OCs so it's extra stylized
to immitate ingame FS profiles!
-->
<div class="card border-0 pt-5 pb-4" style="margin-top: -60px;">
<div class="container card border-0" style="max-width: 1200px; min-height:600px;
background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/44563164_ym7WycNfHIqMB2V.png);
background-size: cover; max-width: 1200px; border-radius: 1em; overflow: hidden;">
<div class="row no-gutters justify-content-between ml-2" style="position: relative;">
<div class="col-sm-12 col-lg-5 order-0 order-lg-1" style="height:600px; position: relative;">
<!--
======================================================================
FOOD SOUL'S SKINS
It's better to use fullbody art of your OC because it fully displays
on mobile. You can delete extra skin (here + in skin button section
below), you can also add another one or two, but the whole skins box
will scroll then.
Insert your IMAGE LINK into src=" "
Adjust your image SIZE by changing numbers inside scale(x,y)
NOTE that they need to be EQUAL or else your image will stretch in one of
the prevailing positions.
Adjust POSITION of your image by changing "top: [X]px;". Just play with it
to kinda center your character's art. It's useful to adjust it using
https://th.circlejourney.net/ because it'll auto-update and show you how
your positioning changes while changing the numbers.
======================================================================
-->
<div class="tab-content">
<!-- BASIC SKIN IMAGE -->
<div class="tab-pane fade in active show" id="BAS">
<img src="URLHERE"
style="transform: scale(1.8, 1.8);
position: absolute; top: 140px;">
</div>
<!-- ASCENDED SKIN IMAGE -->
<div class="tab-pane fade" id="ASC">
<img src="URLHERE"
style="transform: scale(1.8, 1.8);
position: absolute; top: 200px;">
</div>
<!-- EXTRA SKIN IMAGE -- DELETE WHOLE DIV IF YOU WANNA REMOVE -->
<div class="tab-pane fade" id="EXTRA">
<img src="URLHERE"
style="transform: scale(1.5, 1.5);
position: absolute; top: 120px;">
</div>
</div>
<div class="card-flex col-12 justify-content-center" style="position: absolute; bottom: 20px;">
<div class="col-sm-10 col-lg-8 p-0" style="">
<div class="col p-0" align="center">
<div class="card-flex align-items-center justify-content-center col-9 mb-2" style="background: #FED7B7; min-height: 50px; border-radius: 0 0 1em 1em; border: solid 3px; border-color: #974A2E;">
<p style="font-size: 22px; font-weight: 500; color: #651C15; pb-1">
Food Soul Name</p>
</div>
<!--
=============================================
CHARACTER VOICE
You can simply write singer's (nick)name
and put a link to a YT video/music clip/track
or you can put the whole Author - Song Name
in there, it's all up to you!
=============================================
-->
<div class="card-flex align-items-center justify-content-center" style="min-height: 40px; background: linear-gradient(90deg, rgba(55,25,23,0.2) 0%, rgba(55,25,23,0.85) 15%, rgba(55,25,23,0.9) 50%, rgba(55,25,23,0.85) 85%, rgba(55,25,23,0.2) 100%);">
<p style="font-size: 21px; font-weight: 330; color: #fff;">CV:
<a href="TRACKLINKHERE" target="_BLANK" style="color: #fff;">
Singer name - song
</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="card-flex pr-0 pr-lg-2 align-items-center col-sm-12 col-lg-2 order-1 order-lg-0" style="z-index: 1; max-height: 600px; position: relative;">
<div class="col p-0 pt-0 pt-lg-5 mr-0 mr-lg-3">
<div class="container card-flex align-items-center justify-content-center col-6 col-lg-12 mb-2" style="min-height: 60px; max-height: 60px; background: linear-gradient(90deg, rgba(147,51,11,1) 0%, rgba(191,77,6,1) 15%, rgba(191,77,6,1) 50%, rgba(191,77,6,1) 85%, rgba(147,51,11,1) 100%); border-radius: 4px; border: solid 1px #54260E; box-shadow: 0 0 8px rgba(84,38,014, 0.9);">
<p style="font-size: 22px; font-weight: 500; color: #fff;">Skins</p>
</div>
<!--
======================================================================
FOOD SOUL'S SKIN TABS
Here are skin tabs that change skin images in background. Insert your
image links instead of "URLHERE"
You can delete extra skin (here + in skins section above),
you can also add another one or two, but the whole skins box will
scroll then, keep that in mind!
======================================================================
-->
<div class="container-fluid card col-12" style="background: rgba(106, 43, 20, 0.345); border: solid 1px #57250A; min-height: 100px; max-height: 420px; overflow: auto;">
<ul class="nav row p-2 justify-content-center">
<!-- BASIC SKIN TAB -->
<li class="nav-item align-items-center justify-content-center rounded-circle m-1 mb-3 mr-3 mr-lg-0 ml-3 ml-lg-0" style="height: 100px; width: 100px; border: 7px double #683E25; background: #F9B65D;
background-image: url(URLHERE);
background-size: cover; box-shadow: 0 0 10px 5px rgba(248,234,221, 1);">
<a class="nav-link active text-light align-items-center" style="margin-top:90px; font-size: 20px; height: 30px; background: linear-gradient(90deg, rgba(133,39,3,0.2) 0%, rgba(133,39,3,0.85) 15%, rgba(133,39,3,0.9) 50%, rgba(133,39,3,0.85) 85%, rgba(133,39,3,0.2) 100%); white-space: nowrap;" data-toggle="tab"
href="#BAS">
Basic
</a>
</li>
<!-- ASCENDED SKIN TAB -->
<li class="nav-item align-items-center justify-content-center rounded-circle m-1 mb-3 mr-3 mr-lg-0 ml-3 ml-lg-0" style="height: 100px; width: 100px; border: 7px double #683E25; background: #F9B65D;
background-image: url(URLHERE);
background-size: cover; box-shadow: 0 0 10px 5px rgba(248,234,221, 1);">
<a class="nav-link text-light align-items-center" style="margin-top:90px; font-size: 20px; height: 30px; background: linear-gradient(90deg, rgba(133,39,3,0.2) 0%, rgba(133,39,3,0.85) 15%, rgba(133,39,3,0.9) 50%, rgba(133,39,3,0.85) 85%, rgba(133,39,3,0.2) 100%); white-space: nowrap;" data-toggle="tab"
href="#ASC">
Ascended
</a>
</li>
<!-- EXTRA SKIN TAB -->
<li class="nav-item align-items-center justify-content-center rounded-circle m-1 mb-3 mr-3 mr-lg-0 ml-3 ml-lg-0" style="height: 100px; width: 100px; border: 7px double #683E25; background: #F9B65D;
background-image: url(URLHERE);
background-size: cover; box-shadow: 0 0 10px 5px rgba(248,234,221, 1);">
<a class="nav-link text-light align-items-center" style="margin-top:90px; font-size: 20px; height: 30px; background: linear-gradient(90deg, rgba(133,39,3,0.2) 0%, rgba(133,39,3,0.85) 15%, rgba(133,39,3,0.9) 50%, rgba(133,39,3,0.85) 85%, rgba(133,39,3,0.2) 100%); white-space: nowrap;" data-toggle="tab"
href="#EXTRA">
Extra skin
</a>
</li>
<!-- If you want to add another - Copy the whole div. Don't forget to change the href="# " content and link it with newly added skin tab-pane ID!-->
</ul>
</div>
</div>
</div>
<div class="card-flex pl-0 pl-lg-4 align-items-center justify-content-center col-sm-12 col-lg-5 order-3 order-lg-3" style="z-index: 1;">
<div class="card border-0 col p-0 pt-3 pt-lg-5" style="background: none;">
<div class="card border-0 col-12 p-0 pr-lg-3 pl-lg-3 order-1 order-lg-0 pb-4 pb-lg-0" style="background: none;">
<div class="tab-content order-3 order-lg-0">
<!--
======================================================================
FIRST TAB == BASIC FOOD SOUL INFO
======================================================================
-->
<div class="tab-pane fade in active show" id="INTRO">
<div class="card p-0 col-12" style="background: rgba(255, 246, 221, 0.45); border-radius: 1em; height: 450px;">
<div class="card m-1" style="background: rgba(154, 111, 83, 0.8); border-radius: 0.7em; height: 450px; overflow: hidden;">
<div class="card border-0 col p-0" style="background: none;">
<h1 class="text-center mt-2" style="color: #EEC9AF;">Food Soul info</h1>
<hr class="w-100 my-0" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<div class="container row no-gutters" style="max-height: 398px; font-size: 18px; font-weight: 400; overflow: auto;">
<!-- NAME -->
<div class="col-12 mt-2">
<span style="color: #F4D1B5;">
Name
</span>
<span class="pull-right" style="color: #F9E9D2;">
recipe
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!-- TYPE OF FOOD -->
<div class="col-12">
<span style="color: #F4D1B5;">
Type
</span>
<span class="pull-right" style="color: #F9E9D2;">
of food
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- BIRTHPLACE -->
<div class="col-12">
<span style="color: #F4D1B5;">
Birthplace
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- BIRTH YEAR -->
<div class="col-12">
<span style="color: #F4D1B5;">
Birth year
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- PERSONALITY -->
<div class="col-12">
<span style="color: #F4D1B5;">
Personality
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- HEIGHT -->
<div class="col-12">
<span style="color: #F4D1B5;">
Height
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- FS FAV FOOD -->
<div class="col-12">
<span style="color: #F4D1B5;">
Fav. food
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
</div>
<!--=============-->
<!-- FS MOTTO -->
<div class="col-12" align="center">
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<div class="card-flex align-items-center justify-content-center col-7 col-lg-5" style="background: rgba(100, 65, 46, 0.7); border-radius: 0 0 1em 1em; border: solid 2px; border-color: rgba(230, 194, 168, 0.7); position: relative;">
<p style="font-size: 20px; font-weight: 500; color: #E6C2A8;">
Motto
</p>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; left: 5px; bottom: -5px; transform: rotate(180deg);">๑</i>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; right: 5px; bottom: -5px; transform: scale(1, -1);">๑</i>
</div>
<!-- THE ACTUAL MOTTO - WRITE YOURS HERE-->
<p class="text-justify pt-1" style="color: #F9E9D2;">
Your food soul motto. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<!--=============-->
<!-- INTRODUCTION -->
<div class="col-12" align="center">
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<div class="card-flex align-items-center justify-content-center col-8 col-lg-7" style="background: rgba(100, 65, 46, 0.7); border-radius: 0 0 1em 1em; border: solid 2px; border-color: rgba(230, 194, 168, 0.7); position: relative;">
<p style="font-size: 20px; font-weight: 500; color: #E6C2A8;">
Introduction
</p>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; left: 5px; bottom: -5px; transform: rotate(180deg);">๑</i>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; right: 5px; bottom: -5px; transform: scale(1, -1);">๑</i>
</div>
<!-- THE ACTUAL INTRODUCTION - WRITE YOURS HERE-->
<p class="text-justify pt-1" style="color: #F9E9D2;">
Your food soul's food introduction. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
<!--=============-->
<!-- COMBAT HEADER -->
<div class="col-12" align="center">
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<div class="card-flex align-items-center justify-content-center col-7 col-lg-5" style="background: rgba(100, 65, 46, 0.7); border-radius: 0 0 1em 1em; border: solid 2px; border-color: rgba(230, 194, 168, 0.7); position: relative;">
<p style="font-size: 20px; font-weight: 500; color: #E6C2A8;">
Combat
</p>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; left: 5px; bottom: -5px; transform: rotate(180deg);">๑</i>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; right: 5px; bottom: -5px; transform: scale(1, -1);">๑</i>
</div>
</div>
<!--=============-->
<!-- FS RARITY -->
<div class="col-12 pt-1">
<span style="color: #F4D1B5;">
Rarity
</span>
<span class="pull-right" style="color: #F9E9D2;">
SP/UR/SR/R/M
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- FS CLASS -->
<div class="col-12">
<span style="color: #F4D1B5;">
Class
</span>
<span class="pull-right" style="color: #F9E9D2;">
content
</span>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- FS LINKED -- IF HAS NO LINKS - DELETE WHOLE "<a></a>" AND WRITE "None" INSIDE <span></span> SPACE INSTEAD -->
<div class="col-12">
<span style="color: #F4D1B5;">
Linked with
</span>
<span class="pull-right" style="color: #F9E9D2;">
<a href="CHARLINK" target="_BLANK" style="color: #F9E9D2;">
FS name
</a>
</span>
</div>
<!--=============-->
<!-- SKILLS HEADER -->
<div class="col-12" align="center">
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<div class="card-flex align-items-center justify-content-center col-7 col-lg-5" style="background: rgba(100, 65, 46, 0.7); border-radius: 0 0 1em 1em; border: solid 2px; border-color: rgba(230, 194, 168, 0.7); position: relative;">
<p style="font-size: 20px; font-weight: 500; color: #E6C2A8;">
Skills
</p>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; left: 5px; bottom: -5px; transform: rotate(180deg);">๑</i>
<i class="fas" style="color: #E6C2A8; font-size: 25px; font-weight: 100; position: absolute; right: 5px; bottom: -5px; transform: scale(1, -1);">๑</i>
</div>
</div>
<!--=============-->
<!-- FS BASIC SKILL -->
<div class="col-sm-12">
<!-- SKILL IMAGE - INSERT YOUR ART OR PHOTO, IT'LL BE CIRCLED-->
<img src="https://i.vgy.me/XAbBMk.png"
style="height: 50px; width: 50px;" class="rounded-circle my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;">
Skill Name
</span>
<span class="pull-right" style="color: #F4D1B5;">
[Basic Skill]
</span>
<p class="pt-2 text-justify" style="color: #F9E9D2;">
Basic skill description. 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.
</p>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- FS ENERGY SKILL -->
<div class="col-sm-12">
<!-- SKILL IMAGE - INSERT YOUR ART OR PHOTO, IT'LL BE CIRCLED-->
<img src="https://i.vgy.me/M8IrYJ.png"
style="height: 50px; width: 50px;" class="rounded-circle my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;">
Skill Name
</span>
<span class="pull-right" style="color: #F4D1B5;">
[Energy Skill]
</span>
<p class="pt-2 text-justify" style="color: #F9E9D2;">
Energy skill description. 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.
</p>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--=============-->
<!-- FS LINKED SKILL - DELETE WHOLE DIV IF THEY HAVE NO LINKS-->
<div class="col-sm-12 pb-2">
<!-- SKILL IMAGE - INSERT YOUR ART OR PHOTO, IT'LL BE CIRCLED-->
<img src="https://i.vgy.me/gVylrw.png"
style="height: 50px; width: 50px;" class="rounded-circle my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;">
Skill Name
</span>
<span class="pull-right" style="color: #F4D1B5;">
[Linked Skill]
</span>
<p class="pt-2 text-justify" style="color: #F9E9D2;">
Linked skill description. 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.
</p>
</div>
<!--=============-->
</div>
</div>
</div>
</div>
</div>
<!--
======================================================================
SECOND TAB == FOOD SOUL VOICEOVER
======================================================================
-->
<div class="tab-pane fade" id="VOICE">
<div class="card p-0 col-12" style="background: rgba(255, 246, 221, 0.45); border-radius: 1em; height: 450px;">
<div class="card m-1" style="background: rgba(234, 225, 201, 0.7); border-radius: 0.7em; height: 450px; overflow: hidden;">
<div class="card border-0 col p-0" style="background: none;">
<h1 class="text-center mt-2" style="color: #5A4129;">Voiceover</h1>
<hr class="w-100 my-0" style="background: linear-gradient(90deg, rgba(102, 87, 69,0) 0%, rgba(102, 87, 69,0.4) 10%, rgba(102, 87, 69,0.7) 50%, rgba(102, 87, 69, 0.4) 90%, rgba(102, 87, 69,0) 100%); height: 1px;">
<div class="container row no-gutters" style="max-height: 398px; font-size: 18px; font-weight: 400; color: #665745; overflow: auto;">
<!--
=================================
CONTRACT VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Contract:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
LOG IN VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Log In:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
ICE ARENA VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Ice Arena:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
SKILLS VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Skills:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
ASCEND VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Ascend:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
FATIGUE VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Fatigue:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
RECOVERING VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Recovering:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
TEAM FORMATION VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Team Formation:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
KNOCKOUT VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Knockout:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
NOTICE VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Notice:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
IDLE 1 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Idle 1:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
IDLE 2 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Idle 2:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTERACTION 1 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Interaction 1:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTERACTION 2 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Interaction 2:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTERACTION 3 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Interaction 3:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
CONTRACT VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Pledge:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTIMACY 1 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Intimacy 1:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTIMACY 2 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Intimacy 2:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!--
=================================
INTIMACY 3 VOICELINE
=================================
-->
<div class="col-sm-12 p-2">
<h3 class="m-2" style="font-weight: 600; color: #5A4129;">
Intimacy 3:
</h3>
<p class="text-justify" style="font-style: italic;"><i class="fas fa-angle-double-left"></i>
Your FS voiceline goes here.
<i class="fas fa-angle-double-right"></i></p>
</div>
<!-- =========================-->
<!-- You can add more voicelines - just copy the whole div of one above and paste it under this commentary -->
</div>
</div>
</div>
</div>
</div>
<!--
======================================================================
THIRD TAB == FOOD SOUL STORY
This tab follows canonical FS story's structure and has 5 tabs resembling
five chapters with numeration and headers. You still can add or delete some
of them but keep in mind that you'll need to adjust everything to suit new
look of the tab by yourself, changing every element's height manually!
It just probably would look not so pretty other way.
======================================================================
-->
<div class="tab-pane fade" id="STORY">
<div class="card p-0 col-12" style="background: rgba(255, 246, 221, 0.45); border-radius: 1em; height: 450px;">
<div class="card m-1" style="background: rgba(234, 225, 201, 0.7); border-radius: 0.7em; height: 450px; overflow: hidden;">
<div class="card border-0 col p-0" style="background: none;">
<h1 class="text-center mt-2" style="color: #5A4129;">Story</h1>
<hr class="w-100 my-0" style="background: linear-gradient(90deg, rgba(102, 87, 69,0) 0%, rgba(102, 87, 69,0.4) 10%, rgba(102, 87, 69,0.7) 50%, rgba(102, 87, 69, 0.4) 90%, rgba(102, 87, 69,0) 100%); height: 1px;">
<div style="max-height: 398px; font-size: 16px; font-weight: 400; color: #665745; overflow: auto;">
<!-- STORY CHAPTERS BLOCK-->
<div class="accordion text-justify" id="expand">
<!--
==============================
CHAPTER ONE
==============================
-->
<div class="m-2">
<div class="card rounded pl-2 pr-2 mt-2" style="background:#E5D8CA; border: solid 2px #9A8871;">
<!-- STORY PART HEADER-->
<a data-toggle="collapse" data-target="#story1" class="text-center pt-1" style="font-weight: 500; color:#5A4129; height:30px;" aria-expandanded="true">
I. BLAZE
</a>
</div>
<div id="story1" class="collapse" data-parent="#expand">
<div class="container" style="height:175px; overflow:auto; background:none; color: #665745; font-weight: 400;">
<p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. </p>
<p>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </p>
</div>
</div>
</div>
<!--
==============================
CHAPTER TWO
==============================
-->
<div class="m-2">
<div class="card rounded pl-2 pr-2 mt-2" style="background:#E5D8CA; border: solid 2px #9A8871;">
<!-- STORY PART HEADER-->
<a data-toggle="collapse" data-target="#story2" class="text-center pt-1" style="font-weight: 500; color:#5A4129; height:30px;" aria-expandanded="true">
II. VISITOR
</a>
</div>
<div id="story2" class="collapse" data-parent="#expand">
<div class="container" style="height:175px; overflow:auto; background:none; color: #665745; font-weight: 400;">
<p class="mt-3">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>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>
</div>
</div>
<!--
==============================
CHAPTER THREE
==============================
-->
<div class="m-2">
<div class="card rounded pl-2 pr-2 mt-2" style="background:#E5D8CA; border: solid 2px #9A8871;">
<!-- STORY PART HEADER-->
<a data-toggle="collapse" data-target="#story3" class="text-center pt-1" style="font-weight: 500; color:#5A4129; height:30px;" aria-expandanded="true">
III. DOUBTS
</a>
</div>
<div id="story3" class="collapse" data-parent="#expand">
<div class="container" style="height:175px; overflow:auto; background:none; color: #665745; font-weight: 400;">
<p class="mt-3">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>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>
</div>
</div>
<!--
==============================
CHAPTER FOUR
==============================
-->
<div class="m-2">
<div class="card rounded pl-2 pr-2 mt-2" style="background:#E5D8CA; border: solid 2px #9A8871;">
<!-- STORY PART HEADER-->
<a data-toggle="collapse" data-target="#story4" class="text-center pt-1" style="font-weight: 500; color:#5A4129; height:30px;" aria-expandanded="true">
VI. TRUTH
</a>
</div>
<div id="story4" class="collapse" data-parent="#expand">
<div class="container" style="height:175px; overflow:auto; background:none; color: #665745; font-weight: 400;">
<p class="mt-3">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>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>
</div>
</div>
<!--
==============================
CHAPTER FIVE
==============================
-->
<div class="m-2">
<div class="card rounded pl-2 pr-2 mt-2" style="background:#E5D8CA; border: solid 2px #9A8871;">
<!-- STORY PART HEADER-->
<a data-toggle="collapse" data-target="#story5" class="text-center pt-1" style="font-weight: 500; color:#5A4129; height:30px;" aria-expandanded="true">
V. COFFEE
</a>
</div>
<div id="story5" class="collapse" data-parent="#expand">
<div class="container" style="height:175px; overflow:auto; background:none; color: #665745; font-weight: 400;">
<p class="mt-3">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>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>
</div>
</div>
</div>
<!-- END OF STORY BLOCK -->
</div>
</div>
</div>
</div>
</div>
<!--
======================================================================
FOURTH TAB == FOOD SOUL RELATIONS
======================================================================
-->
<div class="tab-pane fade" id="LINKS">
<div class="card p-0 col-12" style="background: rgba(255, 246, 221, 0.45); border-radius: 1em; height: 450px;">
<div class="card m-1" style="background: rgba(154, 111, 83, 0.8); border-radius: 0.7em; height: 450px; overflow: hidden;">
<div class="card border-0 col p-0" style="background: none;">
<h1 class="text-center mt-2" style="color: #EEC9AF;">Relationships</h1>
<hr class="w-100 my-0" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
<!-- RELATIONSHIPS ROW-->
<div class="container row no-gutters" style="max-height: 398px; font-size: 18px; font-weight: 400; overflow: auto;">
<!-- START OF THE RELATIONSHIP BLOCK-->
<div class="col-sm-12 mt-1 mb-1">
<!-- CHARACTER IMAGE - INSERT YOUR IMAGE LINK HERE-->
<img src="https://via.placeholder.com/100x100"
style="height: 100px; width: 100px;" class="rounded my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;"><a
href="CHARLINK" target="_BLANK" style="color: #F4D1B5;">
Character Name
</a></span>
<span class="pull-right" style="color: #F4D1B5;">
[relationship]
</span>
<!-- RELATIONSHIP DESCRIPTION-->
<p class="pt-2 text-justify" style="color: #F9E9D2;">
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>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--================================-->
<!-- START OF THE RELATIONSHIP BLOCK-->
<div class="col-sm-12 mb-1">
<!-- CHARACTER IMAGE - INSERT YOUR IMAGE LINK HERE-->
<img src="https://via.placeholder.com/100x100"
style="height: 100px; width: 100px;" class="rounded my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;"><a
href="CHARLINK" target="_BLANK" style="color: #F4D1B5;">
Character Name
</a></span>
<span class="pull-right" style="color: #F4D1B5;">
[relationship]
</span>
<!-- RELATIONSHIP DESCRIPTION-->
<p class="pt-2 text-justify" style="color: #F9E9D2;">
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>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--================================-->
<!-- START OF THE RELATIONSHIP BLOCK-->
<div class="col-sm-12 mb-1">
<!-- CHARACTER IMAGE - INSERT YOUR IMAGE LINK HERE-->
<img src="https://via.placeholder.com/100x100"
style="height: 100px; width: 100px;" class="rounded my-2 d-block mx-auto">
<span style="color: #F4D1B5; font-weight: 500;"><a
href="CHARLINK" target="_BLANK" style="color: #F4D1B5;">
Character Name
</a></span>
<span class="pull-right" style="color: #F4D1B5;">
[relationship]
</span>
<!-- RELATIONSHIP DESCRIPTION-->
<p class="pt-2 text-justify" style="color: #F9E9D2;">
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>
<hr class="w-100 my-1" style="background: linear-gradient(90deg, rgba(255,224,205,0) 0%, rgba(255,224,205,0.75) 10%, rgba(255,224,205,1) 50%, rgba(255,224,205,0.75) 90%, rgba(255,224,205,0) 100%); height: 1px;">
</div>
<!--================================-->
<!-- You can add more relationships - just copy the whole div above and paste it under this commentary -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION IMAGEBUTTONS FOR TAB CONTENT-->
<div class="col-12 pt-0 pt-lg-2 pb-3 pb-lg-0 order-0 order-lg-1">
<ul class="nav row justify-content-between pl-0 pl-lg-2 pr-0 pr-lg-2">
<li class="nav-item">
<a class="nav-link active p-1" data-toggle="tab" href="#INTRO"><img style="min-height: 52px; max-height: 70px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/44563021_2K5CEeIFfxd8749.png"></a>
</li>
<li class="nav-item">
<a class="nav-link p-1" data-toggle="tab" href="#VOICE"><img style="min-height: 52px; max-height: 70px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/44563043_uD82rf2yDpsSD2y.png"></a>
</li>
<li class="nav-item">
<a class="nav-link p-1" data-toggle="tab" href="#STORY"><img style="min-height: 52px; max-height: 70px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/44563063_ELwhunwsaVygg07.png"></a>
</li>
<li class="nav-item">
<a class="nav-link p-1" data-toggle="tab" href="#LINKS"><img style="min-height: 52px; max-height: 70px;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/44563089_CyZs7bNhC21uLvp.png"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MY CREDIT - DO NOT REMOVE -->
<a href="https://toyhou.se/ChiiAka" title="Code by Chiiaka" class="tooltipster text-center mt-1"><i class="far fa-code"></i></a>
</div>
