TEXT CODES

• float link on hover • warp text • underlined links on hover • wobble text • bouncy text • text/link floats on hover • border 1 • border 2 • gradient • bubble text • pop • shake • tilting • wobbly • animated links • mark/button • grow pulse • website button with blinking cursor • triple outline • marquee text • glitch • neon light • character highlight • flicker • mark stitch • jerky • rubber band • text expand • blinking • news ticker with pixel • text outside of box • scramble • mist.drr.ac text shadow • sideways bounce text • beaded hearts border

IMAGE CODES

img shake on hover • jellymask crd twitching image • pastel pink lace border • png blur shadow • brown heart lace • rotate & saturate on hover • nene's mask batch 1 • nene's mask batch 2 • floating • bouncing • blurred border • bouncing flip heart slideshow • rotate & blur hover • inset border • paper mask • pink ribbon • blurred • multiple hearts • gigi's gold frame • img tooltip • heart mask • star mask • rotating • twitching • glitch • rounded images • fog mask • blurred edges rounded image • purple lace border

MUSIC PLAYERS

NEW! kyomoto crd music player • scm player • img plays and pauses music on click • harenchi by lovermonth • cherry ju mp music player img music player • marquee w pixel • circular spin • simple circle • draggable music player • spinning cd music player • ramdon's player • cutie's player • circle pop • speaker music player • 2000 music player • lippies uwu ai music player • corazon uwu ai music player • music w gif 1 • music w gif 2 • pink ipod music player

SCROLLBOXES

pink flowers border • img hover • img shake on hover • horizontal scroll • file scrollbox cr cyberpinked • scrollbox with gif or img as bg • simple border • no border • double border • img bg • bow border • lace border • img bg + lace border • simple rounded • expand on hover • uneven border • horizontal • buttons • two fonts in a scrollbox • heart hover reveal • glowcross • retro • with mark • jichuwee crd scrollbox • img hover to reveal scrollbox • img shake hover to reveal scrollbox • inset shadow scrollbox • scrollbox with gray scrollbar

SCROLLBARS

NEW! louv crd scrollbar • itoshi.ju.mp scrollbar • invisible scrollbar • gradient scrollbar • color scrollbar • retro scrollbar • 7.css scrollbar • 7.css scrollbar 2 • minimal scrollbar • double border scrollbar

SFX ON CLICK

mouse click sfx • click sfx • kyomoto crd sfx • game click sfx

MENU CODES

dropdown menu • dropdown menu #2 • jake's blur menu • estrellita crd menu • gina crd co menu • claris crd menu • heart flip menu • folder menu • 7.css drop down menu • nubes crd menu

CSS STYLING

7.css • 98.css • XP.css • system.css • papercss • NES.css • clay.css • TuiCss

BACKGROUND

kyomoto crd bg • falling sakura leaves bg • falling hearts bg • star warp bg • custom fall img bg

MISC CODES

skill bar • phone cr aicoholicdrink • notepad tab • disable inspect element on all keys • chatango this crd's cbox • slide up blur bg text box • phone cr aicohoidrink • flip card • disable right click • message alert cbox • tooltip • website pet • marquee tab title • typing tab title • cute cursors • girly uwu ai buttons • fairy trail effect • webneko • counter 1 • counter 2 • intro animations • ishimori crd cbox • draggable element • inset box shadow generator • inset shadow • clicksposion • absolute positioning • change text highlight color • disable right click w/ no message • ishimori update log • img clicksplosion • 7.css buttons with blue hover

NOTES

italicized bold means recommended while bold means favorite

CODING

codepen • w3schools • javascript • m2fm • dracslaura • htmlbasics • kokopelli • codesecrets • dianakko • 30 seconds of code • dhtml effects • responsinator • neocities • javascript kit • dynamic drive • _hyoseops/laisita's codepen • dante's codepen • themarte's codepen • codesecrets • jsbin for testing codes • izuemis' pastebin • ityizhuo's pastebin • code beautify and code formatter • cssmatic

RESOURCE CRDS

hypeboy mist drr ac back up • ishimori • ! resource or wesource • cakepop • scripted • bubblegum • pochi • fitz • htmlbasics • floras • hauntedmansion • marigold • hatecrime • gnome • callie • riti • breeze • bubblepop • jellymask • limonsyal • germ • allison • love • noodle • holy • teaclub • caterpie • lovespace (was mikaslash) • gallery • whimsical • reason • fyodor • archivos • lifted • mojito • lesbiana • duvet • codes • mariposa • neogeo • galaxy • epic • mantis • blossom • swan

GRAPHIC SITES

tomomi • noviecita • barbara • dolls • gardenia • yikii • engram • xyz • jasminnie weebly • y2k • twst • barok • jansgraphics • peachie's sayclub dolls • whimsical • everskies • macaque • luvrs rentry • maguro • mooncandy • transparentsticker • terror • warabi • cyworld & sayclub glitter scenes

FONT SOURCES

textfonts • google fonts • dafont • all fonts in carrd • font space

RENTRY RESOURCES

mutya • cellbit • ruimizuki • rentryinspo • scp • resources

GAME ASSETS

enstars drive • genshin stickers • bandori.party • vgraphs for valorant

USEFUL TOOLS

removebg • css generator tool • animista • image color picker • box shadow css • html to rgb • direct file link tutorial • css button generator • css gradient

