lib/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Random Cat API</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>Random Cat API</h1>
        </header>
        <main>
            <button class="randomButton">Random Cats! Meow!</button>
            <div class="randomCat"><img src="" class="randomCatImage"></div>
            <form>
                <input type="text" class="input" placeholder="Category ID">
                <button class="searchButton">Find Cats! Meow!</button>
            </form>
            <div class="category-keys">
                <!-- <h3>Categories</h3> -->
                <ul>
                    <li>1: Hats</li>
                    <li>2: Space</li>
                    <li>4: Sunglasses</li>
                    <li>5: Boxes</li>
                    <li>7: Ties</li>
                    <li>14: Sinks</li>
                    <li>15: Clothes</li>
                </ul>
            </div>
            <div class="categoryCat"><img src="" class="categoryCatImage"></div>
        </main>
        <script src="script.js"></script>
    </body>
</html>