# 📋 INFOREVIEW PRO — Manual do Template ## Arquivos do sistema | Arquivo | Função | Editar? | |---|---|---| | `style.css` | Todo o CSS do site | Só para adicionar estilos novos | | `scripts.js` | Menu, dropdown mobile, share | Nunca | | `TEMPLATE-MESTRE.html` | Esqueleto base de toda página | Nunca (só copiar) | --- ## Como criar uma nova página 1. **Copie** o `TEMPLATE-MESTRE.html` e renomeie para a nova URL (ex: `nova-pagina.html`) 2. **Altere apenas 3 coisas na Parte A:** - `` → título da página - `<meta name="description">` → descrição da página (até 155 caracteres) 3. **Substitua a Parte B** (entre `CONTEÚDO DINÂMICO` e `FIM DA PARTE B`) pelo conteúdo da página 4. **Não toque na Parte C** (newsletter + footer + script) --- ## Prompt padrão para pedir conteúdo à IA ``` Use o template padrão do inforeviewpro.com. Gere APENAS o código da PARTE B (o que vai dentro de <article class="container">) para o artigo: [NOME DO ARTIGO]. Imagem: [nome-da-imagem.png] Próximo artigo: [link e título do próximo] Links internos do grid: [lista de 4 a 6 artigos] ``` --- ## Classes CSS disponíveis (Parte B) ### Estrutura - `<article class="container">` — artigos/posts - `<div class="container">` — índices e ferramentas ### Tipografia - `<h2>` — título principal do artigo - `<h3>` — subtítulos internos - `<p>` — parágrafos (já vêm justificados) ### Componentes prontos ```html <!-- Imagem de destaque --> <img src="imagem.png" alt="..." class="featured-image"> <!-- Caixa amarela de destaque --> <div class="highlight"> <h3>Título</h3> <p>Texto...</p> </div> <!-- Card genérico --> <div class="card">...</div> <!-- Card de próximo artigo --> <div class="card card-next"> <span class="badge">Próxima Leitura</span> <h3>Título</h3> <p>Descrição</p> <a href="link.html" class="btn btn-dark">LER AGORA →</a> </div> <!-- Botões --> <a href="#" class="btn">Laranja (padrão)</a> <a href="#" class="btn btn-dark">Azul escuro</a> <!-- Link interno --> <a href="artigo.html" class="internal-link">Texto do link</a> <!-- Grid de 4 links --> <div class="cards-grid"> <a href="artigo.html" class="link-card">👉 Título</a> ... </div> <!-- Lista de série (amarela) --> <div class="mei-series"> <h4>📚 Série: Título</h4> <ul> <li><a href="artigo.html">➔ Título do artigo</a></li> </ul> </div> <!-- Lista de série (vermelha) --> <a href="artigo.html" class="red">➔ Título</a> ``` ### Compartilhamento (copiar exatamente assim) ```html <div class="share-box"> <p>Compartilhe este artigo:</p> <div class="share-buttons"> <a id="share-wa" href="#" target="_blank" rel="noopener noreferrer" class="share-btn whatsapp"><i class="fab fa-whatsapp"></i> WhatsApp</a> <a id="share-fb" href="#" target="_blank" rel="noopener noreferrer" class="share-btn facebook"><i class="fab fa-facebook-f"></i> Facebook</a> <a id="share-tw" href="#" target="_blank" rel="noopener noreferrer" class="share-btn xtwitter"><i class="fab fa-x-twitter"></i> Twitter/X</a> <a id="share-in" href="#" target="_blank" rel="noopener noreferrer" class="share-btn linkedin"><i class="fab fa-linkedin-in"></i> LinkedIn</a> <a id="share-pin" href="#" target="_blank" rel="noopener noreferrer" class="share-btn pinterest"><i class="fab fa-pinterest"></i> Pinterest</a> </div> </div> ``` > Os links são preenchidos automaticamente pelo `scripts.js`. Não altere os IDs. --- ## Adicionando novo item ao menu Edite **apenas** a seção `<div class="menu-links">` dentro do `TEMPLATE-MESTRE.html` e replique a alteração em todas as páginas existentes. --- ## Cores do site (referência rápida) | Cor | Hex | Uso | |---|---|---| | Azul escuro | `#0A1F44` | Header, nav, títulos, botão dark | | Laranja | `#F5A623` | Botão padrão, destaques, links footer | | Laranja newsletter | `#ff6600` | Borda e botão newsletter | | Verde badge | `#27ae60` | Badges verdes | | Vermelho alerta | `#e74c3c` | Bordas de alerta | | Fundo cinza claro | `#F4F7FB` | Background do body | | Fundo card azul | `#f0f4f8` | Cards de próximo artigo, card-guia |