<!---------------------------------------------------------------------------------------------------------------
CODING BY MOUEI @ TOYHOU.SE
!* YOU WILL NEED TO ADD YOUR OWN IMAGE URLs. CTRL + F TO FIND "URL"
!* To change repetitive details easily in the Toyhou.s editor (on Google Chrome),
- highlight the desired piece of code ie. a color HEX code.
- ctrl + f
- click the '+' sign under the 'find' box
- in the 'replace with' box that appears, enter your desired outcome.
!* MAIN COLOUR CODES USED
OBJECT | COLOUR/CODE
------------------------------------------
Background | #322F31
Main Accent Colour | #8fdbbe
Sub-folder Colour | #d9e3a1
Text Colour | text-white
- click 'replace all'
---------------------------------------------------------------------------------------------------------------->
<div style ="background: #322F31; position: absolute; top: 0px; bottom: 0px; left: 0; z-index: 1; width: 100%; height: 100%; text-align: center;">
</div>
<div class="container" style="max-width: 1000px; z-index: 1; top: 0px; margin-bottom: -250px;">
<!---------------------------------------------------------------------------------------------------------------
CREDIT - DO NOT REMOVE!
---------------------------------------------------------------------------------------------------------------->
<div class="row p-0">
<div class="col"></div>
<div class="col-2 text-muted mr-0 pr-0" style="margin-bottom: 15px; right: 0; margin-right: 0; text-align: right; font-size: 7pt; letter-spacing: 2pt; text-transform: uppercase;">
Coding by @mouei
</div>
</div>
<!------------------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------------------
TOP LINKS
--------------------------------------------------------------------------------------------------------------->
<div class="row text-center text-uppercase" style="letter-spacing:3px;">
<div class="col rounded pl-0 pr-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; center; background-size: cover;" href="https://toyhou.se/#">
<span class="m-auto text-white text-uppercase">
commissions
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; center; background-size: cover;" href="https://toyhou.se/#">
<span class="m-auto text-white text-uppercase">
requests
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; center; background-size: cover;" href="https://toyhou.se/#">
<span class="m-auto text-white text-uppercase">
adopts
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; center; background-size: cover;" href="https://toyhou.se/#">
<span class="m-auto text-white text-uppercase">
trades
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col rounded pl-1 pr-0">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; center; background-size: cover;" href="https://toyhou.se/#">
<span class="m-auto text-white text-uppercase">
customs
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
DIVIDER
---------------------------------------------------------------------------------------------------------------->
<div class="row align-items-center my-2 py-2">
<div class="col-lg-5 col-md-4 col-sm-4 px-0 py-2">
<hr class="w-100">
</div>
<div class="col text-center">
<i class="fal fa-search" style="font-size:30pt; color: #8fdbbe;"></i>
</div>
<div class="col-lg-5 col-md-4 col-sm-4 px-0 py-2">
<hr class="w-100">
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
CONTACT LINKS
---------------------------------------------------------------------------------------------------------------->
<div class="row">
<div class="col">
<div class="row">
<div class="col card text-muted">
<div class="row text-center p-4">
<a href="" class="btn btn-light col">
<i class="fab fa-deviantart tooltipster" title="deviantART" data-original-title="deviantART" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
<a href="" class="btn btn-light col">
<i class="fab fa-twitter tooltipster" title="twitter" data-original-title="twitter" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
<a href="" class="btn btn-light col">
<i class="fab fa-instagram tooltipster" title="instagram" data-original-title="instagram" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
<a href="" class="btn btn-light col">
<i class="fas fa-paw tooltipster" title="Furaffinity" data-original-title="FurAffinity" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
<a href="" class="btn btn-light col">
<i class="fab fa-discord tooltipster" title="discord" data-original-title="discord" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
<a href="" class="btn btn-light col">
<i class="fas fa-at tooltipster" title="email" data-original-title="email" style="font-size: 25pt; display: inline; color: #8fdbbe;"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FRIENDS TITLE
---------------------------------------------------------------------------------------------------------------->
<div class="row mt-3">
<div class="col px-0">
<div class="text-uppercase text-right text-muted pb-1" style="letter-spacing: 3px; font-size: 20pt; color: #8fdbbe!important;">
<i class="fal fa-heart pull-left" style="line-height: 39px; vertical-align: center center;"></i> friendos
</div>
<hr>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FRIENDS SECTION. COPY PASTE THE ENTIRE THING TO ADD ANOTHER ROW OF FRIEND BLOCKS.
---------------------------------------------------------------------------------------------------------------->
<div class="row align-items-center">
<div class="col-lg-2 col-md-4 col-sm-12 rounded pl-0 pr-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2 col-md-4 col-sm-12 rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2 col-md-4 col-sm-12 rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2 col-md-4 col-sm-12 rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2 col-md-4 col-sm-12 rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-2 col-md-4 col-sm-12 rounded px-1">
<table class="table table-hover table-borderless border-0 rounded text-center">
<tbody class="col card text-center p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-center p-0 m-0">
<td class="col">
<a class=" d-flex text-center col border-0 m-auto p-0 rounded" style="text-decoration: none; height: 150px; center; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase">
<i class="fas fa-heart" style="font-size: 40pt;"></i><br>
Friendo
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FEATURED TITLE
---------------------------------------------------------------------------------------------------------------->
<div class="row mt-3">
<div class="col px-0">
<div class="text-uppercase text-right text-muted pb-1" style="letter-spacing: 3px; font-size: 20pt; color: #8fdbbe!important;">
<i class="fal fa-feather-alt pull-left" style="line-height: 39px; vertical-align: center center;"></i> featured
</div>
<hr>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FEATURED CHARACTERS. COPY PASTE THE ENTIRE SECTION TO ADD ANOTHER ROW OF CHARACTER BLOCKS.
---------------------------------------------------------------------------------------------------------------->
<div class="row mb-4">
<div class="col-lg-3 col-md-6 col-sm-12 d-flex mx-0 mb-2 pl-0 pr-1">
<div class="card col m-0 p-2 text-center charcard" style="border-color: #8fdbbe;">
<a href="https://toyhou.se/">
<img class="rounded m-auto tooltipster" src="https://via.placeholder.com/200x200" title="Art by User" data-original-title="Art by User">
</a>
<div class="charcardtxt row align-items-center text-center">
<p class="col font-weight-bold text-uppercase text-center" style="color: #8fdbbe;">
name
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 d-flex mx-0 mb-2 px-1">
<div class="card col m-0 p-2 text-center charcard" style="border-color: #8fdbbe;">
<a href="https://toyhou.se/">
<img class="rounded m-auto tooltipster" src="https://via.placeholder.com/200x200" title="Art by User" data-original-title="Art by User">
</a>
<div class="charcardtxt row align-items-center text-center">
<p class="col font-weight-bold text-uppercase text-center" style="color: #8fdbbe;">
name
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 d-flex mx-0 mb-2 px-1">
<div class="card col m-0 p-2 text-center charcard" style="border-color: #8fdbbe;">
<a href="https://toyhou.se/">
<img class="rounded m-auto tooltipster" src="https://via.placeholder.com/200x200" title="Art by User" data-original-title="Art by User">
</a>
<div class="charcardtxt row align-items-center text-center">
<p class="col font-weight-bold text-uppercase text-center" style="color: #8fdbbe;">
name
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 d-flex mx-0 mb-2 pl-1 pr-0">
<div class="card col m-0 p-2 text-center charcard" style="border-color: #8fdbbe;">
<a href="https://toyhou.se/">
<img class="rounded m-auto tooltipster" src="https://via.placeholder.com/200x200" title="Art by User" data-original-title="Art by User">
</a>
<div class="charcardtxt row align-items-center text-center">
<p class="col font-weight-bold text-uppercase text-center" style="color: #8fdbbe;">
name
</p>
</div>
</div>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
BUSINESS TITLE
---------------------------------------------------------------------------------------------------------------->
<div class="row mt-3">
<div class="col-lg-4 col-md-12 col-sm-12 text-muted mb-3 pl-0">
<div class="text-uppercase text-right text-muted pb-1" style="letter-spacing: 3px; font-size: 20pt; color: #8fdbbe!important;">
<i class="fal fa-suitcase pull-left" style="line-height: 39px; vertical-align: center center;"></i>BUSINESS
</div>
<hr>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
BUSINESS SECTION
---------------------------------------------------------------------------------------------------------------->
<i class="fal fa-image fa-2x p-0 bg-faded pull-left mr-2 text-center" style="width: 70px; height: 70px; line-height: 70px; vertical-align: center center;"></i>
<h2>Commissions</h2>
<p>Closed</p>
<br>
<i class="fal fa-exchange fa-2x p-0 bg-faded pull-left mr-2 text-center" style="width: 70px; height: 70px; line-height: 70px; vertical-align: center center;"></i>
<h2>Art Trades</h2>
<p>Friends Only</p>
<br>
<i class="fal fa-praying-hands fa-2x p-0 bg-faded pull-left mr-2 text-center" style="width: 70px; height: 70px; line-height: 70px; vertical-align: center center;"></i>
<h2> Requests</h2>
<p>Friends Only</p>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FOLDERS TITLE
---------------------------------------------------------------------------------------------------------------->
<div class="col-lg-8 col-md-12 col-sm-12 text-muted py-0 pl-2 pr-0">
<div class="text-uppercase text-right text-muted pb-1" style="letter-spacing: 3px; font-size: 20pt; color: #8fdbbe!important;">
<i class="fal fa-folders pull-left" style="line-height: 39px; vertical-align: center center;"></i>FOLDERS
</div>
<hr>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FOLDERS SECTION - MAINI FOLDERS. COPY PASTE ENTIRE SECTION TO ADD BUTTONS.
---------------------------------------------------------------------------------------------------------------->
<!--------------------------------COPY FROM HERE------------------------------------------------------>
<div class="row">
<div class="col rounded">
<table class="table table-hover table-borderless border-0 rounded text-left">
<tbody class="col card text-left p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-left p-0 m-0">
<td class="col">
<a class=" d-flex text-left col border-0 m-auto p-0 rounded" style="text-decoration: none; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase w-100">
folder <i class="fal fa-folders pull-right"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------------------COPY TO HERE------------------------------------------------------->
<!--------------------------------COPY FROM HERE------------------------------------------------------>
<div class="row">
<div class="col rounded">
<table class="table table-hover table-borderless border-0 rounded text-left">
<tbody class="col card text-left p-0" style="background: #8fdbbe;">
<tr class="d-flex btn rounded text-left p-0 m-0">
<td class="col">
<a class=" d-flex text-left col border-0 m-auto p-0 rounded" style="text-decoration: none; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase w-100">
folder <i class="fal fa-folders pull-right"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------------------COPY TO HERE------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
FOLDERS SECTION - SUB-FOLDERS.
---------------------------------------------------------------------------------------------------------------->
<div class="ml-4 pl-4" style="margin-top: 0.5rem; margin-bottom: 0.5rem;">
<!--------------------------------COPY FROM HERE------------------------------------------------------>
<div class="row">
<div class="col rounded">
<table class="table table-hover table-borderless border-0 rounded text-left">
<tbody class="col card text-left p-0" style="background: #d9e3a1;">
<tr class="d-flex btn rounded text-left p-0 m-0">
<td class="col">
<a class=" d-flex text-left col border-0 m-auto p-0 rounded" style="text-decoration: none; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase w-100">
SUB-FOLDER <i class="fal fa-folders pull-right"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------------------COPY TO HERE------------------------------------------------------->
<!--------------------------------COPY FROM HERE------------------------------------------------------>
<div class="row">
<div class="col rounded">
<table class="table table-hover table-borderless border-0 rounded text-left">
<tbody class="col card text-left p-0" style="background: #d9e3a1;">
<tr class="d-flex btn rounded text-left p-0 m-0">
<td class="col">
<a class=" d-flex text-left col border-0 m-auto p-0 rounded" style="text-decoration: none; background-size: cover;" href="https://toyhou.se/">
<span class="m-auto text-white text-uppercase w-100">
SUB-FOLDER <i class="fal fa-folders pull-right"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!---------------------------------COPY TO HERE-------------------------------------------------------->
</div>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------->
<!---------------------------------------------------------------------------------------------------------------
DIVIDER
---------------------------------------------------------------------------------------------------------------->
<div class="row align-items-center my-2 py-2">
<div class="col-lg-5 col-md-4 col-sm-4 py-1 pt-2 px-0">
<hr class="w-100">
</div>
<div class="col text-center">
<i class="fal fa-flower-daffodil" style="font-size:30pt; color: #8fdbbe;"></i>
</div>
<div class="col-lg-5 col-md-4 col-sm-4 py-1 pt-2 px-0">
<hr class="w-100">
</div>
</div>
<!------------------------------------------------------------------------------------------------------------->
</div>
</div>
</div>