Recipe-page-/index.html at main · kn-dev-code/Recipe-page- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style.css">
  <title>Recipe Page</title>
</head>
<body>
  <main>
    <div class="container">
      <img src = "https://mirjax2000.github.io/recipe-page-main/assets/img/main_1300.webp" alt = "Omelette Picture">
      <h1 class = "recipe-title">Simple Omelette Recipe</h1>
      <p class = "recipe-introduction">An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p>
      <div class="preparation-container">
       <h4 class = "preparation-title">Preparation time</h4>

       <div class="preparation-components">
        <u1>
          <li>
  <strong>Total:</strong>
  Approximately 10 minutes
          </li>
          <li>
  <strong>Preparation:</strong> 5 minutes
          </li>
          <li>
  <strong>Cooking:</strong> 5 minutes
          </li>
        </u1>
       </div>
      </div>
      <div class="ingredients">
        <h2 class = "ingredient-title">Ingredients</h2>
        <u1>
          <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>
        </u1>
      </div>
      <div class="instructions">
        <h2 class = "instruction-title">Instructions</h2>
        <ol class = "number-list">
          <li>
  <strong>Beat the eggs:</strong> In a bowl, 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>
            <strong>Heat the pan:</strong> Place a non-stick frying pan over medium heat and add butter or oil.
          </li>
          <li>
            <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.
          </li>
          <li>
            <strong>Add fillings (optional):</strong> When the eggs begin to set at the edges bu are still slightly runny in the middle, sprinkle your chosen fillings over one half of the omelette.
          </li>
          <li>
            <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.
          </li>
          <li>
            <strong>Enjoy:</strong> Serve hot, with additional salt and pepper if needed.
          </li>
        </ol>
      </div>
        <h2 class = "nutrition-title">Nutrition</h2>
        <p class = "nutrition-statement">The table below shows nutritional values per serving without the additional fillings.</p>
        <div class="content">
          <p class = "divider">
            <span class = "word-space">Calories</span>
            <span class = "word-space1">277kcal</span>
          </p>
  <p class = "divider">
    <span class = "word-space">Carbs</span>
    <span class = "word-space1">0g</span>
  </p>
  <p class = "divider">
    <span class = "word-space">Protein</span>
    <span class = "word-space1">20g</span>
  </p>
  <p>
    <span class = "word-space">Fat</span>
    <span class = "word-space1">22g</span>
  </p>
        </div>
    </div>
  </main>
</body>
</html>