Responsive Landing Page using HTML

Community feedback

• 

  One nne•50

  @Onenne1

  Posted 4 months ago

  nice work, but your spacing is too much

  and for your table instead of doing this

  <div class="recipe__nutrition--table" role="table">
    <div class="row" role="row">
        <div class="column" role="columnheader">Calories</div>
        <div class="column" role="cell">277kcal</div>
    </div>
    <div class="row" role="row">
        <div class="column" role="columnheader">Carbs</div>
        <div class="column" role="cell">0g</div>
    </div>
    <div class="row" role="row">
        <div class="column" role="columnheader">Protein</div>
        <div class="column" role="cell">20g</div>
    </div>
    <div class="row" role="row">
        <div class="column" role="columnheader">Fat</div>
        <div class="column" role="cell">22g</div>
    </div>
  

  .recipe__nutrition--table .row:first-child {
    padding-top: 0;
  }
  
  .recipe__nutrition--table .row:last-child {
    padding-bottom: 0;
  }
  
  .recipe__nutrition--table .row:last-child {
    border-bottom: none; /* Remove the border on the last item */
  }
  
  .recipe__nutrition--table .row .column {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: var(--clr-stone-600);
  }
  
  .recipe__nutrition--table .row .column:nth-child(1) {
    padding-left: 40px;
  }
  
  .recipe__nutrition--table .row .column:nth-child(2) {
    font-weight: 900;
    color: var(--clr-brown-800);
  }
  

  Try using this

  
  <table class="recipe__nutrition--table" role="table">
  
    <tr class="row" role="row">
      <td class="column" role="columnheader">Calories</td>
      <td class="column" role="cell">277kcal</td>
    </tr>
  
    <tr class="row" role="row">
      <td class="column" role="columnheader">Carbs</td>
      <td class="column" role="cell">0g</td>
    </tr>
  
    <tr class="row" role="row">
      <td class="column" role="columnheader">Protein</td>
      <td class="column" role="cell">20g</td>
    </tr>
  
    <tr class="row" role="row">
      <td class="column" role="columnheader">Fat</td>
      <td class="column" role="cell">22g</td>
    </tr>
  
  </table>
  
  <!-- SEMANTIC HTML IS VERY IMPORTANT TRY USING IT -->
  

    .recipe__nutrition--table {
      width: 100%;
      font-family: "Outfit", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
    }
  
    .row {
      border-bottom: 1px solid #e4ded8;
      font-size: 1.1rem;
      padding: 0.5rem 2rem;
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(2, 1fr);
      /* MAKE IT TWO COLUMNS WITH EACH HAVING AN EQUAL AMOUNT OF SPACE */
    }
  
    .column:nth-child(even) {
      color: #854632;
      font-weight: 800;
    }
  

  Less code and more effective

  00