3-Column Preview Card Component

Hello everybody 👋 This is my solution for this challenge :)

Build with:

• Semantic HTML5 markup
• CSS custom properties and variables
• Flexbox for responsive layout
• Mobile-first workflow

What I learned:

It was a good exercise to practice the planning phase, configuring all the informations and variables to be used in the project, understanding the patterns that will repeat themselves.

Also, I was able to working with the mobile-first workflow, that help me to understanding better this methodology and yours advantages. Very nice!

And in order to develop a cleaner code, I tried to use the idea below so it wasn´t needed to repeat all the values of the button in the css: "also did it with the rectangles background"

<button class="button-box nav-orange">Learn More</button>
<button class="button-box nav-blue">Learn More</button>
<button class="button-box nav-green">Learn More</button>

.button-box {
  background-color: var(--color-soft-white);
  width: 146px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 25px;
  margin-top: 25px;
  margin-left: 48px;
  font: 400 15px "Lexend Deca", sans-serif;
  border: 2px solid var(--color-soft-white);
}

.button-box.nav-orange {
  color: var(--color-orange);
}
.button-box.nav-blue {
  color: var(--color-nav-blue);
}

.button-box.nav-green {
  color: var(--color-nav-green);
}

Continuing to learn:

I´m still looking for ideas that can make my code cleaner, studying the mobile-first methodology and other tools like Sass for future projects

If you have any idea that can help me, I'll be happy to hear any feedback and advice!