Created
April 27, 2026 08:59
-
-
Save davea/bc5fbd848a35c8b6895124b1bffdd5d8 to your computer and use it in GitHub Desktop.
HTML example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>For Seyhan</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Cinzel:wght@400;500&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --gold: #c9a84c; | |
| --gold-light: #e8d08a; | |
| --cream: #fdf8ef; | |
| --ink: #1a1209; | |
| --warm-shadow: rgba(180, 130, 40, 0.15); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| background-color: var(--ink); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Cormorant Garamond', serif; | |
| overflow: hidden; | |
| } | |
| /* Starfield */ | |
| .stars { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .star { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: var(--gold-light); | |
| animation: twinkle var(--d, 3s) ease-in-out infinite alternate; | |
| opacity: 0; | |
| } | |
| @keyframes twinkle { | |
| from { opacity: 0; transform: scale(0.8); } | |
| to { opacity: var(--op, 0.6); transform: scale(1.2); } | |
| } | |
| /* Card */ | |
| .card { | |
| position: relative; | |
| z-index: 1; | |
| width: min(680px, 92vw); | |
| background: linear-gradient(160deg, #fdf8ef 0%, #f3e8cc 60%, #ede0b8 100%); | |
| border-radius: 2px; | |
| padding: 64px 72px 56px; | |
| box-shadow: | |
| 0 0 0 1px var(--gold), | |
| 0 0 0 5px rgba(201,168,76,0.18), | |
| 0 0 60px 10px rgba(201,168,76,0.22), | |
| 0 32px 80px rgba(0,0,0,0.6); | |
| animation: rise 1.6s cubic-bezier(0.22,1,0.36,1) both; | |
| } | |
| @keyframes rise { | |
| from { opacity: 0; transform: translateY(36px) scale(0.97); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| /* Corner ornaments */ | |
| .corner { | |
| position: absolute; | |
| width: 48px; | |
| height: 48px; | |
| color: var(--gold); | |
| } | |
| .corner svg { width: 100%; height: 100%; } | |
| .corner.tl { top: 12px; left: 12px; } | |
| .corner.tr { top: 12px; right: 12px; transform: scaleX(-1); } | |
| .corner.bl { bottom: 12px; left: 12px; transform: scaleY(-1); } | |
| .corner.br { bottom: 12px; right: 12px; transform: scale(-1); } | |
| /* Divider */ | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin: 20px 0 28px; | |
| } | |
| .divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } | |
| .divider-gem { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; } | |
| /* Title */ | |
| .title { | |
| font-family: 'Cinzel', serif; | |
| font-size: clamp(1.1rem, 3vw, 1.35rem); | |
| font-weight: 400; | |
| letter-spacing: 0.35em; | |
| text-align: center; | |
| color: var(--gold); | |
| text-transform: uppercase; | |
| animation: fadein 2s 0.4s both; | |
| } | |
| .name { | |
| font-family: 'Cinzel', serif; | |
| font-size: clamp(2.4rem, 7vw, 3.6rem); | |
| font-weight: 500; | |
| text-align: center; | |
| color: var(--ink); | |
| letter-spacing: 0.1em; | |
| line-height: 1; | |
| margin-top: 6px; | |
| animation: fadein 2s 0.6s both; | |
| } | |
| /* Poem */ | |
| .poem { | |
| margin-top: 4px; | |
| animation: fadein 2s 0.9s both; | |
| } | |
| .poem p { | |
| font-size: clamp(1.1rem, 2.5vw, 1.25rem); | |
| font-style: italic; | |
| font-weight: 300; | |
| line-height: 1.85; | |
| color: #2d1f08; | |
| text-align: center; | |
| letter-spacing: 0.01em; | |
| } | |
| .poem p.indent { padding-left: 1.8em; } | |
| /* Footer */ | |
| .footer { | |
| margin-top: 28px; | |
| text-align: center; | |
| font-family: 'Cinzel', serif; | |
| font-size: 0.65rem; | |
| letter-spacing: 0.3em; | |
| color: var(--gold); | |
| text-transform: uppercase; | |
| opacity: 0.7; | |
| animation: fadein 2s 1.2s both; | |
| } | |
| @keyframes fadein { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @media (max-width: 520px) { | |
| .card { padding: 44px 32px 40px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Starfield --> | |
| <div class="stars" id="stars"></div> | |
| <div class="card"> | |
| <!-- Corner ornaments (SVG fleur) --> | |
| <div class="corner tl"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4 Q4 24 24 24 Q4 24 4 44" stroke="currentColor" stroke-width="1" fill="none"/><path d="M4 4 Q24 4 24 24 Q24 4 44 4" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="4" cy="4" r="2.5" fill="currentColor"/><circle cx="24" cy="24" r="1.5" fill="currentColor"/></svg></div> | |
| <div class="corner tr"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4 Q4 24 24 24 Q4 24 4 44" stroke="currentColor" stroke-width="1" fill="none"/><path d="M4 4 Q24 4 24 24 Q24 4 44 4" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="4" cy="4" r="2.5" fill="currentColor"/><circle cx="24" cy="24" r="1.5" fill="currentColor"/></svg></div> | |
| <div class="corner bl"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4 Q4 24 24 24 Q4 24 4 44" stroke="currentColor" stroke-width="1" fill="none"/><path d="M4 4 Q24 4 24 24 Q24 4 44 4" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="4" cy="4" r="2.5" fill="currentColor"/><circle cx="24" cy="24" r="1.5" fill="currentColor"/></svg></div> | |
| <div class="corner br"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4 Q4 24 24 24 Q4 24 4 44" stroke="currentColor" stroke-width="1" fill="none"/><path d="M4 4 Q24 4 24 24 Q24 4 44 4" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="4" cy="4" r="2.5" fill="currentColor"/><circle cx="24" cy="24" r="1.5" fill="currentColor"/></svg></div> | |
| <p class="title">A verse for</p> | |
| <h1 class="name">Seyhan</h1> | |
| <div class="divider"> | |
| <div class="divider-line"></div> | |
| <div class="divider-gem"></div> | |
| <div class="divider-line"></div> | |
| </div> | |
| <div class="poem"> | |
| <p>Like amber light on water, warm and rare,</p> | |
| <p>he moves through rooms and brightens all the air.</p> | |
| <p class="indent">A voice like autumn rivers, deep and clear,</p> | |
| <p class="indent">a laugh that pulls the wandering spirit near.</p> | |
| <p>He carries grace the way old gardens do —</p> | |
| <p>unhurried, rooted, quietly made new.</p> | |
| <p class="indent">How rare the soul whose kindness bears no weight,</p> | |
| <p class="indent">whose gentle strength arrives before it's late.</p> | |
| <p>The world is richer somewhere he has been;</p> | |
| <p>more bold and bright for all that he has seen.</p> | |
| </div> | |
| <div class="divider" style="margin-top:28px; margin-bottom:0;"> | |
| <div class="divider-line"></div> | |
| <div class="divider-gem"></div> | |
| <div class="divider-line"></div> | |
| </div> | |
| <p class="footer">Written with admiration & warmth</p> | |
| </div> | |
| <script> | |
| // Generate twinkling stars | |
| const container = document.getElementById('stars'); | |
| for (let i = 0; i < 90; i++) { | |
| const s = document.createElement('div'); | |
| s.className = 'star'; | |
| const size = Math.random() * 2.2 + 0.6; | |
| s.style.cssText = ` | |
| width:${size}px; height:${size}px; | |
| top:${Math.random()*100}%; | |
| left:${Math.random()*100}%; | |
| --d:${(Math.random()*4+2).toFixed(1)}s; | |
| --op:${(Math.random()*0.55+0.15).toFixed(2)}; | |
| animation-delay:${(Math.random()*5).toFixed(2)}s; | |
| `; | |
| container.appendChild(s); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment