rmcg.dev/projects/FrontendMentor/newbie/recipe-page/index.html

134 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<link rel="stylesheet" href="./assets/css/index.css">
<title>Frontend Mentor | Recipe page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<article>
<header>
<figure>
<img src="./assets/images/image-omelette.jpeg"
alt="A folded crepe with on a plate, filled with vegetable matter. Also on the plate is some orange humus">
</figure>
<h1>Simple Omelette Recipe</h1>
<p>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.</p>
</header>
<section class="preparation">
<h3>Preparation time
</h3>
<ul>
<li><span>Total:</span> Approximately 10 minutes
</li>
<li><span>Preparation:</span> 5 minutes
</li>
<li><span>Cooking:</span> 5 minutes
</li>
</ul>
</section>
<section>
<h2>Ingredients
</h2>
<ul>
<li>2-3 large eggs
</li>
<li>Salt, to taste
</li>
<li>Pepper, to taste
</li>
<li>1 tablespoon of butter or oil
</li>
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs
</li>
</ul>
</section>
<hr>
<section>
<h2>Instructions
</h2>
<ol>
<li>
<span>Beat the eggs:</span> In a bowl, beat the eggs with a pinch of salt and pepper until they are well
mixed.
You can add a tablespoon of water or milk for a fluffier texture.
</li>
<li>
<span>Heat the pan:</span> Place a non-stick frying pan over medium heat and add butter or oil.
</li>
<li>
<span>Cook the omelette:</span> Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to
ensure
the eggs evenly coat the surface.
</li>
<li>
<span>Add fillings (optional):</span> When the eggs begin to set at the edges but are still slightly
runny in the
middle, sprinkle your chosen fillings over one half of the omelette.
fillings. Let it cook for another minute, then slide it onto a plate.
</li>
<li>
<span>Fold and serve:</span> As the omelette continues to cook, carefully lift one edge and fold it over
the
</li>
<li>
<span>Enjoy:</span> Serve hot, with additional salt and pepper if needed.
</li>
</ol>
</section>
<section>
<h2>Nutrition</h2>
<p>The table below shows nutritional values per serving without the additional fillings.
</p>
<table>
<tr>
<td>Calories</td>
<td class="emphasized">277kcal</td>
</tr>
<tr>
<td>Carbs</td>
<td class="emphasized">0g</td>
</tr>
<tr>
<td>Protein</td>
<td class="emphasized">20g</td>
</tr>
<tr>
<td>Fat</td>
<td class="emphasized">22g</td>
</tr>
</table>
</section>
</article>
</main>
<!-- <div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend
Mentor</a>.
Coded by <a href="https://rmcg.dev">Robert McGovern</a>.
</div> -->
</body>
</html>