꒰ notes! ꒱

in service since 6/27 ♡ remade 8/1 ♡ updated 12/5
+ new image codes, pixels & maintenance

i'm deciding to be more productive so all my carrds are getting revamped and updated! this crd will be redesigned soon i've been meaning to remake it again

꒰ mainstream codes! ꒱

text effectsNEW! image bordersscrollboxmusic playerstap effectsblobs in a jarabsolute positioningrotating elements
hover effectsmarquee tab titleimage animations

꒰ cooler codes! ꒱

custom cursorsalertsselection colorimage beside textmenuscustom fontscustom scrollbar
image music playerdropdown menusbookmark menuimage clicksplosionsaturate hover

꒰ sAturate on hover! ꒱

this code makes any image or button or link you hover on get more or less saturated!

if you want it to saturate on just images, put img instead of a, or if you want it to saturate on links only then put in link instead of a, etc!

꒰ clicksplosion img! ꒱

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



floating text











moving text


gradient text





text with hover Tooltip text




pop text




cr koiwaprimevera for the pop code

text with border

better text 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

wobbly border

image glow

paper mask

multiple borders

rainbow glow

꒰ 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.

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 baeyhkun for the lace border

꒰ music players! ꒱





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!
<script language="javascript" type="text/javascript">
alert("Welcome to my site")
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>
::selection {
color: white;
background: pink;

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.

#elementID {
position: absolute;
top: -0.5em;
left: -0.5em;
z-index: 50;

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.

#elementID {
transform: rotate(20deg);

꒰ 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

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

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

꒰ img music player! ꒱

what i'm talkin about is a 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
div.song {
position: fixed;
bottom: 0;
left: 0;
width: auto;

꒰ 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
glub {
font-family: Arial;
font-size: 16px;
color: #000000;
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.

꒰ cbox ꒱

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

here's my instagram for urgent questions! or if you're just impatient and need an answer quick