index.html

<!DOCTYPE html>
<html lang="en">
<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 Mario Bros - O Filme</title>

    <link rel="stylesheet" href="./src/css/reset.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="stylesheet" href="./src/css/responsive.css">
    <link rel="shortcut icon" href="src/imagens/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="fundo-video">
        <video class="video" autoplay loop muted>
            <source src="src/video/video-mario.mp4" type="video/mp4">
        </video>
    </div>

    <header class="cabecalho">

        <a href="#">
            <img src="./src/imagens/logo-chapeu-mario.png" class="logo" alt="logo chapéu Mario">
        </a>
    
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Detalhes</a></li>
            </ul>
        </nav>

    </header>

    <main class="container">

        <div class="informacoes">
            <img class="imagem-titulo" src="./src/imagens/titulo.png" alt="imagen do título do filme">
            <p class="descricao">Mario é um encanador junto com seu irmão Luigi. Um dia, eles vão parar no reino dos cogumelos, governado pela Princesa Peach, mas ameaçado pelo rei dos Koopas, que faz de tudo para conseguir reinar em todos os lugares.</p>
            <button class="botao-trailer">Veja o trailer</button>
        </div>

        <img class="mario" src="src/imagens/super-mario-chars.png" alt="imagem do mario">

        <div class="modal">
            <div class="conteudo-modal">
                <span class="fechar-modal">X</span>
                <iframe  id="video" width="560" height="315" title="Trailer oficial" src="https://www.youtube.com/embed/Cb4WV4aXBpk"
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
        </div>
    </main>


    <script src="./src/js/index.js"></script>
</body>
</html>