index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
    rel="stylesheet"
/>
</head>
<body>
    <header>
        <nav>
            <h1>Recipe App</h1>
            <form >
                <input type="search" class="searchbar" placeholder="search your Recipe">
                <button class="searchbtn">search</button>
            </form>
        </nav>
    </header>
    <main>
        <section>
            <div class="recipe-container">
            <h1>search for your recipe</h1>

            </div>
            <div class="recipe-detail">
                <button class="recipe-close-btn">
                    <i class="ri-close-line"></i>

                </button>
                <div class="recipe-detail-content"></div>
            </div>
            
        </section>
    </main>
   
    <script src="index.js"></script>
</body>
</html>