Mealify - Restaurant Landing Page

Mealify is a modern, responsive restaurant landing page that offers a delightful dining experience showcase. Built with HTML5 and CSS3, it features an elegant design with dark mode support and interactive elements.

Live Demo & Repository

Check out the project: GitHub Repository

Features

• Responsive Design: Fully responsive layout that works across all devices
• Dark/Light Mode: Toggle between dark and light themes for comfortable viewing
• Interactive Sections:
  • Hero section with call-to-action buttons
  • Professional chefs showcase
  • Food gallery with hover effects
  • Contact form with Google Maps integration
  • Newsletter subscription

Project Structure

├── css/
│   ├── main.css         # Main styling with CSS variables
│   ├── dark-mode.css    # Dark theme styles
│   ├── mediaquery.css   # Responsive design rules
│   └── all.min.css      # Font Awesome icons
├── imges/               # Image assets
├── webfonts/            # Font files
└── index.html           # Main HTML structure

Styling Approach

The project uses modern CSS features including:

• CSS Variables for consistent theming
• Flexbox for layout management
• CSS Grid for gallery layout
• HSL color system for better color management
• Smooth transitions and hover effects

Color Scheme

--color-default: #212529    /* Base text color */
--color-primary: HSL based  /* Primary accent color */
--color-secondary: #37373f  /* Secondary text color */
--color-light: #fff         /* Light background */

Fonts

• Primary Font: "Amatic SC" for headings
• Secondary Font: "Inter" for subheadings
• Default Font: "Open Sans" for body text

Components

1. Navigation Bar

   • Responsive menu
   • Dark mode toggle
   • Smooth scroll navigation

2. Hero Section

   • Engaging headline
   • Call-to-action buttons
   • Featured image

3. Chefs Section

   • Team member cards
   • Social media links
   • Hover effects

4. Gallery

   • Food showcase
   • Interactive hover effects
   • Image descriptions

5. Contact Section

   • Google Maps integration
   • Contact form
   • Business hours
   • Contact information

6. Footer

   • About information
   • Newsletter subscription
   • Quick links
   • Social media links

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Credits

• Font Awesome for icons
• Google Fonts for typography
• Google Maps for location integration