Basic Info
-
thoughts during the making
-
winning again with the rainbow icon !!!!!
Profile
GUMI !!
star / starself
You CAN write a lot but the left side will adjust itself to be in the middle of this box!
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.
BYI !!
before you interact
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.
DNI !!
do not interact
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.
<!-------------------------------------------------
Pride Carrds — Xenogender 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
→ pink ----------- #ff5890
→ purple ----------- #8947a4
→ background ------- #fefefe
→ text ------------- #464346
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="shadow mx-auto my-4" style="max-width:800px; border-radius:45px;
background:linear-gradient(
#ff5890 0%, #ff5890 14%,
#ff9394 14%, #ff9394 28%,
#ffac78 28%, #ffac78 42%,
#ffe599 42%, #ffe599 56%,
#76b5e9 56%, #76b5e9 70%,
#a184ec 70%, #a184ec 84%,
#b100ed 84%, #b100ed 100%
);">
<div class="row no-gutters p-4 mx-lg-5" style="font-size:10.5pt; color:#464346; letter-spacing:0.3px">
<!-------------------------------------------------
LEFT SIDE
------------------------------------------------->
<div class="col-md-4 col-sm-5 p-2 my-auto">
<!-- SPEECH BUBBLE
---------------------------------------------->
<div class="speech ml-2 mt-n5" style="overflow:hidden; position:relative; z-index:2;">
<div class="shadow ml-4 pt-4 p-3 text-center" style="background-color:#fefefe; border-radius:15px; max-width:200px;">
<!--
→ the three (3) icons below make up the xenogender arch!
→ if you were to change it to represent, for example, catgender, you can replace the arch with:
<i class="fas fa-cat fa-3x"></i>
→ replace [fa-cat] with anything on [fontawesome.com] !
→ anything specific (i.e. image) can be coded with <imc src="IMG_ADDRESS">
→ if your flag doesn't use an symbol, choose somthing you like!
-->
<i class="d-block fat fa-rainbow fa-2x mb-n3" style="transform:scale(2.3, 1.5);"></i>
<i class="fas fa-star fa-flip-vertical fa-sm"></i>
<i class="d-block fas fa-horizontal-rule mt-n2" style="transform:scale(5.5, 1);"></i>
</div>
<div class="border-0 mr-auto mb-2" style="background-color:#fefefe; height:30px; width:30px; margin-left:45px;margin-top:-5px; clip-path:polygon(0 0,100% 0,50% 50%,0 100%);"></div>
</div>
<!-- BRIEF LOOK
---------------------------------------------->
<div class="card border-0 p-3 text-center" style="background-color:#fefefe; border-radius:15px;">
<!-- ICON ------------------------------------>
<!--
→ best if 200x200 or squared
-->
<div class="mb-2">
<img src="https://i.pinimg.com/736x/32/52/f6/3252f6113823bbda4e47aa1488744a20.jpg"
style="border-radius:10px; height:150px; width:150px; object-fit:cover;">
</div>
<!-- SOCIAL LINKS ------------------------------------>
<div style="font-size:18px;">
<a href="LINK_HERE" class="text-reset" style="text-decoration:none">
<i class="fas fa-id-card fa-fw"></i>
</a>
<a href="LINK_HERE" class="text-reset" style="text-decoration:none">
<i class="fab fa-twitter fa-fw"></i>
</a>
<a href="LINK_HERE" class="text-reset" style="text-decoration:none">
<i class="fab fa-deviantart fa-fw"></i>
</a>
<a href="LINK_HERE" class="text-reset" style="text-decoration:none">
<i class="fab fa-trello fa-fw"></i>
</a>
<!-- if your discord name is super long, adjust the [font-size:10.5pt] to a smaller number -->
<p style="font-size:10.5pt">
discord#0000
</p>
</div>
</div>
</div>
<!-------------------------------------------------
RUGHT SIDE
------------------------------------------------->
<div class="col-md-8 col-sm-7 p-2">
<div class="card border-0 p-3 h-100" style="background-color:#fefefe; border-radius:15px;">
<!-- NAME AND PRONOUNS
---------------------------------------------->
<div class="text-center">
<div style="font-family:serif; font-weight:900; font-size:30px; letter-spacing:2px">GUMI !!</div>
<div class="faded font-italic" style="letter-spacing:1px">star / starself</div>
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="mt-3">
<p>You CAN write a lot but the left side will adjust itself to be in the middle of this box!</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.</p>
</div>
</div>
</div>
<!-------------------------------------------------
ART STATUS
------------------------------------------------->
<div class="col-12 p-2">
<div class="card border-0 p-3 h-100" style="background-color:#fefefe; border-radius:15px;">
<div class="row no-gutters text-center">
<div class="col-4 p-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; font-size:18px; letter-spacing:1px;">
<a href="LINK_HERE" class="text-reset" style="text-decoration:underline">
open
</a>
</div>
<i class="faded" style="letter-spacing:1px">commissions</i>
</div>
<div class="col-4 p-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; font-size:18px; letter-spacing:1px;">
closed
</div>
<i class="faded" style="letter-spacing:1px">trades</i>
</div>
<div class="col-4 p-2">
<div class="text-uppercase" style="font-family:serif; font-weight:900; font-size:18px; letter-spacing:1px;">
closed
</div>
<i class="faded" style="letter-spacing:1px">requests</i>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
BEFORE YOU INTERACT
------------------------------------------------->
<div class="col-sm-6 p-2">
<div class="card border-0 p-3 h-100" style="background-color:#fefefe; border-radius:15px;">
<!-- HEADING
---------------------------------------------->
<div class="text-center">
<div style="font-family:serif; font-weight:900; font-size:30px; letter-spacing:2px">BYI !!</div>
<div class="font-italic faded" style="letter-spacing:1px">before you interact</div>
</div>
<!-- CONTENT
---------------------------------------------->
<div class="mt-3">
<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.</p>
</div>
</div>
</div>
<!-------------------------------------------------
DO NOT INTERACT
------------------------------------------------->
<div class="col-sm-6 p-2">
<div class="card border-0 p-3 h-100" style="background-color:#fefefe; border-radius:15px;">
<!-- HEADING
---------------------------------------------->
<div class="text-center">
<div style="font-family:serif; font-weight:900; font-size:30px; letter-spacing:2px">DNI !!</div>
<div class="font-italic faded" style="letter-spacing:1px">do not interact</div>
</div>
<!-- CONTENT
---------------------------------------------->
<div class="mt-3">
<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.</p>
</div>
</div>
</div>
<!-------------------------------------------------
STAMPS AND DOODADS
------------------------------------------------->
<!--
→ please remember to get the og creator's links
→ ensure that it can be used OUTSIDE of deviantArt (or wherever it originated from); if it explicitly does not, kindly don't bother and use another !!
→ if you're gonna use flashy/fast-paced stamp gifs, mention it in your profile warning.
-->
<div class="col-12 p-2">
<div class="card p-4 h-100" style="background-color:#fefefe; border-radius:15px;">
<p class="text-center">
<a href="https://www.deviantart.com/kittyrocker/art/Pink-skyline-stamp-594863507" class="m-1" style="text-decoration:none;">
<img src="https://cdn.discordapp.com/attachments/704981893476778125/991650099295952896/unknown.png">
</a>
<a href="https://www.deviantart.com/kittyrocker/art/Sunlight-stamp-594863478" class="m-1" style="text-decoration:none;">
<img src="https://cdn.discordapp.com/attachments/704981893476778125/991649951065067562/unknown.png">
</a>
<a href="https://www.deviantart.com/kittyrocker/art/Pastel-skies-stamp-594863496" class="m-1" style="text-decoration:none;">
<img src="https://cdn.discordapp.com/attachments/704981893476778125/991649929468584007/unknown.png">
</a>
<!-- add more above THIS line! -->
</p>
</div>
</div>
<!-- add more segments above THIS line if you want -->
</div>
</div>
<!-------------------------------------------------
CREDITS
------------------------------------------------->
<div class="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-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>
Recent Images
No images.