- Joined
- Mar 5, 2024
- Messages
- 164
Hey,
I created this a few days ago—maybe it can help someone.
I created this a few days ago—maybe it can help someone.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Congratulations - You're a Winner! 🎉</title>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(to bottom, #2563eb, #1d4ed8);
color: white;
padding: 2rem 1rem;
}
.confetti-overlay {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1s;
}
.confetti-overlay.show {
opacity: 1;
}
.confetti-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&q=80');
background-size: cover;
opacity: 0.2;
}
.main-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(1rem);
transition: all 1s;
}
.main-content.show {
opacity: 1;
transform: translateY(0);
}
.header-icon {
margin-bottom: 1.5rem;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
h1 {
font-size: 2.5rem;
font-weight: bold;
text-align: center;
margin-bottom: 1rem;
color: #fde047;
}
.prize-card {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
border-radius: 1rem;
padding: 1.5rem;
width: 100%;
max-width: 24rem;
margin-bottom: 2rem;
}
.prize-title {
font-size: 1.5rem;