📚 Pré-requisitos Teóricos: este projeto aplica conceitos ensinados em Módulo 04: HTML5 e CSS3. Recomendado revisar antes de começar.

🌐 Landing Page Institucional Responsiva (HTML5 & CSS3)

📁 Código deste projeto: web-vanilla/ (os caminhos citados abaixo são relativos à subpasta).

Diagrama de arquitetura do projeto

v1.0 — HTML5 Semântico, CSS Grid, Flexbox e Mobile-First

Trilha de Especialização Pedagógica — Projeto 1 de 4

🎓 Nível Profissional Simulado: Desenvolvedor Frontend Júnior. Construir sites semânticos e fluidos é a base inegociável da web. Um engenheiro sênior sabe criar páginas que carregam instantaneamente em redes 3G, são acessíveis a deficientes visuais e se adaptam com precisão matemática a qualquer tamanho de tela.

🎯 Objetivo & Escopo do Projeto

Construir do zero uma Landing Page Institucional de alta conversão para uma startup de tecnologia, utilizando exclusivamente HTML5 Semântico, arquitetura de layout CSS Grid e Flexbox com abordagem Mobile-First, garantindo nota máxima em SEO e Acessibilidade no Google Lighthouse.

🧑‍💼 Fase 1 — Levantamento de Requisitos

O Briefing do Cliente (Diretora de Marketing)

“Estamos lançando nossa nova plataforma SaaS. Precisamos de uma página de apresentação com: cabeçalho com menu de navegação, seção Hero com chamada para ação (CTA), grade de benefícios com ícones, tabela de planos/preços e rodapé de contato. A página tem que abrir rápido no celular e funcionar bem no desktop sem quebrar o layout.”

Requisitos Funcionais (RF) e Não-Funcionais (RNF)

ID Tipo Descrição Origem no Briefing
RF01 Funcional Estruturar as seções Hero, Benefícios, Planos e Rodapé com tags semânticas. “seção Hero, benefícios, planos”
RF02 Funcional Menu de navegação responsivo com links âncora para cada seção. “menu de navegação”
RF03 Funcional Tabela comparativa de preços com destaque para o plano mais popular. “tabela de planos/preços”
RNF01 Não-Funcional Abordagem Mobile-First com Media Queries para breakpoints de tablet e desktop. “abrir rápido no celular”
RNF02 Não-Funcional SEO impecável com tags Open Graph e meta tags viewport. Marketing / Google

📋 Fase 2 — Backlog & User Stories

ID User Story Prioridade
US01 Como visitante, quero acessar a página no meu smartphone e navegar sem barras de rolagem horizontal. Alta
US02 Como cliente, quero clicar no botão de CTA e ser levado instantaneamente ao formulário. Alta

🌿 Fase 3 — Engenharia em Equipe (Git Flow & Setup)

# Branch da funcionalidade
git checkout -b feature/US01-mobile-first-layout

# Abrir o projeto localmente
open index.html

🛠️ Fase 4 — Implementação Guiada do Layout

<!-- 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>CloudScale — Plataforma de Nuvem</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <nav class="nav-container">
      <a href="#" class="logo">CloudScale</a>
      <a href="#planos" class="btn-cta">Começar Agora</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h1>Escale sua infraestrutura sem limites</h1>
      <p>Deploy automático e alta disponibilidade em segundos.</p>
    </section>
  </main>
</body>
</html>

