-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
0 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,138 +1 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" type="css" href="C:\Users\shine\Desktop\works\recipe-page-main\foodpage.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet"> <!--fonts from google [outfit]--> | ||
| <title>Recipie page</title> | ||
| </head> | ||
| <body bgcolor="#f3e5d8"> | ||
| <div class="main" style="background-color: white;"> <!--Main div--> | ||
| <img src="omelette.jpeg" alt="omelette.jpeg" width="570px" class="omlette"> | ||
| <h1 style="margin-left:25px;">Simple Omelette Recipe</h1> | ||
| <p class="ptag"> | ||
| An easy and quick dish,perfect for any meal.This classic omelette combines beaten eggs cooked to perfection,optionaly filled with your choice of cheese,vegetables or meats. | ||
| </p> <br> | ||
| <h3 class="prep">Preparation time </h3> | ||
| <ul> | ||
| <li>Total:Approximately 10 minutes</li> | ||
| <li>Preparation:5 minutes</li> | ||
| <li>Cooking: minutes</li> | ||
| </ul> | ||
| <h3 class="brown">Ingredients</h3> | ||
| <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> | ||
| <hr class="line"> | ||
| <h3 class="brown">Instructions</h3> | ||
| <ol> | ||
| <li><b><span><p class="oli">Beat the eggs:</span></b>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.</p></li> | ||
| <li><b><span><p class="oli">Heat the pan:</span></b>Place a non-stick frying pan over medium heat and add butter or oil.</p></li> | ||
| <li><b><span><p class="oli">Cook the Omelette:</span></b>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><b><span><p class="oli">Add fillings (optional):</span></b>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><b><span><p class="oli">Fold and serve:</span></b>Serve hot, with additional salt and pepper if needed.</p></li> | ||
| </ol> | ||
|
|
||
| <h3 class="brown">Nutrition</h3> | ||
| <div class="flex-container"> | ||
| <p style="margin-left:25px;">The table below shows nutritional values per serving without the additional fillings.</p> | ||
|
|
||
| <div class="co">Calories</div> <div class="con">277kcal </div><hr class="lhr"> | ||
| <div class="co">Carbs</div> <div class="con">0g </div><hr class="lhr"> | ||
| <div class="co">Protein</div> <div class="con">20g </div><hr class="lhr"> | ||
| <div class="co">Fat</div> <div class="con">22g </div><hr class="lhr"> | ||
| <style> | ||
| .main{ | ||
| width: 590px; | ||
| padding: 0; | ||
| margin: auto; | ||
| border-radius: 20px; | ||
| text-align:justify; | ||
| justify-content: space-between; | ||
| font-family: "Outfit", sans-serif; | ||
| font-optical-sizing:auto; | ||
| font-weight:40px; | ||
| font-style:normal; | ||
| /* Main div */ | ||
|
|
||
| } | ||
| .co{ | ||
| width: 50%; | ||
| float:left; | ||
| background-color: rgb(255, 255, 255); | ||
| text-align: center; | ||
| border-radius: 20px; | ||
| } | ||
| .con{ | ||
| width: 50%; | ||
| float:right; | ||
| text-align: center; | ||
| background-color: rgb(255, 255, 255); | ||
| color: #6f2d47; | ||
| } | ||
| .omlette{ | ||
| border-radius: 20px; | ||
| } | ||
| .line{ | ||
| color: #e3e3e3; | ||
| } | ||
| .prep{ | ||
| color:#6f2d47; | ||
| margin-left:30px; | ||
| } | ||
| .brown{ | ||
| color: #7e442f; | ||
| margin-left:25px; | ||
|
|
||
|
|
||
| } | ||
| .pc{ | ||
| padding-left: 30px; | ||
| } | ||
| .spanc{ | ||
| padding-right: 2px; | ||
| color: #6f2d47; | ||
| } | ||
| .lhr{ | ||
| color: #e3e3e3; | ||
| width:380px; | ||
| } | ||
| .ptag{ | ||
| margin-left: 40px; | ||
| margin-right: 30px; | ||
| font-size: 16px; | ||
| color: #5e5e5e; | ||
|
|
||
|
|
||
| } | ||
| .line{ | ||
| color:#e3e3e3; | ||
| width:550px; | ||
| } | ||
| .omlette{ | ||
| border-radius:20px; | ||
| justify-content: center; | ||
| margin-left: 10px; | ||
| margin-right: 10px; | ||
| margin-top: 10px; | ||
| } | ||
| .oli{ | ||
| margin-right: 10px; | ||
| } | ||
| ul li::marker{ | ||
| color:#6f2d47; | ||
| } | ||
| ol li::marker{ | ||
| color: #6f2d47; | ||
| font-weight: bold; | ||
| } | ||
| </style> | ||
| </body> | ||
| </html> |