⠀⠀⠀⠀⠀⠀⠀

text

text with border ⬥ text with border 2 ⬥ webkit text stroke ⬥ gradient text ⬥ marquee text ⬥ pop text ⬥ floating text ⬥ jerky text ⬥ rubber band text ⬥ curved text ⬥ sideways bounce ⬥ bubble text ⬥ news ticker ⬥ news ticker w pixel ⬥ tilting text ⬥ bouncy ⬥ bouncy 2 ⬥ wobbly text ⬥ scrolling text ⬥ flirty text ⬥ blinking text ⬥ text w image bg ⬥ color changing text ⬥ color changing flicker text ⬥ link floats on hover ⬥ shaking text ⬥ website button w blinking text ⬥ glitch text ⬥ rotate text on hover ⬥ tumblr wobbly text ⬥ pulsing text ⬥ triple outline ⬥ text tooltip ⬥ typing text ⬥ typing text w neon light ⬥ animated link underlines on hover ⬥ downloading data typing text

image

lace border ⬥ pastel pink lace ⬥ pastel blue lace ⬥ pastel purple lace ⬥ pastel brown lace ⬥ pastel orange lace ⬥ black lace ⬥ black lace 2 ⬥ hot pink lace ⬥ pink and brown lace ⬥ brown hearts lace ⬥ pink paper border ⬥ pink ribbon border ⬥ yellow and pink heart border ⬥ gigi's gold frame ⬥ wooden border ⬥ double border ⬥ gradient border ⬥ blurred edges ⬥ inset border ⬥ inset box shadow 3d effect ⬥ drop shadow ⬥ multiple dropshadow ⬥ rainbow dropshadow ⬥ NEW! fran's flower mask collection ⬥ heart mask ⬥ paper mask ⬥ fog mask ⬥ star mask ⬥ nene's mask 1 ⬥ nene's mask 2 ⬥ hello kitty mask ⬥ hello kitty mask on hover ⬥ floating img ⬥ spin img ⬥ twitch img ⬥ pop img ⬥ ticker img ⬥ glitch img ⬥ heart shape on hover ⬥ infinite bounce on hover ⬥ bouncing flip heart ⬥ img shake on hover ⬥ sliding img to reveal text ⬥ rotate and saturate on hover ⬥ rotate and blur on hover ⬥ saturate on hover ⬥ img tooltip

scrollbox

NEW! pink flowers ⬥ simple border ⬥ double border ⬥ no border ⬥ expand on hover ⬥ dashed border ⬥ colored bg ⬥ gradient bg ⬥ img/gif bg ⬥ uneven border ⬥ scrollbox with mark ⬥ two fonts in a scrollbox ⬥ img hover to reveal scrollbox ⬥ img hover to reveal 2 scrollboxes ⬥ img blur and shake to reveal scrollbox ⬥ horizontal scroll ⬥ title disappears when scrollbox expands ⬥ 4 scrollboxes floating beside each other

music players

NEW! kyomoto music player ⬥ minimalist ⬥ vinyl ⬥ speaker ⬥ slide up playlist on hover ⬥ slide in left/right ⬥ slide in left only ⬥ rectangle mp w title & progress bar ⬥ mp3 w pixel/gif ⬥ spinning note ⬥ madomagi ⬥ circle w progress bar ⬥ cute circle ⬥ ongaku ⬥ hover on text ⬥ img bounce on hover ⬥ marquee ⬥ kill bill ⬥ music player inside a container ⬥ linktext ⬥ pixel to music player on hover ⬥ spinning icon ⬥ 2000s ⬥ cd spin ⬥ circle pop ⬥ circle spin ⬥ draggable ⬥ marquee with pixel ⬥ ramdons ⬥ hoyeon jump music player ⬥ corazon uwu ai music player ⬥ spinning headphone ⬥ diamond spin ⬥ gradient with pixel ⬥ NEW! multiple song music player ⬥ harenchi

backgrounds