CRD TEMPLATES

for demo, copy the link, remove carrd.co/build/ and add .demo.carrd.co at the end of the link.PRO STANDARD
taho drr ac cr finderqirl • seulgi drr ac cr nomskoo • ishimori.net cr xaiotng • omelet crd cr kooraeth • horizonta scroll by fiorefae cr ciarispop • heart blur img cr coracrd • lippies crd cr itzhuo • jhope drr ac cr kooraeth • frosted glass flip cr aicoholdrinkPRO PLUS
figaro cr finderqirl • by cobipout cr biogger99 •

TUTORIALS

NEW how to code tables in pro standard • NEW! how to add a music player in non pro • cheat guide on how to remake pro plus to standard • how to make a gallery scroll vertically • how to add sound effects • remove cursor link • how to import a font • add a custom border image • spotify embed • media rule • column styling • how to make a cbox on hover

DECORATIVE

free to use copy paste symbols

FONTS

here are a list of fonts you can use on carrd pro and neocities!

BACKGROUNDS

HOW TO ADD SOUND EFFECTS ON CLICK

FOR PRO STANDARDOPTION #00101 add an embed then copy any of the sfx codes that can be found here02 make an another embed where the urls are located and add onclick="clicksound.playclip() after the url.EXAMPLE:
<a href=”#home” onclick="clicksound.playclip()">home</a>

OPTION #00201 get the element id and paste the code in the example below in an embed02 get the audio id from any of the sfx codes available!EXAMPLE:
<script>
document.getElementById('text01').onclick = function() {
document.getElementById('sound').play();
}
</script><audio id="sound" src="https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouseclickfx.mp3" preload="auto"></audio>

FOR PRO PLUS:01 copy the code from any of the sfx codes listed in here in an embed02 insert this code clicksound.playclip(); in any of the "on click" settings this can be usually be found in buttons, links, images, gallery or any element that can redirect you to any site/section

HOW TO ADD CUSTOM FONTS

01 download a font02 upload it in dropbox03 get a shareable link from drop box then change the www to dl and follow the code format forFOLLOW THIS FORMAT@font-face {
font-family: (insert font name);
src: url(https://dl.dropbox.com/fontlinketc);
}04 paste your custom font in an embed05 your custom font is already useable in your carrd!

FOR PRO STANDARD

FOR PRO PLUS

HOW TO REMOVE CURSOR LINK IN CUSTOM CURSORS

01 get a custom cursor from cursors4u and copy the universal code02 remove everything that comes after the </style> tag

HOW TO MAKE A GALLERY SCROLLABLE

01 it's like making a scrollbox in pro standard ! this also applies for pro plus as well you will need to place an embed then type in the code below between style tags#elementid {
height: 10em;
overflow: auto;
}you can change the height to your liking ! So far you can only do it vertically if making use of carrd's elements ! If there's a way to make it horizontally it'll be added here asap!

HOW TO REMAKE PRO PLUS TUTORIALS IN PRO STANDARD

This is literally not a full tutorial on how to remake but consider this as a cheat guide when remaking pro plus carrds to pro standard. Do take note that not all features in pro plus you will be easily to remake it in pro standard.Always make sure your element id matches to the code whatever you will be editing on! You may do simple carrd tutorials in pro standard to get yourself used to coding in carrd pro.Here’s the standard steps always:O1 get the element id of the container
O2 make an embed for your codesyou can merge all codes in one embed !This section will only discuss when coding the following: container, text elements, multiple parts of a text and buttons/icon!

CODING A CONTAINER

FORMAT#elementid > .wrapper {
/your code/
}

CODING A TEXT ELEMENT

FORMAT#elementid {
/your code/
}

CODING A TEXT ELEMENT

FORMAT#elementid mark {
/your code/
}You can change the mark to whatever you will be editing then repetitively repeat the steps if editing multiple parts of the text element! You can also refer to the cheat sheet of what you can edit with carrd’s text elementCHEAT SHEETa - means link
mark - means highlight
code - means code
strong - means bold

CODING CARRD’S BUTTONS & ICONS

This is applicable for carrd’s buttons and icons as well !FORMAT#elementid li a {
/your code/
}

CODING ELEMENTS IN MOBILE VIEW

This is what we call media rule for pro standard ! It's where you can edit the css codes for mobile viewing. Yes it also needs to be in between style tags as well!FORMAT@media only screen and (max-width: 600px) {
#element id {
/your code/
}
}

HOW TO ADD A MUSIC PLAYER IN NON PRO

Here's a tutorial on how to add a music player similar to pro carrds ! This works on all plans of carrd.OO1 add the audio element and you'll see what audio links which supports, preferably look for an audio in bandcampOO2 select the audio you like and copy the link then paste it on to the audio element.OO3 save the carrd and once published you should be able to have a music player that's similar to pro carrds.i forgot to turn on the audio in the video demonstration but it works on my end there's music playing

HOW TO CODE TABLES IN PRO STANDARD

Here's a tutorial on how to code tables in pro standard. An example of this is used in virtualcrd's retrospring themeOO1 add a table and insert your content.THE HEADING of the table is th while THE ROWS of the table is td you may edit the background color, font, and etc when using those two codes.OO2 i usually set the tables in grid then make the borders transparent so it may look neat on my end. though in the video demonstration you may see the difference of each code as I apply them one by one.