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

25
styles.css
View file

@ -24,8 +24,12 @@
h1 { h1 {
color: theme("colors.dark-charcoal"); color: theme("colors.dark-charcoal");
font-size: 2.25rem;
@media (min-width: 768px) {
font-size: 2.5rem; font-size: 2.5rem;
} }
}
h2 { h2 {
color: theme("colors.brandy-red"); color: theme("colors.brandy-red");
@ -61,4 +65,25 @@
font-weight: 700; 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;
}
} }