<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Photo</title>
<style>
body, html { margin:0; padding:0; height:100%; overflow:hidden; background:#111; font-family: system-ui, sans-serif; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }
.overlay { position: absolute; bottom: 40px; left: 40px; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.7); max-width: 80%; }
h1 { font-size: 2.8rem; margin: 0 0 10px 0; }
p { font-size: 1.3rem; margin: 0; opacity: 0.95; }
</style>
</head>
<body>
<img src="photo.jpg" alt="Your photo">
<div class="overlay">
<h1>Your Photo Title</h1>
<p>Optional caption here</p>
</div>
</body>
</html>