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">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <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=Inter:wght@400;500;800&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/5bb9642507.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="index.css">
    <title>Movie Search</title>
</head>

<body>
    <header>
        <div class="header-container">
            <h1>Find your film</h1>
            <a href="watchlist.html" target="_blank" class="watchlist-btn">My Watch list</a>
        </div>

        <form id="search-movie-form">
            <i class="fa-solid fa-magnifying-glass" id="search-icon"></i>
            <input type="text" placeholder="Search for a movie" id="search-input" aria-label="Search for a movie">
            <button type="submit" id="search-btn">Search</button>
        </form>
    </header>
    <div id="movie-list">

    </div>

    <div id="explore-icon">
        <i class="fa-brands fa-internet-explorer"></i>
        <p>Start exploring</p>
    </div>


    <script src="index.js" type="module"></script>
</body>

</html>