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">
    <title>Open Brewery API</title>
    <!-- BOOTSTRAP LINK -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- STYLE LINK -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    
    <!-- Image and text -->
<nav class="navbar navbar-light bg-light" class="nav-style">
    <a class="navbar-brand style"  href="#">
      <!-- <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
      Open Brewery API
    </a>
  </nav>

<script>
    // let division = document.createElement('div')
    // division.innerHTML= `<input type = "text" id="txt">
    // <button type="button" onclick="breweries()">Search</button>`;
    // division.setAttribute('id','count')
    // document.body.append(division);
    </script>
    
        <div class = "card-lists" id="card-lists">
            <div class="container">
                <h2 id="title">Brewery Details</h2>
                   
                <div class="card" style="width: 18rem;">
                       <!-- <div class="card-header"></div> -->
                    
                        <div class="card-body">
                            <div class="card-text-style">
                            <p class="card-text">Breweries Name:</p>
                            <p class="card-text">Type:</p>
                            <p class="card-text">Brewery’s Address:</p>
                            <p class="card-text">Website url:</p>
                            <p class="card-text">Phone No:</p>
                           
                            </div>
                        </div>
                    </div>
               
            </div>


<script src="./script.js"></script>


</body>
</html>