Happy Friendship Day!
:root{
--cream:#FFF6E8;
--sun:#FFC93C;
--coral:#FF6B5B;
--teal:#1E7A6F;
--ink:#2B2318;
--paper:#FFFFFF;
--pink:#FF9ECF;
--purple:#9B8CFF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{
height:100%;
}
html,body{
font-family:'Space Grotesk', sans-serif;
color:var(--ink);
}
body{
position:relative;
min-height:100vh;
min-height:100dvh;
display:flex;
align-items:flex-start;
justify-content:center;
padding:40px 20px;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
background:linear-gradient(120deg, #FFE8B8, #FFC1D9, #C6E7FF, #FFE8B8);
background-size:400% 400%;
animation:gradientShift 14s ease infinite;
}
@keyframes gradientShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* floating emoji layer */
.emoji-field{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
overflow:hidden;
}
.emo{
position:absolute;
bottom:-60px;
font-size:26px;
opacity:0.85;
animation-name:rise;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
filter:drop-shadow(0 2px 2px rgba(0,0,0,0.08));
}
@keyframes rise{
0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
10%{ opacity:0.9; }
50%{ transform:translateY(-55vh) translateX(20px) rotate(180deg); }
90%{ opacity:0.7; }
100%{ transform:translateY(-115vh) translateX(-15px) rotate(360deg); opacity:0; }
}
/* sparkle twinkles */
.sparkle{
position:fixed;
z-index:0;
font-size:20px;
animation:twinkle 2.4s ease-in-out infinite;
pointer-events:none;
}
@keyframes twinkle{
0%,100%{ opacity:0.15; transform:scale(0.8); }
50%{ opacity:1; transform:scale(1.15); }
}
.card{
position:relative;
z-index:2;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(6px);
max-width:460px;
width:100%;
border-radius:28px;
padding:36px 30px 34px;
box-shadow: 0 30px 60px -20px rgba(43,35,24,0.35), 0 0 0 3px var(--ink);
text-align:center;
animation:cardIn 0.9s cubic-bezier(.2,.9,.25,1.3) both;
}
@keyframes cardIn{
0%{ opacity:0; transform:translateY(40px) scale(0.9) rotate(-2deg); }
100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}
.eyebrow{
display:inline-block;
background:var(--sun);
color:var(--ink);
font-weight:700;
font-size:13px;
letter-spacing:0.12em;
text-transform:uppercase;
padding:6px 14px;
border-radius:999px;
border:2px solid var(--ink);
transform:rotate(-3deg);
margin-bottom:18px;
animation:pulseTag 1.8s ease-in-out infinite;
}
@keyframes pulseTag{
0%,100%{ transform:rotate(-3deg) scale(1); }
50%{ transform:rotate(-3deg) scale(1.06); }
}
h1{
font-family:'Baloo 2', cursive;
font-size:clamp(28px, 8vw, 40px);
line-height:1.08;
color:var(--coral);
-webkit-text-stroke:1px var(--ink);
margin-bottom:22px;
}
.polaroid{
background:var(--paper);
border:3px solid var(--ink);
border-radius:10px;
padding:10px 10px 6px;
display:inline-block;
transform:rotate(-4deg);
box-shadow: 8px 10px 0 var(--sun);
margin-bottom:26px;
animation:wiggle 5s ease-in-out infinite;
}
@keyframes wiggle{
0%,100%{ transform:rotate(-4deg); }
50%{ transform:rotate(-1deg); }
}
.polaroid img{
display:block;
width:100%;
max-width:320px;
height:280px;
object-fit:cover;
border-radius:4px;
}
.polaroid .caption{
font-family:'Baloo 2', cursive;
font-size:15px;
color:var(--teal);
padding-top:8px;
}
.wish{
font-size:16.5px;
line-height:1.6;
color:var(--ink);
margin-bottom:24px;
}
.wish b{
color:var(--teal);
}
.tag{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Baloo 2', cursive;
font-size:17px;
background:var(--teal);
color:var(--cream);
padding:10px 22px;
border-radius:999px;
border:2px solid var(--ink);
transform:rotate(2deg);
animation:bounceTag 2.2s ease-in-out infinite;
}
@keyframes bounceTag{
0%,100%{ transform:rotate(2deg) translateY(0); }
50%{ transform:rotate(2deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
.emo, .sparkle, .polaroid, body{ animation:none !important; }
}
/* intro screen */
.intro{
position:fixed;
inset:0;
z-index:10;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:30px;
overflow-y:auto;
background:linear-gradient(135deg, #FFD9A0, #FF9ECF, #9B8CFF);
background-size:300% 300%;
animation:gradientShift 8s ease infinite;
transition:opacity 0.6s ease, visibility 0.6s ease;
}
.intro.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.intro-emoji{
font-size:64px;
margin-bottom:18px;
animation:swing 1.6s ease-in-out infinite;
}
@keyframes swing{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
.intro h2{
font-family:'Baloo 2', cursive;
font-size:clamp(24px, 7vw, 34px);
color:var(--ink);
-webkit-text-stroke:0.6px var(--ink);
margin-bottom:10px;
line-height:1.2;
}
.intro p{
font-size:15.5px;
color:var(--ink);
margin-bottom:26px;
max-width:320px;
}
.timer-ring{
position:relative;
width:96px;
height:96px;
display:flex;
align-items:center;
justify-content:center;
}
.timer-ring svg{
position:absolute;
inset:0;
transform:rotate(-90deg);
}
.timer-ring circle{
fill:none;
stroke-width:8;
}
.timer-ring .bg{
stroke:rgba(43,35,24,0.15);
}
.timer-ring .fg{
stroke:var(--coral);
stroke-linecap:round;
stroke-dasharray:264;
stroke-dashoffset:0;
animation:countdown 5s linear forwards;
}
@keyframes countdown{
from{ stroke-dashoffset:0; }
to{ stroke-dashoffset:264; }
}
.timer-num{
font-family:'Baloo 2', cursive;
font-size:30px;
font-weight:700;
color:var(--ink);
}
.main-screen{
opacity:0;
transition:opacity 0.7s ease;
}
.main-screen.show{
opacity:1;
}
@media (max-width: 420px){
body{ padding:24px 14px; }
.card{ padding:28px 20px 26px; border-radius:22px; }
.polaroid img{ height:220px; max-width:100%; }
.wish{ font-size:15px; }
h1{ margin-bottom:16px; }
.intro-emoji{ font-size:52px; }
.intro h2{ margin-bottom:8px; }
.intro p{ font-size:14px; margin-bottom:20px; }
.timer-ring{ width:84px; height:84px; }
.timer-ring svg{ width:84px; height:84px; }
}
@media (max-width: 360px){
.polaroid img{ height:190px; }
.wish{ font-size:14px; }
h1{ font-size:26px; }
.tag{ font-size:15px; padding:8px 16px; }
}
😏
Open this with akiller smile 💃🏼
Something's loading for you... get ready.
5
Friendship Day Alert 🚨
Happy FriendshipDay, Buddy!
exhibit A: full chaos, no regrets
Happy Friendship Day! 🤜🤛❤️
Our bhaichara is proof that two idiots are always better than one. 😂
Face se shareef, kaam se lafanga. 😌😈
Thanks for always being there through all the laughs, madness, and unforgettable memories. ❤️
Bas ekta meye khuje de... Bhagwan rakhuk toke dudhe-bhate! 😂🍻
Ar promise korchi, ebar theke Poulomi dir hari duto amra ektu beshi korei nojor debo. 🤣👀
Anyway, always slay with your positive energy and your genuinely good heart. Never change, bro—stay the amazing person you are. 💃🏼✨❤️
🤝 Dost hi toh hai, no cap
// countdown + transition
let count = 5;
const timerNum = document.getElementById('timerNum');
const introScreen = document.getElementById('introScreen');
const mainScreen = document.getElementById('mainScreen');
const countdownInterval = setInterval(() => {
count--;
if (count > 0){
timerNum.textContent = count;
} else {
clearInterval(countdownInterval);
introScreen.classList.add('hide');
mainScreen.classList.add('show');
}
}, 1000);
const emojis = ["🎉","✨","💛","🤝","🎈","🍕","😂","🔥","🌟","🥳","💫","🤙","❤️","🤜","🤛","😈","🍻"];
const field = document.getElementById('emojiField');
const total = 36;
for (let i = 0; i < total; i++){
const span = document.createElement('span');
span.className = 'emo';
span.textContent = emojis[Math.floor(Math.random()*emojis.length)];
const left = Math.random()*100;
const duration = 8 + Math.random()*10;
const delay = Math.random()*10;
const size = 18 + Math.random()*22;
span.style.left = left + 'vw';
span.style.animationDuration = duration + 's';
span.style.animationDelay = '-' + delay + 's';
span.style.fontSize = size + 'px';
field.appendChild(span);
}
// confetti burst on load
const burst = ["🎉","✨","🎊","❤️","💛","🤜","🤛"];
for (let i = 0; i < 30; i++){
const c = document.createElement('span');
c.className = 'emo';
c.textContent = burst[Math.floor(Math.random()*burst.length)];
c.style.left = (Math.random()*100) + 'vw';
c.style.bottom = (-20 - Math.random()*40) + 'px';
c.style.fontSize = (16 + Math.random()*20) + 'px';
c.style.animationDuration = (2 + Math.random()*2) + 's';
c.style.animationDelay = (Math.random()*0.5) + 's';
c.style.animationIterationCount = '1';
field.appendChild(c);
}
// twinkling sparkles scattered around
const sparkles = ["✦","✧","★","☆"];
for (let i = 0; i < 14; i++){
const s = document.createElement('span');
s.className = 'sparkle';
s.textContent = sparkles[Math.floor(Math.random()*sparkles.length)];
s.style.left = (Math.random()*100) + 'vw';
s.style.top = (Math.random()*100) + 'vh';
s.style.animationDelay = (Math.random()*2.4) + 's';
s.style.color = ['#FFC93C','#FF6B5B','#9B8CFF','#1E7A6F'][Math.floor(Math.random()*4)];
document.body.appendChild(s);
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment