# The Tiffin Food

Hyper-futuristic landing page for a goal-oriented food and tiffin service.

The Tiffin Food helps people choose meals based on the body and lifestyle they are working toward:

- **Lean mode** — minimal-fat meals for a lighter, sharper routine
- **Muscle mode** — protein-focused meals to support strength and training
- **Bulk mode** — carbohydrate and protein-focused meals for intentional gains
- **Balanced mode** — a balanced mix of nutrients for sustainable everyday eating

## Experience

The page combines a dark editorial interface with neon lime accents, orbital motion-inspired graphics, and hyper-realistic food photography. It includes:

- Hero section with an orbital meal visual
- Responsive navigation and calls to action
- Animated principles marquee
- Four interactive meal goal cards
- Hover and keyboard focus states for meal cards
- Accessible selection feedback through a live toast message
- “The Tiffin Protocol” section explaining the ordering flow
- Responsive layouts for desktop, tablet, and mobile screens

## Project structure

```text
.
├── index.html   # Page structure and content
├── styles.css   # Visual system, responsive layout, and image treatment
├── script.js    # Meal card interactions and toast feedback
└── README.md    # Project documentation
```

## Run locally

This is a dependency-free static page. Open `index.html` directly in a browser, or serve the folder with any local web server:

```bash
python -m http.server 8000
```

Then visit [http://localhost:8000](http://localhost:8000).

## Image sources

Meal photography is loaded from Unsplash using optimized image URLs. An internet connection is required for the remote images to appear. The page still retains its layout and visual overlays if the images are unavailable.

## Customization

- Update meal copy and labels in `index.html`.
- Adjust colors and responsive breakpoints in `styles.css`.
- Change the image URLs in the `.food-orb` elements to use different meals.
- Update the destination email address in the final CTA.

## Brand direction

**Tone:** precise, energetic, modern, and intentional  
**Primary accent:** neon lime  
**Typography:** Space Grotesk for display text and DM Mono for labels and metadata  
**Tagline:** *Eat with intent.*