flex technique html/css

Hello there

Congratulations on completing the challenge!

Your solution is truly impressive.

I have a couple of ideas to make it even stronger:

• Firstly, consider centering the card. You can achieve this by applying the following CSS to the body (excluding margins from the card for correct functionality):

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

• Secondly, there is no need to wrap the card inside three containers. One container is sufficient to make your code maintainable and readable. For this single card container, set the max-width, border, background, etc. This will eliminate the need for media queries.

After refactoring:

HTML

<div class="card">
  <img src="./images/illustration-article.svg" alt="illustration" class="first-image" />
 
... ... 
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  border: 1px solid #000;
  padding: 20px 20px;
  background: #fff !important;
  max-width: 400px;
  ...
}

Hope this helps! IF DOES HIT THAT LIKE

Keep up the great work!

Your design was great. Vibrant colors better than the original. :)