Restaurante Mineiro — Banco de Dados Real

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sabor das Gerais</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <header class="cabecalho">
    <div class="largura topo">
      <span class="marca">Sabor das Gerais</span>
      <a href="#cardapio">Ver cardápio</a>
    </div>
  </header>
  <section class="hero">
    <div class="largura">
      <span class="selo">Comida mineira</span>
      <h1>Um pedacinho de Minas à mesa.</h1>
      <p>Pratos feitos com carinho, tradição e bons ingredientes.</p>
      <a class="botao" href="#cardapio">Conhecer os pratos</a>
    </div>
  </section>
  <main id="cardapio" class="largura secao">
    <h2>Nosso cardápio</h2>
    <p>Hoje vamos trocar este exemplo pelos pratos cadastrados no banco.</p>
    <div class="grade-pratos">
      <article class="prato">
        <div class="prato__visual" aria-hidden="true">🍲</div>
        <div class="prato__corpo">
          <h3>Exemplo visual</h3>
          <p>Este card ainda não veio do banco.</p>
          <strong class="preco">R$ 0,00</strong>
        </div>
      </article>
    </div>
  </main>
  <footer class="rodape"><div class="largura">Sabor das Gerais · Projeto escolar</div></footer>
</body>
</html>

:root {
  --fundo: #f8f5ee;
  --verde: #163d31;
  --cobre: #b25b35;
  --texto: #22332d;
  --creme: #fff;
  --borda: #e6dacc;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: Arial, sans-serif; }
.cabecalho { background: var(--verde); color: #fff; }
.largura { width: min(1100px, 92%); margin: auto; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.marca { font-family: Georgia, serif; font-size: 1.35rem; font-weight: bold; }
.topo a { color: #fff; text-decoration: none; font-weight: bold; }
.hero { padding: 56px 0 66px; background: linear-gradient(115deg, #163d31, #32614a); color: #fff; }
.selo { color: #efc795; text-transform: uppercase; letter-spacing: .18em; font-weight: bold; font-size: .78rem; }
.hero h1 { font-family: Georgia, serif; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.05; max-width: 760px; margin: 12px 0; }
.hero p { font-size: 1.1rem; max-width: 570px; line-height: 1.6; }
.botao { display: inline-block; margin-top: 12px; padding: 13px 20px; border: 0; border-radius: 10px; background: #f1c77c; color: #24352e; text-decoration: none; font-weight: bold; cursor: pointer; }
.secao { padding: 42px 0 70px; }
.secao h2 { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 8px; }
.secao > p { line-height: 1.6; }
.grade-pratos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 28px; }
.prato { overflow: hidden; background: var(--creme); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 10px 30px #163d3110; }
.prato__visual { display: grid; place-items: center; height: 155px; background: radial-gradient(circle at 50% 42%, #fff8e7 0 28%, #eacb94 29% 31%, #bd734c 32% 34%, #f4e7cf 35%); font-size: 3.3rem; }
.prato__visual img { width: 100%; height: 100%; object-fit: cover; }
.prato__corpo { padding: 20px; }
.prato h3 { font-family: Georgia, serif; font-size: 1.4rem; margin: 0 0 8px; }
.prato p { line-height: 1.5; min-height: 48px; }
.preco { font-weight: bold; color: var(--cobre); font-size: 1.25rem; }
.aviso { padding: 20px; border: 1px dashed #b4bcae; border-radius: 12px; background: #fff; }
.formulario { max-width: 620px; display: grid; gap: 14px; }
.formulario label { font-weight: bold; }
.formulario input, .formulario textarea, .formulario select { width: 100%; padding: 12px; border: 1px solid #9ea99e; border-radius: 8px; font: inherit; }
.formulario textarea { min-height: 90px; }
.erro { color: #a42f2f; font-weight: bold; }
.rodape { padding: 28px 0; background: #e9e5d9; color: #375044; }
@media (max-width: 600px) { .topo { align-items: flex-start; flex-direction: column; } .hero { padding: 42px 0; } }