Pará, Região Norte do Brasil

Bem-vindo a Paragominas

Pioneira no desenvolvimento sustentável e referência em gestão ambiental no sudeste paraense. Uma cidade moderna, arborizada e acolhedora.

Explorar a Cidade Testar no GitHub/Cloudflare

Conheça Mais

História, Economia e Sustentabilidade

Município Verde

Paragominas transformou sua história ao sair da lista de desmatamento para se tornar a primeira cidade declarada "Município Verde" do Pará, sendo exemplo internacional de pecuária e agricultura sustentável.

Economia Forte

Destaque no estado com uma economia forte baseada no agronegócio moderno, na mineração de bauxita e no setor de comércio e serviços em constante expansão.

Infraestrutura Urbana

Planejamento urbano exemplar na região norte, oferecendo praças bem cuidadas, espaços para caminhadas, parques ecológicos e excelente qualidade de vida aos cidadãos.

1965 Ano de Fundação

+110 mil Habitantes (Aprox.)

19.342 km² Área Territorial

UTC-3 Fuso Horário

Visite & Conheça

Principais Pontos Turísticos

Lago Verde

Lago Verde (Região dos Lagos)

Cartão postal da cidade! Ideal para caminhadas ao final da tarde, passeios em família, atividades ao ar livre e contemplação do pôr do sol.

Lazer & Caminhada

Parque Ambiental

Parque Ambiental de Paragominas

Refúgio de biodiversidade preservada no coração da cidade. Conta com trilhas ecológicas, fauna local e um ambiente refrescante de mata nativa.

Ecoturismo

Praça do Povo

Praça Célio Miranda / do Povo

Ponto central para feiras culturais, festivais musicais, gastronômicos e eventos comunitários que reúnem a população em datas comemorativas.

Cultura & Eventos

Passo a Passo Prático

Como hospedar este site no Cloudflare Pages via GitHub

Siga este roteiro rápido para criar o repositório Git, salvar seus arquivos e publicar o site gratuitamente na web global em minutos!

Estrutura Recomendada do Projeto:

📂 meu-site-paragominas/

├── 📄 index.html (Arquivo principal)

└── 📄 style.css (Estilos CSS)

Crie a pasta e os arquivos no seu computador

Crie uma pasta chamada meu-site-paragominas. Alterne para a aba "Ver Código Fonte" no topo deste site e copie os códigos para os arquivos index.html e style.css.

Inicialize o repositório e envie para o GitHub

Abra o terminal na pasta do projeto e execute:

git init
git add .
git commit -m "Initial commit - Site Paragominas"
git branch -M main
git remote add origin https://github.com/SEU_USUARIO/meu-site-paragominas.git
git push -u origin main

Conecte no Cloudflare Pages

Acesse o painel do Cloudflare > Workers & Pages.
Clique em Create Application > Pages > Connect to Git.
Selecione o seu repositório meu-site-paragominas.
Mantenha as configurações de build em branco (site estático simples) e clique em Save and Deploy!

Arquivos do Projeto

Copie o conteúdo individualmente e salve nos arquivos correspondentes na sua pasta local.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paragominas - PA | Município Verde</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="logo">
            <span class="badge">P</span>
            <strong>Paragominas</strong>
        </div>
        <nav>
            <a href="#inicio">Início</a>
            <a href="#sobre">Sobre</a>
            <a href="#turismo">Turismo</a>
        </nav>
    </header>

    <section id="inicio" class="hero">
        <h1>Bem-vindo a Paragominas</h1>
        <p>Município Verde e referência em sustentabilidade no Pará.</p>
        <a href="#sobre" class="btn">Saiba mais</a>
    </section>

    <section id="sobre" class="section">
        <h2>Sobre a Cidade</h2>
        <div class="cards">
            <div class="card">
                <h3>Sustentabilidade</h3>
                <p>Pioneira na transição para o modelo de Município Verde.</p>
            </div>
            <div class="card">
                <h3>Economia</h3>
                <p>Forte presença no agronegócio, mineração e serviços.</p>
            </div>
        </div>
    </section>

    <section id="turismo" class="section bg-light">
        <h2>Pontos Turísticos</h2>
        <ul class="tour-list">
            <li>🌊 Lago Verde (Região dos Lagos)</li>
            <li>🌳 Parque Ambiental de Paragominas</li>
            <li>🏛️ Praça do Povo (Célio Miranda)</li>
        </ul>
    </section>

    <footer>
        <p>Paragominas - PA © Teste de Deploy Cloudflare Pages</p>
    </footer>
</body>
</html>

style.css

/* Reset & Configurações Básicas */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    color: #334155;
    background-color: #f8fafc;
    line-height: 1.6;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.badge {
    background: #16a34a;
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: bold;
}

nav a {
    margin-left: 1.5rem;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
}

nav a:hover {
    color: #16a34a;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #14532d, #0f172a);
    color: white;
    text-align: center;
    padding: 5rem 1rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    margin-top: 1.5rem;
    background: #16a34a;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* Seções */
.section {
    padding: 4rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.bg-light {
    background: #f1f5f9;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tour-list {
    list-style: none;
    margin-top: 1.5rem;
}

.tour-list li {
    background: white;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    font-weight: 500;
}

/* Rodapé */
footer {
    text-align: center;
    padding: 2rem;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.875rem;
}