꒰ notes! ꒱

in service since 6/27 ♡ remade 8/1 ♡ updated 10/8
+ maintenance & new scrollboxes!

happy october! i've made a commission carrd! please consider commissioning me, i'd really appreciate it.!

+ if you need questions answered and don't wanna wait for my response in the cbox, here's my instagram!

꒰ mainstream codes! ꒱

NEW! text effectsimage bordersNEW! scrollboxmusic playerstap effectsblobs in a jarabsolute positioningrotating elements
hover effectsmarquee tab titleimage animations


꒰ cooler codes! ꒱

custom cursorsalertscss selection colorimage beside textmenuscustom fontscustom scrollbar
image music playerdropdown menusbookmark menuNEW! image clicksplosion

꒰ clicksplosion image! ꒱

i'm a big fan of this tap effect since it doesn't make my phone explode and its customizable!
i'd recommend not messing with anything aside from the image link if you don't know what you're doing ...

꒰ image at top of page! ꒱

i've been asked this 4 times so here's how to do it.!
further explanation can be found here!

click to expand ...

꒰ centering embeds! ꒱

add margin: auto; in there or if it's text you can add text-align: center/left/right;

꒰ bookmark menu! ꒱

credit soliel if used! don't repost without their permission

ahem. anyways! these little menu things are fixed in a corner and expand when hovered on.
there are 4 by default but you can skim the code and add or delete as you see fit.

꒰ text effects! ꒱

the first text effect in the middle row is marquee text, and those freeze up sometimes T__T just reload the page if it doesn't show up

typing

link

floating text

link

wobbly

link

b

o

u

n

c

y

link

moving text

link

gradient text

link

link

tilt

link

text with hover Tooltip text

link

bubble

link

pop text

link

rubberband

link

cr koiwaprimevera for the pop code

text with border

꒰ imAge borders! ꒱

for the plain border you can change double to dashed, dotted or solid. if you want the corners to be rounded, add border-radius: 5px;!
some of these may look wonky or not show up at all. i promise they don't look like that normally, this carrd has so much code in it that some things might mess up!

plain border

pink lace

brown lace

plain lace

↓ use the alt code if you want the border on 1 image ↓

wobbly border
alt code

paper mask

blue border

↓ these borders were all made by clarispop! ↓

pastel pink

lace border

more lace

bow border

heart mask

star mask

lace mask

credits to baeyhkun for the plain lace border, alfyncoded (me) for the lace mask and imiyaimi for the star mask!!

꒰ scrollboxes! ꒱

these scrollboxes are all text based so you can't put images in them or add custom fonts in em, you can find embedded scrollboxes here!

scrollbox with rounded edges
Therion has white, shaggy hair that reaches the nape of his neck and has a fringe covering a part of his face, has green eyes and darker skin. He wears a purple scarf, a thick shawl that has a lighter shade than his neckwear, a white short-sleeved undershirt, dark pants and leather shoes. After his endeavor in the Ravus Manor, a metal bracelet called the fool's bangle is secured around his right wrist with a chain attached to it.

normal scrollbox
Therion is cocky and cynical, as made evident through his interactions with other characters. He remarks that a guard has a stronger bark than bite, and refuses to settle in a partnership with two other thieves as he believes them to be unnecessary. Therion is quite sarcastic as well, and has a dry sense of humor.

lace scrollbox
Although he is a talented thief and has a sharp wit to boot, Therion is still likely to fail in his endeavors due to how short-sighted he can be, as mentioned by Heathcote. He seems to acknowledge his own faults, however, as he immediately says how he 'should have seen this coming' after falling into the trap of the Ravus Manor.

bow border
Therion is also known for being a lone wolf, working better by himself and always rejecting potential offers to work with other people. It is later revealed that he has trust issues, born from being cruelly betrayed at a younger age.

this border
Later on in the game, after meeting Darius again, he is called a "sentimental fool" due to how he has learned to put trust in people again, showing his character growth after meeting Cordelia and the other travelers.

pink lace
"Your name is Therion, and you are a thief. While your past is a guarded secret, your exploits are known far and wide. Mere whispers of your extravagant heists strike fear into the hearts of the wealthy. Drifting into the Cliftlands one day, you hear a rumor of great riches to be had. You set your sights on a mansion said to be impregnable, only to find what you never expected..."
—Therion's description when selecting him.

credit ciarispop for the bow border
and baeyhkun for the lace border

꒰ music players! ꒱

circle

minimalist

vinyl

circle

uhh this one by ramdons

꒰how-to! ꒱

you have to put a youtube link into this site and upload it to dropbox if you want to have your own song.

click on share, then click on create/copy link. skim the code, usually near the bottom you can replace the current link in the code with yours.
+ you can also change the song title and colors, etc. by skimming the code

