Create a styled recipe card for a “Simple Omelette” using HTML and CSS, replicating the provided code structure and styling.
Simple Omelette Recipe
An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.
Preparation time
- Total: Approximately 10 minutes
- Preparation: 5 minutes
- Cooking: 5 minutes
Ingredients
- 2-3 large eggs
- Salt, to taste
- Pepper, to taste
- 1 tablespoon of butter or oil
- Optional fillings: cheese, diced vegetables, cooked meats, herbs
Instructions
- Beat the eggs in a bowl...
- Heat the pan over medium heat...
- Cook the omelette until golden brown...
- Add fillings (optional) and fold the omelette...
- Remove from heat and serve immediately...
- Enjoy with additional salt and pepper to taste...
Nutrition
The table below shows how much of each nutrient is in this recipe.
| Calories | 277kcal |
| Carbs | 0g |
| Protein | 20g |
| Fat | 22g |
Specifications:
- Page Background Color: #f1e8e8
- Card Background Color: #ffffff
- Title Font Size: 28px
- Subtitle Font Size: 22px
- Body Text Color: #666666
- Subtitle Text Color: #d7932d
- Preparation Time Background Color: #f5f2f2
- Preparation Time Text Color: #d53f99
- Image Source: https://i.postimg.cc/Z5vMmSRv/assignment-burger.jpg
- Border Radius for Image and Card: 20px
Deliverable:
- A .html file containing the markup for the recipe card.
- An accompanying .css file (or
<style>block in the HTML file) with the styles applied.