<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Club' 80s Café</title>

<style>
:root {
  --menta: #BDF5E5;
  --turquesa: #20C6B8;
  --vermelho: #E3262E;
  --azul: #172C58;
  --creme: #F5E8C9;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--menta);
  color: var(--azul);
}

header {
  text-align: center;
  padding: 40px 15px;
  background: var(--azul);
  color: var(--creme);
  border-bottom: 8px solid var(--vermelho);
}

header h1 {
  font-size: 42px;
  font-weight: 900;
  font-style: italic;
  margin: 0;
  text-shadow: 3px 3px var(--vermelho);
}

header p {
  color: var(--menta);
  letter-spacing: 2px;
}

nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  background: var(--turquesa);
  position: sticky;
  top: 0;
}

nav a {
  background: var(--vermelho);
  color: white;
  padding: 11px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  background: var(--azul);
}

main {
  max-width: 850px;
  margin: auto;
  padding: 20px;
}

h2 {
  color: var(--vermelho);
  font-size: 27px;
  border-bottom: 3px solid var(--turquesa);
  padding-bottom: 10px;
  margin-top: 35px;
}

.produto {
  background: var(--creme);
  border: 3px solid var(--azul);
  border-left: 8px solid var(--vermelho);
  border-radius: 12px;
  padding: 18px;
  margin: 16px 0;
  box-shadow: 4px 4px var(--turquesa);
}

.produto h3 {
  color: var(--azul);
  margin-top: 0;
  font-size: 20px;
}

.produto p {
  line-height: 1.5;
}

.preco {
  color: var(--vermelho);
  font-size: 21px;
  font-weight: bold;
}

footer {
  text-align: center;
  background: var(--azul);
  color: var(--creme);
  padding: 25px;
  margin-top: 40px;
  border-top: 8px solid var(--vermelho);
}
</style>
</head>

<body>

<header>
<h1>CLUB' 80s CAFÉ</h1>
<p>REVIVA MOMENTOS, SABOREIE MEMÓRIAS</p>
<p>☕ Uma viagem deliciosa aos anos 80!</p>
</header>

<nav>
<a href="#cafes">☕ Cafés</a>
<a href="#bebidas">🥤 Bebidas</a>
<a href="#bolos">🍰 Bolos</a>
<a href="#doces">🍪 Doces</a>
</nav>

<main>

<section id="cafes">
<h2>☕ NOSSOS CAFÉS</h2>

<div class="produto">
<h3>Café Expresso</h3>
<p>Café preparado com grãos selecionados,
com sabor intenso e aroma marcante.</p>
<span class="preco">R$ 6,00</span>
</div>

<div class="produto">
<h3>Cappuccino</h3>
<p>Café expresso, leite vaporizado,
espuma cremosa e chocolate em pó.</p>
<span class="preco">R$ 10,00</span>
</div>

<div class="produto">
<h3>Café Gelado</h3>
<p>Café, leite, gelo e calda de chocolate.</p>
<span class="preco">R$ 12,00</span>
</div>
</section>

<section id="bebidas">
<h2>🥤 BEBIDAS</h2>

<div class="produto">
<h3>Milk-shake de Morango</h3>
<p>Leite, sorvete de morango e calda
de morango.</p>
<span class="preco">R$ 14,00</span>
</div>

<div class="produto">
<h3>Chocolate Quente</h3>
<p>Leite, chocolate em pó e chocolate
derretido.</p>
<span class="preco">R$ 11,00</span>
</div>
</section>

<section id="bolos">
<h2>🍰 BOLOS</h2>

<div class="produto">
<h3>Bolo de Chocolate</h3>
<p>Massa de chocolate com cobertura
cremosa e raspas de chocolate.</p>
<span class="preco">R$ 10,00</span>
</div>

<div class="produto">
<h3>Bolo de Cenoura</h3>
<p>Massa fofinha de cenoura com
cobertura de chocolate.</p>
<span class="preco">R$ 9,00</span>
</div>
</section>

<section id="doces">
<h2>🍪 DOCES</h2>

<div class="produto">
<h3>Brownie</h3>
<p>Doce de chocolate com massa macia
e pedaços de chocolate.</p>
<span class="preco">R$ 8,00</span>
</div>

<div class="produto">
<h3>Cookie</h3>
<p>Biscoito amanteigado com gotas
de chocolate.</p>
<span class="preco">R$ 7,00</span>
</div>
</section>

</main>

<footer>
<h2 style="color:#F5E8C9">CLUB' 80s</h2>
<p>Reviva momentos, saboreie memórias.</p>
<p>Obrigado pela visita! ❤️</p>
</footer>

</body>
</html>