Hello World

This is my static website inside the PNG frame.

To learn more HTML/CSS, check out these tutorials!

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #111; font-family: 'Courier New', monospace; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .frame-container { position: relative; width: 1200px; height: 800px; overflow: hidden; } /* Frame Image */ .frame { width: 100%; height: auto; display: block; position: relative; z-index: 1; } /* Website Content */ .content { position: absolute; top: 100px; /* adjust to match your frame */ left: 100px; width: 1000px; height: 600px; color: white; z-index: 2; padding: 20px; overflow: hidden; /* Vintage-style TV color tweaks */ filter: contrast(1.2) brightness(0.9) saturate(0.85); } /* Transparent TV Filter (e.g. scanlines/glass glare) */ .tv-filter { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; /* or try soft-light, multiply, etc */ opacity: 0.5; z-index: 3; animation: flicker 0.2s infinite; } /* Flicker Effect */ @keyframes flicker { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.45; } } /* Optional Scanlines Layer */ .scanlines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 4px ); pointer-events: none; mix-blend-mode: multiply; z-index: 4; } .tv-static { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.06; mix-blend-mode: screen; pointer-events: none; z-index: 5; }