All solutions

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

✨ My first Junior exercise :) I also added a tablet layout to the challenge ✨ Very nice to train CSS Grid skills with responsive layout

Features:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox / CSS Grid Layout
• Mobile-first workflow
• Added a custom tablet layout

To Improve:

I´m looking for ideas that can make my code cleaner, studying and adapting to the mobile-first methodology. So if you have any idea that can help me, I'll be happy to hear any feedback and advice!

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

It's been a while, but I'm back 🙏

Features:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

To Improve:

I´m looking for ideas that can make my code cleaner, studying and adapting to the mobile-first methodology. So if you have any idea that can help me, I'll be happy to hear any feedback and advice!

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

It was my first time using Sass for a project, I had some difficulty at first, but I believe the next ones could be simpler.

Features:

• Semantic HTML5 markup
• Sass with variables
• Flexbox for responsive layout
• Mobile-first workflow

To Improve:

I´m looking for ideas that can make my code cleaner. If you have any idea that can help me, I'll be happy to hear any feedback and advice!

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

Features:

• Semantic HTML5 markup
• CSS custom properties and variables
• Flexbox for responsive layout
• Mobile-first workflow
• Add a nice hover state on the button

To Improve:

I´m 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!

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!

Hello everyone! I did my first challenge :)

I used flexbox to try to center the component on the page, I hope it's right..

It was my first time using git and github, does anyone know how to open the link of the readme.md file on a new tab? Or if it´s possible? I tried to find a method, but couldn't do it..