index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zinger</title>
    <link 
       rel = "stylesheet"
       href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/198/198416.png">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="mobile-container">
        <header>
            <div class="header-container">
                <img class = "logo" src="https://cdn-icons-png.flaticon.com/512/198/198416.png" alt="logo">
                <img class = "heading" src="https://seeklogo.com/images/K/kfc-zinger-logo-8CD3D21F5C-seeklogo.com.png" alt="heading">
            </div>
        </header>
        <nav>
            <input type="text" id="search-term" placeholder = "Search..."/>
            <button id="search"><i class="fas fa-search"></i></button>
        </nav>
        <div class="fav-container">
            <h3>Favourite Meals</h3>
            <ul class="fav-meals" id="fav-meals">
                
            </ul>
        </div>
        <div class="meals" id="meals">
            
        </div>
    </div>
    
    <div class="popup-container hidden" id="meal-popup">
        <div class="popup">
            <button class="close-popup" id="close-popup"><i class="fas fa-times"></i></button>
            <div class="meal-info" id="meal-info">
                
            </div>
        </div>
    </div>
    
</body>
</html>