mp12 e 13 (Python) - myCompiler

Fork
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokémon Charmander</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #fff3e0;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #ff5722;
      color: white;
      text-align: center;
      padding: 20px;
    }

    .pokemon-img {
      float: left; /* imagem alinhada à esquerda */
      width: 200px;
      margin: 20px;
    }

    .pokemon-info {
      float: right; /* texto alinhado à direita */
      width: 60%;
      margin: 20px;
    }

    .clearfix {
      clear: both; /* garante que os elementos abaixo não sejam afetados pelo float */
    }

    footer {
      background-color: #ff5722;
      color: white;
      text-align: center;
      padding: 10px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <header>
    <h1>🔥 Charmander - O Pokémon Lagarto</h1>
  </header>

  <section>
    <img class="pokemon-img" src="https://[Log in to view URL]" alt="Charmander">
    
    <div class="pokemon-info">
      <h2>Especificações</h2>
      <ul>
        <li>Tipo: Fogo</li>
        <li>Altura: 0,6 m</li>
        <li>Peso: 8,5 kg</li>
        <li>Categoria: Lagarto</li>
      </ul>

      <h2>Características</h2>
      <p>
        Charmander é conhecido pela chama em sua cauda, que reflete sua saúde e emoções.
        É um dos Pokémon iniciais da região de Kanto e evolui para Charmeleon e depois para Charizard.
        Seu corpo pequeno e ágil o torna ótimo em batalhas rápidas.
      </p>
    </div>
    
    <div class="clearfix"></div>
  </section>

  <footer>
    <p>Projeto demonstrativo com uso de float em CSS | Inspirado na Pokédex oficial</p>
  </footer>
</body>
</html>
Fork
Embed on website
