juegos

13 programme

Abrir en el editor Publica tu código

Recomendado

13 May 2026

Cargador de juegos de Subway Surfers Houston

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .dd{
        border: 2px solid black;
        width: 35%;
        text-align: center;
        margin: 20px;
        display: block;
        margin: 20px auto;
       }
       .mm{
        border: 2px solid black;
        display: block;
        margin: 20px auto;
        width: 80%;
       }
      .dt{
        display: flex;
        text-align: center;
        justify-content: space-evenly;
      }
      .dr{
        border: 2px solid black;
        width: 30%;
        
      }
      .mm1{
        width: 70%;
        display: block;
        margin: 20px auto;
        height: 150px;
      }
    .bb1{
        padding: 4px 20px;
        display: block;
        margin: 20px auto;
        margin-top: -20px;
    }
    p{
        margin-top: -20px;
    }
    .rr{
        padding: 4px 40px;
        display: block;
        margin: 20px auto;
        background: rgb(33, 75, 33);
        border-radius: 20px;
        opacity: 0;
    }
    </style>
</head>
<body id="gene">
    <div class="dd">
        <img class="mm" src="https://th.bing.com/th/id/OIP.N9ygFbl2NmeNGzZ1ot7MtAHaHx?w=168&h=180&c=7&r=0&o=7&pid=1.7&rm=3" >
        <h2>Qui a decouvert l Amerique</h2>
    </div>
    <div class="dt">
<div class="dr">        
    <img src="https://th.bing.com/th/id/OIP.Z3LJinOhaNwKdE8D2fXy_AAAAA?w=300&h=369&c=7&rs=1&qlt=90&r=0&pid=CanonicalCanvas"  class="mm1"><br>
    <p>Christophe Colomb</p><br>
        <button class="bb1" onclick="bb1()">A</button>
    </div>
<div class="dr">        
    <img src="https://ts2.mm.bing.net/th?id=OIP.yQ1K89ur_gH4bqd22QNKpAHaHa&pid=15.1"  class="mm1"><br>
    <p>Leif Erikson</p><br>
        <button class="bb1"onclick="bb2()">B</button>
    </div>
<div class="dr">        
    <img src="https://c8.alamy.com/comp/2AW4WJT/1500-ca-italy-the-italian-explorer-amerigo-vespucci-1451-1512-engraved-portrait-allegoria-esploratore-navigatore-americo-2AW4WJT.jpg"  class="mm1"><br>
    <p>Amerige Vespucci</p><br>
        <button class="bb1" onclick="bb3()">C</button>
    </div>
    </div>
    <button class="rr" id="br" onclick="bn()">suivante</button>
    <script>
     function bb1(){
        document.getElementById("gene").style.background="green";
        document.getElementById("br").style.opacity=1;

}
          function bb2(){
        document.getElementById("gene").style.background="red";
        document.getElementById("br").style.opacity=0;

}
          function bb3(){
        document.getElementById("gene").style.background="red";
        document.getElementById("br").style.opacity=0;

}
    </script>
</body>
</html>

CSS