Aula 10 de 10 · PROJETO FINAL

Página Pessoal

Você chegou. Agora junta tudo: HTML semântico, CSS com variáveis, Flexbox, responsividade e efeitos — em uma página pessoal real.

tudo que você aprendeu página real sem limite de criatividade

// o que você vai construir

A missão

Sua página pessoal deve ter todas as seções abaixo. Não precisa seguir a ordem exatamente — mas todas precisam estar:

✓ Header / Navbar — logo ou nome + links de navegação
✓ Hero — seu nome em h1, sua "profissão" ou série, uma frase sua
✓ Sobre mim — foto (pode ser placeholder) + parágrafo com <strong> e <em>
✓ Habilidades / Hobbies — lista não ordenada ou cards
✓ Contato — formulário com nome, e-mail e mensagem
✓ Rodapé — seu nome + ano

E os requisitos técnicos:

✓ Variáveis CSS com pelo menos 3 cores no :root
✓ Flexbox em pelo menos 2 lugares
✓ 1 media query para adaptar ao celular
✓ 1 efeito de hover com transition

// editor

Mão na massa

O editor abaixo tem um ponto de partida. Substitua tudo pelos seus dados reais e estilize do seu jeito. O preview atualiza enquanto você digita.

minha-pagina.html PROJETO FINAL

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Nome — Página Pessoal</title>
  <style>
    /* === SUAS CORES === */
    :root {
      --principal: #f97316;
      --fundo: #0f172a;
      --superficie: #1e293b;
      --texto: #e2e8f0;
      --texto-muted: #94a3b8;
    }

    /* === BASE === */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background: var(--fundo);
      color: var(--texto);
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }
    .wrap { max-width: 860px; margin: auto; padding: 0 20px; }
    a { color: var(--principal); text-decoration: none; }
    img { max-width: 100%; }

    /* === NAVBAR === */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: var(--superficie);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .navbar .logo {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--principal);
    }
    .navbar nav {
      display: flex;
      gap: 20px;
    }
    .navbar nav a {
      color: var(--texto-muted);
      font-size: 0.9rem;
      transition: color 0.2s;
    }
    .navbar nav a:hover { color: var(--texto); }

    /* === HERO === */
    .hero {
      padding: 60px 20px;
      text-align: center;
    }
    .hero h1 {
      font-size: clamp(2rem, 6vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .hero h1 span { color: var(--principal); }
    .hero .cargo {
      color: var(--texto-muted);
      margin: 8px 0 20px;
      font-size: 1.05rem;
    }
    .hero .frase {
      font-style: italic;
      color: var(--texto-muted);
      max-width: 48ch;
      margin: auto;
    }

    /* === SOBRE MIM === */
    .sobre {
      display: flex;
      gap: 32px;
      align-items: flex-start;
      padding: 48px 20px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .foto {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 3px solid var(--principal);
    }
    .sobre h2 {
      color: var(--principal);
      margin-bottom: 12px;
    }

    /* === HABILIDADES === */
    .habilidades {
      padding: 48px 20px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .habilidades h2 { margin-bottom: 20px; }
    .lista-hab {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      list-style: none;
    }
    .lista-hab li {
      background: var(--superficie);
      border: 1px solid rgba(255,255,255,.1);
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 0.9rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .lista-hab li:hover {
      border-color: var(--principal);
      color: var(--principal);
    }

    /* === CONTATO === */
    .contato {
      padding: 48px 20px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .contato h2 { margin-bottom: 24px; }
    .form-grupo {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 16px;
    }
    .form-grupo label { font-size: 0.85rem; color: var(--texto-muted); }
    .form-grupo input,
    .form-grupo textarea {
      background: var(--superficie);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--texto);
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.95rem;
      font-family: inherit;
      transition: border-color 0.2s;
    }
    .form-grupo input:focus,
    .form-grupo textarea:focus {
      outline: none;
      border-color: var(--principal);
    }
    .btn-enviar {
      background: var(--principal);
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.15s;
    }
    .btn-enviar:hover { opacity: 0.85; transform: translateY(-2px); }

    /* === RODAPE === */
    footer {
      text-align: center;
      padding: 28px 20px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: var(--texto-muted);
      font-size: 0.85rem;
    }

    /* === RESPONSIVIDADE === */
    @media (max-width: 600px) {
      .sobre { flex-direction: column; align-items: center; text-align: center; }
      .navbar nav { gap: 12px; }
    }
  </style>
</head>
<body>

  <!-- NAVBAR -->
  <header class="navbar">
    <span class="logo">Meu Nome</span>
    <nav>
      <a href="#sobre">Sobre</a>
      <a href="#habilidades">Habilidades</a>
      <a href="#contato">Contato</a>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero">
    <h1>Olá, eu sou <span>Meu Nome</span></h1>
    <p class="cargo">Estudante de Informática · 1º ano</p>
    <p class="frase">"Coloque aqui uma frase que representa você."</p>
  </section>

  <!-- SOBRE MIM -->
  <section class="sobre" id="sobre">
    <img class="foto" src="https://placecats.com/120/120" alt="Foto de perfil">
    <div>
      <h2>Sobre mim</h2>
      <p>Olá! Meu nome é <strong>Meu Nome</strong> e tenho <em>X anos</em>. Estou no
      curso Técnico em Informática e estou aprendendo a criar páginas web do zero.
      Gosto de <strong>tecnologia</strong>, <em>jogos</em> e <strong>músicas</strong>.
      Esse é meu primeiro projeto HTML e CSS.</p>
    </div>
  </section>

  <!-- HABILIDADES -->
  <section class="habilidades" id="habilidades">
    <h2>Habilidades & Hobbies</h2>
    <ul class="lista-hab">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>🎮 Jogos</li>
      <li>🎵 Música</li>
      <li>📚 Leitura</li>
    </ul>
  </section>

  <!-- CONTATO -->
  <section class="contato" id="contato">
    <h2>Contato</h2>
    <form>
      <div class="form-grupo">
        <label for="nome">Nome</label>
        <input type="text" id="nome" placeholder="Seu nome" required>
      </div>
      <div class="form-grupo">
        <label for="email">E-mail</label>
        <input type="email" id="email" placeholder="seu@email.com" required>
      </div>
      <div class="form-grupo">
        <label for="msg">Mensagem</label>
        <textarea id="msg" rows="4" placeholder="Escreva sua mensagem...">