css html

What are you most proud of, and what would you do differently next time? <!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Меню</title> <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:[email protected]&display=swap" rel="stylesheet"> <link rel=stylesheet href="1.css"> </head> <body> <div class="qwerty"> <img class="image" src="images/image-omelette.jpeg" alt="меню омлета"> <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="inst"> <p id="prep">Preparation time</p> <ul> <li>Total:Approximately 10 minutes</li> <li>Preparation: 5 minutes</li> <li>Cooking: 5 minutes</li>

    </ul>
  </div>
  
  <div>
    <p class="vag">Ingredients</p>
    <ul>
      <li>2-3 large eggs</li>
      <li>Salt, to taste</li>
      <li>Pepper, to taste</li>
      
    </ul>
  </div>
  <hr>
  <div>
    <p class="vag">Instructions</p>
    <ol>
      <li><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.</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 but 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>
  <hr>
  <div>
    <p class="vag">Nutrition</p>
    <p>The table below shows nutritional values per serving without the additional fillings.</p>
    <table>
      <tr>
        <td>Calories</td>
        <td class="number">277kcal</td>
      </tr>
      
      <tr>
        <td>Carbs</td>
        <td class="number">0g</td>
      </tr>
      
      <tr>
        <td>Protein</td>
        <td class="number">20g</td>
      </tr>
      
      <tr>
        <td>Fat</td>
        <td class="number">22g</td>
      </tr>
    </table>
  </div>
</div>

</body> </html> What challenges did you encounter, and how did you overcome them?

.image { display: block; margin-left: auto; margin-right: auto; width: 590px; border-radius: 10px;

}

body { font-size: 16px; font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; background-color: #f3e6d8; }

.qwerty { margin-top: 50px; width: 600px; margin-left: auto; margin-right: auto;

padding: 30px; background: white; border-radius: 10px; }

p { font-size: 16px; font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #302d2c; }

.vag { font-size: 25px; font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; color: rgb(133, 70, 50); }

.inst { background: rgb(241, 232, 236); padding: 10px; }

#prep { color: rgb(123, 40, 79); }

.number { color: rgb(123, 40, 79); font-weight: bold; }

table { width: 100%; border-collapse: collapse; }

td { padding: 20px 25px; border-bottom: 1px solid black; }