Welcome to Lovespace!
welcome to LoveSpace, here you'll find my site archive, coding resources, graphics and other various websites that will help prettify your site. click on the image to know more about me. for queries, reach out to me via retrospring. happy browsing! ♡((^▽≦♥)
about me
hi, i'm fran and i'm the creator of this carrd. if you're interested in upgrading or renewing your carrd plan please consider using my referral code fiorefae or link try.carrd.co/fiorefae it gives me 30% of your purchase and it won't cost you anything thank you!links️️️️ commissions ⬥ retrospring ⬥ twitter ⬥ ko-fi ⬥ we heart it ⬥ pinterest
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
Sparkle ⬥ bubblegum ⬥ capri ⬥ Connie ⬥ xkgZ ⬥ tebal ⬥ Jogan ⬥ Xiomara ⬥ cherish ⬥ Heart ⬥ PC98 ⬥ LittleDevil ⬥ iCDG ⬥ silver ⬥ Magica♥ ⬥ pumpkin ⬥ Shalma ⬥ stylish ⬥ Jua♡ ⬥ enoki ⬥ Qotx6 ⬥ Winter ⬥ gingies ⬥ crouwel ⬥ Coiny ⬥ dahlia ⬥ Bandar ⬥ Sweety ⬥ wonderland ⬥ kinkie ⬥ segoe ui ⬥ pixel ms-serif ⬥ valentine ⬥ Pixelpoiiz ⬥ magical ⬥ Magic ⬥ funkhouse ⬥ stay work ⬥ beagris ⬥ pixeloid ⬥ Musketeer ⬥ vaca ♡ ⬥ satoshi ⬥ amsterdam ⬥ sniglet ⬥ Barbie ⬥ Aprila ⬥ Qefila ⬥ ghakity
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 {
applying the font ( pro standard )
font-family: gingies;
src: url(https://dl.dropbox.com/s/0o4tnfa6cxu3gnm/gingies.otf);
}
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.