Simple Omelette Recipe

This project showcases a simple, structured recipe page layout for a basic omelette. It provides a clean and organized design to display key recipe information, including preparation time, ingredients, instructions, and nutritional values.

Table of Contents

• Overview
  • Links
• My Process
  • Technologies Used
  • What I Learned
• Author

Overview

Links

• Solution URL: [Solution Link] (https://www.frontendmentor.io/solutions/solution-4-responsive-frontend-mentor-recipe-page-L4JtOc5qDo)
• Live Version URL: (https://your-live-site-url.com](https://elclassico-eng.github.io/7.-Recipe-page/)

My Process

Technologies Used

• Semantic HTML5 Markup
• CSS Variables
• Flexbox
• CSS Grid
• Responsive Design
• Fonts "Outfit" and "Young Serif"

What I Learned

This project helped me strengthen my knowledge of creating structured layouts with semantic HTML and modern CSS techniques. Specifically, I focused on:

• Using CSS Grid for the nutrition section layout.
• Implementing Flexbox to control the layout of various sections.
• Customizing list styles for each section.
• Creating a responsive design that adapts to different screen sizes.
• Creating Separators Using Pseudo-Elements

Author Frontend Mentor - (https://www.frontendmentor.io/profile/elClassico-eng)