Basic Info
-
thoughts during the making
-
polyam users are WINNING with the heart-infinity icon i am SO HAPPY WITH IT
Profile
click
<!-------------------------------------------------
Pride Carrds — Polyamarous version.
(code by jiko)
------------------------------
RULES
→ read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG (in your display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE brackets or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
PALETTE
→ blue ----------------- #2fb3f2
→ black ---------------- #222222
→ pink ----------------- #e8414d
→ background ----------- #fefefe
→ text ----------------- #464346
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="py-5 px-3" style="
background-image:url(IMG_ADDRESS_HERE);
background-color:#;
background-size:#;
background-position:center;
">
<div class="mx-auto my-4" style="color:#464346; max-width:300px; font-size:10pt;">
<!-------------------------------------------------
LIL CLICK BOX (DECOR)
------------------------------------------------->
<div class="mx-auto" style="margin-bottom:-20px; max-width:100px; position:relative; z-index:4;">
<div class="shadow card border-0 text-center p-1 text-white" style="background-color:#222222">
CLICK !
</div>
<div class="text-center mt-n2">
<i class="fas fa-triangle fa-flip-vertical" style="color:#222222"></i>
</div>
</div>
<!-------------------------------------------------
CARD BACKGROUND
------------------------------------------------->
<div class="shadow card border-0 p-md-4 py-4 p-2" style="min-height:200px;
background-image:url(https://static.tumblr.com/d40eae727a79de74c5b3c4cb5c8e9fd5/2pnwama/HC7pfqdws/tumblr_static_e6k5mmnyclc0c488gcsk00wgo.png);
background-color:#fefefe;
background-position:center;
border-radius:20px;">
<!-------------------------------------------------
FA ICON
------------------------------------------------->
<div class="text-center mb-n4">
<a data-toggle="collapse" href="#pridecollapse">
<span class="fa-stack fa-2x" style="font-size:18px; position:relative; z-index:4; color:#ffe084">
<!--
→ the three (3) icons below make up the xenogender arch!
→ if you were to change it to something else, you can use:
<i class="fal fa-cat fa-stack-1x"></i>
→ replace [fa-cat] with anything on [fontawesome.com] !
-->
<i class="fas fa-circle fa-stack-2x" style="color:#222222;"></i>
<!-- replace the polyam icon with the snippet above -->
<i class="fal fa-heart fa-stack-1x"></i>
<i class="fal fa-infinity fa-stack-1x" style="transform: scale(1.1,0.7);"></i>
</span>
</a>
</div>
<!-------------------------------------------------
YOUR ICON
------------------------------------------------->
<!--
→ best if 200x200 or squared
-->
<div class="text-center mb-n5" style="position:relative; z-index:3;">
<img src="https://pbs.twimg.com/media/EkHEl3ZVgAAoKo1.jpg"
class="img-thumbnail p-1 border-0"
style="border-radius:15px; background-color:#222222; max-width:130px; max-height:130px; object-fit:cover;">
</div>
<!-------------------------------------------------
CODE BEGINS
------------------------------------------------->
<div class="mx-auto card p-4 text-center" style="border-radius:15px; width:80%; border-width:4px; border-color:#222222; background-color:#fefefe; position:relative; z-index:2;">
<!-- NAME
---------------------------------------------->
<div class="font-weight-bold" style="margin-top:40px">
DORI
</div>
<!-- PRONOUNS
---------------------------------------------->
<div class="faded">
it / its only
</div>
<hr class="w-100" style="border-color:#464346; opacity:0.1;">
<!-- SUMMARY
---------------------------------------------->
<div>
extremely small summary; or some important note.
</div>
</div>
<!-------------------------------------------------
FLAG IN THE BACKGROUND
------------------------------------------------->
<div class="mx-md-n4 mx-n2 mb-5" style="margin-top:-5.5em; position:relative; z-index:1">
<div style="height:10px; background-color:#2fb3f2;"></div>
<div style="height:12px; background-color:#222222;"></div>
<div style="height:10px; background-color:#e8414d;"></div>
</div>
<!-------------------------------------------------
SOCIAL LINKS
------------------------------------------------->
<div class="text-center mt-2 mb-3">
<a href="LINK_HERE" style="color:#222222; text-decoration:none;">
<i class="far fa-id-card fa-fw"></i>
</a>
<a href="LINK_HERE" style="color:#222222; text-decoration:none;">
<i class="fab fa-twitter fa-fw"></i>
</a>
<a href="LINK_HERE" style="color:#222222; text-decoration:none;">
<i class="fab fa-deviantart fa-fw"></i>
</a>
<a href="LINK_HERE" style="color:#222222; text-decoration:none;">
<i class="fab fa-twitter fa-fw"></i>
</a>
<!-- add more above THIS line! -->
</div>
<!-------------------------------------------------
GOT SPECIAL PEOPLE IN MIND?
------------------------------------------------->
<!--
→ add [show] in the class below to have this appear by default!
-->
<div class="collapse" id="pridecollapse">
<div class="mx-auto card p-4 text-center" style="border-radius:15px; width:80%; border-width:4px; border-color:#222222; background-color:#fefefe; position:relative; z-index:2;">
<div class="font-weight-bold">
COOL PEOPLE
</div>
<hr class="w-100" style="border-color:#464346; opacity:0.1;">
<div class="row no-gutters justify-content-center m-n2">
<a class="col-6 p-2" href="LINK_HERE">
<img src="https://pbs.twimg.com/media/EkHEl3ZVgAAoKo1.jpg"
style="border-radius:10px;">
</a>
<a class="col-6 p-2" href="LINK_HERE">
<img src="https://pbs.twimg.com/media/EkHEl3ZVgAAoKo1.jpg"
style="border-radius:10px;">
</a>
<a class="col-6 p-2" href="LINK_HERE">
<img src="https://pbs.twimg.com/media/EkHEl3ZVgAAoKo1.jpg"
style="border-radius:10px;">
</a>
<!-- add more above THIS line! -->
</div>
</div>
</div>
<!-------------------------------------------------
CREDITS
------------------------------------------------->
</div>
<div class="mt-3 text-center small faded" style="letter-spacing:0.5px">
<a href="https://toyhou.se/16487749.-f2u-pride-carrds" class="text-body" style="color:#HEXCODE">
( code by jiko )
</a>
<!--
→ if credits can't be seen due to background, change [text-body] to text-reset (the code's default font colour), text-dark OR text-light
or manually set the text colour at the [color:#HEXCODE] (delete [class="text-body"] first), as long as it is visible!
-->
</div>
</div>
</div>
Recent Images
No images.