index.html

<!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="Portfólio de projetos de Pedro Martinez">
  <title>Projetos Pedro Martinez</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header class="hero">
    <h1><span>30</span> PROJETOS</h1>
    <p>Desenvolvimento Front-end | HTML, CSS, JavaScript</p>
  </header>

  <main class="container">

    <section class="projects-grid">

      <a href="Animação_de_Loading/index.html" class="card"><h2>Animação de Loading</h2><p>CSS animation</p></a>
      <a href="Barra_de_Pesquisa_animada/index.html" class="card"><h2>Barra de Pesquisa</h2><p>UI interativa</p></a>
      <a href="Barra_de_Progresso_Circular/index.html" class="card"><h2>Progresso Circular</h2><p>CSS + SVG</p></a>
      <a href="Botão_Borda_Animada/index.html" class="card"><h2>Botão Animado</h2><p>Efeito hover</p></a>
      <a href="Card_3D_flip/index.html" class="card"><h2>Card 3D Flip</h2><p>Transform 3D</p></a>
      <a href="Cards_Responsivos/index.html" class="card"><h2>Cards Responsivos</h2><p>Layout moderno</p></a>
      <a href="Carrossel_Infinito/index.html" class="card"><h2>Carrossel</h2><p>Loop infinito</p></a>
      <a href="Design_Formulário_Registro/index.html" class="card"><h2>Formulário</h2><p>Cadastro básico</p></a>
      <a href="Design_Website_Padrão/index.html" class="card"><h2>Website Layout</h2><p>Estrutura padrão</p></a>
      <a href="Flip_Card/index.html" class="card"><h2>Flip Card</h2><p>Cartão animado</p></a>
      <a href="Galeria_de_Imagens_Animada/index.html" class="card"><h2>Galeria</h2><p>Imagens animadas</p></a>
      <a href="Gerador_de_QR_Code/index.html" class="card"><h2>QR Code</h2><p>Gerador dinâmico</p></a>
      <a href="Land_Page_Video/index.html" class="card"><h2>Landing com Vídeo</h2><p>Hero com vídeo</p></a>
      <a href="Land-Page_animated/index.html" class="card"><h2>Landing Animada</h2><p>Efeitos modernos</p></a>
      <a href="Login_formulário/index.html" class="card"><h2>Login</h2><p>Formulário simples</p></a>
      <a href="Login_Netflix_Responsivo/index.html" class="card"><h2>Login Netflix</h2><p>Clone responsivo</p></a>
      <a href="Nav_Bars/index.html" class="card"><h2>Navbars</h2><p>Menus diversos</p></a>
      <a href="Pedra_Papel_Tesoura/index.html" class="card"><h2>Jogo Jo-ken-pô</h2><p>JS interativo</p></a>
      <a href="SideBar_de_Navegação/index.html" class="card"><h2>Slider</h2><p>Controle de valor</p></a>
      <a href="Registro_Responsivo/index.html" class="card"><h2>Registro</h2><p>Responsivo</p></a>
      <a href="Slider_bar/index.html" class="card"><h2>Slider</h2><p>Controle de valor</p></a>
      <a href="Texto_animado/index.html" class="card"><h2>Texto Animado</h2><p>Typing effect</p></a>
      <a href="Website_Efeito_Hover/index.html" class="card"><h2>Hover Website</h2><p>Efeitos visuais</p></a>
      <a href="Website_Image_Slider/index.html" class="card"><h2>Image Slider</h2><p>Galeria dinâmica</p></a>
      <a href="Arrastar_Droppar/index.html" class="card"><h2>Arrastar e Soltar</h2><p>Drag and drop</p></a>
      <a href="Avaliação com Emojis/index.html" class="card"><h2>Avaliação com Emojis</h2><p>Feedback visual</p></a>
      <a href="Botão Light&Dark Mode/index.html" class="card"><h2>Light & Dark Mode</h2><p>Troca de tema</p></a>
      <a href="./CardCamera/index.html" class="card"><h2>Card Câmera</h2><p>Design de produto</p></a>
      <a href="Cards_Drop/index.html" class="card"><h2>Cards Drop</h2><p>Cards interativos</p></a>
      <a href="Elemento_Div_Arrastável/index.html" class="card"><h2>Div Arrastável</h2><p>Elemento movível</p></a>

    </section>

    <div class="repo-btn">
      <a href="https://github.com/henriquepedromartinez-dotcom/PROAProjetcsHTML_CSS.git" target="_blank">
        Ver Código no GitHub
      </a>
    </div>

  </main>

  <footer>
    <p>© 2026 Pedro Martinez</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>