This project showcases a simple recipe page for a classic omelette. It includes sections for the recipe's ingredients, preparation details, instructions, and nutritional information. The page is designed to be responsive and optimized for different screen sizes, providing a pleasant user experience on both desktop and mobile devices.
- Hero Section: Displays an image of the dish along with a main heading and a brief description of the recipe.
- Recipe Details Section: Lists the preparation time, broken down into total, preparation, and cooking time.
- Ingredients Section: Displays the ingredients needed for the recipe.
- Instructions Section: Step-by-step instructions for preparing the omelette.
- Nutrition Section: Nutritional information per serving without the additional fillings.
- Responsive Design: The layout adjusts seamlessly to different screen sizes (desktops, tablets, and mobile devices).
- Clean & Modern UI: Well-defined color scheme, clear typography, and organized sections.
- HTML: Used for structuring the content and sections of the page.
- CSS: Custom styles to make the page visually appealing and responsive.
- Includes Google Fonts for typography.
- Uses custom CSS variables for a consistent color scheme.
To view the project on your local machine, follow these steps:
- Clone the repository to your local machine:
git clone https://github.com/AM-gitco/simple-omelette-recipe.git