Webleb - UI Elements

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

JS

jeux