A clean and responsive Recipe Page that displays a simple omelette recipe. It is built with HTML and CSS, featuring modern design elements and typography.
- Responsive Design: Adjusts to various screen sizes, ensuring a great user experience on both desktop and mobile devices.
- Typography: Uses custom web fonts (
Outfit,Young Serif) for a visually appealing style. - Organized Layout: Includes sections for:
- Recipe Overview
- Preparation Time
- Ingredients
- Step-by-Step Instructions
- Nutrition Information
- Styling: Utilizes modern CSS techniques such as grid and flexbox for structured layouts.
The HTML file contains the structured content of the recipe page. Key sections include:
- Header: Recipe name and description.
- Preparation Section: Information about preparation and cooking time.
- Ingredients Section: A list of required ingredients.
- Instructions Section: Step-by-step directions for preparing the recipe.
- Nutrition Section: Displays basic nutritional facts.
The CSS file is responsible for styling the page. Highlights include:
- Global Reset: Ensures consistent styling across browsers.
- Typography: Custom fonts and color schemes.
- Grid & Flexbox: Creates a responsive layout.
- Media Queries: Adjusts styles for smaller screens (e.g., mobile devices).
- Clone or download the repository.
- Place the HTML and CSS files in the same directory.
- Open the
recipe-page.htmlfile in your web browser to view the recipe page.
- HTML5: For the structure of the recipe page.
- CSS3: For styling and responsive design.
- Google Fonts: For beautiful and consistent typography.
- Outfit
- Young Serif
You can find these fonts included via Google Fonts in the <head> of the HTML file.