hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
[ F2U ] Perfume — Custom Coloured version.
(code by jiko, layout by Togo)
------------------------------
RULES
→ read this thoroughly please before use!
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG (in display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
COLOUR
→ accent ---------------------------- #9db6ec
→ accent (faded) -----=-------------- #b1c5f0
→ card bg --------------------------- #fefefe
→ border colour --------------------- rgba(255,255,255,0.2)
→ text colour (main) ---------------- #6c757d
→ text colour (heading + icons) ----- #fff
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto my-5" style="font-family:avenir, sans-serif; color:#6c757d; max-width:1000px; font-size:95%; letter-spacing:0.6px">
<div class="card bg-faded p-md-4 p-2" style="box-shadow:0 0 50px rgba(0,0,0,0.1); background-color:#9db6ec; border-color:rgba(255,255,255,0.3); border-width:4px; border-radius:40px">
<div class="row no-gutters">
<!------------------------------------------------
BASIC INFO 1
------------------------------------------------->
<div class="col-lg-5 my-auto p-1 order-lg-3 order-1">
<!-- NAME
---------------------------------------------->
<div class="my-4 mx-auto" style="max-width:400px">
<div class="card border-0 p-3 h-100 text-center" style="border-radius:20px; background:#fefefe">
<!--
→ if name breaks, adjust the [font-size:45px] to a smaller number
→ and/or delete the lil specks
-->
<div class="text-center" style="color:#fff; font-size:45px; margin-top:-45px; font-family:serif; font-weight:900; text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec">
<span style="font-weight:900; font-family:sans-serif;">˗ˏˋ</span>
<span class="mx-3">
NAME
</span>
<span style="font-weight:900;font-family:sans-serif;">ˊˎ˗</span></div>
<p style="letter-spacing:1.5px">
subtitle here
</p>
</div>
</div>
<!-- ICON DECOR
---------------------------------------------->
<!--
→ any size is okay
-->
<div class="p-2 mx-auto" style="max-width:400px; border:2px solid #fff; border-radius:25px;">
<div class="w-100" style="max-width:400px; padding-bottom:90%; border-radius:20px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;
background-repeat:no-repeat;">
</div>
</div>
<!-- SPEECH
---------------------------------------------->
<div class="mt-n3 mb-3 mx-auto" style="max-width:400px">
<div class="text-center mb-n3" style="filter:drop-shadow(2px 2px 0px #9db6ec) drop-shadow(-2px -2px 0px #9db6ec) drop-shadow(-2px 2px 0px #9db6ec) drop-shadow(2px -2px 0px #9db6ec)">
<i class="fas fa-triangle fa-fw fa-3x" style="color:#fff"></i>
</div>
<div class="card border-0 p-3 h-100 text-center font-italic" style="border-radius:20px; background:#fefefe">
<p>"A quote from your character! Doesn't have to be short, can be any length."</p>
</div>
</div>
<!-- MUSIC PLAYER
---------------------------------------------->
<div class="mb-3 mx-auto" style="max-width:400px">
<div class="p-2" style="border:2px solid #fff; border-radius:25px;">
<div class="card px-4 p-3 border-0 h-100" style="border-radius:20px; background-color:#b1c5f0">
<!-- PLAYER GIF -------------------------------------->
<!--
→ view more coloured options here!
[ https://yukoki.tumblr.com/post/35103865660/music-player-gifs ]
-->
<div class="text-center mb-2">
<img src="https://64.media.tumblr.com/4dfd309ee10e99f909a66c040a4db4f6/1cec31ea271359b0-fd/s75x75_c1/6bbefaa2a04cd70a7aa476348eabecdb5f043c4a.gif"
style="height:15px; width:19px">
</div>
<!-- SONG AND ARTIST -------------------------------------->
<div class="text-center" style="color:#fff; font-size:18px">
<i style="font-family:serif; font-weight:900; letter-spacing:1.5px">
SONG TITLE
</i><br>
<span class="faded">
Artist
</span>
</div>
<!-- YOUTUBE ID HERE -------------------------------------->
<div class="w-100" style="position:absolute; top:10px; right:0px; height:100px; overflow:hidden;">
<!--
→ replace [ PoWoWiqI3aM ] with your youtube video (found after https://www.youtube.com/watch?v=)
→ keep the [ ?controls=0 ] at the end !!
-->
<iframe src="https://www.youtube.com/embed/PoWoWiqI3aM?controls=0"
class="w-100" style="position:absolute; top:-70px; left:0; height:400px; opacity:0.001;" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: BIG SCREEN VERSION
------------------------------------------------->
<div class="col-auto p-1 px-2 flex-column hidden-md-down order-2">
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-2 text-center my-2" style="color:#fff;">
✦
<div class="fa-2x my-n1">✧</div>
✦
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: SMALL SCREEN VERSION
------------------------------------------------->
<div class="col-12 p-1 hidden-lg-up text-center order-2">
<div class="row no-gutters align-items-center">
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col-auto px-2">
<p class="align-items-center" style="color:#fff;">
✦
<span class="fa-2x mx-2">✧</span>
✦
</p>
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
<!------------------------------------------------
BASIC INFO 2
------------------------------------------------->
<div class="col-lg p-1 flex-column order-lg-1 order-3">
<!-- INFO CONTENT
---------------------------------------------->
<div class="flex-grow-2 mb-3">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<div class="row no-gutters m-n1">
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
ALIAS
</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
AGE
</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
GENDER
</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
PRONOUNS
</div>
<div>con/tent</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
ORIENTATION
</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
BIRTHDAY
</div>
<div>content</div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="flex-grow-1 mb-3">
<div class="card text-center border-0 px-3 py-4 h-100" style="border-radius:20px; background:#fefefe">
<div class="m-auto">
<!-- put the first five words in the span! -->
<p><span class="text-uppercase" style="color:#9db6ec; font-weight:900">Lorem ipsum dor lacus, et</span> venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!-- TRIVIA
---------------------------------------------->
<div class="flex-grow-2 mb-0">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<div class="text-center" style="color:#fff; margin-top:-30px; font-family:serif; font-weight:900; font-size:25px; text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec">
TRIVIA
</div>
<ul class="pl-3 mb-0" style="color:#9db6ec">
<li class="my-1"><span class="ml-1" style="color:#6c757d">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span></li>
<!-- add more ABOVE this line! -->
</ul>
</div>
</div>
</div>
</div>
<!------------------------------------------------
BACKGROUND
DIVIDER HEADER
------------------------------------------------->
<div class="p-1">
<div class="row no-gutters align-items-center">
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col-auto px-3">
<div style="color:#fff; font-family:serif; font-weight:900; font-size:25px">
<i style="letter-spacing:2px">BACKGROUND</i>
</div>
</div>
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
<div class="row no-gutters">
<!------------------------------------------------
PERSONALITY
------------------------------------------------->
<div class="col-lg p-1 flex-column">
<!-- THREE ADJECTIVES
---------------------------------------------->
<div class="flex-grow-3 mb-2">
<div class="text-center text-uppercase" style="color:#fff; font-size:16px; font-family:serif; font-weight:900; letter-spacing:1px">
POSITIVE / NEUTRAL / NEGATIVE
</div>
</div>
<!-- PERSONALITY SUMMARY
---------------------------------------------->
<div class="flex-grow-1 mb-3">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<!-- PREFERENCES
---------------------------------------------->
<div class="flex-grow-1 mb-3">
<div class="row no-gutters m-n1 h-100">
<!-- LIKES ---------------------------->
<div class="col-sm-6 p-1 pr-sm-2 mb-sm-0 mb-2">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<div class="text-center" style="color:#fff; margin-top:-30px; font-family:serif; font-weight:900; font-size:25px; text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec">
<i class="fas fa-check fa-fw"></i>
</div>
<ul class="pl-3 mb-0" style="color:#9db6ec">
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
</ul>
</div>
</div>
<!-- DISLIKES ---------------------------->
<div class="col-sm-6 p-1 pl-sm-2">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<div class="text-center" style="color:#fff; margin-top:-30px; font-family:serif; font-weight:900; font-size:25px; text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec">
<i class="fas fa-times fa-fw"></i>
</div>
<ul class="pl-3 mb-0" style="color:#9db6ec">
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
</ul>
</div>
</div>
</div>
</div>
<!-- STATS
---------------------------------------------->
<!--
→ to delete a 'point', add the class [d-none] in the <i> from the bottom to the top (descending order)!
→ first two are examples of (2/5) and (4/5)
-->
<div class="flex-grow-2 mb-0">
<div class="card border-0 p-3 h-100" style="border-radius:20px; background:#fefefe">
<div class="row no-gutters">
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">CHARISMA</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw d-none" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw d-none" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw d-none" style="opacity:1"></i>
</p>
</div>
<!----------- - - - - - - - - - - ----------->
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">WISDOM</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw d-none" style="opacity:1"></i>
</p>
</div>
<!----------- - - - - - - - - - - ----------->
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">CONFIDENCE</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw" style="opacity:1"></i>
</p>
</div>
<!----------- - - - - - - - - - - ----------->
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">HUMOUR</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw" style="opacity:1"></i>
</p>
</div>
<!----------- - - - - - - - - - - ----------->
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">EMPATHY</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw" style="opacity:1"></i>
</p>
</div>
<!----------- - - - - - - - - - - ----------->
<div class="col-sm-6 mb-3">
<div style="font-family:serif; font-weight:900; letter-spacing:1px; font-size:16px">PATIENCE</div>
<p style="color:#9db6ec">
<i class="fas fa-circle fa-fw" style="opacity:0.2"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.4"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.6"></i>
<i class="fas fa-circle fa-fw" style="opacity:0.8"></i>
<i class="fas fa-circle fa-fw" style="opacity:1"></i>
</p>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: BIG SCREEN VERSION
------------------------------------------------->
<div class="col-auto p-1 px-3 flex-column hidden-md-down">
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-2 text-center my-2" style="color:#fff;">
✦
<div class="fa-2x my-n1">✧</div>
✦
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: SMALL SCREEN VERSION
------------------------------------------------->
<div class="col-12 p-1 hidden-lg-up text-center">
<div class="row no-gutters align-items-center">
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col-auto px-2">
<p class="align-items-center" style="color:#fff;">
✦
<span class="fa-2x mx-2">✧</span>
✦
</p>
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
<!------------------------------------------------
RELATIONSHIPS
------------------------------------------------->
<div class="col-lg p-1">
<div class="card bg-transparent border-0 d-block d-lg-flex mb-lg-0 mb-3" style="min-height:100%">
<div style="flex:1 1 0; overflow:auto">
<!-- ONE
---------------------------------------------->
<div class="row no-gutters mb-4">
<!-- IMAGE + HEARTS ---------------------------->
<!--
→ best if image is squared or 200x200
→ full = <i class="fas fa-heart"></i>
→ empty = <i class="far fa-heart"></i>
-->
<div class="col-sm-4 col-5 mx-auto mb-sm-0 mb-2 pr-3">
<div class="text-center p-2" style="border:2px solid #fefefe; border-radius:25px;">
<img src="IMG_ADDRESS_HERE"
style="height:110px; width:110px; border-radius:20px; object-fit:cover; background-color:#b1c5f0;">
</div>
<p class="text-center mt-2" style="color:#fff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</p>
</div>
<!-- CONTENT ---------------------------->
<div class="col-sm">
<div class="card border-0 p-3 mb-2 h-100" style="border-radius:20px; background:#fefefe;">
<div class="text-center mb-2">
<a href="LINK_HERE" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
NAME
</a>
<p><i>( relation )</i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!-- TWO
---------------------------------------------->
<div class="row no-gutters mb-4">
<!-- IMAGE + HEARTS ---------------------------->
<!--
→ best if image is squared or 200x200
→ full = <i class="fas fa-heart"></i>
→ empty = <i class="far fa-heart"></i>
-->
<div class="col-sm-4 col-5 mx-auto mb-sm-0 mb-2 pr-3">
<div class="text-center p-2" style="border:2px solid #fefefe; border-radius:25px;">
<img src="IMG_ADDRESS_HERE"
style="height:110px; width:110px; border-radius:20px; object-fit:cover; background-color:#b1c5f0;">
</div>
<p class="text-center mt-2" style="color:#fff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</p>
</div>
<!-- CONTENT ---------------------------->
<div class="col-sm">
<div class="card border-0 p-3 mb-2 h-100" style="border-radius:20px; background:#fefefe;">
<div class="text-center mb-2">
<a href="LINK_HERE" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
NAME
</a>
<p><i>( relation )</i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
</div>
</div>
</div>
<!-- THREE
---------------------------------------------->
<div class="row no-gutters mb-4">
<!-- IMAGE + HEARTS ---------------------------->
<!--
→ best if image is squared or 200x200
→ full = <i class="fas fa-heart"></i>
→ empty = <i class="far fa-heart"></i>
-->
<div class="col-sm-4 col-5 mx-auto mb-sm-0 mb-2 pr-3">
<div class="text-center p-2" style="border:2px solid #fefefe; border-radius:25px;">
<img src="IMG_ADDRESS_HERE"
style="height:110px; width:110px; border-radius:20px; object-fit:cover; background-color:#b1c5f0;">
</div>
<p class="text-center mt-2" style="color:#fff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</p>
</div>
<!-- CONTENT ---------------------------->
<div class="col-sm">
<div class="card border-0 p-3 mb-2 h-100" style="border-radius:20px; background:#fefefe;">
<div class="text-center mb-2">
<a href="LINK_HERE" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
NAME
</a>
<p><i>( relation )</i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!-- FOUR
---------------------------------------------->
<div class="row no-gutters mb-4">
<!-- IMAGE + HEARTS ---------------------------->
<!--
→ best if image is squared or 200x200
→ full = <i class="fas fa-heart"></i>
→ empty = <i class="far fa-heart"></i>
-->
<div class="col-sm-4 col-5 mx-auto mb-sm-0 mb-2 pr-3">
<div class="text-center p-2" style="border:2px solid #fefefe; border-radius:25px;">
<img src="IMG_ADDRESS_HERE"
style="height:110px; width:110px; border-radius:20px; object-fit:cover; background-color:#b1c5f0;">
</div>
<p class="text-center mt-2" style="color:#fff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="far fa-heart"></i>
</p>
</div>
<!-- CONTENT ---------------------------->
<div class="col-sm">
<div class="card border-0 p-3 mb-2 h-100" style="border-radius:20px; background:#fefefe;">
<div class="text-center mb-2">
<a href="LINK_HERE" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">
NAME
</a>
<p><i>( relation )</i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
</div>
<!------------------------------------------------
APPEARANCE
DIVIDER HEADER
------------------------------------------------->
<div class="p-1">
<div class="row no-gutters align-items-center">
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col-auto px-3">
<div style="color:#fff; font-family:serif; font-weight:900; font-size:25px">
<i style="letter-spacing:2px">APPEARANCE</i>
</div>
</div>
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
<div class="row no-gutters">
<!------------------------------------------------
REF SHEET PAGEDOLL THING
------------------------------------------------->
<div class="col-lg-5 p-1 flex-column">
<!-- IMAGE
---------------------------------------------->
<div class="flex-grow-1 mb-3">
<div class="w-100 h-100" style="filter:drop-shadow(2px 2px 0px #fff) drop-shadow(-2px -2px 0px #fff) drop-shadow(-2px 2px 0px #fff) drop-shadow(2px -2px 0px #fff); min-height:500px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:top center;
background-repeat:no-repeat;
border-radius:20px;
">
</div>
</div>
<!-- PALETTE DECOR
---------------------------------------------->
<div class="flex-grow-2">
<div class="p-2" style="background-color:#b1c5f0; border-radius:15px;">
<div class="row no-gutters" style="border-radius:10px; overflow:hidden">
<div class="col">
<div style="height:25px; background-color:#eeeeee;"></div>
</div>
<div class="col">
<div style="height:25px; background-color:#bcbcbc;"></div>
</div>
<div class="col">
<div style="height:25px; background-color:#999999;"></div>
</div>
<div class="col">
<div style="height:25px; background-color:#5b5b5b;"></div>
</div>
<div class="col">
<div style="height:25px; background-color:#444444;"></div>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: BIG SCREEN VERSION
------------------------------------------------->
<div class="col-auto p-1 px-3 flex-column hidden-md-down">
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-2 text-center my-2" style="color:#fff;">
✦
<div class="fa-2x my-n1">✧</div>
✦
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
<div class="flex-grow-1 mx-auto">
<div class="card bg-transparent rounded-0 h-100" style="border-color:rgba(255,255,255,0.2); border-width:0 0 0 2px;"></div>
</div>
</div>
<!------------------------------------------------
DIVIDERS: SMALL SCREEN VERSION
------------------------------------------------->
<div class="col-12 p-1 hidden-lg-up text-center">
<div class="row no-gutters align-items-center">
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col-auto px-2">
<p class="align-items-center" style="color:#fff;">
✦
<span class="fa-2x mx-2">✧</span>
✦
</p>
</div>
<div class="col">
<hr style="border-style:dashed; border-color:rgba(255,255,255,0.2); border-top-width:2px;">
</div>
<div class="col">
<hr style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
<!------------------------------------------------
APPEARANCE CONTENTS
------------------------------------------------->
<div class="col-lg p-1 mt-md-0">
<!-- INFO CONTENT
---------------------------------------------->
<div class="card border-0 p-3 mb-2" style="border-radius:20px; background:#fefefe">
<div class="row no-gutters m-n1">
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">BUILD</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">DEMEANOR</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">HEIGHT</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">WEIGHT</div>
<div>content</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">SPECIES</div>
<div>or race</div>
</div>
<div class="col-sm-6 p-1 mb-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; letter-spacing:1px; color:#9db6ec; font-size:18px">DESIGNER</div>
<a href="LINK_TO_DESIGNER" class="text-reset">
content
</a>
</div>
<!-- add more ABOVE this line! -->
</div>
</div>
<!-- MOODBOARD / CLOSE UPS / FEAT. GALLERY ART
---------------------------------------------->
<div class="p-2 my-3" style="border:2px solid #fff; border-radius:25px">
<div class="row no-gutters">
<!-- TOP LEFT ---------------------------->
<div class="col-6 p-1">
<div style="padding-bottom:80%; border-top-left-radius:20px;
background-color:#b1c5f0;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- TOP RIGHT --------------------------->
<div class="col-6 p-1">
<div style="padding-bottom:80%; border-top-right-radius:20px;
background-color:#b1c5f0;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- FA ICON ---------------------------->
<!--
→ looks nice with a symmetrical icon!
→ find more at [font-awesome.com] and replace the [fa-flower]
-->
<div class="col-12 text-center" style="color:#fff; position:static; margin:-29px 0px; bottom:0; z-index:2">
<i class="fal fa-flower fa-4x fa-fw"
style="text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec"></i>
</div>
<!-- BOTTOM LEFT ---------------------------->
<div class="col-6 p-1">
<div style="padding-bottom:80%; border-bottom-left-radius:20px;
background-color:#b1c5f0;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
</div>
<!-- BOTTOM RIGHT ---------------------------->
<div class="col-6 p-1">
<div style="padding-bottom:80%; border-bottom-right-radius:20px;
background-color:#b1c5f0;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center;"></div>
</div>
</div>
</div>
<!-- DESIGN NOTES
---------------------------------------------->
<div class="card border-0 p-3" style="border-radius:20px; background:#fefefe">
<div class="text-center" style="color:#fff; margin-top:-50px; font-family:serif; font-weight:900; font-size:25px; text-shadow:2px 2px 0px #9db6ec, -2px -2px 0px #9db6ec, -2px 2px 0px #9db6ec, 2px -2px 0px #9db6ec">
DESIGN NOTES
</div>
<ul class="mt-2 pl-3 mb-0" style="color:#9db6ec">
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<li class="my-1"><span class="ml-1" style="color:#6c757d">
content
</span></li>
<!-- add more ABOVE this line! -->
</ul>
</div>
</div>
</div>
<!------------------------------------------------
ME CREDITS
------------------------------------------------->
<div class="p-1 mt-3">
<div class="row no-gutters align-items-center">
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
<div class="col-auto px-3">
<a href="https://toyhou.se/17397982." class="tooltipster" title="code by jiko" style="color:#fff;">
<i class="far fa-code fa-fw fa-lg"></i>
</a>
</div>
<div class="col">
<hr class="w-100 my-1" style="border-color:rgba(255,255,255,0.2); border-width:2px;">
</div>
</div>
</div>
</div>
</div>
