index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Recipe Radar</title>
    <link
      rel="icon"
      type="image"
      href="https://res.cloudinary.com/dblpy3gli/image/upload/v1676028877/icon-for-food-14_jfasfy.png"
    />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body id="body">
    <header>
      <h1>Recipe Radar</h1>
      <h2 id="intro-text">
        Confused of what to cook today? Don't worry We've got you Covered!
      </h2>
      <input
        class="search-input"
        type="text"
        placeholder="Search by category"
      />
      <button class="search-btn">Search</button>
    </header>
    <main>
      <h2>Special Meal of the Day</h2>
      <section class="random-meal">
        <!-- Meal will be inserted here -->
      </section>

      <h2 id="search-results">Searched Meals</h2>
      <section class="searched-meals">
        <!-- Meals will be inserted here -->
      </section>
    </main>
    <div class="ingredient-modal">
      <!-- Ingredients will be inserted here -->
    </div>
  </body>
  <script src="app.js"></script>
</html>