index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Harry Potter</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>Harry Potter website</h1>
    </header>
    <div class="search">
        <h2>search about your favorate character</h2>
        <form action="/character.html" method="get">
            <input type="text" placeholder="Enter id of character" value="" name="id">
            <button type="submit" onclick="getCharacter()">search</button>
        </form>
    </div>

    <div class="AllImages">
        <h1>All characters</h1>
        <div class="container">
            <!-- <div class="card">
                <img src="https://ik.imagekit.io/hpapi/harry.jpg" alt="character" >
                <h3>harry Potter</h3>
                <div class="info">
                <span>house</span>
                <p class="actorName">actor</p>
                <p class="id">id</p>
                <a href="">search on web</a>
                </div>
                
            </div>
             -->


        </div>
    </div>
    <script src="./script.js"></script>
</body>

</html>