All solutions

Hi!

Thank you for reviewing this, was relatively simple to build, but found a couple of problems, particularly with the background circles, I explained more in the repository's README, but I'll add it here as well:

In order to do the circles on the background I did the following:

HTML

    <figure class="backImg">                
      <div id="topCircleContainer">
        <img src="images/bg-pattern-top.svg" alt="" id="topCircle">
      </div>
      <div id="bottomCircleContainer">
        <img src="images/bg-pattern-bottom.svg" alt="" id="bottomCircle">
      </div>
    </figure>

CSS

.backImg{
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 110vh;
    z-index: -1;
    margin-top: -30vh; /*I had to add this because for some reason it kept pushing my figure down */
}
#topCircleContainer{
    position: absolute;
}
#bottomCircleContainer{
    position: absolute;
}
#topCircle{
    margin-top: -50vh;
    margin-left: -10vw;
}
#bottomCircle{
    margin-top: 50vh;
    margin-left: 50vw;
}

My problem I have some doubts, I found myself in the situation that for some reason my <figure> did not covered the entire background I had to give it a height: 110vh; but this was not enough as my content kept (for some reason unknown to me) being pushed down. So I had to add margin-top: -30vh;. Not sure what I may have been missing here.

Additionally I found that the font sizes specified in the design are sending this on the lighthouse report: "Document doesn't use legible font sizes" , if this were a real project, would it have been a good idea to go back to the designer and tell them about this?

Thank you all for your time!

I found myself in the problem that the screen sizes indicated that I should create the screens for Mobile: 375px & Desktop: 1440px, but those differentiations in the media queries simpky did not made the job for me, it made some of the cards look too crammed, so I ended up cutting the screens at 672px, which it seems like it worked much better.

I was not able to make the buttons align in every screen size, I'm not particularly sure what to do about this. Screenshot.

Thank you so much!

I'm wondering what is a best practice, for example I kept the <img>, <h1> & <p> with no classes, instead, since this is a very simple component I simply added .card and then the html tags.

Additionally on the report I get the following accessibility issues: "should be contained by landmarks", could you please explain me what does it mean by that? I have no clue on how to resolve that.

Thanks in advance!

I'm happy with the results, but would be honored to receive your opinion.

I met a few problems along the way, and have some doubts to know if that was ok.

• I was unable to place the <footer> at the very bottom of the screen it kept going up whenever the view got more mobile, to the point of overlapping with the main elements. I did that because when I left it untouched some background appeared on it (not sure from where and made a horrible white line at the bottom of the elements, rendering my shadow-box useless).

• I added an <a> inside the <button> to place the link to the login there, is that alright? Should it be an href inside the <button>?

• Please (is possible) let me know if the CSS is easy to read as this is the first time I share a project with someone and I really don't know if I should be doing something else to make it easier for people to navigate my docs.

Thanks in advance!!