Teste passaralho

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Portal do Passaralho</title>

  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

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

    body{
      background:#0d0d0d;
      color:#fff;
      font-family:'Roboto', sans-serif;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    /* TOPO */
    .topbar{
      background:#000;
      border-bottom:3px solid #d89b00;
      padding:15px 30px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }

    .logo-area{
      display:flex;
      align-items:center;
      gap:20px;
    }

    .logo-area img{
      width:90px;
      height:90px;
      border-radius:50%;
      border:3px solid #d89b00;
      object-fit:cover;
      box-shadow:0 0 20px rgba(216,155,0,0.5);
    }

    .logo-text h1{
      font-family:'Oswald', sans-serif;
      font-size:38px;
      color:#d89b00;
      letter-spacing:2px;
    }

    .logo-text p{
      color:#aaa;
      font-size:14px;
    }

    /* MENU */
    .menu{
      background:#121212;
      padding:15px;
      display:flex;
      justify-content:center;
      gap:25px;
      flex-wrap:wrap;
      border-bottom:1px solid #333;
    }

    .menu a{
      font-family:'Oswald', sans-serif;
      font-size:18px;
      color:#ddd;
      transition:0.3s;
    }

    .menu a:hover{
      color:#d89b00;
    }

    /* HERO */
    .hero{
      width:100%;
      height:500px;
      background:
      linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.2)),
      url('https://images.unsplash.com/photo-1504711434969-e33886168f5c?q=80&w=1600');
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:flex-end;
      padding:50px;
    }

    .hero-content{
      max-width:700px;
    }

    .breaking{
      display:inline-block;
      background:#d89b00;
      color:#000;
      padding:8px 15px;
      font-weight:bold;
      font-size:14px;
      margin-bottom:20px;
      border-radius:5px;
    }

    .hero h2{
      font-size:52px;
      font-family:'Oswald', sans-serif;
      line-height:1.1;
      margin-bottom:15px;
    }

    .hero p{
      color:#ccc;
      font-size:18px;
    }

    /* CONTEÚDO */
    .container{
      width:95%;
      max-width:1400px;
      margin:auto;
      padding:40px 0;
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:30px;
    }

    /* POSTS */
    .news-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
      gap:25px;
    }

    .card{
      background:#141414;
      border:1px solid #252525;
      border-radius:15px;
      overflow:hidden;
      transition:0.3s;
    }

    .card:hover{
      transform:translateY(-5px);
      box-shadow:0 0 25px rgba(216,155,0,0.2);
    }

    .card img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .card-content{
      padding:20px;
    }

    .tag{
      display:inline-block;
      background:#d89b00;
      color:#000;
      font-size:12px;
      padding:5px 10px;
      border-radius:20px;
      font-weight:bold;
      margin-bottom:10px;
    }

    .card h3{
      font-size:24px;
      margin-bottom:10px;
      font-family:'Oswald', sans-serif;
    }

    .card p{
      color:#aaa;
      line-height:1.5;
    }

    /* SIDEBAR */
    .sidebar{
      display:flex;
      flex-direction:column;
      gap:25px;
    }

    .widget{
      background:#141414;
      border:1px solid #252525;
      border-radius:15px;
      padding:20px;
    }

    .widget h3{
      font-family:'Oswald', sans-serif;
      color:#d89b00;
      margin-bottom:20px;
      font-size:28px;
    }

    .trend{
      padding:15px 0;
      border-bottom:1px solid #222;
    }

    .trend:last-child{
      border:none;
    }

    .trend p{
      color:#bbb;
      font-size:15px;
      margin-top:5px;
    }

    /* RODAPÉ */
    footer{
      background:#000;
      border-top:3px solid #d89b00;
      padding:40px 20px;
      margin-top:50px;
      text-align:center;
    }

    footer h2{
      color:#d89b00;
      font-family:'Oswald', sans-serif;
      margin-bottom:10px;
    }

    footer p{
      color:#888;
    }

    /* RESPONSIVO */
    @media(max-width:900px){

      .container{
        grid-template-columns:1fr;
      }

      .hero{
        height:400px;
        padding:25px;
      }

      .hero h2{
        font-size:36px;
      }

      .logo-text h1{
        font-size:28px;
      }

      .topbar{
        justify-content:center;
        text-align:center;
      }
    }

  </style>
