CSS
https://www.cursors-4u.com/nature/p6
HTML
<iframe src="https://jspaint.app" width="100%" height="100%"></iframe>
https://letterboxd-embed.timcieplowski.com/
https://www.halloftarot.com/widget/?utm_source=tarot-widget&utm_medium=blogspot.com
https://www.cbox.ws/index (Create a profile, YOU DO NOT HAVE TO PAY, then customize, select get embed code, and finally copy and paste!)
https://www.glitter-graphics.com/gifs/flowers/1vhd-mini-flowers
Go to the playlist you wish to add, hover over share, click embed playlist, then copy that code into the box.
<style>
#falling-leaves {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 999999;
}
.falling-leaf {
position: absolute;
top: -60px;
width: 22px;
height: 35px;
background: #398044;
border-radius: 0 100% 0 100%;
transform-origin: center;
opacity: 0.85;
animation: leaf-fall linear infinite;
}
/* Leaf vein */
.falling-leaf::before {
content: "";
position: absolute;
width: 1px;
height: 80%;
background: rgba(255,255,255,0.4);
top: 10%;
left: 50%;
transform: rotate(-35deg);
}
/* Falling animation */
@keyframes leaf-fall {
0% {
transform: translate3d(0, -60px, 0) rotate(0deg);
}
25% {
transform: translate3d(45px, 25vh, 0) rotate(100deg);
}
50% {
transform: translate3d(-35px, 50vh, 0) rotate(200deg);
}
75% {
transform: translate3d(45px, 75vh, 0) rotate(280deg);
}
100% {
transform: translate3d(-20px, 110vh, 0) rotate(360deg);
}
}
</style>
<div id="falling-leaves"></div>
<script>
(function() {
const container = document.getElementById("falling-leaves");
if (!container) return;
const colors = [
"#174d26",
"#286b32",
"#398044",
"#559b4d",
"#75ad55",
"#a0bd68"
];
const leafCount = 13;
for (let i = 0; i < leafCount; i++) {
const leaf = document.createElement("div");
leaf.className = "falling-leaf";
leaf.style.left = Math.random() * 100 + "%";
leaf.style.width = (12 + Math.random() * 20) + "px";
leaf.style.height = (20 + Math.random() * 25) + "px";
leaf.style.background =
colors[Math.floor(Math.random() * colors.length)];
leaf.style.animationDuration =
(7 + Math.random() * 12) + "s";
leaf.style.animationDelay =
(-Math.random() * 20) + "s";
container.appendChild(leaf);
}
})();
</script>
- CD player: (LOOK IN THE CODE FOR INSTRUCTIONS. USE https://www.image2url.com/ FOR ALBUM COVER and https://ytmp3.nz/ FOR SONG AUDIO)
<!doctype html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Crafty+Girls&display=swap');
.cd-player-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 50px;
}
.player-wrapper {
position: relative;
width: 320px;
height: 200px;
cursor: pointer;
}
.cd-disc {
position: absolute;
top: 0;
left: 135px;
width: 170px;
height: 170px;
border-radius: 50%;
overflow: hidden;
border: 0px solid #333;
box-shadow: 0 0px 0 0px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.cd-disc img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cd-disc::after {
content: '';
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: #ffffff;
border: 3px solid #ccc;
border-radius: 50%;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}
.album-cover {
position: absolute;
top: 0;
left: 25px;
width: 170px;
height: 170px;
z-index: 2;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
border-radius: 4px;
overflow: hidden;
}
.album-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.click-text {
font-family: 'Emilys Candy', cursive;
font-size: 15px;
color: #654321;
letter-spacing: 0.5px;
margin-top: -40px;
margin-right: 120px;
}
.spinning {
animation: spin 4s linear infinite;
animation-play-state: paused;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="cd-player-container">
<div class="player-wrapper">
<!-- CD Disc -->
<div class="cd-disc spinning" id="cdDisc">
<img src="https://www.image2url.com/r2/default/images/1790955351958-b1506311-bd3f-4426-8a6b-0080d98dc7f2.png" alt="CD Disc" />
</div>
<!-- Album Cover -->
<div class="album-cover">
<img src="INPUT ALBUM COVER URL HERE" alt="Album Cover" />
</div>
</div>
<div class="click-text">Click to play!</div>
<audio id="audioSource" src="INPUT AUDIO URL HERE" preload="auto"></audio>
</div>
<script>
const audio = document.getElementById('audioSource');
const disc = document.getElementById('cdDisc');
// Click anywhere on the document to toggle play/pause
document.addEventListener('click', () => {
if (audio.paused) {
audio.play();
disc.style.animationPlayState = 'running';
} else {
audio.pause();
disc.style.animationPlayState = 'paused';
}
});
</script></!doctype>
- Current Status (Change only the underlined part of code)
<div class="status-badge">
<div class="badge-header">Current Status 🏷️</div>
<div class="status-item"><b>Mood:</b> Friendly☺️</div>
<div class="status-item"><b>Watching:</b> Bobs Burgers</div>
<div class="status-item" style="border:none;"><b>Listening:</b> Glee Cast</div>
</div>
<style>
.status-badge {
width: 160px;
padding: 10px;
background: #fff7f2;
border: 2px dashed #9caf78;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 11px;
margin: 0 auto;
box-shadow: 3px 3px 0px #c9d8a7;
}
.badge-header {
font-weight: bold;
color: #d86f7b;
font-size: 12px;
margin-bottom: 8px;
text-align: center;
border-bottom: 1px solid #c9d8a7;
padding-bottom: 4px;
}
.status-item {
padding: 4px 0;
color: #4f5f3a;
border-bottom: 1px dotted #c9d8a7;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.status-item b {
color: #c85f70;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Quicksand:wght@400;600&display=swap');
.compliment-box {
width: calc(70% - 14px);
max-width: 300px;
box-sizing: border-box;
margin: 16px auto;
padding: 22px 16px 25px;
text-align: center;
background: #677423;
border: 3px solid #8a5d3d;
border-radius: 26px;
box-shadow: 8px 9px 0 #5a3e29;
font-family: 'Quicksand', sans-serif;
color: #f1ece2;
}
.compliment-title {
margin: 0 0 14px;
text-align: center;
font-family: 'Emilys Candy', cursive;
font-size: 28px;
line-height: 1.05;
color: #f1ece2;
text-shadow: 2px 2px 0 #8a5d3d;
}
.compliment-subtitle {
max-width: 255px;
margin: 0 auto 18px;
font-size: 14px;
line-height: 1.45;
color: #bbc191;
}
.compliment-message {
min-height: 58px;
box-sizing: border-box;
margin: 0 auto 18px;
padding: 14px 12px;
display: flex;
align-items: center;
justify-content: center;
background: #f1ece2;
border: 2px dashed #bbc191;
border-radius: 18px;
box-shadow: inset 0 0 0 4px #bbc191;
color: #5a3e29;
font-size: 16px;
line-height: 1.4;
}
.compliment-button {
width: auto;
max-width: 100%;
box-sizing: border-box;
padding: 11px 18px;
background: #bbc191;
border: 2px solid #5a3e29;
border-radius: 999px;
box-shadow: 0 5px 0 #5a3e29;
color: #5a3e29;
font-family: 'Quicksand', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease,
background 0.15s ease;
}
.compliment-button:hover {
background: #f1ece2;
transform: translateY(-2px);
box-shadow: 0 7px 0 #5a3e29;
}
.compliment-button:active {
transform: translateY(4px);
box-shadow: 0 1px 0 #5a3e29;
}
.compliment-sparkle {
display: inline-block;
animation: complimentSparkle 0.4s ease;
}
@keyframes complimentSparkle {
0% {
opacity: 0;
transform: scale(0.85);
}
70% {
transform: scale(1.04);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
<div class="compliment-box">
<div class="compliment-title">
a<br />
compliment<br />
for you ♡
</div>
<div class="compliment-subtitle">
filling ur cup with sweetness
</div>
<div class="compliment-message" id="complimentMessage">
click the button for a sweet little message!
</div>
<button
class="compliment-button"
type="button"
onclick="showRandomCompliment()"
>
give me a compliment
</button
></div>
<script>
const compliments = [
"you're literally so cute",
"your smile is contagious",
"your outfit eats every time",
"you have such a kind heart",
"you're doing better than you think",
"you make people feel comfortable",
"you have amazing energy",
"you're genuinely one of a kind",
"you deserve good things",
"you're so easy to love",
"you make everything more fun",
"you're stronger than you realize",
"you have such a beautiful personality",
"you're someone people can count on",
"you bring good vibes wherever you go",
"you're allowed to be proud of yourself",
"you're more talented than you give yourself credit for",
"you make a difference just by being you",
"you're doing an amazing job",
"you're loved more than you know"
];
let previousCompliment = -1;
function showRandomCompliment() {
const messageBox = document.getElementById("complimentMessage");
let randomIndex;
do {
randomIndex = Math.floor(Math.random() * compliments.length);
} while (
randomIndex === previousCompliment &&
compliments.length > 1
);
previousCompliment = randomIndex;
messageBox.innerHTML =
'<span class="compliment-sparkle">' +
compliments[randomIndex] +
"</span>";
}
</script>
<iframe width="200" height="150" frameborder="0" src="https://cdn.abowman.com/widgets/fish/fish.html?up_backgroundColor=f0f7ff&up_numFish=6&up_fishColor1=f5dad6&up_fishColor2=c1e6bc&up_fishColor3=bee4f4&up_fishColor4=589367&up_fishColor5=906e47&up_fishColor6=f45540&up_fishColor7=f45540&up_fishColor8=f45540&up_fishColor9=f45540&up_fishColor10=f45540"></iframe>
No comments:
Post a Comment