under construction.

Text

FAYE ★

dividers + pixels + codes + more ₊˚.༄

last updated june 9th, adding new codes, pixels, and dividers soon




shaking image
double borders (images)
text borders
pop text code
music box
text outside of container
blur link
scroll text box
floating background
double border for containers
peeping body


(goes in embed, both carrd pro $19 and $49 can use)
<style>
img:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>

($49 dollar carrd pro, can go in images and containers!)
.double5 {
border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
}
(goes in settings)

($19 carrd pro can use!)
<head>
<style>
#image01 {
border: 2px solid #ffffff;
width: 100px;
height: 100px;
margin: auto;
}
</style>
</head>
(this one goes into embed!)

(look at the number of the image in settings, for example #image02! change it to each photo you want a double border with!)

(you can also change how you want the border to be, you can replace the “solid” with “double”)

($49 carrd pro only, goes into settings)

.strokeme:
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
or
-webkit-text-stroke: 1px black;

($19 carrd pro can use! goes into embed)

<head>
<style>
h1 {
text-shadow: -1px 0 #7c5cc6, 0 1px #7c5cc6, 1px 0 #7c5cc6, 0 -1px #7c5cc6;
}
</style>
</head>

(this one is a bit confusing so i’ll explain, with the text you want to use to have borders/stroke you need to change the text to “site heading” in order for this to work, if you have more than 1 text you want double borders for, change it depending on their number, so like h2, h3, etc! you can adjust the settings since it might not fit the whole image!)


(both carrd pro can use, goes into embed)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
<style>
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
--Circle-Size:38px;
--Progress-Border-Size:2px;
--Progress-Empty:#eee;
--Progress-Fill:#8AB1FF;
--Player-Background:#8AB1FF;
--Play-Pause-Buttons-Size:14px;
--Play-Pause-Buttons-Color:#ffffff;
--Player-Text-Margin:16px;

--Song-Name-Font-Size:10px;
--Song-Name-Color:#8AB1FF;

--Artist-Name-Font-Size:11px;
--Artist-Name-Color:#8AB1FF;
}

#glenplayer07 {
position:fixed;
bottom:0;margin-bottom:30px;
left:0;margin-left:30px;
z-index:99;
}

.flamingo {
display:flex;
align-items:center;
}

.circleofdeath {
width:var(--Circle-Size);
height:var(--Circle-Size);
border-radius:100%;
overflow:hidden;
}

.tinfoil {
width:var(--Circle-Size);
height:var(--Circle-Size);
background:var(--Progress-Empty);
border-radius:100%;
}

.oven {
background:var(--Progress-Fill);
}

.oliveoil {
width:100%;
height:100%;
}

.crust {
position:absolute;
top:0;
display:flex;
align-items:center;
justify-content:center;
width:var(--Circle-Size);
height:var(--Circle-Size);
}

.cherry {
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
background:var(--Player-Background);
border-radius:100%;
cursor:pointer;
z-index:1;
}

.music-controls {display:flex;align-items:center}

.music-controls .material-icons {
font-size:var(--Play-Pause-Buttons-Size);
color:var(--Play-Pause-Buttons-Color);
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-info {
margin-left:var(--Player-Text-Margin);
line-height:1em;
}

.song-name {
font-family:arial;
font-size:var(--Song-Name-Font-Size);
text-transform:uppercase;
letter-spacing:0.3px;
color:var(--Song-Name-Color);
}

.artist-name {
margin-top:3px;
font-family:arial;
font-size:var(--Artist-Name-Font-Size);
letter-spacing:0.3px;
color:var(--Artist-Name-Color);
}
</style>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer07">
<div class="flamingo">
<div class="circleofdeath">
<div class="tinfoil">
<div class="oliveoil"></div>
</div>
<div class="crust">
<div class="cherry">
<div class="music-controls">
<i class="material-icons playy">play_arrow</i>
<i class="material-icons pausee">pause</i>
</div>
</div><!--cherry-->
</div><!--crust-->
</div><!--circleofdeath-->

<div class="music-info">
<div class="song-name"> INSERT SONG NAME ⚠️</div>
<div class="artist-name"> INSERT ARTIST ⚠️</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="ENTER DROPBOX AUDIO ⚠️"audio"></audio>
<!----end music player---->

(this one is really confusing so i’ll explain, you’re going to need dropbox and a song link from youtube, go to this website to download the link, then make a folder in dropbox. after the download is done put it in dropbox specifically the folder you just made, when you see it in your folder click the three dots and click/press share then copy link! once you get the link replace the ENTER DROPBOX AUDIO ⚠️ in the code with the link, after that you’re gonna see www. in the link, replace it with dl. once you do that, you can adjust the settings and then your music box will be there once you publish your carrd!)


(both carrd pro can use, goes in embed)

<head>
<style>
yass {
position: absolute;
left: 0;
top: -1em;
z-index: 1000;
}
</style>
</head>
<yass>
<div id="fuck">TEXT</div>
</yass>

(you can also adjust the settings of it, for example to change the size you would make have <font> at the beginning then under it would be <font size="6"> then at the end of the code you would put </font> you can also change the color, font, weight, and the position of the code. changing the color would be: <font> at the start, if you already have one <font> at the beginning no need to add another one! then below have <font color="#htmlcolor"> them at the bottom it would be the same </font> or you would put that there if you didn’t have it already. for changing the font you just paste
<head>
<style>
meow {
font-family: Times New Roman;
}
</style>
</head>
before all the other coding)


miscellaneous types of resources!
contact me for help or questions at @natsutte on insta
mf2fm website
emojibank
color selector
carrd fonts
cute symbols + kaomoji
remove bg
carrd backgrounds
free javascript codes
DID/OSDD self help masterlist
giftcities
BPD Resources


(fine for both $19 and $49 carrd pro, goes in embed)

<div style="width:135px;height:50px;overflow:scroll;padding:2px; font-size:0.8em;color: #fff; font-weight:bold;text-shadow: -1px 0 #Bab086, 0 1px #Bab086, 1px 0 #Bab086, 0 -1px #Bab086, 0 0;">
TEXT GOES HERE! </div>

(you can adjust the settings and remove the text outline too if you want!)

(only for $49 carrd pro, goes in text settings)

div {
background-color: transparent;
width: 150px;
height: 150px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}


(like this)

paste this code into embed, when it says “var charc=‘♡’;” replace the heart with any other symbol you want, you can change the color of the code too!

DOUBLE BORDER CONTAINER

for pro plus only:

.double5 {
border-top: 4px double #000000;
border-left: 4px double #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
}
(goes in settings)

for both pro standard and pro plus:

<style>
#embed07 {
border:6.9px double #ffffff
}
</style>

(goes into embed, change the number depending on the id number in settings of the container)

PEEPING BODY CODE

Copy this code and replace the ''src="https://www.javascriptfreecode.com/uploads/pictures/chris.png" with the image you want. You can use dropbox or imgur to copy the link of the photo you want to use for the code! Available for both pro standard and pro plus.