</head>

<body>

  <!-- TOPO -->
  <header class="topbar">

    <div class="logo-area">
      <img src="COLE_AQUI_A_LOGO_DO_PASSARALHO.png">

      <div class="logo-text">
        <h1>PORTAL DO PASSARALHO</h1>
        <p>As notícias mais explosivas da internet</p>
      </div>
    </div>

  </header>

  <!-- MENU -->
  <nav class="menu">
    <a href="#">INÍCIO</a>
    <a href="#">POLÍTICA</a>
    <a href="#">POLÍCIA</a>
    <a href="#">BRASIL</a>
    <a href="#">MUNDO</a>
    <a href="#">BASTIDORES</a>
    <a href="#">VÍDEOS</a>
  </nav>

  <!-- DESTAQUE -->
  <section class="hero">

    <div class="hero-content">

      <span class="breaking">URGENTE</span>

      <h2>
        PF INVESTIGA NOVO ESQUEMA
        ENVOLVENDO FIGURAS POLÍTICAS
      </h2>

      <p>
        Operação mobiliza agentes federais e gera repercussão nacional.
      </p>

    </div>

  </section>

  <!-- CONTEÚDO -->
  <main class="container">

    <!-- NOTÍCIAS -->
    <section class="news-grid">

      <article class="card">

        <img src="https://images.unsplash.com/photo-1495020689067-958852a7765e?q=80&w=1200">

        <div class="card-content">

          <span class="tag">POLÍTICA</span>

          <h3>
            Bastidores revelam nova tensão em Brasília
          </h3>

          <p>
            Parlamentares discutem novas estratégias após operação surpresa.
          </p>

        </div>

      </article>

      <article class="card">

        <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1200">

        <div class="card-content">

          <span class="tag">INVESTIGAÇÃO</span>

          <h3>
            Operação apreende documentos e celulares
          </h3>

          <p>
            Investigadores analisam provas obtidas durante ação realizada hoje.
          </p>

        </div>

      </article>

      <article class="card">

        <img src="https://images.unsplash.com/photo-1504711331083-9c895941bf81?q=80&w=1200">

        <div class="card-content">

          <span class="tag">EXCLUSIVO</span>

          <h3>
            Fontes revelam bastidores de reunião secreta
          </h3>

          <p>
            Encontro teria ocorrido antes do início das investigações federais.
          </p>

        </div>

      </article>

      <article class="card">

        <img src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1200">

        <div class="card-content">

          <span class="tag">MUNDO</span>

          <h3>
            Crise internacional movimenta mercado financeiro
          </h3>

          <p>
            Investidores acompanham novas decisões políticas globais.
          </p>

        </div>

      </article>

    </section>

    <!-- SIDEBAR -->
    <aside class="sidebar">

      <div class="widget">

        <h3>🔥 EM ALTA</h3>

        <div class="trend">
          <strong>Nova operação da PF</strong>
          <p>Entenda os detalhes da investigação.</p>
        </div>

        <div class="trend">
          <strong>Escândalo político</strong>
          <p>Vídeos vazados movimentam redes sociais.</p>
        </div>

        <div class="trend">
          <strong>Exclusivo</strong>
          <p>Documentos inéditos revelados.</p>
        </div>

      </div>

      <div class="widget">

        <h3>📢 PUBLICIDADE</h3>

        <p style="color:#999; line-height:1.7;">
          Espaço reservado para anúncios, banners e parceiros.
        </p>

      </div>

    </aside>

  </main>

  <!-- RODAPÉ -->
  <footer>

    <h2>PORTAL DO PASSARALHO</h2>

    <p>
      © 2026 - Todos os direitos reservados
    </p>

  </footer>

</body>
</html>
Pesquisar este blog

Teste passaralho

Comentários

Postar um comentário
