main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Realm</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <section>
        <div class="container initial">
          <h1 class="brand">Recipe App</h1>
          <form>
            <input type="text" placeholder="Search Recipe...">
            <ion-icon name="search"></ion-icon>
          </form>
          <div class="search-result">
            <!-- <div class="item">
                <img src="./hero-banner-medium.jpg" alt="">
                <div class="flex-container">
                  <h1 class="title">This is a recipe item</h1>
                  <a class="view-btn" href="#">View Recipe</a>
                </div>
                <p class="item-data">Calories: 120</p>
              </div>
            -->
          </div>
        </div>
      </section>
      <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
      
      
     <script src="main.js"> </script> 
</body>
</html>
