<!-- THIS CODE USES CUSTOM COLORS + THEME LIGHT TEXT
12. || Eclipse || F2U
ACCENT COLOR = #de603f
SECONDARY COLOR = #334051
CARDS BACKGROUND = #1b1b22
TEXT COLOR = #fff
-->
<div class="card border-0 pt-2 pb-5">
<div class="container" style="max-width: 1100px; background-image: url(https://images.unsplash.com/photo-1605707105061-1a62b371346d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80); background-size: cover; background-position: center;">
<div class="row no-gutters pl-2 pl-lg-5 pr-2 pr-lg-5">
<!--
======================================
CIRCLE IMAGES CARD
======================================
-->
<div class="card-flex col-12 col-lg-4 mr-4 p-2" style="background: linear-gradient(to top, #1b1b22 40%, #de603f 200%);">
<div class="row no-gutters justify-content-center align-items-center mt-4 mb-4 mt-md-5 mt-lg-4 mb-md-5 mb-lg-4">
<div class="rounded-circle" style="position: absolute; height: 300px; width: 300px; border: double 10px #de603f;"></div>
<!-- UPPER CIRCLE IMAGE -->
<div class="card rounded-circle border-0 mb-3 mr-md-3 mr-lg-0 p-1" style="height: 140px; width: 140px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<div class="rounded-circle h-100" style="border: solid 2px #de603f;"></div>
</div>
<!-- USER CIRCLE IMAGE -->
<div class="card rounded-circle mb-3 p-2" style="height: 200px; width: 200px; border: solid 2px #fff; box-shadow: 0px 0px 30px #de603f, 0px 0px 6px #de603f;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
</div>
<!-- LOWER CIRCLE IMAGE -->
<div class="card rounded-circle border-0 p-1 ml-md-3 ml-lg-0" style="height: 140px; width: 140px;
background-image: url(URLHERE);
background-size: cover;
background-position: top;">
<div class="rounded-circle h-100" style="border: solid 2px #de603f;"></div>
</div>
</div>
</div>
<!--
======================================
MAIN CONTENT CARD
======================================
-->
<div class="card border-0 col-12 col-lg" style="background: linear-gradient(to bottom, #1b1b22, #334051 150%); color: #fff; border-radius: 0px;">
<div class="row no-gutters">
<!--
======================================
USER NAME + ADJECTIVES
======================================
-->
<div class="card border-0 col-12" style="background: none;">
<div class="row no-gutters p-2">
<div class="col-auto ml-2">
<div class="h-100" style="border-left: double 7px #de603f; width: 20px;"></div>
</div>
<div class="col" style="font-family: Times New Roman, serif; font-size: 30px; text-shadow: 0px 0px 8px #de603f, 0px 0px 10px #de603f;">
<div class="row no-gutters justify-content-between align-items-baseline">
<div class="col-12 col-lg-auto justify-content-center">
User Name
</div>
<div class="col-12 col-lg-auto justify-content-center align-items-center" style="font-size: 18px;">
Language
<i class="fas fa-circle ml-1 mr-1" style="font-size: 5px;"></i>
Prn/Prn
<i class="fas fa-circle ml-1 mr-1" style="font-size: 5px;"></i>
Adj
</div>
</div>
</div>
<div class="col-auto mr-2">
<div class="h-100" style="border-right: double 7px #de603f; width: 20px;"></div>
</div>
</div>
</div>
<!--
======================================
MAIN TAB CONTENT
======================================
-->
<div class="card border-0 col-12 order-1 order-lg-0 mb-lg-1" style="background: none;">
<div class="tab-content">
<!--
================================
BASICS SECTION
================================
-->
<div class="tab-pane fade in active show pl-2 pl-lg-3 pr-2 pr-lg-3 text-justify" id="intro" style="height: 435px; overflow: auto; font-size: 16px;">
<!-- USER INTRODUCTION -->
<div class="align-items-center" style="min-height: 140px;">
<p>Write a small introduction here. The whole box will scroll if you write too much. 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>
<!-- SOCIAL LINKS -->
<div class="row no-gutters justify-content-center mt-2" style="text-shadow: 0px 0px 5px #de603f, 0px 0px 8px #de603f;">
<!-- DEVIANTART LINK -->
<a class="text-light tooltipster"
href="LINK_HERE"
title="DeviantArt"
>
<!-- FA ICON -->
<i class="fab fa-deviantart fa-fw fa-2x"></i></a>
<!-- TWITTER LINK -->
<a class="text-light tooltipster"
href="LINK_HERE"
title="Twitter"
>
<!-- FA ICON -->
<i class="fab fa-twitter fa-fw fa-2x"></i></a>
<!-- FURAFFINITY LINK -->
<a class="text-light tooltipster"
href="LINK_HERE"
title="Furaffinity"
>
<!-- FA ICON -->
<i class="fas fa-paw fa-fw fa-2x"></i></a>
<!-- TUMBLR LINK -->
<a class="text-light tooltipster"
href="LINK_HERE"
title="Tumblr"
>
<!-- FA ICON -->
<i class="fab fa-tumblr fa-fw fa-2x"></i></a>
<!-- DISCORD NAME -->
<a class="text-light tooltipster"
title="Name#0000"
>
<!-- FA ICON -->
<i class="fab fa-discord fa-fw fa-2x"></i></a>
</div>
<!-- FEATURED CHARACTERS -->
<div class="row no-gutters mt-2" style="font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 8px #de603f; font-size: 23px;">
<!-- FEATURED CHARACTER -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Character Name
</p></a>
</div>
<!-- FEATURED CHARACTER -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Character Name
</p></a>
</div>
<!-- FEATURED CHARACTER -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 200px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Character Name
</p></a>
</div>
</div>
</div>
<!--
================================
ART SECTION
================================
-->
<div class="tab-pane fade pl-2 pl-lg-3 pr-2 pr-lg-3" id="arts" style="height: 435px; overflow: auto;">
<div class="row no-gutters mt-2 align-items-center">
<!-- ART STATUS INFO -->
<div class="col-12 col-lg-6">
<!-- COMMISSIONS -->
<div class="row no-gutters justify-content-between align-items-baseline">
<span style="font-family: Times New Roman, serif; font-size: 17px;"><i class="fal fa-palette fa-fw"></i><b>
Commissions
</b>
</span>
<span>
Content
</span>
</div>
<!-- TRADES -->
<div class="row no-gutters justify-content-between align-items-baseline">
<span style="font-family: Times New Roman, serif; font-size: 17px;"><i class="fal fa-handshake-alt fa-fw"></i><b>
Trades
</b>
</span>
<span>
Content
</span>
</div>
<!-- REQUESTS -->
<div class="row no-gutters justify-content-between align-items-baseline">
<span style="font-family: Times New Roman, serif; font-size: 17px;"><i class="fal fa-comments fa-fw"></i><b>
Requests
</b>
</span>
<span>
Content
</span>
</div>
</div>
<!-- USEFUL LINKS -->
<div class="col-12 col-lg-6 p-2">
<div class="row no-gutters" style="font-family: Times New Roman, serif;">
<div class="col-12 col-lg-6 p-1">
<a class="btn btn-outline-secondary col-12" style="border: double 7px #de603f; border-radius: 0px; font-size: 17px;" target="_BLANK"
href="LINK_HERE"> Link name</a>
</div>
<div class="col-12 col-lg-6 p-1">
<a class="btn btn-outline-secondary col-12" style="border: double 7px #de603f; border-radius: 0px; font-size: 17px;" target="_BLANK"
href="LINK_HERE"> Link name</a>
</div>
<div class="col-12 col-lg-6 p-1">
<a class="btn btn-outline-secondary col-12" style="border: double 7px #de603f; border-radius: 0px; font-size: 17px;" target="_BLANK"
href="LINK_HERE">Link name</a>
</div>
<div class="col-12 col-lg-6 p-1">
<a class="btn btn-outline-secondary col-12" style="border: double 7px #de603f; border-radius: 0px; font-size: 17px;" target="_BLANK"
href="LINK_HERE"> Link name</a>
</div>
</div>
</div>
<div class="col-12">
<div class="row no-gutters">
<!--
=============================
I DRAW SECTION
=============================
-->
<div class="col-12 col-lg-6 p-1 pr-lg-3">
<!-- I DRAW HEADER -->
<div class="row no-gutters justify-content-between" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
I draw...
</b></span>
<span><i class="fal fa-check"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
<!--
=============================
I DONT DRAW SECTION
=============================
-->
<div class="col-12 col-lg-6 p-1 pl-lg-3">
<!-- I DONT DRAW HEADER -->
<div class="row no-gutters justify-content-between" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
I don't draw...
</b></span>
<span><i class="fal fa-times"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
<!--
=============================
NOTES/TOS/ETC. SECTION
=============================
-->
<div class="col-12 p-1">
<!-- NOTES/TOS/ETC HEADER -->
<div class="row no-gutters justify-content-between" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
Notes/TOS/etc.
</b></span>
<span><i class="fal fa-circle-info"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>
Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>
Donec accumsan tempor lacus, et venenatis elit feugiat non.</li>
<li>
Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--
================================
PREFERENCES SECTION
================================
-->
<div class="tab-pane fade pl-2 pl-lg-3 pr-2 pr-lg-3" id="prefs" style="height: 435px; overflow: auto;">
<div class="row no-gutters mt-2">
<!--
=============================
INTERESTS
=============================
-->
<div class="col-12 col-lg-6 p-1 pr-lg-3">
<!-- INTERESTS HEADER -->
<div class="row no-gutters justify-content-between" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
Interests
</b></span>
<span><i class="fal fa-circle-heart"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
<!--
=============================
FANDOMS
=============================
-->
<div class="col-12 col-lg-6 p-1 pl-lg-3">
<!-- FANDOMS HEADER -->
<div class="row no-gutters justify-content-between" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
Fandoms
</b></span>
<span><i class="fal fa-circle-user"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
<!--
=============================
CHARACTER PREFERENCES
=============================
-->
<div class="col-12 p-1 mt-2">
<p class="text-center" style="font-size: 25px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><b>
Character preferences
</b></span>
</p>
<hr class="w-100 m-0 mb-1" style="border-top: double 7px #de603f;">
<div class="row no-gutters">
<!-- CHARACTER LIKES -->
<div class="col-12 col-lg-6">
<div class="text-center" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><i class="fal fa-heartbeat"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
<!-- CHARACTER DISLIKES -->
<div class="col-12 col-lg-6">
<div class="text-center" style="font-size: 22px; font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f;">
<span><i class="fal fa-heart-crack"></i></span>
</div>
<ul class="list-group ml-4 m-1">
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
<li>
Content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--
================================
STORIES/CS/COMISC SECTION
================================
-->
<div class="tab-pane fade text-justify pl-3 pr-3" id="plots" style="height: 435px; overflow: auto;">
<div class="row no-gutters">
<!-- STORY/COMIC/CS CARD (LEFT) -->
<div class="col-12">
<div class="row no-gutters">
<div class="col-12 col-lg-7 p-2">
<!-- GRAPHIC BANNER -->
<div style="min-height: 150px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE">
<p class="text-center" style="font-family: Times New Roman, serif; font-size: 25px; text-shadow: 0px 0px 8px #de603f, 0px 0px 10px #de603f;">
Plot/CS/etc name
</p>
</a>
</div>
<!-- TAGS CARD -->
<div class="col-12 col-lg-5 py-2 px-1 px-lg-0 mt-n3 mt-lg-0">
<div class="row no-gutters text-center">
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Story?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Closed species?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Comic?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- ADD MORE ABOVE -->
</div>
</div>
</div>
</div>
<!-- STORY/COMIC/CS CARD (RIGHT) -->
<div class="col-12">
<div class="row no-gutters">
<div class="col-12 col-lg-7 p-2 order-0 order-lg-1">
<!-- GRAPHIC BANNER -->
<div style="min-height: 150px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE">
<p class="text-center" style="font-family: Times New Roman, serif; font-size: 25px; text-shadow: 0px 0px 8px #de603f, 0px 0px 10px #de603f;">
Plot/CS/etc name
</p>
</a>
</div>
<!-- TAGS CARD -->
<div class="col-12 col-lg-5 py-2 px-1 px-lg-0 mt-n3 mt-lg-0">
<div class="row no-gutters text-center">
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Story?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Closed species?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Comic?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- ADD MORE ABOVE -->
</div>
</div>
</div>
</div>
<!-- STORY/COMIC/CS CARD (RIGHT) -->
<div class="col-12">
<div class="row no-gutters">
<div class="col-12 col-lg-7 p-2">
<!-- GRAPHIC BANNER -->
<div style="min-height: 150px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE">
<p class="text-center" style="font-family: Times New Roman, serif; font-size: 25px; text-shadow: 0px 0px 8px #de603f, 0px 0px 10px #de603f;">
Plot/CS/etc name
</p>
</a>
</div>
<!-- TAGS CARD -->
<div class="col-12 col-lg-5 py-2 px-1 px-lg-0 mt-n3 mt-lg-0">
<div class="row no-gutters text-center">
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Story?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Closed species?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#Comic?
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- TAG -->
<div class="card border-0 flex-grow-1 m-1 p-1 px-2" style="border-radius: 0px; background: #de603f;">
#genre
</div>
<!-- ADD MORE ABOVE -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--
================================
FRIENDS SECTION
================================
-->
<div class="tab-pane fade pl-2 pl-lg-3 pr-2 pr-lg-3" id="links" style="height: 435px; overflow: auto;">
<!-- FEATURED FRIENDS -->
<div class="row no-gutters mt-2" style="font-family: Times New Roman, serif; text-shadow: 0px 0px 5px #de603f, 0px 0px 8px #de603f; font-size: 23px;">
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
<!-- FRIEND -->
<div class="col-12 col-lg-4 p-1">
<div style="border: double 7px #de603f; min-height: 170px;
background-image: url(URLHERE);
background-size: cover;
background-position: center;"></div>
<a target="_BLANK" class="text-light"
href="LINK_HERE"><p class="text-center">
Friend Name
</p></a>
</div>
</div>
</div>
</div>
</div>
<!--
======================================
NAVIGATION BUTTONS
======================================
-->
<div class="card p-2 pt-lg-0 border-0 col-12 ml-lg-5 mb-1" style="background: none;">
<ul class="nav row no-gutters justify-content-around pl-lg-5 ml-lg-5 pt-1 pb-1" style="border-top: double 7px #de603f; border-bottom: double 7px #de603f; text-shadow: 0px 0px 8px #de603f, 0px 0px 10px #de603f;">
<li class="nav-item rounded-circle align-items-center justify-content-center">
<a class="nav-link active text-light" data-toggle="tab" href="#intro"><i class="fal fa-portrait fa-2x"></i></a>
</li>
<li class="nav-item rounded-circle align-items-center justify-content-center">
<a class="nav-link text-light" data-toggle="tab" href="#arts"><i class="fal fa-paintbrush-pencil fa-2x"></i></a>
</li>
<li class="nav-item rounded-circle align-items-center justify-content-center">
<a class="nav-link text-light" data-toggle="tab" href="#prefs"><i class="fal fa-heart-half-alt fa-2x"></i></a>
</li>
<li class="nav-item rounded-circle align-items-center justify-content-center">
<a class="nav-link text-light" data-toggle="tab" href="#plots"><i class="fal fa-book fa-2x"></i></a>
</li>
<li class="nav-item rounded-circle align-items-center justify-content-center">
<a class="nav-link text-light" data-toggle="tab" href="#links"><i class="fal fa-users fa-2x"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a href="https://toyhou.se/ChiiAka" title="Code by ChiiAka" class="text-light tooltipster" style="text-shadow: 0px 0px 5px #de603f, 0px 0px 10px #de603f; position: absolute; bottom: 0px; left: 5px;"><i class="far fa-code"></i></a>
</div>
</div>
Commissions
Available
Trades
Available
Requests
Unavailable
Latest Comments