NEW! kyomoto bg ⬥ bokeh effect ⬥ css pattern bgs ⬥ bubble bath ⬥ rain ⬥ falling snowflakes ⬥ falling snowflakes 2 ⬥ falling hearts ⬥ star warp ⬥ radial gradient ⬥ flickering squares ⬥ blobs in a jar ⬥ tv set filter ⬥ falling sakura leaves ⬥ floating hearts ⬥ vhs overlay ⬥ custom image fall ⬥ falling butterflies ⬥ heart gifs bg ⬥ tiled bgs (can also be used on carrd free)

menus

NEW! drop-down menu similar to kyomoto crd's ⬥ old lovespace menu ⬥ 7.css drop down menu ⬥ flip heart ⬥ folder menu ⬥ drop down ⬥ editable drop down ⬥ tabs ⬥ tabs2 ⬥ claris crd menu ⬥ jake's blur menus ⬥ flip card ⬥ multiple sections one embed ⬥ gina crd co menu ⬥ bookmark menu ⬥ flower ⬥ lala uwu ai menu ⬥ intruosers menu ⬥ roman numerals on hover ⬥ numbers on hover ⬥ heart ⬥ estrellita menu

scrollbars and cursors

NEW! double border scrollbar ⬥ 7.css scrollbar ⬥ 7.css scrollbar 2 ⬥ colored scrollbar ⬥ gradient scrollbar ⬥ hidden scrollbar ⬥ old web scrollbar ⬥ custom cursors ⬥ bubbles ⬥ clicksplosion ⬥ flower 1 ⬥ flower 2 ⬥ img/gif clicksplosion ⬥ cursor trail ⬥ hearts ⬥ hearts 2 ⬥ star ⬥ question mark ⬥ music note ⬥ image trail

miscellaneous

NEW! this carrd's update log ⬥ ishimori update log ⬥ scripted neocities update log ⬥ notepad tab ⬥ NEW! redirects people to another site when the carrd opens ⬥ copy image to clipboard ⬥ window buttons ⬥ draggable elements ⬥ shaped containers ⬥ password protection ⬥ disable right click w/o alert ⬥ disable left click + alert ⬥ message alert when page opens ⬥ typing tab title ⬥ marquee tab title ⬥ cbox on hover ⬥ media rule

css framework sites

7.css ⬥ 98.css ⬥ XP.css ⬥ NES.css ⬥ clay.css ⬥ paper.css ⬥ NEW! system.css

fonts

HOW TO INSTALL CUSTOM FONTS

backgrounds

click the images to enlarge.

recommended/favorite ⬩ *beginner friendly

useful websites

mf2fm ⬥ animista ⬥ css gradient ⬥ chatbox 1 ⬥ chatbox 2 ⬥ glenthemes ⬥ counter ⬥ counter2 ⬥ remove.bg ⬥ punycoder ⬥ hyperpix ⬥ waifu2x ⬥ web archive ⬥ responsinator ⬥ css generator tool ⬥ disable inspect element ⬥ charcode translator ⬥ hex to rgba ⬥ text color fader ⬥ color palette generator ⬥ website pet ⬥ webneko ⬥ cinni.net ⬥ box shadow generator ⬥ opacity css

font sites

*fontspace ⬥ dafont ⬥ google fonts ⬥ asterism ⬥ textfonts ⬥ *all fonts in carrd ⬥ 1001fonts ⬥ befonts ⬥ candyfonts

resources carrds

*scripted ⬥ ishimori ⬥ jellymask ⬥ cakepop ⬥ bubblegum ⬥ resource ⬥ wesource ⬥ frogpop ⬥ floras ⬥ gnome ⬥ breeze ⬥ pochi ⬥ mariposa ⬥ limonsyal ⬥ marigold ⬥ fitz ⬥ noodles ⬥ mantis ⬥ blossom ⬥ mojito ⬥ mist ⬥ phonecharm ⬥ omelet

coding

*stackoverflow ⬥ codepen ⬥ *htmlbasics ⬥ *️️w3schools ⬥ neocities ⬥ css-tricks ⬥ jsbin ⬥ liveweave ⬥ jsfiddle ⬥ javascriptfreecode ⬥ 30 seconds of code ⬥ *html cheat sheet

graphics sites

whimsical ⬥ tomomi ⬥ barok ⬥ xyz ⬥ bonnibel's graphics ⬥ jan's graphics ⬥ pixelbank ⬥ asterism ⬥ yokai ⬥ fool lovers ⬥ noviecita ⬥ jasminnie weebly ⬥ gifs ⬥ macaque ⬥ supplies ⬥ gardenia ⬥ terror ⬥ warabi

