Recipe Page

Community feedback

• 

  P

  Hexerse•460

  @HexersePosted 5 months ago

  Hello !, I see that you have used divs for almost everything. There are other things you can do to implement the objects you want for instance.

  You can use table to generate a table format for you, here is the HTML tr = table row th = table head td = table data

  <div class="nutrition"> <h2 class="smallheading">Nutrition</h2><br> <p class="ingredientlist" id="nutritiontext"> The table below shows nutritional values per serving without the additional fillings</p> <div class="nutritiontable"> <table> <tr> <th>Calories</th> <td>277kcal</td> </tr> <tr> <th>Carbs</th> <td>0g</td> </tr> <tr> <th>Protein</th> <td>20g</td> </tr> <tr> <th>Fat</th> <td>22g</td> </tr>

  Here is the css

  table{ margin-left: 30px; margin-right: 30px; width: 100%; border-collapse: collapse; }

  th,td{ text-align: left; padding: 15px 20px; border-bottom: 1px solid hsl(30, 18%, 87%); }

  th{ font-family: 'Outfit'; font-weight: 400; color: hsl(30, 10%, 34%); }

  td{ color: hsl(14, 45%, 36%); font-family: 'Outfit', sans-serif; font-weight: 600; }

  Marked as helpful

  0