Dr. BR Ambedkar
https://claude.ai/public/artifacts/08c232cc-77e1-496b-96ce-98498819e638
https://claude.ai/public/artifacts/08c232cc-77e1-496b-96ce-98498819e638
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dr. B.R. Ambedkar Jayanti 2026</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Cinzel:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a1a2e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'EB Garamond', serif;
}
.poster {
width: 600px;
height: 800px;
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #0d0d1a 0%, #1a0a2e 40%, #0a1628 100%);
box-shadow: 0 0 80px rgba(0,0,0,0.8);
}
/* Decorative background circles */
.bg-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.bg-circle-1 {
width: 500px; height: 500px;
top: -100px; left: -100px;
background: radial-gradient(circle, rgba(0,102,204,0.12) 0%, transparent 70%);
}
.bg-circle-2 {
width: 400px; height: 400px;
bottom: -80px; right: -80px;
background: radial-gradient(circle, rgba(255,180,0,0.1) 0%, transparent 70%);
}
.bg-circle-3 {
width: 300px; height: 300px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(0,102,204,0.08) 0%, transparent 70%);
}
/* Top decorative band */
.top-band {
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: linear-gradient(90deg, #0066cc, #003399, #ff9900, #003399, #0066cc);
}
/* Ashoka Chakra watermark */
.chakra-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
height: 380px;
opacity: 0.04;
}
/* Header section */
.header {
position: relative;
z-index: 10;
text-align: center;
padding: 28px 20px 10px;
}
.jayanti-label {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 5px;
color: #ffb700;
text-transform: uppercase;
margin-bottom: 6px;
opacity: 0.9;
}
.main-title {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 13px;
letter-spacing: 3px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
margin-bottom: 4px;
}
/* Portrait area */
.portrait-container {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
margin: 10px 0 0;
}
.portrait-frame {
position: relative;
width: 240px;
height: 280px;
}
/* Decorative corner elements */
.portrait-frame::before, .portrait-frame::after {
content: '';
position: absolute;
width: 30px; height: 30px;
border-color: #ffb700;
border-style: solid;
z-index: 2;
}
.portrait-frame::before {
top: -4px; left: -4px;
border-width: 2px 0 0 2px;
}
.portrait-frame::after {
bottom: -4px; right: -4px;
border-width: 0 2px 2px 0;
}
.portrait-inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border: 2px solid rgba(255,183,0,0.3);
}
/* Illustrated portrait using CSS art */
.portrait-art {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #1a3a6e 0%, #0d2550 60%, #071830 100%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
/* Suit/body */
.body-suit {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}
/* Shirt and tie */
.shirt {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 45%;
background: white;
clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
opacity: 0.9;
}
.tie {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 42%;
background: linear-gradient(180deg, #003399, #001166);
clip-path: polygon(20% 0%, 80% 0%, 100% 85%, 50% 100%, 0% 85%);
}
/* Collar */
.collar-left {
position: absolute;
bottom: 42%;
left: calc(50% - 30px);
width: 30px;
height: 20px;
background: white;
clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
opacity: 0.9;
}
.collar-right {
position: absolute;
bottom: 42%;
left: calc(50%);
width: 30px;
height: 20px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
opacity: 0.9;
}
/* Head */
.head {
position: absolute;
top: 30px;
width: 110px;
height: 130px;
background: #8B6914;
border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
}
/* Face shading */
.head::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,200,100,0.15) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
}
/* Hair */
.hair {
position: absolute;
top: 0;
width: 100%;
height: 38%;
background: #1a1a1a;
border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}
/* Side hair */
.hair-side-left {
position: absolute;
top: 15%;
left: -2px;
width: 20%;
height: 30%;
background: #1a1a1a;
border-radius: 0 0 50% 50%;
}
.hair-side-right {
position: absolute;
top: 15%;
right: -2px;
width: 20%;
height: 30%;
background: #1a1a1a;
border-radius: 0 0 50% 50%;
}
/* Ear */
.ear-left {
position: absolute;
top: 40%;
left: -8px;
width: 14px;
height: 20px;
background: #8B6914;
border-radius: 50%;
z-index: 0;
}
.ear-right {
position: absolute;
top: 40%;
right: -8px;
width: 14px;
height: 20px;
background: #8B6914;
border-radius: 50%;
}
/* Eyes */
.eyes {
position: absolute;
top: 42%;
width: 100%;
display: flex;
justify-content: center;
gap: 22px;
}
.eye {
width: 14px;
height: 10px;
background: #1a0a00;
border-radius: 50%;
position: relative;
}
.eye::after {
content: '';
position: absolute;
top: 1px; left: 2px;
width: 5px; height: 5px;
background: #3a3a3a;
border-radius: 50%;
}
/* Eyebrows */
.eyebrow-left {
position: absolute;
top: 36%;
left: 24%;
width: 18px;
height: 3px;
background: #1a1a1a;
border-radius: 2px;
transform: rotate(-3deg);
}
.eyebrow-right {
position: absolute;
top: 36%;
right: 24%;
width: 18px;
height: 3px;
background: #1a1a1a;
border-radius: 2px;
transform: rotate(3deg);
}
/* Nose */
.nose {
position: absolute;
top: 54%;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 14px;
background: rgba(0,0,0,0.15);
border-radius: 50% 50% 60% 60%;
}
/* Mouth */
.mouth {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 8px;
border-bottom: 2.5px solid rgba(0,0,0,0.4);
border-radius: 0 0 50% 50%;
}
/* Glasses */
.glasses {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
width: 80px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
z-index: 5;
}
.glass-left, .glass-right {
width: 30px;
height: 22px;
border: 2px solid rgba(200,160,80,0.9);
border-radius: 40%;
background: rgba(100,180,255,0.08);
}
.glass-bridge {
width: 8px;
height: 2px;
background: rgba(200,160,80,0.9);
margin-top: -10px;
}
/* Glow effect behind portrait */
.portrait-glow {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,80,200,0.15) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
}
/* Gold ring around portrait */
.gold-ring {
position: absolute;
top: -8px; left: -8px; right: -8px; bottom: -8px;
border: 1px solid rgba(255,183,0,0.2);
border-radius: 2px;
pointer-events: none;
z-index: 1;
}
/* Name section */
.name-section {
position: relative;
z-index: 10;
text-align: center;
padding: 18px 30px 0;
}
.dr-prefix {
font-family: 'Cinzel', serif;
font-size: 14px;
color: #ffb700;
letter-spacing: 4px;
margin-bottom: 2px;
}
.name-main {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 42px;
color: #ffffff;
line-height: 1;
letter-spacing: 1px;
text-shadow: 0 0 40px rgba(0,102,255,0.3);
}
.name-main span {
color: #ffb700;
}
.name-full {
font-family: 'EB Garamond', serif;
font-size: 13px;
color: rgba(255,255,255,0.5);
letter-spacing: 2px;
margin-top: 4px;
}
/* Divider */
.divider {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 10px 40px;
}
.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,183,0,0.5), transparent);
}
.divider-diamond {
width: 8px;
height: 8px;
background: #ffb700;
transform: rotate(45deg);
}
/* Date section */
.date-section {
position: relative;
z-index: 10;
text-align: center;
padding: 0 20px;
}
.jayanti-text {
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 22px;
color: #ffffff;
letter-spacing: 4px;
text-transform: uppercase;
}
.date-badge {
display: inline-block;
margin-top: 8px;
padding: 6px 28px;
border: 1px solid rgba(255,183,0,0.4);
background: rgba(255,183,0,0.08);
}
.date-number {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 28px;
color: #ffb700;
letter-spacing: 2px;
}
.date-text {
font-family: 'Cinzel', serif;
font-size: 12px;
color: rgba(255,255,255,0.6);
letter-spacing: 3px;
}
/* Quote */
.quote-section {
position: relative;
z-index: 10;
text-align: center;
padding: 12px 50px 0;
}
.quote-mark {
font-family: 'Playfair Display', serif;
font-size: 48px;
color: rgba(255,183,0,0.3);
line-height: 0.5;
display: block;
margin-bottom: 8px;
}
.quote-text {
font-family: 'EB Garamond', serif;
font-style: italic;
font-size: 14px;
color: rgba(255,255,255,0.65);
line-height: 1.7;
letter-spacing: 0.5px;
}
/* Constitution book icon area */
.icons-row {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
gap: 20px;
padding: 12px 0 0;
}
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.icon-symbol {
width: 36px;
height: 36px;
border: 1px solid rgba(255,183,0,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: rgba(255,183,0,0.05);
}
.icon-label {
font-family: 'EB Garamond', serif;
font-size: 9px;
color: rgba(255,255,255,0.4);
letter-spacing: 1px;
text-transform: uppercase;
}
/* Bottom band */
.bottom-band {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 8px;
background: linear-gradient(90deg, #ff9900, #ffffff, #006600, #ffffff, #ff9900);
}
/* Tricolor accent strip */
.tricolor-strip {
position: absolute;
bottom: 8px; left: 0; right: 0;
height: 3px;
display: flex;
}
.tricolor-strip .t1 { flex: 1; background: #ff9900; }
.tricolor-strip .t2 { flex: 1; background: #ffffff; }
.tricolor-strip .t3 { flex: 1; background: #006600; }
/* Jai bhim text */
.jai-bhim {
position: relative;
z-index: 10;
text-align: center;
padding: 8px 0 20px;
}
.jai-bhim-text {
font-family: 'Cinzel', serif;
font-weight: 900;
font-size: 18px;
letter-spacing: 6px;
color: #ffb700;
text-transform: uppercase;
}
/* Animated glow pulse */
@keyframes pulse-glow {
0%, 100% { opacity: 0.04; }
50% { opacity: 0.08; }
}
.chakra-bg { animation: pulse-glow 4s ease-in-out infinite; }
@keyframes shimmer {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.name-main { animation: shimmer 3s ease-in-out infinite; }
/* Stars decoration */
.stars {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.5; }
}
</style>
</head>
<body>
<div class="poster">
<!-- Background elements -->
<div class="bg-circle bg-circle-1"></div>
<div class="bg-circle bg-circle-2"></div>
<div class="bg-circle bg-circle-3"></div>
<!-- Stars -->
<div class="stars">
<div class="star" style="width:2px;height:2px;top:8%;left:12%;animation-delay:0s;"></div>
<div class="star" style="width:1px;height:1px;top:15%;left:85%;animation-delay:0.5s;"></div>
<div class="star" style="width:2px;height:2px;top:25%;left:6%;animation-delay:1s;"></div>
<div class="star" style="width:1px;height:1px;top:32%;left:90%;animation-delay:1.5s;"></div>
<div class="star" style="width:2px;height:2px;top:70%;left:8%;animation-delay:0.8s;"></div>
<div class="star" style="width:1px;height:1px;top:75%;left:88%;animation-delay:1.2s;"></div>
<div class="star" style="width:2px;height:2px;top:85%;left:15%;animation-delay:0.3s;"></div>
<div class="star" style="width:1px;height:1px;top:18%;left:75%;animation-delay:2s;"></div>
</div>
<!-- Ashoka Chakra SVG watermark -->
<svg class="chakra-bg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="95" fill="none" stroke="#0066cc" stroke-width="3"/>
<circle cx="100" cy="100" r="18" fill="none" stroke="#0066cc" stroke-width="3"/>
<circle cx="100" cy="100" r="10" fill="#0066cc"/>
<!-- 24 spokes -->
<g stroke="#0066cc" stroke-width="1.5">
<line x1="100" y1="22" x2="100" y2="48"/>
<line x1="100" y1="152" x2="100" y2="178"/>
<line x1="22" y1="100" x2="48" y2="100"/>
<line x1="152" y1="100" x2="178" y2="100"/>
<line x1="38.7" y1="38.7" x2="57.4" y2="57.4"/>
<line x1="161.3" y1="161.3" x2="142.6" y2="142.6"/>
<line x1="38.7" y1="161.3" x2="57.4" y2="142.6"/>
<line x1="161.3" y1="38.7" x2="142.6" y2="57.4"/>
<line x1="69.4" y1="23.6" x2="76.7" y2="48.6"/>
<line x1="130.6" y1="176.4" x2="123.3" y2="151.4"/>
<line x1="23.6" y1="69.4" x2="48.6" y2="76.7"/>
<line x1="176.4" y1="130.6" x2="151.4" y2="123.3"/>
<line x1="23.6" y1="130.6" x2="48.6" y2="123.3"/>
<line x1="176.4" y1="69.4" x2="151.4" y2="76.7"/>
<line x1="69.4" y1="176.4" x2="76.7" y2="151.4"/>
<line x1="130.6" y1="23.6" x2="123.3" y2="48.6"/>
<line x1="50.1" y1="50.1" x2="63" y2="63"/>
<line x1="149.9" y1="149.9" x2="137" y2="137"/>
<line x1="50.1" y1="149.9" x2="63" y2="137"/>
<line x1="149.9" y1="50.1" x2="137" y2="63"/>
<line x1="82.6" y1="22.5" x2="85.5" y2="47.9"/>
<line x1="117.4" y1="177.5" x2="114.5" y2="152.1"/>
<line x1="22.5" y1="82.6" x2="47.9" y2="85.5"/>
<line x1="177.5" y1="117.4" x2="152.1" y2="114.5"/>
</g>
</svg>
<!-- Top band -->
<div class="top-band"></div>
<!-- Header -->
<div class="header">
<div class="jayanti-label">135th Birth Anniversary</div>
<div class="main-title">Celebrating the Architect of Indian Constitution</div>
</div>
<!-- Portrait -->
<div class="portrait-container">
<div class="portrait-glow"></div>
<div class="portrait-frame">
<div class="gold-ring"></div>
<div class="portrait-inner">
<div class="portrait-art">
<!-- Background gradient -->
<!-- Body suit -->
<div class="body-suit"></div>
<!-- Shirt -->
<div class="shirt"></div>
<!-- Collar -->
<div class="collar-left"></div>
<div class="collar-right"></div>
<!-- Tie -->
<div class="tie"></div>
<!-- Head -->
<div class="head">
<div class="hair"></div>
<div class="hair-side-left"></div>
<div class="hair-side-right"></div>
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="eyebrow-left"></div>
<div class="eyebrow-right"></div>
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="glasses">
<div class="glass-left"></div>
<div class="glass-bridge"></div>
<div class="glass-right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Name Section -->
<div class="name-section">
<div class="dr-prefix">Dr.</div>
<div class="name-main">B.R. <span>Ambedkar</span></div>
<div class="name-full">Bhimrao Ramji Ambedkar</div>
</div>
<!-- Divider -->
<div class="divider">
<div class="divider-line"></div>
<div class="divider-diamond"></div>
<div class="divider-line"></div>
</div>
<!-- Date section -->
<div class="date-section">
<div class="jayanti-text">Jayanti 2026</div>
<div class="date-badge">
<div class="date-number">14th April</div>
<div class="date-text">Tuesday • 2026</div>
</div>
</div>
<!-- Quote -->
<div class="quote-section">
<span class="quote-mark">"</span>
<div class="quote-text">I measure the progress of a community<br>by the degree of progress which women have achieved.</div>
</div>
<!-- Icons Row -->
<div class="icons-row">
<div class="icon-item">
<div class="icon-symbol">⚖️</div>
<div class="icon-label">Justice</div>
</div>
<div class="icon-item">
<div class="icon-symbol">๐</div>
<div class="icon-label">Constitution</div>
</div>
<div class="icon-item">
<div class="icon-symbol">๐️</div>
<div class="icon-label">Equality</div>
</div>
<div class="icon-item">
<div class="icon-symbol">๐️</div>
<div class="icon-label">Liberty</div>
</div>
</div>
<!-- Jai Bhim -->
<div class="jai-bhim">
<div class="jai-bhim-text">✦ Jai Bhim ✦</div>
</div>
<!-- Tricolor strip -->
<div class="tricolor-strip">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
</div>
<!-- Bottom band -->
<div class="bottom-band"></div>
</div>
</body>
</html>
Comments
Post a Comment