tutorials

NEW! add custom fonts ⬥ sound effect on click ⬥ NEW! add custom border image ⬥ elements blur on hover ⬥ horizontal scroll (for carrd free) ⬥ make an image play music when clicked ⬥ spotify embed ⬥ start a neocities ⬥ import mp3 files ⬥ column styling ⬥ pop-ups in carrd ⬥ sliding carousel viewer ⬥ absolute positioning ⬥ how to remake pro plus carrds to pro standard ⬥ dotted links ⬥ how to use animista animations ⬥ position text outside of the container ⬥ add custom selection ⬥ how to use fc2 website counter

templates

pro plus / pro standardfor demo, copy the link, remove carrd.co/build/ and add .demo.carrd.co at the end of the link.

sound effect on click

click on the images to enlarge.for pro standard ( option 1 )
1. Copy this code and paste it in an embed.
2. Make an embed for the element you want to add the sound effect to and put: onclick="clicksound.playclip()" after the url.
EXAMPLE: <a href="url" onclick="clicksound.playclip()">link text</a>◆ If you have multiple links you should put the links inside the <span> tag so you wont have to repeat the code over again.
EXAMPLE: <span onclick="clicksound.playclip()"><a href="url">link text</a> <a href="url">link text</a><a href="url">link text</a><a href="url">link text</a></span>◆ You can also do this method with one link.
EXAMPLE: <span onclick="clicksound.playclip()"><a href="url">link text</a></span>for pro standard ( option 2; use this method if your element is a carrd element and is not inside an embed (works on any carrd element).1. copy this code and paste it in an embed.<script>
document.getElementById('text01').onclick = function() {
document.getElementById('clicksound').play();
}
</script><audio id="clicksound" src="https://dl.dropbox.com/s/79xiksac40a2i65/interfaceclick.wav"></audio>2. replace text01 with the id of your element which you can find here:

for pro plus
1. Copy this code and paste it in an embed.
2. Go to the element you want to add the sound effect to and paste: clicksound.playclip(); in "on click".

add border image

click on the images to enlarge.for scrollboxes
1. Copy this code and paste it in an embed.
2. Go to foollovers.com and select a border that you want to use.
3. After you've chosen, right click the image and select 'open image in new tab'.

4. Open the tab and copy the link.
5. Replace this link with the link that you copied and adjust the number that says 10 fill round according to the size of your border.

◆ You can also adjust the border-width if necessary.for images
1. Repeat the steps above and replace all the words inside this <div id="border"> and this </div> with this:
<img src="image-url-here" width="image-width-here" height="image-height-here">here's how it should look like:

and replace IMAGE-URL-HERE with the link of your image file. width and height are pretty explanatory.

install custom fonts

1. Download a font from any of the font sites here.
2. Upload it on any hosting site that you use, in my case I'll be using dropbox.com.
3. Copy the dropbox link and replace 'www' with 'dl'.
EXAMPLE:
from
https://www.dropbox.com/s/0o4tnfa6cxu3gnm/gingies.otf?dl=0
to
https://dl.dropbox.com/s/0o4tnfa6cxu3gnm/gingies.otf?dl=0◆ You can retain or remove the extra '?dl=0' at the end of the link to make it look cleaner but either way works.4. Copy this code and paste it in an embed.
@font-face {
font-family: font-name;
src: url(font-link);
}
5. Replace font-name with the name of your font and font-link with the edited dropbox link that you copied.
EXAMPLE:
@font-face {
font-family: gingies;
src: url(https://dl.dropbox.com/s/0o4tnfa6cxu3gnm/gingies.otf);
}applying the font ( pro standard )
1. Copy this code and paste it in the same embed.
#text01 {
font-family: font-name;
}
2. Replace font-name with the font-family name and #text01 with the id of the element you want to apply the font on. You can find it here:

applying the font ( pro plus )
1. Go to the element you want to apply the font to, go to settings > styles.
2. Copy this code font-family: font-name and paste it on the styles.

3. Replace font-name with the font-family name.