Skip to content
OverviewSolutions
30
Comments
46

Dimitar Radev

@Mitko90Czech Republic930 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

CSS

Latest solutions

View more solutions

Latest comments

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution

    It looks great.

    To your issue:

    The background of the circle needs to be a colour to transparent gradient. I looked at your code and you have

    .result-container{
  background: linear-gradient(var(--clr-primary-500), var(--clr-secondary-hsl-500));
}

    You need to switch your var(--clr-secondary-hsl-500) with a transparent colour, in your case that's var(--persian-blue) So your gradient should look like this:

    .result-container{
  background: linear-gradient(var(--clr-primary-500), var(--persian-blue));
}

    Honestly any colour with 0% opacity will work, I just looked at your custom properties and found this one. This should fix it.

    Hope I was helpful

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hello, there

    I suggest you take a look at this video

    He explains everything in such a way that everybody can understand.

    Happy coding

  • Dimitar Radev•930
    @Mitko90

    I just wanted to drop in and say:

    You are a master at perfection. 🙌️🙌️🙌️

  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution.

    It looks great. Pixel perfect

    Maybe you can check some suggestions I have for you:

    • You used three times the <h1> heading. This heading should only be used once. Maybe change it to <h2> as it can be reused. Of course every page should have an h1 heading so I suggest adding a visually-hidden one to the page, so it doesn't generate an accessibility report.
    • Your buttons should direct the user to a different part or page of the site. So maybe switch the <button> with the <a> tag.

    I had the exact same mistakes when I did this challenge so I redid it with the changes. You can, if you want, check both of my submissions here and here.

    Above all the solution you submitted looks great.

    Happy coding.

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Hi, nice solution. It looks very similar to the design.

    I have only one little thing to note:

    You have display: flex on the body, which is great, but then on your .card you have justify-self: center

    The justify-self does not have any effect here as the parent is set to flex. justify-self is used on items which parents have display: grid. You can delete it and nothing will change.

    Keep up the good work and Happy New Year 🎉️🎉️🎉️

    Marked as helpful
  • Dimitar Radev•930
    @Mitko90

    Your image is not loading because the path to it is incorrect. You need to rplace images/image-qr-code.png in your HTML with image-qr-code.png because your image is not located in images folder

View more comments