Happy Maha Shivratri Greeting Card Animated Pure HTML & CSS Page
In this step-by-step tutorial, learn how to build an animated Happy Maha Shivratri Greeting Card using 100% Pure HTML5 and CSS3—completely without JavaScript, external image assets, or third-party links!
ЁЯМЯ Key Project Features:
Dynamic Tricolor Gradient Background: Uses a continuous CSS linear gradient animation (
@keyframes gradientShift) that shifts seamlessly between saffron, white, and green tones.Pulsing Glowing Om (реР) Centerpiece: Styled with multi-layered CSS drop-shadows and breathing scale transformations to create a spiritual glow.
Glassmorphism Dark Card: Features a semi-transparent backdrop (
rgba), gold dashed border accents, and high-contrast typography.Gold Gradient Text & Badge: Uses background text clipping (
-webkit-background-clip: text) for gold metallic headings alongside a clean || реР рдирдоः рд╢िрд╡ाрдп || mantra badge.100% Offline & Pure CSS: Single-file code requiring zero external CDN scripts or JS logic—lightweight, responsive, and easy to customize!
This project is ideal for beginner-to-intermediate web design students wanting to practice modern CSS layouts, text gradients, keyframe animations, and festive greeting web pages!
Don't forget to Like, Share, and Subscribe to Computer Soft Skills for more creative coding tutorials!
<!-- WELCOME ALL OF YOU ON COMPUTER SOFT SKILLS YT CHANNEL ------>
<!-- Complete, single-file HTML & CSS code to wish Happy Maha Shivratri ------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Maha Shivratri</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
/* Indian Tricolor Background (Saffron -> White -> Green) */
background: linear-gradient(135deg,
#FF9933 0%,
#FFB366 25%,
#FFFFFF 50%,
#85E085 75%,
#138808 100%
);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite alternate;
}
/* Animated movement for the tricolor background */
@keyframes gradientShift {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
/* ======= MAIN CARD ======= */
.card {
position: relative;
background: rgba(13, 17, 23, 0.85); /* Dark transparent backdrop */
border: 2px solid rgba(255, 215, 0, 0.5);
border-radius: 20px;
padding: 50px 40px;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
0 0 30px rgba(255, 153, 51, 0.3);
max-width: 550px;
width: 90%;
z-index: 1;
}
/* Decorative Gold Border Accent */
.card::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px dashed rgba(255, 215, 0, 0.4);
border-radius: 15px;
pointer-events: none;
}
/* ======= OM LOGO ======= */
.om-container {
position: relative;
margin: 0 auto 20px auto;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.om-symbol {
font-family: Georgia, 'Times New Roman', serif;
font-size: 95px;
font-weight: bold;
color: #FF9933;
text-shadow:
0 0 10px #FF9933,
0 0 20px #FF9933,
0 0 40px #FF6600;
animation: pulseGlow 2.5s infinite alternate ease-in-out;
}
@keyframes pulseGlow {
0% {
transform: scale(1);
filter: drop-shadow(0 0 10px rgba(255, 153, 51, 0.6));
}
100% {
transform: scale(1.08);
filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9));
}
}
/* ======= TYPOGRAPHY ======= */
.subtitle {
font-size: 1.1rem;
letter-spacing: 5px;
color: #ffd700;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 800;
}
.title {
font-family: Impact, 'Arial Black', sans-serif;
font-size: 2.8rem;
line-height: 1.2;
letter-spacing: 2px;
margin-bottom: 15px;
/* Gold Gradient Text */
background: linear-gradient(180deg, #FFFFFF 0%, #FFD700 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}
.divider {
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, #FFD700, transparent);
margin: 20px auto;
}
.wishes {
color: #e0e0e0;
font-size: 1.05rem;
line-height: 1.8;
font-weight: 400;
}
.mantra {
margin-top: 25px;
font-family: 'Arial Unicode MS', 'Segoe UI', sans-serif;
font-size: 1.4rem;
font-weight: bold;
color: #138808;
background: rgba(255, 255, 255, 0.95);
padding: 8px 25px;
border-radius: 50px;
display: inline-block;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="card">
<!-- Om Logo with Glowing Effect -->
<div class="om-container">
<div class="om-symbol">реР</div>
</div>
<!-- Greeting Content -->
<div class="subtitle">HAR HAR MAHADEV</div>
<div class="title">HAPPY MAHA SHIVRATRI</div>
<div class="divider"></div>
<p class="wishes">
May Lord Shiva shower his divine blessings upon you and your family.
May this auspicious night bring peace, health, and eternal prosperity into your life.
</p>
<!-- Sacred Mantra Badge -->
<div class="mantra">
|| реР рдирдоः рд╢िрд╡ाрдп ||
</div>
</div>
</body>
</html>
