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">

    <link rel="stylesheet" href="src/css/main.css">

    <!-- owl css -->
    <link rel="stylesheet" href="src/css/owl/owl.carousel.min.css">
    <link rel="stylesheet" href="src/css/owl/owl.theme.default.min.css">

    <!-- owl js -->
    <script src="src/js/owl/jquery.min.js" defer></script>
    <script src="src/js/owl/owl.carousel.min.js" defer></script>

    <script src="src/js/main.js" defer></script>

    <!-- font awesome -->
    <script src="https://kit.fontawesome.com/641b9efb0f.js" crossorigin="anonymous"></script>

    <link rel="shortcut icon" href="src/img/shrek-icon.png" type="image/x-icon">

    <title>SHREKFLIX</title>
</head>

<body>

    <header>
        <div class="container">
            <h2 class="logo">SHREKFLIX</h2>
            <nav>
                <a class="selected" href="#">Início</a>
                <a href="#">Séries</a>
                <a href="#">Filmes</a>
                <a href="#">Documentários</a>
            </nav>
        </div>
    </header>

    <main>
        <div id="main-movie" class="main-movie">
            <div class="container">
                <h3 id="title" class="title"></h3>
                <p id="description" class="description"></p>

                <div class="buttons">
                    <button role="button" id="watch-button" class="button" title="Assistir Agora">
                        <div class="button-items">
                            <i class="fas fa-play-circle"></i>
                            ASSISTIR AGORA
                        </div>
                    </button>
                    <button role="button" id="information-button" class="button" title="Mais Informações">
                        <div class="button-items">
                            <i class="fas fa-info-circle"></i>
                            MAIS INFORMAÇÕES
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <div class="movie-carousel">
        <label for="title" class="carousel-title">Em alta</label>

        <div id="movieBox" class="owl-carousel owl-theme">
        </div>
    </div>

</body>

</html>