you will also have to remove the bit at the end so that the link ends at ".mp3", and change "www" to "dl".

your link should look something like https://dl.dropbox.com/s/vmqhaka48469jp4/Viento%20-%20Caifanes.mp3

you may also tag the song title with <marquee> </marquee> if you want it to scroll!

also! on most of these, you can replace the pause and play symbols with images if you put <img src="link"> there!

꒰ cursors + tap effects! ꒱

you can find custom cursors at this site! it looks super sketch i know but i promise it's safe lol

you can find tap effects under mouse effects on this site!

꒰ custom scrollbar! ꒱

you can make your own scrollbar here! make sure to put <style> </style> before and after the code though!

this carrd is using a custom scrollbar! you can only see it on PC and android (i think) though..

꒰ floating things! ꒱

what i'm referring to is like, those floating symbols you see in carrds.
put this code into a hidden + head embed, you can change the symbol used, and how many there are~!

꒰ hover effects! ꒱

there are a few hover effects covered here.
the wipedown link thing is basically when a colored box.. appears when you hover over a link. an example + explanation can be fooound.. here!

blur effect, italicize + blur, expanding link, rainbow hover, wipedown links

꒰ marqee tab titles! ꒱

for a typing tab title, paste this code into a hidden + head embed. replace "message here" with your own message.
you can increase or decrease the number of messages you can have (1-5).

you can also change "tb8_speed" or "tb8_delay" to change the typing speed or how long it takes to switch.

for one that marquees, paste this code into a hidden + head embed & change "this is my marquee text" to whatever you'd like

꒰ Animations! ꒱

all these codes can be used on other elements too! just replace like, #image01 or whatever the div id is with, for example, #text01. element ids can be found in settings.

cr koiwaprimevera fur the pop code :thumbs up:

꒰ alerts! ꒱

an example of an alert is basically a notification you get when you open a website!
<html>
<head>
<script language="javascript" type="text/javascript">
alert("Welcome to my site")
</script>
</head>
</html>
you can replace "welcome to my site" with anything you want!

꒰ selection color! ꒱

if you have no idea what im talking about, select some text on this page.

<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: white;
background: pink;
}
</style>
</head>
</html>

you can put color codes in there if you want a specific color, make sure they're in all caps! + you can put #00000000 in the background so that when you select only color shows up.

absolute positioning!

(thank you to callie.crd.co for explaining this)
absolute positioning is basically removing an element from it's position on the page and instead placing it using top, bottom, left, or right values.

<style>
#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;
}
</style>

the z-index value decides which element goes on top of another.
the higher the number with a '-' next to it, the further out of the box in that direction it will be. the opposite can be achieved by removing the '-'

꒰ rotating elements! ꒱

rotating elements is simple! just stick this code in an embed, mess around with the degrees, and replace elementID with.. whatever the elementID is for the element you want to rotate.

<style>
#elementID {
transform: rotate(20deg);
}
</style>

꒰ image next to text! ꒱

if you wanna put a gif next to text, the text needs to be in an embed. you can put <img src="image.gif"> in the places you want a gif/image to be.

you just need to replace "image.gif" with the link of that image/gif. you can do that by copying the image address!

floating text
꒰ custom fonts! ꒱

go to this website and download the font you want,
unzip the file and upload either the .ttf or .otf file into dropbox
get the link for the file and remove the ?dl=0 from the back and the www from the front. replace the www with dl
input the code below into an embed and fill it out as needed! once you’re done add the font-family css into the style tags of the text you’re using

<style>
@font-face {
font-family: starborn;
src: url(https://dl.dropbox.com/s/5zgb9l9rpahgls7/Starborn.otf);
}
#iya{
text-shadow: -1px 0 #2e2e2e, 0 1px #2e2e2e, 1px 0 #2e2e2e, 0 -1px #2e2e2e;
font-family: starborn;
font-size: 1.5em;
color: #fff;
}
</style>
<div id="iya">title text lolol</div>

you can find further explanation of this + font recommendations at cakepop.crd.co and lesbiana.crd.co

꒰ imAge music player! ꒱

what i'm talkin about is the little image fixed in the corner that plays music when clicked. here's the link

꒰ how-to! ꒱

this is where you'll put your image link and audio link, don't remove or overwrite anything beyond the quotation marks!

also, if you don't want it to be fixed in the corner remove the
<html>
<head>
<style>
div.song {
position: fixed;
bottom: 0;
left: 0;
width: auto;
}
</style>
</head>

꒰ general tuts! ꒱

this section includes stuff i didn't think fit into my code section but wanted to include in this carrd nonetheless

2 fonts/colors in one scrollbox
link in embedded text
linebreaks in embedded text
gif/image scrollbar
make sections appear (like in this crd)
image in the corner of a page
embedded image to have a link
removing underline from links
image in scrollbox
NEW! centering embeds
NEW! image at the top of page (like in this crd)

