[F2U] ♱ TOY.PAGE
created by:Praying
HTMLCustom ColorsUser
Copy
<!-- ✦✦ 【F2U】TOY.PAGE by diadem inspired by Prn.page
❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ NOTES:
- This code uses Variables. Meaning that if you edit
the hex/rgba codes and font family type, it'll change every
instance of the colours/fonts for the rest of the code
- Any and all icons can be changed with fontawesome but
keep the styling. The styling itself can be changed without
issue though. For icons: https://fontawesome.com/
- For the flags + terminology, I used the flags/terms
provided on Pronouns.page yet you can use any flag/term you
want. For Pronouns.page flags: https://en.pronouns.page/terminology
- As a reminder, do not remove the parenthesis for image
URLs. This is to make sure they work.
- You are more than welcome to add your own colours and
fontawsome icons and mix them around with the 'base' icons
used on Pronouns.Page. Those who know how Pronouns.Page work
may have a good idea what I mean.
- The 'my circle' and 'flags' scroll automatically when
needed.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ DESCRIPTION OF VARIABLES:
this is only to tell what each variable is responsible for
and to make your editing a little easier.
custom-box: RGBA that changes the background colour of the
holding container everything is in.
box-shade: Box shadow of the container box.
accent-color: border around the container box.
link-color: Colours links (flag names are FAUX links).
scrollbar: Colours the flag container scrollbar tracker.
legend: Colours the legend at the bottom of the card.
basic-text-color: Primary text colour of the card
yes-text-color: Colour for the Yes/Preferred setting.
(is often paired with font-weight:bold)
joke-text-color: Colour for the Jokingly called setting.
nope-text-color: Colour for the Least preferred setting.
font-type: Font of choice that is TH friendly.
꒰ა ˚₊ ✧・┈・╴﹕꒰ ᐢ｡- ༝ -｡ᐢ ꒱﹕╴・┈・𐑺 ‧₊˚໒꒱
♥︎ Main Fontawesome Icons:
<i class="fa-solid fa-heart"></i> - YES
<i class="fa-solid fa-grin-tongue"></i> - JOKINGLY
<i class="far fa-thumbs-up"></i> - OKAY
<i class="far fa-thumbs-down"></i> - NOPE
♥︎ Other Background:
just in case you wanted light/dark mode (automatically in dark mode)
✧ Light Mode: https://i.postimg.cc/VLQsYsjm/bg.png
✧ Dark Mode: https://i.postimg.cc/k4LJRqz2/bg-dark.png
------>
<!-- ======== ✦✦ Variables! Edit here ============ ✦✦ -->
<div id="content-variables" style="
--custom-box: rgba(105,105,105,0.64);
--box-shade: rgba(0,0,0,0.63);
--accent-color: #ecb1df;
--link-color:#E35DC4;
--scrollbar:#8b0f7a;
--legend:#B0B3B7;
--basic-text-color: #fff;
--yes-text-color: #ED60CB;
--joke-text-color: #F6B272;
--nope-text-color:#ADB5BD;
--font-type: Helvetica;
">
<!-- ==================================================== ✦✦
holding container
✧✧ ======================================================= -->
<div class="container p-4" style="
max-width:890px;
background-color:var(--custom-box);
background-blend-mode:darken;
background-image:url(
https://i.postimg.cc/k4LJRqz2/bg-dark.png);
background-size:auto;
box-shadow:4px 7px 4px var(--box-shade);
border:2px solid var(--accent-color)">
<!-- ==================================================== ✦✦
PFP & `link'
✧✧ ======================================================= -->
<div class="row no-gutters mb-1" style="column-gap:5px">
<!-- [01] Pfp -->
<img src="IMG_LINK" class="rounded-circle my-auto" style="max-height:6rem; display:inline">
<!-- [02] 'Link' ✦✦ faux link -->
<div class="col p-1 my-auto">
<h1 style="color:var(--basic-text-color); font-family:var(--font-type); font-size:40px">
@Name
</h1>
</div>
</div>
<!-- ==================================================== ✦✦
Small about & flags
✧✧ ======================================================= -->
<div class="row no-gutters" style="column-gap:5px">
<!-- ================== [01] ABOUT ===================== -->
<div class="col-md-6 p-2 ">
<p class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-size:13px">
This should be a little short. This does not scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</p>
</div>
<!-- ============== [02] FLAGS | scrolls =============== -->
<div class="col row no-gutters mb-4" style="column-gap:9px; height:50px; overflow:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--scrollbar) rgba(0,0,0,0)">
<!-- flag 1 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem;border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-- flag 2 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem; border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-- flag 3 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem;border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-- flag 4 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem;border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-- flag 5 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem;border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-- flag 6 -->
<div class="col-auto row no-gutters" style="column-gap:5px">
<span class="col">
<img src="IMG_LINK" style="display:inline; max-height:1.2rem;border-radius:40%">
</span>
<p class="my-1" style="color:var(--link-color); font-family:var(--font-type)">
Flag
</p>
</div>
<!-------------------- add more above ------------------->
<!-- ================= End of flag area ================= -->
</div>
</div>
<!-- ==================================================== ✦✦
Row Container | Names, Pronouns, Links
✧✧ ======================================================= -->
<div class="col row no-gutters p-3 mb-2">
<!-- ================== [01] NAMES ===================== -->
<div class="col-md-4 p-1 ">
<h1 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; font-size:30px">
<i class="fal fa-signature fa-fw"></i> Name
</h1>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> Name</li>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> Name</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> Name</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> Name</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> Name</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> Name</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> Name</li>
<!--------------------- add more above this line ----------->
<!-- ================== end of NAMES ===================== -->
</ul>
</div>
<!-- ================ [02] PRONOUNS ==================== -->
<div class="col-md-5 p-1">
<h1 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; font-size:30px">
<i class="fal fa-tags fa-fw"></i> Pronouns
</h1>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> pro/noun</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> pro/noun</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> pro/noun</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> pro/noun</li>
<!--------------------- add more above this line ----------->
<!-- ============== end of PRONOUNS ==================== -->
</ul>
</div>
<!-- ================== [03] LINKS ===================== -->
<div class="col p-1">
<h1 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; font-size:30px">
<i class="fal fa-link fa-flip-horizontal fa-fw"></i> Links
</h1>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type); color:var(--basic-text-color)">
<!--------------------- start here! ------------------>
<!-- link 1 -->
<li><i class="fa-brands fa-twitter"></i>
<a href="Link" target="_blank" style="color:var(--link-color)">Twitter</a>
</li>
<!-- link 2 -->
<li><i class="fa-brands fa-instagram"></i>
<a href="Link" target="_blank" style="color:var(--link-color)">Instagram</a>
</li>
<!-- link 3 -->
<li><i class="fa-brands fa-deviantart"></i>
<a href="Link" target="_blank" style="color:var(--link-color)">Deviantart</a>
</li>
<!-- link 4 -->
<li><i class="fa-brands fa-discord"></i>
<a href="Link" target="_blank" style="color:var(--link-color)">Discord</a>
</li>
<!--------------------- add more above this line ----------->
<!-- ================== end of LINKS ===================== -->
</ul>
</div>
<!-- ================= End of first row ================= -->
</div>
<!-- ==================================================== ✦✦
Row Container | Honorifics,
Person/family descriptors, Compliments, Relationship
✧✧ ======================================================= -->
<h1 class="text-left mb-0" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; font-size:30px">
<i class="fal fa-scroll-old fa-fw"></i> Words
</h1>
<div class="col row no-gutters p-3 mb-2 ">
<!-- =============== [01] HONORIFICS ================== -->
<div class="col-md-3 p-1">
<h4 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; ">
Honorifics
</h4>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> [no honorific]</li>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> mx.</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> mr.</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> ms.</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> sir</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> ma'am</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> madam</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> sai</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> mir</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> shazam</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> zam</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> comrade</li>
<!--------------------- add more above this line ----------->
<!-- =============== end of HONORIFICS ================== -->
</ul>
</div>
<!-- =============== [02] FAMILY ================== -->
<div class="col-md-3 p-1">
<h4 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; ">
Person and family descriptions
</h4>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> person</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> man</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> woman</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> lady</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> dude</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> boy</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> girl</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> buddy</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> pal</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> bro</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> sis</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> sib</li>
<!--------------------- add more above this line ----------->
<!-- ================ end of FAMILY ==================== -->
</ul>
</div>
<!-- =============== [03] COMPLIMENTS ================== -->
<div class="col-md-3 p-1">
<h4 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; ">
Compliments
</h4>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> pretty</li>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> cute</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> handsome</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> stunning</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> hot</li>
<li style="color:var(--nope-text-color);"><i class="far fa-thumbs-down"></i> sexy</li>
<!--------------------- add more above this line ----------->
<!-- ================ end of COMPLIMENTS ================== -->
</ul>
</div>
<!-- =============== [04] RELATIONSHIP ================== -->
<div class="col-md-3 p-1">
<h4 class="text-left" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; ">
Relationship descriptions
</h4>
<ul class="pl-1" style="list-style-type:none; font-family:var(--font-type)">
<!--------------------- start here! ------------------>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> friend</li>
<li style="color:var(--yes-text-color); font-weight:bold"><i class="fa-solid fa-heart"></i> partner</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> boyfriend</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> girlfriend</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> joyfriend</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> husband</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> wife</li>
<li style="color:var(--joke-text-color);"><i class="far fa-grin-tongue"></i> kissmate</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> darling</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> beloved</li>
<li style="color:var(--basic-text-color);"><i class="far fa-thumbs-up"></i> boo</li>
<!--------------------- add more above this line ----------->
<!-- =============== end of RELATIONSHIP ================ -->
</ul>
</div>
<!-- ================= End of second row ================= -->
</div>
<!-- ==================================================== ✦✦
Your Circle
this scrolls
✧✧ ======================================================= -->
<h3 class="text-left mb-2" style="color:var(--basic-text-color); font-family:var(--font-type); font-weight:100; font-size:30px">
<i class="fal fa-circle-heart fa-fw"></i> My Circle
</h3>
<div class="row no-gutters" style="column-gap:2rem; height:120px; overflow:auto; overflow-x:hidden; scrollbar-width:none;">
<!-- Friend One -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!-- Friend Two -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!-- Friend Three -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!-- Friend Four -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!-- Friend Five -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!-- Friend Six -->
<div class="col-auto row no-gutters text-center mb-2" style="column-gap:0px; font-family:var(--font-type)">
<img src="IMG_LINK" class="rounded-circle" style="max-height:7rem; display:inline">
<div class="col my-auto">
<h1 class="my-auto">
<a href="/" style="color:var(--link-color)">
@FriendName
</a>
</h1>
<p style="color:var(--basic-text-color); font-family:(--font-type)">
relationship here
</p>
</div>
</div>
<!--------------------- add more above this line ---------->
<!-- ================= end of CIRCLE ==================== -->
</div>
<!---------------------- [ separator ] ------------------->
<div class="bg-transparent col" style="height:2rem"></div>
<!-- ==================================================== ✦✦
legend applicator
✧✧ ======================================================= -->
<div class="text-center mb-3" style="color:var(--legend); font-family:var(--font-type); font-weight:100; font-size:12px">
<i class="fa-solid fa-heart"></i> = Yes  
<i class="far fa-grin-tongue"></i> = Jokingly  
<i class="far fa-thumbs-up"></i> = Okay  
<i class="far fa-thumbs-down"></i> = Nope  
<br>
custom, added by the user:
<!----------------- add any custom icons above ----------->
</div>
<p class="text-center mb-0"style="color:var(--legend); font-family:var(--font-type); font-weight:500; font-size:12px">
Card created: YYYY-MM-DD  
</p>
<!-- ================= end of LEGEND ==================== -->
<!-- ==================================================== ✦✦
credits / do not remove
moving OK! Must be clickable
✧✧ ======================================================= -->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; color:var(--legend); font-size:9px; font-family:monospace">✦✦✦</a></p>
<!-- ============== ✦✦ End of code! =================== ✦✦ -->
</div>
</div>