<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Nossa História 🧡</title>
<style>
body { background-color: #fdfaf6; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; margin: 0; padding: 40px 20px; }
.container { max-width: 800px; margin: auto; display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
/* Lado Esquerdo: Foto Principal e Texto */
.left-side { flex: 1; min-width: 300px; }
.main-photo { width: 100%; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); margin-bottom: 20px; }
.text-content { line-height: 1.8; font-size: 17px; text-align: justify; color: #444; }
/* Lado Direito: Título e Polaroids */
.right-side { flex: 1; min-width: 300px; text-align: center; }
h1 { font-size: 24px; color: #222; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.subtitle { font-size: 14px; color: #777; margin-bottom: 30px; }
.polaroid-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 30px; }
.polaroid { background: white; padding: 10px 10px 25px 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform: rotate(-2deg); transition: 0.3s; width: 140px; }
.polaroid img { width: 100%; height: 140px; object-fit: cover; }
.polaroid:nth-child(even) { transform: rotate(3deg); }
.polaroid:hover { transform: scale(1.05) rotate(0deg); z-index: 10; }
/* Player Spotify */
.music-player { margin: 20px 0; border-radius: 12px; overflow: hidden; }
.ps { font-size: 12px; color: #999; margin-top: 50px; font-style: italic; border-top: 1px solid #eee; padding-top: 10px; }
</style>
</head>
<body>
<div class="container">
<div class="left-side">
<img src="COLE_AQUI_LINK_DA_FOTO_PRINCIPAL" class="main-photo" alt="Nossa Foto">
<div class="text-content">
Nossos dias não têm sido fáceis, com muitos conflitos e diferenças testando a gente, mas entendo agora que cada tempestade serviu para deixar nosso barco mais forte. <br><br>
Sinto que, ao seu lado, tudo é possível. Faço essa pequena carta 💌 para fortalecer nossos laços e te fazer refletir o quanto nosso amor é bonito. <br><br>
Te amo, minha joia rara guardadinha.
</div>
</div>
<div class="right-side">
<h1>Nossa História:</h1>
<div class="subtitle">Um farol em meio à tempestade</div>
<div class="music-player">
<iframe src="https://open.spotify.com/embed/track/303DsqM0pY7LgG7m0npx7S?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
</div>
<div class="polaroid-gallery">
<div class="polaroid"><img src="COLE_AQUI_FOTO_MURAL_1"></div>
<div class="polaroid"><img src="COLE_AQUI_FOTO_MURAL_2"></div>
<div class="polaroid"><img src="COLE_AQUI_FOTO_MURAL_3"></div>
<div class="polaroid"><img src="COLE_AQUI_FOTO_MURAL_4"></div>
</div>
<p class="ps">Ps: as palavras são minhas eu apenas corrigi a ortografia no gpt kkkkj</p>
</div>
</div>
</body>
</html>