꒰ underlined embed text ꒱

if you want to make embedded text have no underline or change colors when hovered or clicked, here you go
feel free to customize!

꒰ 2 fonts in one scrollbox! ꒱

if you wanna do something like this, your scrollbox will have to be wholly embedded, it won't work if it uses plain text! (like the ones i have listed here, u can find embed scrollboxes here)

step 1: put your code in an inline embed
step 2: paste
<style>
glub {
font-family: Arial;
font-size: 16px;
color: #000000;
}
</style>
at the bottom of the code after </div>, or in a new embed.

step 3: you can remove or change the parts as much as you deem necessary!
step 4: tag your text with <glub> </glub>

(creds to fish for this lol)

here's how it should look!!

you can add more styles to your scrollbox using this formula if you'd like lol...

꒰ links in embedded text! ꒱

if you want links in embed text, simple add
<a href="https://www.your-link-here">text!</a>
make sure your link has https: at the start, unless its like, a link to another section in your carrd. in that case replace the link with #sectionname or something!

꒰ linebreaks in embed text ꒱

add <br> </br> tags around the text you want to have a linebreak.

꒰ gif scrollbar! ꒱

follow the instructions listed HERE!
unfortunately i believe this only works on scrollboxes! i'll update this section if i find out how to make it work on any scrollbar!

custom gif scrollbar!

stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen stan raise a suilen

꒰ how do i title this ꒱

what i'm referring to is whats going on with this carrd basically. when you open a new section it appears under the index

add a header under your index, add a section under that then add another section under that. the first section doesn't matter so can be named anything.

you only need to do this once so you can just add sections normally.

if you wanna do what i did in this crd with sections appearing in between images, add a footer start before your footer.. your footer has to be at the very bottom of the page by the way~

꒰ fixed image ꒱

an example of what i'm talking about is the little image of primrose that appeared in the corner of this section. click on her to get the code!

if you want it to be at the top, change bottom: 0; to top: 0;, same goes with left: 0;

you'll need to replace the link there with your own image link, you can get that by copying it's link address.
+ what i tend to do is upload my image into discord and opening the original image.

also, if you want two or more images to be in the corners of ur carrd, you'll have to change the "fixed" part of div.fixed, i.e div.purple.

꒰ other helpful things ꒱

here's a bunch of things i think are useful! i don't really update this section that often though! check in biweekly for new resources, help and advice! ><

fonts - advice - unrelated resources

꒰ Advice! ꒱

1. Prioritize accessibility over style
i cannot stress how important that is, it doesn't matter how cool your code is or what kind of carrd you make, if your carrd is impossible for dyslexic or colorblind or just anyone to read then it is a bad carrd.

+ 1a. Don't make your carrd a big wall of text
i am dyslexic and have a hard time reading just about everything and you are making it no easier on me...

2. Code does not always make a good carrd
i can assure you that carrd pro will not automatically make you a better carrd maker.
it does make some aspects easier, and you'll probably have more range in what you make, BUT haphazardly slapping a bunch of shit together will make for a bad carrd.

3. Don't stress out over being "unoriginal"
CARRD IS HARD! being creative and executing your ideas is also very hard! i hope this isn't just a me thing, but it's perfectly okay if you are too burnt out to make "original" or cool carrds.
not gonna lie i pressure myself immensely to make good carrds that my followers like and it's just shortening my lifespan more than necessary LOLL You don't owe anyone anything bae its okay

4. No one will view your carrd on PC
so optimize it for mobile... please. or alternatively, you can make a mobile friendly carrd. little point of advice, when using embed text, use em instead of px since em will look the same no matter where you view it~

5. Don't make your carrd an autobiography
who knows who'll view your carrd! you're putting yourself in potential danger by listing all your mental illnesses, triggers and all that other unnecessary shit in your readily available internet Carrd!

6. Add CWs to your carrd
if you have triggering imagery in your carrd (gore, flashing images, etc) add a cw on page 1! or atleast make a more accessible carrd.

7. Graphic design is my passion
this is basically just a reiteration of my accessibility point, but knowing the basics of color theory will save your ass when making carrds.
also, don't use light text on a light background, don't use dark text on a dark background, don't use colored text on a similarly colored background..
basically if you can't read your carrd unless you squint then you probably need to rework something

i occasionally update this T__T not often though

꒰ stuff! ꒱

listogrophy of cute symbols, genshin build masterlist, jim musil's paintings (can be used for backgrounds), w3schools, cboxes, image background remover, mf2fm, gael's carrd drive, ed's carrd doc, colorzilla download link, webneko, htmlcolorcodes.com, ed's carrds, more tba..

꒰ cbox ꒱

please check the other sections before asking stuff!
+ my timezone is gmt+8, so i may take a while ..