<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />

    <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">
      <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>

      <div class="bg-snow">
        <h3>Preparation time</h3>

        <ul>
          <li>
            <p><strong>Total:</strong> Approximately 10 minutes</p>
          </li>
          <li>
            <p><strong>Preparation:</strong> 5 minutes</p>
          </li>
          <li>
            <p><strong>Cooking:</strong> 5 minutes</p>
          </li>
        </ul>
      </div>

      <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>
          <p>
            Optional fillings: cheese, diced vegetables, cooked meats, herbs
          </p>
        </li>
      </ul>

      <h2>Instructions</h2>

      <ol>
        <li>
          <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.
          </p>
        </li>

        <li>
          <p>
            <strong>Heat the pan:</strong> Place a non-stick frying pan over
            medium heat and add butter or oil.
          </p>
        </li>

        <li>
          <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.
          </p>
        </li>

        <li>
          <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.
          </p>
        </li>

        <li>
          <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.
          </p>
        </li>

        <li>
          <p>
            <strong>Enjoy:</strong> Serve hot, with additional salt and pepper
            if needed.
          </p>
        </li>
      </ol>

      <h2>Nutrition</h2>

      <p>
        The table below shows nutritional values per serving without the
        additional fillings.
      </p>

      <table>
        <tr>
          <td>Calories</td>
          <td>277kcal</td>
        </tr>

        <tr>
          <td>Carbs</td>
          <td>0g</td>
        </tr>

        <tr>
          <td>Protein</td>
          <td>20g</td>
        </tr>

        <tr>
          <td>Fat</td>
          <td>22g</td>
        </tr>
      </table>
    </main>
  </body>
</html>