<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merry Christmas & Happy New Year 2025</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Great+Vibes&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
overflow-x: hidden;
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
.snowflake {
position: fixed;
top: -10px;
color: white;
font-size: 1em;
animation: fall linear infinite;
z-index: 1;
opacity: 0.8;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
.container {
position: relative;
z-index: 2;
}
header {
text-align: center;
padding: 100px 20px 60px;
background: linear-gradient(180deg, rgba(15, 32, 39, 0.9) 0%, rgba(15, 32, 39, 0) 100%);
}
h1 {
font-family: 'Dancing Script', 'Great Vibes', cursive;
font-size: 4.5rem;
font-weight: 700;
color: #fff;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5),
0 0 40px rgba(255, 215, 0, 0.3);
margin-bottom: 20px;
letter-spacing: 2px;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5),
0 0 40px rgba(255, 215, 0, 0.3);
}
to {
text-shadow: 0 0 30px rgba(255, 215, 0, 0.8),
0 0 60px rgba(255, 215, 0, 0.5),
0 0 80px rgba(255, 215, 0, 0.3);
}
}
.subtitle {
font-family: 'Dancing Script', cursive;
font-size: 2rem;
font-weight: 500;
color: #f0f0f0;
margin-bottom: 40px;
letter-spacing: 3px;
}
.hero {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 20px;
gap: 60px;
flex-wrap: wrap;
}
.decoration {
width: 250px;
height: 250px;
position: relative;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.tree {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid #2d5016;
position: relative;
margin: 0 auto;
filter: drop-shadow(0 0 20px rgba(45, 80, 22, 0.5));
}
.tree::before {
content: '';
width: 0;
height: 0;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 130px solid #3d6b1f;
position: absolute;
top: -80px;
left: -90px;
}
.tree::after {
content: '';
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 110px solid #4d7f2a;
position: absolute;
top: -130px;
left: -80px;
}
.star {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid gold;
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
animation: twinkle 1s ease-in-out infinite alternate;
}
@keyframes twinkle {
from {
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}
to {
filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1));
}
}
.star::before {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid gold;
position: absolute;
top: 10px;
left: -20px;
transform: rotate(180deg);
}
.cta-section {
text-align: center;
padding: 60px 20px;
}
.cta-button {
display: inline-block;
padding: 20px 50px;
background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
color: white;
text-decoration: none;
font-size: 1.3rem;
font-weight: bold;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(196, 30, 58, 0.4);
transition: all 0.3s ease;
margin: 10px;
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(196, 30, 58, 0.6);
background: linear-gradient(135deg, #d42e48 0%, #a00000 100%);
}
.cta-button.secondary {
background: linear-gradient(135deg, #0f4c81 0%, #003d5c 100%);
box-shadow: 0 10px 30px rgba(15, 76, 129, 0.4);
}
.cta-button.secondary:hover {
box-shadow: 0 15px 40px rgba(15, 76, 129, 0.6);
background: linear-gradient(135deg, #1a5c91 0%, #004d6c 100%);
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
padding: 60px 20px;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 40px;
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.feature-card h3 {
font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
color: #fff;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 15px;
letter-spacing: 0.5px;
}
.feature-card p {
color: #e0e0e0;
line-height: 1.6;
}
footer {
text-align: center;
padding: 40px 20px;
color: #b0b0b0;
background: rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.subtitle {
font-size: 1.2rem;
}
.decoration {
width: 200px;
height: 200px;
}
.cta-button {
padding: 15px 35px;
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🎄 Merry Christmas 🎅</h1>
<p class="subtitle">& Happy New Year 2025 🎊</p>
</header>
<section class="hero">
<div class="decoration">
<div class="tree">
<div class="star"></div>
</div>
</div>
<div style="max-width: 500px; color: white; text-align: center;">
<h2 style="font-family: 'Dancing Script', cursive; font-size: 2.5rem; font-weight: 600; margin-bottom: 20px;">ส่งความสุขปีใหม่</h2>
<p style="font-size: 1.1rem; line-height: 1.8; color: #e0e0e0;">
ขอให้คุณและครอบครัวมีความสุข สุขภาพแข็งแรง
และประสบความสำเร็จในทุกๆ ด้านตลอดปี 2025
</p>
</div>
</section>
<section class="cta-section">
<a href="#" class="cta-button">🎁 รับของขวัญพิเศษ</a>
<a href="#" class="cta-button secondary">✨ ดูโปรโมชั่น</a>
</section>
<section class="features">
<div class="feature-card">
<div class="feature-icon">🎉</div>
<h3>ฉลองสุดพิเศษ</h3>
<p>โปรโมชั่นสุดคุ้มรับเทศกาลปีใหม่ ลดสูงสุด 50%</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎁</div>
<h3>ของขวัญมากมาย</h3>
<p>รับของขวัญฟรีทุกการสั่งซื้อ พร้อมบริการห่อของขวัญสวยงาม</p>
</div>
<div class="feature-card">
<div class="feature-icon">🚚</div>
<h3>จัดส่งรวดเร็ว</h3>
<p>จัดส่งฟรีทั่วประเทศ รับประกันส่งถึงก่อนวันคริสต์มาส</p>
</div>
</section>
<footer>
<p>© 2024-2025 | ขอให้มีความสุขมากๆ ในเทศกาลนี้</p>
</footer>
</div>
<script>
// สร้างเอฟเฟกต์หิมะตก
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 5 + 's';
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 8000);
}
setInterval(createSnowflake, 200);
// เอฟเฟกต์เมื่อคลิกปุ่ม
document.querySelectorAll('.cta-button').forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
// สร้างดาวกระจาย
for(let i = 0; i < 20; i++) {
const star = document.createElement('div');
star.innerHTML = '⭐';
star.style.position = 'fixed';
star.style.left = e.clientX + 'px';
star.style.top = e.clientY + 'px';
star.style.pointerEvents = 'none';
star.style.fontSize = Math.random() * 20 + 10 + 'px';
star.style.transition = 'all 1s ease-out';
document.body.appendChild(star);
setTimeout(() => {
star.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px)`;
star.style.opacity = '0';
}, 10);
setTimeout(() => star.remove(), 1000);
}
});
});
</script>
</body>
</html>