index.html

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Super Trunfo</title>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
    <div class="container">
        
        <img src="img/superTrunfo.png" class="logo-trunfo" alt="Logo Super Trunfo"/> 
        <img src="img/mandalorian.png" class="logo-mandalorian" alt="Logo Mandalorian"/> <br/>
        <div class="botoes">
            <button onclick="sortearCarta()" id="btnSortear">Sortear carta</button> 
            <button id="btnJogar" onclick="jogar()" disabled>Jogar</button>
            <button id="btnJogarNovamente" onclick="window.location.reload(false)" disabled>Jogar Novamente</button>
        </div>
        

        <main id="main">
            <div class="wrapper">
                <div>
                    <div id="carta-jogador">
                        <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent-ajustado.png" style="width: inherit; height: inherit; position: absolute;"/>
                        <h3 id="opcoes"></h3>
                    </div>
                </div>

                <div>
                    <div id="carta-maquina" class="carta">
                        <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/card-super-trunfo-transparent-ajustado.png" style="width: inherit; height: inherit; position: absolute;"/>
                    </div>
                </div>

            </div>
            <h2 id="resultado" hidden></h2>
            
        </main>

    </div>

<script src="script.js"></script>    
</body>

</html>