🍽️ CookIt - Recipe Filter App

CookIt is a simple, responsive recipe filtering app that allows users to browse recipes based on dietary preferences such as Vegan, Gluten-Free, Keto, and Vegetarian. The app is designed with clean UI, card-based recipe layouts, and responsive behavior across devices.

🚀 Features

• 🔘 Filter recipes by dietary type: Vegan, Gluten-Free, Keto, and Vegetarian
• 🧾 Recipe cards displaying image, title, and short description
• 📱 Responsive design for mobile and desktop
• 🎨 Modern typography using Google Fonts (Roboto and Arial)
• 🌈 Colorful, intuitive filter buttons
• ⚙️ Simple and clean HTML, CSS, and JavaScript codebase

📁 Project Structure

CookIt/
├── index.html        # Main HTML file
├── styles.css        # Styling for layout and components
└── script.js         # JavaScript logic for filtering recipes

📸 UI Layout

• Background: Light (#FAFAFA)
• Typography:
  • Titles: Roboto Bold, 20px
  • Descriptions: Arial, 16px
• Cards: Display image, title, and description
• Buttons: Color-coded by filter type

🧪 How It Works

1. User clicks a filter button
2. JavaScript filters the recipes based on the selected dietary tag
3. Filtered recipes appear in the card layout below

Live Demo