welcome to mist! an archive of resources used for carrd making.

WELCOME!

welcome to my resource carrd! This is where my portfolio and the codes I bookmark are here as long with a few graphics and fonts that caught my eye! I hope this carrd can be very useful for your carrd and neocities needs! if you're interested to see my portfolio click on the photo beside itclick here for the new cboxnone of the codes or fonts are mine these are all for bookmarking and personal use.cr finderqirl when remaking
cr noxonx for the reo fanart

LOGS!

04/15 added ipod scrollbar!03/22 fixed some errors + added a tutorial on how to code tables in pro standard.03/16 added three tutorials that are helpful in carrd making (can be found under links)03/14 added louv crd's scrollbar.03/01 fixed draggable elements link and fixed some broken links.02/21 added under codes a background section.02/13 changed the search icon to arrows that can bring you to a previous page or go forward from your tab history. added a google doc link of symbols, sunny spells font added, videos were added in some tutorials.02/08 new theme for this crd5/19 birthday of mist.drr.ac!

TEXT CODES

float link on hoverwarp textunderlined links on hoverwobble textbouncy texttext/link floats on hoverborder 1border 2gradientbubble textpopshaketiltingwobblyanimated linksmark/buttongrow pulsewebsite button with blinking cursortriple outlinemarquee textglitchneon lightcharacter highlightflickermark stitchjerkyrubber bandtext expandblinkingnews ticker with pixeltext outside of boxscramblemist.drr.ac text shadowsideways bounce textbeaded hearts border

IMAGE CODES

img shake on hoverjellymask crd twitching imagepastel pink lace borderpng blur shadowbrown heart lacerotate & saturate on hovernene's mask batch 1nene's mask batch 2floatingbouncingblurred borderbouncing flip heart slideshowrotate & blur hoverinset borderpaper maskpink ribbonblurredmultiple heartsgigi's gold frameimg tooltipheart maskstar maskrotatingtwitchingglitchrounded imagesfog maskblurred edges rounded imagepurple lace border

MUSIC PLAYERS

NEW! kyomoto crd music playerscm playerimg plays and pauses music on clickharenchi by lovermonthcherry ju mp music player img music playermarquee w pixelcircular spinsimple circledraggable music playerspinning cd music playerramdon's playercutie's playercircle popspeaker music player2000 music playerlippies uwu ai music playercorazon uwu ai music playermusic w gif 1music w gif 2pink ipod music player

SCROLLBOXES

pink flowers borderimg hoverimg shake on hoverhorizontal scrollfile scrollbox cr cyberpinked scrollbox with gif or img as bgsimple borderno borderdouble borderimg bgbow borderlace borderimg bg + lace bordersimple roundedexpand on hoveruneven borderhorizontalbuttonstwo fonts in a scrollboxheart hover revealglowcrossretrowith markjichuwee crd scrollboximg hover to reveal scrollboximg shake hover to reveal scrollboxinset shadow scrollboxscrollbox with gray scrollbar

SCROLLBARS

NEW ipod scrollbar cr b8nadryllouv crd scrollbaritoshi.ju.mp scrollbarinvisible scrollbargradient scrollbarcolor scrollbarretro scrollbar7.css scrollbar7.css scrollbar 2minimal scrollbardouble border scrollbar

SFX ON CLICK

mouse click sfxclick sfxkyomoto crd sfxgame click sfx

MENU CODES

dropdown menudropdown menu #2jake's blur menuestrellita crd menugina crd co menuclaris crd menuheart flip menufolder menu7.css drop down menunubes crd menu

CSS STYLING

7.css98.cssXP.csssystem.csspapercssNES.cssclay.cssTuiCss

BACKGROUND

kyomoto crd bgfalling sakura leaves bgfalling hearts bgstar warp bgcustom fall img bg

MISC CODES

skill barphone cr aicoholicdrinknotepad tabdisable inspect element on all keys • chatango this crd's cbox • slide up blur bg text boxphone cr aicohoidrinkflip carddisable right clickmessage alert cboxtooltipwebsite petmarquee tab titletyping tab titlecute cursorsgirly uwu ai buttonsfairy trail effectwebnekocounter 1counter 2intro animationsishimori crd cboxdraggable elementinset box shadow generatorinset shadowclicksposionabsolute positioningchange text highlight colordisable right click w/ no messageishimori update logimg clicksplosion7.css buttons with blue hover

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/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 {
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 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 codes
you 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.

ABOUT NEO

NEO or KAI it nym prns 21 y.o bigender & seasian filipina. eng/tag ok no dialects pls

MY SOCIALS

mainretrospringcrd accreferralresourcesdiscord servercommission me!

tysm for visiting my rsc crd!