/recipe-page

Solution for the challenge from Frontend Mentor

Primary LanguageCSS

Frontend Mentor - Recipe page solution

This is a solution to the Recipe page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

Screenshot

Links

My process

Built with

  • HTML5
  • CSS custom properties
  • Flexbox

What I learned

I learned how to make tables using div elements to make them responsive.

<div class="nutriton-container">
  <div class="nutriton-name">
    <span>Calories</span>
  </div>
  <div class="nutriton-value">
    <span>277kcal</span>
  </div>
</div>

<div class="nutriton-container">
  <div class="nutriton-name">
    <span>Carbs</span>
  </div>
  <div class="nutriton-value">
    <span>0g</span>
  </div>
</div>

<div class="nutriton-container">
  <div class="nutriton-name">
    <span>Protein</span>
  </div>
  <div class="nutriton-value">
    <span>20g</span>
  </div>
</div>

<div class="nutriton-container">
  <div class="nutriton-name">
    <span>Fat</span>
  </div>
  <div class="nutriton-value">
    <span>22g</span>
  </div>
</div>
.nutriton-container {
  display: flex;
  font-family: "Outfit", sans-serif;
  color: var(--wenge-brown);
  border-bottom: 1px solid var(--light-grey);
  align-items: center;
  gap: 0.75rem;
}

.nutriton-name {
  width: 50%;
  margin-left: 1em;
}

.nutriton-value {
  grid-column: 2;
  width: 50%;
  font-weight: 700;
  padding: 0.5em;
  display: flex;
  align-items: center;
}

.nutriton-value > span {
  color: var(--nutmeg);
}

.nutriton-container:nth-last-of-type(1) {
  border: none;
}

Author