An open API service indexing awesome lists of open source software.

https://github.com/hichamecode/p3-ohmyfood

OhMyFood - Enhance a webpage with animations - HTML CSS SASS
https://github.com/hichamecode/p3-ohmyfood

animations css html sass ui

Last synced: about 2 months ago
JSON representation

OhMyFood - Enhance a webpage with animations - HTML CSS SASS

Awesome Lists containing this project

README

          

# OhMyFood 🍽️

OhMyFood is a website that catalogs menus from gourmet restaurants, offering a responsive interface with some cool CSS animations.

![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white) ![Sass](https://img.shields.io/badge/Sass-CC6699?logo=sass&logoColor=white)

---

## 📖 Description

OhMyFood is designed to showcase menus from high-end restaurants, providing users with an engaging and interactive experience. The platform features a **responsive design** that adapts seamlessly to various devices and screen sizes, ensuring optimal viewing across desktops, tablets, and mobile phones.

## 🎯 Objectives

- Create a **responsive web interface** that works flawlessly on all devices
- Implement **advanced CSS animations**, including a loading spinner
- Showcase **menus from select gourmet restaurants**
- Provide an **intuitive** and **visually appealing user experience**

---

## 🛠️ Technologies

- **HTML5**
- **CSS3**
- **Sass** (CSS preprocessor)

---

## ⚙️ Installation

To set up the project locally, follow these steps:

1. Open your terminal and run the following command to clone the repository:

```bash
git clone https://github.com/hichamecode/P3-OhMyFood.git
```

2. Navigate to the project directory:

```bash
cd P3-OhMyFood
```

---

## 🌟 Features

- **Responsive Design**: Works flawlessly on desktops, tablets, and mobile devices
- **Advanced CSS Animations**: Includes transitions, hover effects, and a loading spinner
- **Sass Implementation**: Uses the **7-1 pattern** for a manageable codebase and organized structure
- **Engaging Visuals**: Creates a visually appealing experience for users viewing restaurant menus

---

## 🗂️ Project Structure

The project is organized as follows:

```bash
P3-OhMyFood/
├── index.html # The main entry point of the website
├── css/ # Directory containing compiled CSS files
├── sass/ # Directory containing Sass source files
└── assets/ # Directory for storing image assets
```

## Contribution

This project was developed as part of the OpenClassrooms training program, and contributions are not accepted at this time.

## License

This project is not open for contributions and has no specific license associated with it. It is part of the OpenClassrooms curriculum.