<html>

<head>
    <title>Image Search</title>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #121212;
            color: #fff;
        }

        #resultBox {
            width: 100%;
            height: 100%;
            min-height: 400px;
            background: #222
        }

        #searchBox {
  display: block;
  background-color: #222;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

#buttonClick{
  padding: 0.9rem 0.7rem;
  width: 100px;
}
    </style>
</head>

<body>
    <div class="container">
        <div class="row m-5">
            <h1 class="text-center title">Image Search</h1>
            <div class="row p-4">
                <div class="col-sm-10">
                    <input type="text" id="searchBox" placeholder="Enter the search text . . ." class="form-control"
                        aria-describedby="searchHelpBlock">
                    <div id="searchHelpBlock" class="subtitle">
                        Search only - nature, city, technology, food, still_life, abstract, wildlife.
                    </div>
                </div>
                <div class="col-sm-2"><button type="button" id="buttonClick" class="btn btn-primary">Search</button>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="card m-2" id="resultBox">
                </div>
            </div>
        </div>
    </div>
    <script src="style.js"></script>
</body>

</html>
