<!-- THIS CODE USES THEME COLORS
==============================================
47. || Homebound || F2U
==============================================
-->
<div class="py-4">
<div class="container px-4 pt-4 pb-2 bg-faded" style="max-width: 1100px;">
<div class="row no-gutters">
<!--
============================================================
ADOPT NAME (MOBILE VER) + BANNER IMAGE
============================================================
-->
<div class="col-12 col-lg p-1 flex-column">
<!--
============================================================
ADOPT NAME (HIDDEN ON PC)
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 align-items-center justify-content-center text-center bg-primary text-white text-uppercase display-4 mb-2 py-1 hidden-lg-up">
<span>
ADOPT NAME
</span>
</div>
<!--
============================================================
ADOPT BANNER IMAGE
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 p-2 flex-fill">
<div class="h-100" style="min-height: 400px;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
============================================================
CONCEPT DESCRIPTION + MAIN SELLING UNFO + MOODBOARD
============================================================
-->
<div class="col-12 col-lg-5 flex-column">
<!--
============================================================
CHARACTER CONCEPT DESCRIPTION + OPTIONAL AUCTION NOTE
============================================================
-->
<div class="p-1">
<div class="card rounded-0 border-top-0 border-left-0 pl-3 pt-3">
<div class="card rounded-0 p-2 align-items-center justify-content-center border-0" style="position: absolute; left: 0; top: 0; z-index: 2;">
<!-- FA ICON == Replace "trillium" with another FA icon name -->
<i class="fas fa-trillium
fa-2x fa-fw text-primary ml-n1" style="transform: rotate(-45deg);"></i>
</div>
<div class="card card-outline-primary rounded-0 d-block d-lg-flex border-right-0 border-bottom-0 p-1" style="min-height: 180px; border-width: 4px;">
<div class="card border-0 bg-transparent p-3 text-justify" style="flex: 1 1 0; overflow-y: auto; z-index: 2;">
<p>
Write a bit about the character concept, design. You can mention some ideas you had in mind, or maybe highlight some elements that seem important to you. This box will scroll.
</p>
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- (AUCTION ONLY) AUCTION END RULES -->
<p class="text-primary text-center mb-1 text-lowercase" style="font-variant: small-caps; font-weight: 500;">
auction will close in XX hours after the last bid.
</p>
</div>
</div>
</div>
<!--
============================================================
MAIN INFO (3 TABS + NAV BUTTONS)
============================================================
-->
<div class="row no-gutters">
<div class="col-12 col-lg-10 p-1">
<div class="tab-content">
<!--
====================================================
MAIN SELLING/OFFERING INFO TAB
====================================================
-->
<div class="tab-pane in active show" id="offer">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- DELETE THE ONE YOU DON'T NEED BELOW (Delete OTA section for Auction and delete Auction section for OTA) -->
<!--
====================================================
AUCTION SECTION
====================================================
-->
<div>
<!-- AUCTION HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-gavel"></i>
Auction
</p>
<!-- STARTING BID -->
<div class="row no-gutters justify-content-between px-2 text-uppercase" style="font-weight: 500;">
<span class="text-warning">
STARTING BID
</span>
<span>
$XX
</span>
</div>
<!-- MINIMAL INCREASE -->
<div class="row no-gutters justify-content-between px-2 text-uppercase" style="font-weight: 500;">
<span class="text-success">
Minimal increase
</span>
<span>
$XX
</span>
</div>
<!-- AUTOBUY 1 -->
<div class="row no-gutters justify-content-between px-2" style="font-weight: 500;">
<span class="text-primary text-uppercase">
Autobuy 1*
</span>
<span class="text-uppercase">
$XX
</span>
<div class="col-12 text-muted font-italic pl-2 small" style="font-weight: 400;">
<p>*
Write what the buyer will receive when choosing AB1, if there is anything extra
</p>
</div>
</div>
<!-- AUTOBUY 2 (OPTIONAL) -->
<div class="row no-gutters justify-content-between px-2" style="font-weight: 500;">
<span class="text-primary text-uppercase">
Autobuy 2*
</span>
<span class="text-uppercase">
$XX
</span>
<div class="col-12 text-muted font-italic pl-2 small" style="font-weight: 400;">
<p>*
Write what the buyer will receive when choosing AB2
</p>
</div>
</div>
</div>
<!--
====================================================
OFFER TO ADOPT SECTION
====================================================
-->
<div>
<!-- AUCTION HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-handshake-angle"></i>
Offer to adopt
</p>
<ul class="fa-ul text-left ml-4">
<!-- LOVED OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-heart text-primary"></i></span>
Preferred offer variant
</li>
<!-- LIKED OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-circle-check text-success"></i></span>
Liked offer variant
</li>
<!-- NEUTRAL OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-equals text-warning"></i></span>
Neutral offer variant
</li>
<!-- NON-ACCEPTABLE OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-circle-x text-danger"></i></span>
Non-acceptable offer variant
</li>
<!-- YOU CAN ADD MORE DESIGN NOTES ABOVE -->
</ul>
</div>
</div>
</div>
</div>
<!--
====================================================
IMPORTANT NOTES TAB
====================================================
-->
<div class="tab-pane" id="notes">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- IMPORTANT NOTES HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-circle-exclamation"></i>
Please note
</p>
<!--
====================================================
NOTES LIST
====================================================
-->
<ul>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
====================================================
RULES/TERMS OF SERVICE TAB
====================================================
-->
<div class="tab-pane" id="tos">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- TOS HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-list"></i>
Terms of Service
</p>
<!--
====================================================
TOS LIST
====================================================
-->
<ul>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
Content
</span></li>
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<ul class="nav flex-row flex-lg-column h-100">
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link active rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#offer">
<i class="fal fa-arrow-right-arrow-left fa-2x"></i>
</a>
</li>
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#notes">
<i class="fal fa-circle-exclamation fa-2x"></i>
</a>
</li>
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#tos">
<i class="fal fa-list fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
<!--
============================================================
MOODBOARD (TWO IMAGES)
============================================================
-->
<div class="p-1 flex-fill">
<div class="card rounded-0 p-1 border-top-0 border-left-0 h-100">
<div class="row no-gutters flex-fill">
<!-- MOODBOARD IMAGE -->
<div class="col p-1 h-100">
<div class="h-100" style="min-height: 80px;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col p-1 h-100">
<div class="h-100" style="min-height: 80px;
background-image: url('URLHERE');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
</div>
<!--
============================================================
DESIGN + PAYMENT + ADOPT NAME ON PC
============================================================
-->
<div class="col-12 col-lg">
<div class="row no-gutters h-100">
<!--
============================================================
DESIGN (PALETTE + NOTES) + PAYMENT METHODS COLUMN
============================================================
-->
<div class="col-12 col-lg-9 p-1 flex-column">
<div class="card rounded-0 border-top-0 border-left-0 flex-fill mb-2 p-1 d-block d-lg-flex">
<div class="p-1 text-center" style="flex: 1 1 0; overflow-y: auto;">
<!-- PAYMENT METHODS HEADER -->
<p class="mb-2 text-primary text-uppercase text-center" style="font-size: 20px;"><i class="far fa-swatchbook"></i>
Design
</p>
<!--
============================================================
CHARACTER COLOR PALETTE
============================================================
-->
<div class="row no-gutters">
<!-- PALETTE COLOR -->
<div class="col-12 col-lg-6 p-1">
<div style="height: 25px; background-color:
#ccc
;"></div>
<!-- PASTE THE SAME HEXCODE ABOVE AND BELOW -->
<p class="mb-0 text-lowercase">
#hexcode
</p>
</div>
<!-- PALETTE COLOR -->
<div class="col-12 col-lg-6 p-1">
<div style="height: 25px; background-color:
#ccc
;"></div>
<!-- PASTE THE SAME HEXCODE ABOVE AND BELOW -->
<p class="mb-0 text-lowercase">
#hexcode
</p>
</div>
<!-- PALETTE COLOR -->
<div class="col-12 col-lg-6 p-1">
<div style="height: 25px; background-color:
#ccc
;"></div>
<!-- PASTE THE SAME HEXCODE ABOVE AND BELOW -->
<p class="mb-0 text-lowercase">
#hexcode
</p>
</div>
<!-- PALETTE COLOR -->
<div class="col-12 col-lg-6 p-1">
<div style="height: 25px; background-color:
#ccc
;"></div>
<!-- PASTE THE SAME HEXCODE ABOVE AND BELOW -->
<p class="mb-0 text-lowercase">
#hexcode
</p>
</div>
<!-- YOU CAN ADD MORE PALETTE COLORS ABOVE -->
</div>
<!-- DIVIDER-->
<hr class="my-1">
<!--
============================================================
DESIGN NOTES LIST
============================================================
-->
<ul class="fa-ul text-left ml-4" style="font-size: 13px;">
<!-- DESIGN NOTE -->
<li><span class="fa-li"><i class="far fa-thumbtack text-primary"></i></span>
Design note here. Just some short ones here.
</li>
<!-- DESIGN NOTE -->
<li><span class="fa-li"><i class="far fa-thumbtack text-primary"></i></span>
Donec accum tempor lacus, et venenatis elit feugiat non.
</li>
<!-- DESIGN NOTE -->
<li><span class="fa-li"><i class="far fa-thumbtack text-primary"></i></span>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.
</li>
<!-- YOU CAN ADD MORE DESIGN NOTES ABOVE -->
</ul>
</div>
</div>
<!--
============================================================
PREFERRED PAYMENT METHODS LIST
Use "text-success" on the preferred method(s)
Use "text-warning" on the additional methods
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 d-block d-lg-flex p-1" style="min-height: 180px;">
<div class="p-1 text-center" style="flex: 1 1 0; overflow-y: auto; font-size: 18px;">
<!-- PAYMENT METHODS HEADER -->
<p class="mb-2 text-primary text-uppercase text-center" style="font-size: 20px;"><i class="far fa-coins"></i>
Payment
</p>
<!-- PAYPAL OPTION -->
<p class="text-success
mb-0">
<!-- PayPal FA icon -->
<i class="fab fa-paypal fa-fw"></i>
Paypal
</p>
<!-- DA POINTS OPTION -->
<p class="text-warning
mb-0">
<!-- DeviantArt FA icon -->
<i class="fab fa-deviantart fa-fw"></i>
DA points
</p>
<!-- EXTRA CUSTOM OPTION -->
<p class="text-warning
mb-0">
<!-- Custom FA icon == Replace "plus" with another FA icon name -->
<i class="fas fa-plus fa-fw"></i>
Extra method
</p>
<!-- EXTRA CUSTOM OPTION -->
<p class="text-warning
mb-0">
<!-- Custom FA icon == Replace "plus" with another FA icon name -->
<i class="fas fa-plus fa-fw"></i>
Extra method
</p>
<!-- YOU CAN ADD OR REMOVE OPTIONS ABOVE -->
</div>
</div>
</div>
<!--
============================================================
ADOPT NAME (HIDDEN ON MOBILE)
============================================================
-->
<div class="col-12 col-lg-3 p-1 hidden-md-down">
<div class="card rounded-0 border-top-0 border-left-0 h-100 align-items-center justify-content-center text-center bg-primary text-white">
<div class="text-uppercase display-4 fa-rotate-90" style="white-space: nowrap; position: absolute;">
ADOPT NAME
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CODE CREDIT == DO NOT REMOVE -->
<p class="text-center">
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster text-center mt-1"><i class="fas fa-code"></i></a>
</p>
</div>
</div>
<!-- THIS CODE USES THEME COLORS
==============================================
47. || Homebound || F2U
==============================================
-->
<div class="py-4">
<div class="container px-4 pt-4 pb-2 bg-faded" style="max-width: 1100px;">
<div class="row no-gutters">
<!--
============================================================
ADOPT NAME (MOBILE VER) + BANNER IMAGE
============================================================
-->
<div class="col-12 col-lg p-1 flex-column">
<!--
============================================================
ADOPT NAME (HIDDEN ON PC)
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 align-items-center justify-content-center text-center bg-primary text-white text-uppercase display-4 mb-2 py-1 hidden-lg-up">
<span>
{{!Adopt name!}}
</span>
</div>
<!--
============================================================
ADOPT BANNER IMAGE
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 p-2 flex-fill">
<div class="h-100" style="min-height: 400px;
background-image: url('{{u!Adopt banner image url!}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
<!--
============================================================
CONCEPT DESCRIPTION + MAIN SELLING UNFO + MOODBOARD
============================================================
-->
<div class="col-12 col-lg-5 flex-column">
<!--
============================================================
CHARACTER CONCEPT DESCRIPTION + OPTIONAL AUCTION NOTE
============================================================
-->
<div class="p-1">
<div class="card rounded-0 border-top-0 border-left-0 pl-3 pt-3">
<div class="card rounded-0 p-2 align-items-center justify-content-center border-0" style="position: absolute; left: 0; top: 0; z-index: 2;">
<!-- FA ICON == Replace "trillium" with another FA icon name -->
<i class="{{i!Corner FA icon!}}
fa-2x fa-fw text-primary ml-n1" style="transform: rotate(-45deg);"></i>
</div>
<div class="card card-outline-primary rounded-0 d-block d-lg-flex border-right-0 border-bottom-0 p-1" style="min-height: 180px; border-width: 4px;">
<div class="card border-0 bg-transparent p-3 text-justify" style="flex: 1 1 0; overflow-y: auto; z-index: 2;">
{{%Adopt concept description or intro%
<p>
{{l%paragraph%}}
</p>
%end%}}
<!-- YOU CAN ADD MORE PARAGRAPHS ABOVE -->
</div>
<!-- (AUCTION ONLY) AUCTION END RULES -->
{{?Auction end date?
<p class="text-primary text-center mb-1 text-lowercase" style="font-variant: small-caps; font-weight: 500;">
auction will close in {{%hours amount%}} hours after the last bid.
</p>
?end?}}
</div>
</div>
</div>
<!--
============================================================
MAIN INFO (3 TABS + NAV BUTTONS)
============================================================
-->
<div class="row no-gutters">
<div class="col-12 col-lg-10 p-1">
<div class="tab-content">
<!--
====================================================
MAIN SELLING/OFFERING INFO TAB
====================================================
-->
<div class="tab-pane in active show" id="offer">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- DELETE THE ONE YOU DON'T NEED BELOW (Delete OTA section for Auction and delete Auction section for OTA) -->
<!--
====================================================
AUCTION SECTION
====================================================
-->
{{?Auction option?
<div>
<!-- AUCTION HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-gavel"></i>
Auction
</p>
<!-- STARTING BID -->
<div class="row no-gutters justify-content-between px-2 text-uppercase" style="font-weight: 500;">
<span class="text-warning">
STARTING BID
</span>
<span>
{{%currency symbol%}}{{%Starting Bid%}}
</span>
</div>
<!-- MINIMAL INCREASE -->
<div class="row no-gutters justify-content-between px-2 text-uppercase" style="font-weight: 500;">
<span class="text-success">
Minimal increase
</span>
<span>
{{%currency symbol%}}{{%Minimal increase%}}
</span>
</div>
<!-- AUTOBUY 1 -->
<div class="row no-gutters justify-content-between px-2" style="font-weight: 500;">
<span class="text-primary text-uppercase">
Autobuy*
</span>
<span class="text-uppercase">
{{%currency symbol%}}{{%Autobuy%}}
</span>
{{?AB bonus?
<div class="col-12 text-muted font-italic pl-2 small" style="font-weight: 400;">
<p>*
{{%Autobuy extra reward%}}
</p>
</div>
?end?}}
</div>
<!-- AUTOBUY 2 (OPTIONAL) -->
{{?AB 2?
<div class="row no-gutters justify-content-between px-2" style="font-weight: 500;">
<span class="text-primary text-uppercase">
Autobuy 2*
</span>
<span class="text-uppercase">
{{%currency symbol%}}{{%AB amount%}}
</span>
<div class="col-12 text-muted font-italic pl-2 small" style="font-weight: 400;">
<p>*
{{%Autobuy extra reward%}}
</p>
</div>
</div>
?end?}}
</div>
?end?}}
<!--
====================================================
OFFER TO ADOPT SECTION
====================================================
-->
{{?OTA option?
<div>
<!-- AUCTION HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-handshake-angle"></i>
Offer to adopt
</p>
<ul class="fa-ul text-left ml-4">
{{%Preferred offer variants%
<!-- LOVED OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-heart text-primary"></i></span>
{{%list item%}}
</li>
%end%}}
{{%Good offer variants%
<!-- LIKED OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-circle-check text-success"></i></span>
{{%list item%}}
</li>
%end%}}
{{%Neutral offer variants%
<!-- NEUTRAL OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-equals text-warning"></i></span>
{{%list item%}}
</li>
%end%}}
{{%Non acceptable offer variants%
<!-- NON-ACCEPTABLE OFFER VARIANT -->
<li><span class="fa-li"><i class="fas fa-circle-x text-danger"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE DESIGN NOTES ABOVE -->
</ul>
</div>
?end?}}
</div>
</div>
</div>
<!--
====================================================
IMPORTANT NOTES TAB
====================================================
-->
<div class="tab-pane" id="notes">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- IMPORTANT NOTES HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-circle-exclamation"></i>
Please note
</p>
<!--
====================================================
NOTES LIST
====================================================
-->
<ul>
<!-- LIST ITEM -->
{{%Please note list%
<li class="text-primary"><span class="text-body">
{{%list item%}}
</span></li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
<!--
====================================================
RULES/TERMS OF SERVICE TAB
====================================================
-->
<div class="tab-pane" id="tos">
<div class="card rounded-0 border-left-0 border-top-0 d-block d-lg-flex text-body p-1" style="min-height: 190px;">
<div class="p-2" style="flex: 1 1 0; overflow-y: auto; max-height: 360px;">
<!-- TOS HEADER -->
<p class="mb-2 text-primary text-uppercase" style="font-size: 20px;"><i class="far fa-list"></i>
Terms of Service
</p>
<!--
====================================================
TOS LIST
====================================================
-->
<ul>
{{%ToS list%
<!-- LIST ITEM -->
<li class="text-primary"><span class="text-body">
{{%list item%}}
</span></li>
%end%}}
<!-- YOU CAN ADD MORE LIST ITEMS ABOVE -->
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-2">
<ul class="nav flex-row flex-lg-column h-100">
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link active rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#offer">
<i class="fal fa-arrow-right-arrow-left fa-2x"></i>
</a>
</li>
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#notes">
<i class="fal fa-circle-exclamation fa-2x"></i>
</a>
</li>
<!-- NAV LINK -->
<li class="nav-item flex-grow-1 p-1">
<a class="btn btn-primary nav-link rounded-0 w-100 h-100 align-items-center justify-content-center text-center"
data-toggle="tab" href="#tos">
<i class="fal fa-list fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
<!--
============================================================
MOODBOARD (TWO IMAGES)
============================================================
-->
{{%%Moodboard line%
<div class="p-1 flex-fill">
<div class="card rounded-0 p-1 border-top-0 border-left-0 h-100">
<div class="row no-gutters flex-fill">
<!-- MOODBOARD IMAGE -->
<div class="col p-1 h-100">
<div class="h-100" style="min-height: 80px;
background-image: url('{{u%Left mood image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
<!-- MOODBOARD IMAGE -->
<div class="col p-1 h-100">
<div class="h-100" style="min-height: 80px;
background-image: url('{{u%Right mood image url%}}');
background-size: cover;
background-position: center;"></div>
</div>
</div>
</div>
</div>
%end%}}
</div>
<!--
============================================================
DESIGN + PAYMENT + ADOPT NAME ON PC
============================================================
-->
<div class="col-12 col-lg">
<div class="row no-gutters h-100">
<!--
============================================================
DESIGN (PALETTE + NOTES) + PAYMENT METHODS COLUMN
============================================================
-->
<div class="col-12 col-lg-9 p-1 flex-column">
<div class="card rounded-0 border-top-0 border-left-0 flex-fill mb-2 p-1 d-block d-lg-flex">
<div class="p-1 text-center" style="flex: 1 1 0; overflow-y: auto;">
<!-- PAYMENT METHODS HEADER -->
<p class="mb-2 text-primary text-uppercase text-center" style="font-size: 20px;"><i class="far fa-swatchbook"></i>
Design
</p>
<!--
============================================================
CHARACTER COLOR PALETTE
============================================================
-->
<div class="row no-gutters">
{{%Character palette%
<!-- PALETTE COLOR -->
<div class="col-12 col-lg-6 p-1">
<div style="height: 25px; background-color:
{{c%palette color%}}
;"></div>
<!-- PASTE THE SAME HEXCODE ABOVE AND BELOW -->
<p class="mb-0 text-lowercase">
{{c%palette color%}}
</p>
</div>
%end%}}
<!-- YOU CAN ADD MORE PALETTE COLORS ABOVE -->
</div>
<!-- DIVIDER-->
<hr class="my-1">
<!--
============================================================
DESIGN NOTES LIST
============================================================
-->
<ul class="fa-ul text-left ml-4" style="font-size: 13px;">
{{%Design notes%
<!-- DESIGN NOTE -->
<li><span class="fa-li"><i class="far fa-thumbtack text-primary"></i></span>
{{%list item%}}
</li>
%end%}}
<!-- YOU CAN ADD MORE DESIGN NOTES ABOVE -->
</ul>
</div>
</div>
<!--
============================================================
PREFERRED PAYMENT METHODS LIST
Use "text-success" on the preferred method(s)
Use "text-warning" on the additional methods
============================================================
-->
<div class="card rounded-0 border-top-0 border-left-0 d-block d-lg-flex p-1" style="min-height: 180px;">
<div class="p-1 text-center" style="flex: 1 1 0; overflow-y: auto; font-size: 18px;">
<!-- PAYMENT METHODS HEADER -->
<p class="mb-2 text-primary text-uppercase text-center" style="font-size: 20px;"><i class="far fa-coins"></i>
Payment
</p>
{{%Preferred methods list%
<!-- EXTRA CUSTOM OPTION -->
<p class="text-success
mb-0">
<!-- Custom FA icon == Replace "plus" with another FA icon name -->
<i class="{{i%FA icon%}} fa-fw"></i>
{{%method name%}}
</p>
%end%}}
{{%Alternative methods list%
<!-- EXTRA CUSTOM OPTION -->
<p class="text-warning
mb-0">
<!-- Custom FA icon == Replace "plus" with another FA icon name -->
<i class="{{i%FA icon%}} fa-fw"></i>
{{%method name%}}
</p>
%end%}}
<!-- YOU CAN ADD OR REMOVE OPTIONS ABOVE -->
</div>
</div>
</div>
<!--
============================================================
ADOPT NAME (HIDDEN ON MOBILE)
============================================================
-->
<div class="col-12 col-lg-3 p-1 hidden-md-down">
<div class="card rounded-0 border-top-0 border-left-0 h-100 align-items-center justify-content-center text-center bg-primary text-white">
<div class="text-uppercase display-4 fa-rotate-90" style="white-space: nowrap; position: absolute;">
{{!Adopt name!}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CODE CREDIT == DO NOT REMOVE -->
<p class="text-center">
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="tooltipster text-center mt-1"><i class="fas fa-code"></i></a>
</p>
</div>
</div>