index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Rick and Morty Character Search</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <div class="header">
        <header>
            <img class="pickle-gif" src="public/pickle-rick.gif" alt="Pickle Rick Gif" />
            <h1>Rick and Morty Character Search</h1>
        </header>
    </div>
    <div class="box sidebar">
        <aside>
            <h2>Filters</h2>

            <label for="select">Status</label>
            <select class="select" name="status" id="select">
                <option value="all" selected>All</option>
                <option value="alive">Alive</option>
                <option value="dead" >Dead</option>
                <option value="unknown">Unknown</option>
            </select>
        </aside>

    </div>
    <div class="box content">
        <main>
            <label for="search">Search for a character:</label>
            <input type="text" id="search" name="search" placeholder="name">


            <section class="results" id="results">
            </section>
            <div class="pagination" id="pagination">
                <button id="prevBtn" disabled>Previous Page</button>
                <button id="nextBtn">Next Page</button>
            </div>
        </main>
    </div>
    <div class="footer">
        <footer>

            <p>&copy; 2023 Rick and Morty</p>
        </footer>
    </div>
</div>


<script src="js/script.js"></script>
</body>
</html>