Responsive Recipe-Page using CSS

Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

1.Correcting nutrition section using table tag:

Replace the <ul> tag with a <table> tag to create a table for the nutritional values. Then structure the data using <tr> for rows and <td> for cells.

<div class="nutrition">
  <h3>Nutrition</h3>
  <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>
</div>

2. Adjusting border-radius in responsive design:

Modify the border-radius for the image within the media query to ensure it suits the responsive layout without breaking responsiveness.

@media (max-width: 768px) {
  .box img {
    border-radius: 0; /* Adjust border-radius for responsiveness */
  }
}

other than that your solution looks great happy coding.