fem-projects/recipe-page
Archived
1
Fork 0
Code Activity

Finish

Browse source
This commit is contained in:
Hadeed 2024-07-03 04:39:20 +05:00
parent 0b08948a6a
commit 17a8e0d1e1
2 changed files with 182 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
index.html
View file

@ -14,96 +14,118 @@
<title>Recipe page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body class="flex min-h-dvh items-center justify-center bg-eggshell p-32">
<main class="w-full max-w-3xl rounded-3xl bg-white p-10">
<body class="flex min-h-dvh items-center justify-center bg-eggshell md:p-32">
<main
class="w-full max-w-3xl space-y-10 bg-white p-8 md:rounded-3xl md:p-10"
>
<img
class="md:rounded-xl"
src="/images/image-omelette.jpeg"
alt="A simple omelette"
/>
<div class="space-y-8">
<div class="space-y-6">
<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.
combines beaten eggs cooked to perfection, optionally filled with
your choice of cheese, vegetables, or meats.
</p>
</div>
<div class="bg-snow">
<div class="space-y-4 rounded-xl bg-snow p-7">
<h3>Preparation time</h3>
<ul>
<li>
<ul class="space-y-2">
<li class="marker:text-dark-raspberry">
<p><strong>Total:</strong> Approximately 10 minutes</p>
</li>
<li>
<li class="marker:text-dark-raspberry">
<p><strong>Preparation:</strong> 5 minutes</p>
</li>
<li>
<li class="marker:text-dark-raspberry">
<p><strong>Cooking:</strong> 5 minutes</p>
</li>
</ul>
</div>
<div class="space-y-6">
<h2>Ingredients</h2>
<ul>
<li><p>2-3 large eggs</p></li>
<li><p>Salt, to taste</p></li>
<li><p>Pepper, to taste</p></li>
<li><p>1 tablespoon of butter or oil</p></li>
<li>
<ul class="space-y-2">
<li class="marker:text-brandy-red"><p>2-3 large eggs</p></li>
<li class="marker:text-brandy-red"><p>Salt, to taste</p></li>
<li class="marker:text-brandy-red"><p>Pepper, to taste</p></li>
<li class="marker:text-brandy-red">
<p>1 tablespoon of butter or oil</p>
</li>
<li class="marker:text-brandy-red">
<p>
Optional fillings: cheese, diced vegetables, cooked meats, herbs
</p>
</li>
</ul>
</div>
<hr class="text-white-coffee" />
<div class="space-y-6">
<h2>Instructions</h2>
<ol>
<li>
<ol class="space-y-2">
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Beat the eggs:</strong> 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.
pinch of salt and pepper until they are well mixed. You can add
a tablespoon of water or milk for a fluffier texture.
</p>
</li>
<li>
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Heat the pan:</strong> Place a non-stick frying pan over
medium heat and add butter or oil.
</p>
</li>
<li>
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Cook the omelette:</strong> Once the butter is melted and
bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly
coat the surface.
<strong>Cook the omelette:</strong> Once the butter is melted
and bubbling, pour in the eggs. Tilt the pan to ensure the eggs
evenly coat the surface.
</p>
</li>
<li>
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Add fillings (optional):</strong> 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.
<strong>Add fillings (optional):</strong> 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.
</p>
</li>
<li>
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Fold and serve:</strong> As the omelette continues to cook,
carefully lift one edge and fold it over the fillings. Let it cook
for another minute, then slide it onto a plate.
<strong>Fold and serve:</strong> As the omelette continues to
cook, carefully lift one edge and fold it over the fillings. Let
it cook for another minute, then slide it onto a plate.
</p>
</li>
<li>
<li class="marker:font-bold marker:text-brandy-red">
<p>
<strong>Enjoy:</strong> Serve hot, with additional salt and pepper
if needed.
<strong>Enjoy:</strong> Serve hot, with additional salt and
pepper if needed.
</p>
</li>
</ol>
</div>
<hr class="text-white-coffee" />
<div class="space-y-6">
<h2>Nutrition</h2>
<p>
@ -111,27 +133,47 @@
additional fillings.
</p>
<table>
<table class="w-full border-separate border-spacing-y-3">
<tr>
<td>Calories</td>
<td>277kcal</td>
<td class="pl-8">Calories</td>
<td class="pr-8">277kcal</td>
</tr>
<tr>
<td>Carbs</td>
<td>0g</td>
<td colspan="2">
<hr class="text-white-coffee" />
</td>
</tr>
<tr>
<td>Protein</td>
<td>20g</td>
<td class="pl-8">Carbs</td>
<td class="pr-8">0g</td>
</tr>
<tr>
<td>Fat</td>
<td>22g</td>
<td colspan="2">
<hr class="text-white-coffee" />
</td>
</tr>
<tr>
<td class="pl-8">Protein</td>
<td class="pr-8">20g</td>
</tr>
<tr>
<td colspan="2">
<hr class="text-white-coffee" />
</td>
</tr>
<tr>
<td class="pl-8">Fat</td>
<td class="pr-8">22g</td>
</tr>
</table>
</div>
</div>
</main>
</body>
</html>

25
styles.css
View file

@ -24,8 +24,12 @@
h1 {
color: theme("colors.dark-charcoal");
font-size: 2.25rem;
@media (min-width: 768px) {
font-size: 2.5rem;
}
}
h2 {
color: theme("colors.brandy-red");
@ -61,4 +65,25 @@
font-weight: 700;
}
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
li {
margin-left: 1.5rem;
padding-left: 1rem;
}
}
main > img:first-child {
@media (max-width: 768px) {
margin: -2rem 0 0 -2rem;
width: 100vw;
max-width: none;
}
}