Profile
<!-- —————◜ ◝
/// FLUFFY MEADOW | F2U CHARACTER CODE ///
Code made by GhostyF0x
Feel free to share this code in the comments if you use it ! I would love to see it <3
———————————————
/// PLEASE READ MY TOS BEFORE USING THIS CODE, THANK YOU ///
[
https://toyhou.se/~bulletins/1546806.coding-tos
]
———————————————
/// HELPFUL TIPS ///
Looking for a live coding editor? Try Circlejourney's Editor !
[
https://th.circlejourney.net/#]
Looking for more " Fas " Icons? Try FontAwesome !
[
https://fontawesome.com/search]
Trying to replace colors quickly? Try [ CTRL + H ] !
———————————————
/// COLORS ///
Accent ; #cb955b
Text Color ; #fff
Text Shadow Color ; rgba(97,53,35,0.94)
———————————————
◟ ◞————— -->
<div class="mx-auto" style="max-width: 900px; font-family:'Times New Roman', Times, serif">
<div class="col card p-2 rounded-0 bg-transparent">
<div class="row no-gutters">
<!-- —————— ◜ ◝
// CHARACTER AVATAR / IMAGE //
◟ ◞—————— -->
<div class="card col-md-4 p-2 rounded-0 bg-transparent">
<!-- —————— ◜ IMAGE HERE, IF YOU DON'T WANT IT SATURATED SIMPLY REMOVE " Filter: saturate(150%); " ◝ —————— -->
<div class="card rounded-0" style="background-image:url(
https://i.pinimg.com/564x/b5/be/72/b5be725d992a363624081c82567f9587.jpg
);
background-position: center;
background-size: cover;
filter: saturate(150%);
height: 280px">
</div>
</div>
<div class="col mt-auto ml-md-3">
<div class="text-left font-italic font-weight-bold align-items-center">
<!-- —————— ◜ CHARACTER NAME ◝ —————— -->
<p style="font-size: 3em; letter-spacing: 5px; text-shadow: 4px 3px 0 rgba(97,53,35,0.94)">
<span style="color: #cb955b">C</span>haracter Name
</p>
<hr class="flex-fill mx-2">
<!-- —————— ◜ CHARACTER NAME ICON ◝ —————— -->
<i class="fal fa-signs-post fa-2xl fa-beat" style="letter-spacing: 5px; text-shadow: 4px 3px 0 rgba(97,53,35,0.94); color: #cb955b"></i>
</div>
<div class="row no-gutters">
<div class="col-md-10 card rounded-0 p-2 mb-3">
<div class="card rounded-0 border-0 bg-faded p-2">
<div class="row-no-gutters">
<!-- —————— ◜ ◝
// PLAYLIST //
◟ ◞—————— -->
<div class="carousel slide" id="playlist" data-pause="true">
<div class="carousel-inner">
<!-- —————— ◜ SONG I. ◝ —————— -->
<div class="carousel-item active">
<!-- —————— ◜ SONG TITLE ◝ —————— -->
<p class="text-center font-weight-bold" style="font-size: 1.4em; letter-spacing: 3px; text-shadow: 2px 2px 0 rgba(97,53,35,0.94)">
Song Title I.
</p>
<!-- —————— ◜ SONG ARTIST / CREDIT ◝ —————— -->
<p class="text-center font-italic mt-n4 faded">
Artist
</p>
<!-- —————— ◜ CAROUSEL CONTROLS ◝ —————— -->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<a href="#playlist" data-slide="prev">
<!-- —————— ◜ PREV ICON ◝ —————— -->
<i class="far fa-caret-left fa-xl" style="color: #cb955b"></i>
</a>
</div>
<hr class="flex-fill mx-1">
<div class="card bg-transparent border-0 rounded-0 p-2">
<!-- —————— ◜ PLAY ICON ◝ —————— -->
<i class="far fa-play fa-xl" style="color: #cb955b"></i>
<div class="w-100 h-100" style="position: absolute; top: 0; right:0; overflow:hidden">
<!-- —————— ◜ REPLACE " YT_KEYMASH " WITH THE PART OF THE URL AFTER "
https://www.youtube.com/watch?v=
" ◝ —————— -->
<iframe style="position: absolute; height: 40px; width: 30px; left: 0; opacity: 0.001" frameborder="0"
src="
https://www.youtube.com/embed/YT_KETMASH
">
</iframe>
</div>
</div>
<hr class="flex-fill mx-1">
<div class="col-auto">
<a href="#playlist" data-slide="next">
<!-- —————— ◜ NEXT ICON ◝ —————— -->
<i class="far fa-caret-right fa-xl" style="color: #cb955b"></i>
</a>
</div>
</div>
</div>
<!-- —————— ◟ SONG I. END ◞ —————— -->
<!-- —————— ◜ SONG II. ◝ —————— -->
<div class="carousel-item">
<!-- —————— ◜ SONG TITLE ◝ —————— -->
<p class="text-center font-weight-bold" style="font-size: 1.4em; letter-spacing: 3px; text-shadow: 2px 2px 0 rgba(97,53,35,0.94)">
Song Title II.
</p>
<!-- —————— ◜ SONG ARTIST / CREDIT ◝ —————— -->
<p class="text-center font-italic mt-n4 faded">
Artist
</p>
<!-- —————— ◜ CAROUSEL CONTROLS ◝ —————— -->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<a href="#playlist" data-slide="prev">
<!-- —————— ◜ PREV ICON ◝ —————— -->
<i class="far fa-caret-left fa-xl" style="color: #cb955b"></i>
</a>
</div>
<hr class="flex-fill mx-1">
<div class="card bg-transparent border-0 rounded-0 p-2">
<!-- —————— ◜ PLAY ICON ◝ —————— -->
<i class="far fa-play fa-xl" style="color: #cb955b"></i>
<div class="w-100 h-100" style="position: absolute; top: 0; right:0; overflow:hidden">
<!-- —————— ◜ REPLACE " YT_KEYMASH " WITH THE PART OF THE URL AFTER "
https://www.youtube.com/watch?v=
" ◝ —————— -->
<iframe style="position: absolute; height: 40px; width: 30px; left: 0; opacity: 0.001" frameborder="0"
src="
https://www.youtube.com/embed/YT_KEYMASH
">
</iframe>
</div>
</div>
<hr class="flex-fill mx-1">
<div class="col-auto">
<a href="#playlist" data-slide="next">
<!-- —————— ◜ NEXT ICON ◝ —————— -->
<i class="far fa-caret-right fa-xl" style="color: #cb955b"></i>
</a>
</div>
</div>
</div>
<!-- —————— ◟ SONG II. END ◞ —————— -->
<!-- —————— ◜ SONG III. ◝ —————— -->
<div class="carousel-item">
<!-- —————— ◜ SONG TITLE ◝ —————— -->
<p class="text-center font-weight-bold" style="font-size: 1.4em; letter-spacing: 3px; text-shadow: 2px 2px 0 rgba(97,53,35,0.94)">
Song Title III.
</p>
<!-- —————— ◜ SONG ARTIST / CREDIT ◝ —————— -->
<p class="text-center font-italic mt-n4 faded">
Artist
</p>
<!-- —————— ◜ CAROUSEL CONTROLS ◝ —————— -->
<div class="row no-gutters align-items-center">
<div class="col-auto">
<a href="#playlist" data-slide="prev">
<!-- —————— ◜ PREV ICON ◝ —————— -->
<i class="far fa-caret-left fa-xl" style="color: #cb955b"></i>
</a>
</div>
<hr class="flex-fill mx-1">
<div class="card bg-transparent border-0 rounded-0 p-2">
<!-- —————— ◜ PLAY ICON ◝ —————— -->
<i class="far fa-play fa-xl" style="color: #cb955b"></i>
<div class="w-100 h-100" style="position: absolute; top: 0; right:0; overflow:hidden">
<!-- —————— ◜ REPLACE " YT_KEYMASH " WITH THE PART OF THE URL AFTER "
https://www.youtube.com/watch?v=
" ◝ —————— -->
<iframe style="position: absolute; height: 40px; width: 30px; left: 0; opacity: 0.001" frameborder="0"
src="
https://www.youtube.com/embed/YT_KEYMASH
">
</iframe>
</div>
</div>
<hr class="flex-fill mx-1">
<div class="col-auto">
<a href="#playlist" data-slide="next">
<!-- —————— ◜ NEXT ICON ◝ —————— -->
<i class="far fa-caret-right fa-xl" style="color: #cb955b"></i>
</a>
</div>
</div>
</div>
<!-- —————— ◟ SONG III. END ◞ —————— -->
<!-- —————— ◟ ADD MORE ABOVE IF YOU'D LIKE ◞ —————— -->
</div>
</div>
</div>
</div>
</div>
<!-- —————— ◟ PLAYLIST END ◞ —————— -->
<!-- —————— ◜ ◝
// RIGHT DECO //
◟ ◞—————— -->
<div class="col-md ml-md-3" style="height: 105px">
<div class="card rounded-0 bg-transparent p-2 h-100 w-100">
<!-- —————— ◜ IMAGE HERE, IF YOU DON'T WANT IT SATURATED SIMPLY REMOVE " Filter: saturate(150%); " ◝ —————— -->
<div class="card rounded-0 border-0 p-3 h-100 w-100 justify-content-center text-center" style="background-image:url(
https://i.pinimg.com/originals/bd/53/45/bd5345ec7d0ffae416f7ade3bd26f6b0.gif
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%)">
</div>
</div>
</div>
<!-- —————— ◟ RIGHT DECO END ◞ —————— -->
</div>
<!-- —————— ◜ ◝
// CHARACTER QUOTE //
◟ ◞—————— -->
<div class="col-md-12 card bg-faded border-0 rounded-0 p-2 mt-1" style="max-height: 35px">
<span class="text-center font-italic fa-fade" style="letter-spacing: 4px">
<!-- —————— ◜ LEFT QUOTE ICON ◝ —————— -->
<i class="fal fa-quote-left pull-left" style="color: #cb955b"></i>
Quote Here
<!-- —————— ◜ RIGHT QUOTE ICON ◝ —————— -->
<i class="fal fa-quote-right pull-right" style="color: #cb955b"></i>
</span>
</div>
<!-- —————— ◟ CHARACTER QUOTE END ◞ —————— -->
</div>
</div>
<!-- —————— ◜ ◝
// CHARACTER BASIC INFO //
◟ ◞—————— -->
<div class="row no-gutters">
<div class="col-md-4 card rounded-0 p-2 mt-3 mb-2">
<div class="card rounded-0 border-0 bg-faded p-2">
<ul class="fa-ul mb-1 ml-1">
<!-- —————— ◜ ALIAS / NICKNAME ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Alias
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ GENDER ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Gender
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ AGE ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Age
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ PRONOUNS ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Pronouns
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ SPECIES / RACE ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Species
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ ROW II. ◝ —————— -->
<!-- —————— ◜ ORIENTATION / SEXUALITY ◝ —————— -->
<li class="align-items-center mt-4">
<span class="pull-right font-italic">
Content
</span>
<hr class="flex-fill mx-2">
<span class="font-weight-bold">
Orientation
</span>
<i class="fal fa-caret-left fa-lg ml-1" style="color: #cb955b"></i>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ BIRTHDAY / D.O.B ◝ —————— -->
<li class="align-items-center">
<span class="pull-right font-italic">
Content
</span>
<hr class="flex-fill mx-2">
<span class="font-weight-bold">
Birthday
</span>
<i class="fal fa-caret-left fa-lg ml-1" style="color: #cb955b"></i>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ ZODIAC ◝ —————— -->
<li class="align-items-center">
<span class="pull-right font-italic">
Content
</span>
<hr class="flex-fill mx-2">
<span class="font-weight-bold">
Zodiac
</span>
<i class="fal fa-caret-left fa-lg ml-1" style="color: #cb955b"></i>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ HEALTH STATUS ◝ —————— -->
<li class="align-items-center">
<span class="pull-right font-italic">
Content
</span>
<hr class="flex-fill mx-2">
<span class="font-weight-bold">
Health Status
</span>
<i class="fal fa-caret-left fa-lg ml-1" style="color: #cb955b"></i>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ ROW III. ◝ —————— -->
<!-- —————— ◜ BIRTH PLACE ◝ —————— -->
<li class="align-items-center mt-4">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Clan / Hometown
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ JOB ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Role / Occupation
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ JOB ROLE / RANK ◝ —————— -->
<li class="align-items-center">
<i class="fal fa-caret-right fa-lg mr-1" style="color: #cb955b"></i>
<span class="font-weight-bold">
Rank
</span>
<hr class="flex-fill mx-2">
<span class="pull-right font-italic">
Content
</span>
</li>
<!-- —————— ◟ ◞ —————— -->
</ul>
</div>
</div>
<!-- —————— ◟ BASIC INFO END ◞ —————— -->
<div class="col card rounded-0 mt-md-3 ml-md-3 mr-md-2 p-2">
<div class="row no-gutters">
<!-- —————— ◜ ◝
// CHARACTER INFORMATION //
◟ ◞—————— -->
<div class="col-md-12 card bg-faded border-0 rounded-0 p-2 overflow-hidden">
<div class="pr-5 mr-n5 mt-3 p-3" style="height: 180px; overflow-y:scroll">
<!-- —————— ◜ CHARACTER INTRO ◝ —————— -->
<div class="text-left font-italic font-weight-bold align-items-center mr-2 ml-2" style="font-size: 1.4em; text-shadow: 4px 3px 0 rgba(97,53,35,0.94)">
<span style="color: #cb955b">I</span>ntroduction
<hr class="flex-fill mx-2">
<!-- —————— ◜ TITLE ICON ◝ —————— -->
<i class="fal fa-sign" style="color: #cb955b"></i>
</div>
<div class="card rounded-0 border-0 bg-transparent p-2 overflow-hidden">
<div class="pr-lg-4 mr-n5 mt-3" style="height: 200px; overflow-y:scroll">
Write about your character here! This part scrolls so write as much as you'd like :`3
<br>
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.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.
</div>
</div>
<!-- —————— ◜ HR LINE ◝ —————— -->
<div class="align-items-center">
<hr class="flex-fill mx-2 mb-4 mt-4">
<!-- —————— ◜ HR LINE ICON ◝ —————— -->
<i class="fal fa-leaf-maple" style="color: #cb955b"></i>
<hr class="flex-fill mx-2 mb-4 mt-4">
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ CHARACTER DESIGN ◝ —————— -->
<div class="text-left font-italic font-weight-bold align-items-center mr-2 ml-2" style="font-size: 1.4em; text-shadow: 4px 3px 0 rgba(97,53,35,0.94)">
<!-- —————— ◜ TITLE ICON ◝ —————— -->
<i class="fal fa-swatchbook" style="color: #cb955b"></i>
<hr class="flex-fill mx-2">
<span style="color: #cb955b">D</span>esign
</div>
<div class="row no-gutters mt-3">
<!-- —————— ◜ DESIGNER ◝ —————— -->
<div class="col card rounded-0 text-center p-1 font-italic font-weight-bold">
<div class="card rounded-0 border-0 bg-faded h-100">
<a href="DESIGNER_LINK_HERE" style="color: #cb955b"> Designer </a>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ BASE VALUE ◝ —————— -->
<div class="col card rounded-0 text-center mx-2 p-1 font-italic">
<div class="card rounded-0 border-0 bg-faded h-100">
$000
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ OBTAINED VIA [ Trade, $$$ Payment, etc ] ◝ —————— -->
<div class="col card rounded-0 text-center p-1 font-italic">
<div class="card rounded-0 border-0 bg-faded h-100">
Obtained Via
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
</div>
<!-- —————— ◜ CHARACTER REF IMAGE HERE, IF YOU DON'T WANT IT SATURATED SIMPLY REMOVE " Filter: saturate(150%); " ◝ —————— -->
<div class="card rounded-0 mt-2" style="background-image:url(
https://i.pinimg.com/564x/59/9f/9e/599f9e722158fd4b745c5d266ff10a1c.jpg
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%);
height: 300px">
<!-- —————— ◜ REF IMAGE CREDIT ◝ —————— -->
<div class="h-100 flex justify-content-end align-items-end mr-1">
<a title="Ref Credit" href="IMAGE_LINK" target="_BLANK" class="tooltipster">
<i class="fa fa-image fa-lg" style="color: #cb955b"></i>
</a>
</div>
</div>
<div class="row no-gutters mt-2">
<!-- —————— ◜ COLOR I. ◝ —————— -->
<div class="card col rounded-0 p-1 text-center border-right-0">
<div class="card rounded-0 border-0 bg-faded p-2" style="background-color: #ffd12a">
<i class="fal fa-palette tooltipster" title="Color - #ffd12a" style="color: #fff"></i>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ COLOR II. ◝ —————— -->
<div class="card col rounded-0 p-1 text-center border-right-0 border-left-0">
<div class="card rounded-0 border-0 bg-faded p-2" style="background-color: #a8b668">
<i class="fal fa-palette tooltipster" title="Color - #a8b668" style="color: #fff"></i>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ COLOR III. ◝ —————— -->
<div class="card col rounded-0 p-1 text-center border-right-0 border-left-0">
<div class="card rounded-0 border-0 bg-faded p-2" style="background-color: #778853">
<i class="fal fa-palette tooltipster" title="Color - #778853" style="color: #fff"></i>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ COLOR IV. ◝ —————— -->
<div class="card col rounded-0 p-1 text-center border-left-0">
<div class="card rounded-0 border-0 bg-faded p-2" style="background-color: #353f28">
<i class="fal fa-palette tooltipster" title="Color - #353f28" style="color: #fff"></i>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◟ ADD MORE ABOVE, 10 MAX UNLESS YOU WANT ANOTHER ROW ◞ —————— -->
</div>
<!-- —————— ◜ PHYSICAL INFO ◝ —————— -->
<div class="row no-gutters mt-2">
<!-- —————— ◜ HEIGHT ◝ —————— -->
<div class="col card rounded-0 p-1 text-center border-right-0">
<div class="card border-0 rounded-0 bg-faded font-italic">
<span class="font-weight-bold">
Content
</span>
<span class="faded" style="font-size: 10px; letter-spacing: 2px; color: #cb955b"> Height </span>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ BUILD ◝ —————— -->
<div class="col card rounded-0 p-1 text-center border-left-0 border-right-0">
<div class="card border-0 rounded-0 bg-faded font-italic">
<span class="font-weight-bold">
Content
</span>
<span class="faded" style="font-size: 10px; letter-spacing: 2px; color: #cb955b"> Build </span>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ DEMEANOR ◝ —————— -->
<div class="col card rounded-0 p-1 text-center border-left-0 border-right-0">
<div class="card border-0 rounded-0 bg-faded font-italic">
<span class="font-weight-bold">
Content
</span>
<span class="faded" style="font-size: 10px; letter-spacing: 2px; color: #cb955b"> Demeanor </span>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ SCENT ◝ —————— -->
<div class="col card rounded-0 p-1 text-center border-left-0">
<div class="card border-0 rounded-0 bg-faded font-italic">
<span class="font-weight-bold">
Content
</span>
<span class="faded" style="font-size: 10px; letter-spacing: 2px; color: #cb955b"> Scent </span>
</div>
</div>
<!-- —————— ◟ ◞ —————— -->
</div>
<!-- —————— ◟ PHYSICAL INFO END ◞ —————— -->
<!-- —————— ◜ DESIGN NOTES ◝ —————— -->
<div class="card rounded-0 mt-2 p-1">
<div class="card rounded-0 border-0 bg-faded p-2">
<div class="font-italic font-weight-bold text-center" style="font-size: 1.2em">
Design Notes
</div>
<!-- —————— ◜ NOTES ◝ —————— -->
<ul class="fa-ul mt-3 mb-1 ml-1">
<li>
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
List important design notes or species traits here!
</li>
<li>
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Content
</li>
</ul>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</div>
</div>
<!-- —————— ◜ HR LINE ◝ —————— -->
<div class="align-items-center mt-4 mb-3">
<hr class="flex-fill mx-2">
<!-- —————— ◜ HR LINE ICON ◝ —————— -->
<i class="fal fa-leaf-oak" style="color: #cb955b"></i>
<hr class="flex-fill mx-2">
</div>
<!-- —————— ◟ ◞ —————— -->
<!-- —————— ◜ CHARACTER TRIVIA ◝ —————— -->
<div class="text-left font-italic font-weight-bold align-items-center mr-2 ml-2" style="font-size: 1.4em; text-shadow: 4px 3px 0 rgba(97,53,35,0.94)">
<span style="color: #cb955b">T</span>rivia
<hr class="flex-fill mx-2">
<!-- —————— ◜ TITLE ICON ◝ —————— -->
<i class="fal fa-notebook" style="color: #cb955b"></i>
</div>
<!-- —————— ◜ LIKES, DISLIKES, HOBBIES & FEARS ◝ —————— -->
<div class="row no-gutters justify-content-center">
<!-- —————— ◜ LIKES ◝ —————— -->
<div class="col-md-5 card rounded-0 p-1 mr-md-5 mt-4">
<div class="card rounded-0 border-0 bg-faded p-2">
<span class="font-weight-bold font-italic text-center" style="font-size: 1.2em"> Likes </span>
<hr class="flex-fill mx-3 mt-1 mb-2">
<ul class="fa-ul ml-1 mb-1">
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
</ul>
</div>
</div>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
<!-- —————— ◜ DISLIKES ◝ —————— -->
<div class="col-md-5 card rounded-0 p-1 mt-4">
<div class="card rounded-0 border-0 bg-faded p-2">
<span class="font-weight-bold font-italic text-center" style="font-size: 1.2em"> Dislikes </span>
<hr class="flex-fill mx-3 mt-1 mb-2">
<ul class="fa-ul ml-1 mb-1">
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
</ul>
</div>
</div>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
<!-- —————— ◜ HOBBIES ◝ —————— -->
<div class="col-md-5 card rounded-0 p-1 mr-md-5 mt-3">
<div class="card rounded-0 border-0 bg-faded p-2">
<span class="font-weight-bold font-italic text-center" style="font-size: 1.2em"> Hobbies </span>
<hr class="flex-fill mx-3 mt-1 mb-2">
<ul class="fa-ul ml-1 mb-1">
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
</ul>
</div>
</div>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
<!-- —————— ◜ FEARS ◝ —————— -->
<div class="col-md-5 card rounded-0 p-1 mt-3">
<div class="card rounded-0 border-0 bg-faded p-2">
<span class="font-weight-bold font-italic text-center" style="font-size: 1.2em"> Fears </span>
<hr class="flex-fill mx-3 mt-1 mb-2">
<ul class="fa-ul ml-1 mb-1">
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
<li>
<i class="fal fa-caret-right" style="color: #cb955b"></i>
Content
</li>
</ul>
</div>
</div>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</div>
<!-- —————— ◟ LIKES, DISLIKES, HOBBIES & FEARS END ◞ —————— -->
<!-- —————— ◜ TRIVIA NOTES ◝ —————— -->
<div class="card rounded-0 mt-2 p-1">
<div class="card rounded-0 border-0 bg-faded p-2">
<div class="font-italic font-weight-bold text-center mt-1" style="font-size: 1.2em">
Trivia / Fun Facts
</div>
<!-- —————— ◜ NOTES ◝ —————— -->
<ul class="fa-ul mt-3 mb-1 ml-1">
<li class="mb-2">
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Write some facts about your character here! Feel free to add as much as you'd like :`3
</li>
<li class="mb-2">
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="mb-2">
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="mb-2">
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
<li class="mb-2">
<i class="fal fa-caret-right mr-1" style="color: #cb955b"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
</ul>
<!-- —————— ◟ ADD MORE ABOVE ◞ —————— -->
</div>
</div>
</div>
</div>
<!-- —————— ◟ CHARACTER INFORMATION END ◞ —————— -->
<!-- —————— ◜ ◝
// MOODBOARD & ICONS //
◟ ◞—————— -->
<div class="col-md-12 card rounded-0 border-0 bg-faded mt-3 p-2">
<div class="row no-gutters justify-content-center">
<!-- —————— ◜ MOODBOARD I. ◝ —————— -->
<div class="col-6 card rounded-0 p-1" style="background-image:url(
https://i.pinimg.com/564x/74/5e/c3/745ec3ca54942e99bd0315d2990baba2.jpg
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%);
height: 100px">
<!-- —————— ◟ IF YOU DON'T WANT IT SATURATED REMOVE " Filter: saturate(150%); " ◞ —————— -->
<div class="card rounded-0 bg-transparent h-100 text-center justify-content-center" style="border: solid 3px #fff">
<!-- —————— ◜ MIDDLE ANIMATED ICON ◝ —————— -->
<i class="fal fa-mistletoe fa-flip" style="font-size: 2.5em; color: #fff; text-shadow: -4px 3px 0 rgba(97,53,35,0.94); animation-duration: 5.5s"></i>
</div>
</div>
<!-- —————— ◜ MOODBOARD II. ◝ —————— -->
<div class="col-6 card rounded-0 p-1" style="background-image:url(
https://i.pinimg.com/736x/35/9d/eb/359debb7115fe2d50203b352d44fdffb.jpg
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%);
height: 100px">
<!-- —————— ◟ IF YOU DON'T WANT IT SATURATED REMOVE " Filter: saturate(150%); " ◞ —————— -->
<div class="card rounded-0 bg-transparent h-100 text-center justify-content-center" style="border: solid 3px #fff">
<!-- —————— ◜ MIDDLE ANIMATED ICON ◝ —————— -->
<i class="fas fa-leaf-oak fa-flip" style="font-size: 2.5em; color: #fff; text-shadow: 4px 3px 0 rgba(97,53,35,0.94); animation-duration: 3.5s"></i>
</div>
</div>
<!-- —————— ◜ MOODBOARD III. ◝ —————— -->
<div class="col-6 card rounded-0 mt-2 p-1" style="background-image:url(
https://i.pinimg.com/564x/4c/c6/37/4cc6372b7ce3a36c630ecbf705f34649.jpg
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%);
height: 100px">
<!-- —————— ◟ IF YOU DON'T WANT IT SATURATED REMOVE " Filter: saturate(150%); " ◞ —————— -->
<div class="card rounded-0 bg-transparent h-100 text-center justify-content-center" style="border: solid 3px #fff">
<!-- —————— ◜ MIDDLE ANIMATED ICON ◝ —————— -->
<i class="fas fa-leaf-maple fa-flip" style="font-size: 2.5em; color: #fff; text-shadow: -4px 3px 0 rgba(97,53,35,0.94); animation-duration: 3.5s"></i>
</div>
</div>
<!-- —————— ◜ MOODBOARD IV. ◝ —————— -->
<div class="col-6 card rounded-0 mt-2 p-1" style="background-image:url(
https://i.pinimg.com/736x/20/52/1a/20521a1d21d21d7d843b39924ac85705.jpg
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(150%);
height: 100px">
<!-- —————— ◟ IF YOU DON'T WANT IT SATURATED REMOVE " Filter: saturate(150%); " ◞ —————— -->
<div class="card rounded-0 bg-transparent h-100 text-center justify-content-center" style="border: solid 3px #fff">
<!-- —————— ◜ MIDDLE ANIMATED ICON ◝ —————— -->
<i class="fal fa-holly-berry fa-flip" style="font-size: 2.5em; color: #fff; text-shadow: 4px 3px 0 rgba(97,53,35,0.94); animation-duration: 5.5s"></i>
</div>
</div>
</div>
</div>
<!-- —————— ◟ MOODBOARD & ICONS END ◞ —————— -->
</div>
</div>
<!-- —————— ◜ SIDE LONG IMAGE, HIDDEN ON MOBILE ◝ —————— -->
<div class="col-md-2 card rounded-0 mt-3 p-2 bg-transparent hidden-md-down">
<!-- —————— ◜ IMAGE HERE, F YOU DON'T WANT IT SATURATED SIMPLY REMOVE " Filter: saturate(150%); " ◝ —————— -->
<div class="h-100" style="background-image:url(
https://i.pinimg.com/564x/ca/59/98/ca5998741bd0cb91809d3f67460053ac.jpg
);
background-position: center;
background-size: cover;
filter: saturate(150%)">
</div>
</div>
</div>
</div>
</div>
<!-- —————— ◜ ◝
// CREDITS, DO NOT REMOVE //
◟ ◞—————— -->
<div class="text-center">
<a href="
https://toyhou.se/GhostyF0x
" class="tooltipster faded" title="Code by GhostyF0x" data-placement="bottom">
<i class="fal fa-cassette-betamax fa-fade"></i>
</a>
<a href="
https://toyhou.se/Togo
" class="tooltipster faded" title="Layout by Togo" data-placement="bottom">
<i class="fal fa-table-layout fa-fade"></i>
</a>
</div>