🧩 Trechos do código do projeto

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="CloudScale — Plataforma moderna de infraestrutura em nuvem e deploy contínuo.">
  <title>CloudScale — Engenharia de Nuvem & Alta Performance</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="navbar">
    <div class="container nav-content">
      <a href="#" class="brand-logo">🌐 CloudScale</a>
      <nav class="nav-links">
        <a href="#beneficios">Benefícios</a>
        <a href="#planos">Planos</a>
        <a href="#contato" class="btn-nav">Fale Conosco</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="container hero-content">
        <h1 class="hero-title">Escale sua infraestrutura sem limites com inteligência e precisão</h1>
        <p class="hero-desc">Automação de ponta a ponta para engenharia de software com alta disponibilidade e latência zero.</p>
        <div class="hero-actions">
          <a href="#planos" class="btn btn-primary">Começar Gratuitamente</a>
          <a href="#beneficios" class="btn btn-outline">Conhecer Arquitetura</a>
        </div>
      </div>
    </section>

    <section id="beneficios" class="section">
      <div class="container">
        <h2 class="section-title">Por que escolher o CloudScale?</h2>
        <div class="grid-beneficios">
          <article class="card">
            <h3>⚡ Deploy Sub-Segundo</h3>
            <p>Pipelines pré-aquecidos para distribuição global em menos de 500ms.</p>
          </article>
          <article class="card">
            <h3>🛡️ Segurança Integrada</h3>
            <p>Criptografia TLS 1.3 de ponta a ponta e auditoria contínua de vulnerabilidades.</p>
          </article>
          <article class="card">
            <h3>📊 Métricas em Tempo Real</h3>
            <p>Telemetria e observabilidade unificadas com alertas preditivos inteligentes.</p>
          </article>
        </div>
      </div>
    </section>

    <section id="planos" class="section bg-alt">
      <div class="container">
        <h2 class="section-title">Planos Transparentes para Qualquer Porte</h2>
        <div class="grid-planos">
          <article class="card card-plano">
            <h3>Starter</h3>
            <p class="preco">R$ 0<span>/mês</span></p>
            <ul>
              <li>Até 3 microsserviços</li>
              <li>10 GB de tráfego mensal</li>
              <li>Suporte comunitário</li>
            </ul>
            <a href="#contato" class="btn btn-outline">Criar Conta</a>
          </article>
          <article class="card card-plano card-destaque">
            <span class="badge">Mais Escolhido</span>
            <h3>Enterprise Pro</h3>
            <p class="preco">R$ 199<span>/mês</span></p>
            <ul>
              <li>Microsserviços ilimitados</li>
              <li>Tráfego global não medido</li>
              <li>SLA de 99.99% garantido</li>
              <li>Suporte dedicado 24/7</li>
            </ul>
            <a href="#contato" class="btn btn-primary">Assinar Agora</a>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer id="contato" class="footer">
    <div class="container footer-content">
      <p>&copy; 2026 CloudScale Inc. Todos os direitos reservados. Padrão Ouro Educacional.</p>
    </div>
  </footer>
</body>
</html>

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-dark: #0f172a;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-white);
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.navbar {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.brand-logo {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--primary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.95rem;
}

.hero {
  padding: 5rem 0;
  background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%);
  text-align: center;
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto 2rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-outline {
  border: 1px solid var(--border);
  color: var(--text-main);
  background: var(--bg-white);
}

.section {
  padding: 4rem 0;
}

.section-title {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 2.5rem;
}

.bg-alt {
  background-color: var(--bg-light);
}

.grid-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.grid-planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.card {
  padding: 2rem;
  border-radius: 10px;
  background: var(--bg-white);
  border: 1px solid var(--border);
}

.card-destaque {
  border: 2px solid var(--primary);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
  position: relative;
}

.badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
}

.preco {
  font-size: 2rem;
  font-weight: 800;
  margin: 1rem 0;
}

.preco span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.card-plano ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.card-plano li {
  padding: 0.4rem 0;
  color: var(--text-muted);
}

.footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

🚀 Roteiro de Execução

1. Iniciar Servidor Local ou Abrir no Navegador

cd catalogo_projetos/web_01_landing_page_html_css/web-vanilla
# Abrir diretamente no navegador ou iniciar via python:
python -m http.server 8080

2. Acessar e Testar Responsividade

Abra http://localhost:8080 no navegador. Pressione F12 para alternar o modo de dispositivo responsivo (iPhone, iPad, Desktop).

🧭 Decisões de Arquitetura (ADRs)

🧪 Testes de Validação & Lighthouse

✅ Checkpoint Final

  1. Layout 100% responsivo em celulares, tablets e telas 4K.
  2. Código HTML e CSS validado pelo W3C sem erros sintáticos.
⬅️ Ver Todos os Projetos no Catálogo de Projetos 🏠 Página Inicial do Portal