WELCOME!
FINDERQIRL'S COMMS are available by this linkthe owner of this carrd has stopped doing carrd help related due to theft of designs already seen by the owner.you may still talk to Miki through this rtsp link here but they will not cater to any carrd related queries.
NOTICE
this carrd will not be updated already. thank you so much for relying on this carrd!
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! win98 music player cr adilene • 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
ipod scrollbar cr b8nadryl • 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
NEW brackets • 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 • loveberry's pastebin
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 • irene drr ac cr seomplayer •
TUTORIALS
NEW! how to make scrollboxes in non pro • how to code tables in pro standard • 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
FONTS
here are a list of fonts you can use on carrd pro and neocities!
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/mouse_click_fx.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 {
04 paste your custom font in an embed05 your custom font is already useable in your carrd!
font-family: (insert font name);
src: url(https://dl.dropbox.com/fontlinketc);
}
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 {
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!
height: 10em;
overflow: auto;
}
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 {
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
/*your code*/
}
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 MAKE SCROLLBOX IN NON PRO
Here's a tutorial on how to make a scrollbox in a non pro plan. An example of this is used in many pro inspired carrds that made use of non proOO1 add a table to you carrdOO2 remove the heading, you'll only need the row section from the table.OO3 your goal is to make the first line like "a long word" (eg. iloveyousomuch) but to make it have spaces you can use \s
which is carrd's new markdown or [.]{transparent}
which is an old method.refer to the video on how I tried to make it like a one word on my builder but i make use of \s
in itOO4 once you think it's long enough then you can place content normally!I repetitively did it for other sections and how I tried to make it look like I have combined 4 sections in one with one table only.NOTE you won't see how it would scroll on the builder like pro plus tutorials, you will only see it when you publish it as a site. I recommend to leave a huge space below if you want the scrollbar to compliment with your carrd on a desktop perspective.
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.
ABOUT NEO
NEO or KAI it nym prns 21 y.o bigender & seasian filipina. eng/tag ok no dialects pls
MY SOCIALS
main • retrospring • crd acc • referral • resources • discord server • commission me!
tysm for visiting my rsc crd!